zustand-patternsZustand 状态管理实战模式。涵盖 Store 设计规范、Slice 工厂复用、persist 持久化、可恢复任务持久化、Electron IPC 联动、Store 测试和常见陷阱。适用于 React + Zustand 项目。
Install via ClawdBot CLI:
clawdbot install bingfoon/zustand-patternsGrade Fair — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Generated Mar 20, 2026
A cloud-based video editing tool where users upload, compress, and upscale videos. Zustand manages per-user project states, processing progress, and settings like output quality and directory paths across multiple editing modules. It ensures persistence of user preferences and recovers pending tasks after app restarts.
A desktop app built with Electron for batch video compression and AI upscaling. Zustand handles state across renderer processes, with IPC integration to sync store data with the main process for tasks like file I/O. It supports persistent user configurations and task recovery for long-running operations.
A dashboard for managing multiple projects with real-time updates. Zustand organizes state by project modules, using slices for shared features like task progress tracking. It persists user settings and project filters, enabling seamless state recovery after browser refreshes.
An admin interface for managing product catalogs, orders, and inventory. Zustand splits stores by modules like order processing and inventory management, with persist middleware to save user preferences and session data. It facilitates testing and state consistency across complex workflows.
Offer tiered subscription plans for access to video processing features. Revenue comes from monthly or annual fees, with higher tiers providing advanced upscaling or faster processing. Zustand helps manage user-specific settings and usage limits across modules.
Provide a free basic version of the Electron app with limited features, and charge for premium modules like AI upscaling or batch processing. Revenue is generated through one-time purchases or in-app upgrades. Zustand supports modular store design for easy feature gating.
Sell customized licenses to businesses for internal use, such as media agencies needing robust video compression tools. Revenue includes upfront licensing fees and optional support contracts. Zustand enables scalable state management across multiple teams and projects.
💬 Integration Tip
Start by defining clear store interfaces per module, then use slice factories for reusable state patterns to reduce duplication.
Scored Apr 19, 2026
Use when building UI with shadcn/ui components, Tailwind CSS layouts, form patterns with react-hook-form and zod, theming, dark mode, sidebar layouts, mobile navigation, or any shadcn component question.
Tailwind reference tool. Use when working with tailwind in frontend contexts.
A product creation skill based on the "Bee Website Builder" Open API. It is used to create a new product under a specified site language and product group, w...
A product update skill based on the "Bee Website Builder" Open API. It is used to update an existing product under a specified site language and supports upd...
Build WCAG 2.1 AA compliant websites with semantic HTML, proper ARIA, focus management, and screen reader support. Includes color contrast (4.5:1 text), keyboard navigation, form labels, and live regions. Use when implementing accessible interfaces, fixing screen reader issues, keyboard navigation, or troubleshooting "focus outline missing", "aria-label required", "insufficient contrast".
Use when building Vue 3 applications with Composition API, Nuxt 3, or Quasar. Invoke for Pinia, TypeScript, PWA, Capacitor mobile apps, Vite configuration.