Claude Code 写 Zustand 总会乱？这个 Skill 让它懂你们团队的”三层套路”

用 Claude Code 写 React 代码，你一定绕不开状态管理。

Redux 太重，useState 太散——Zustand 刚好卡在中间，轻量、够用、写法还特别对前端口味。但问题来了：你的 Claude 真的懂 Zustand 吗？

它知道 store 怎么建，但不一定知道你团队的「三层动作模式」。

什么是三层动作模式？

LobeHub 给 Claude Code 准备了一个 Zustand Skill，把他们的最佳实践固化成了 Skill。核心就是这套三层结构：

第一层：公开动作（public actions）
给 UI 调用的入口，只负责 orchestrate（编排），不碰具体业务逻辑。

第二层：internal_* 方法
真正写业务逻辑的地方，处理 optimistic updates，维护 state 完整性。

第三层：internal_dispatch* 方法
直接动 state 的地方，一般是往 map 里塞数据用的。

为什么这个 Skill 有用？

Claude 直接写 Zustand 代码，十有八九会写出这种风格：

const useStore = create((set) => ({
  count: 0,
  inc: () => set((s) => ({ count: s.count + 1 })),
}));

业务简单时没问题，一旦 store 里有 messagesMap、topicsMap 这种嵌套结构，或者需要 optimistic update，Claude 就容易写出「逻辑散在各处」的代码——读起来费劲，改起来更费劲。

这个 Skill 让 Claude 一上来就按 LobeHub 的套路走：先问这是哪一层，再决定怎么写。

具体能做什么？

• 添加新的 store slice：Claude 会用 class 方式定义 action，set/get 私有化，逻辑不外泄
• 写 reducers / 处理 map 结构：internal_* 专门处理 messagesMap 这类嵌套 map 的增删改查
• optimistic update 场景：知道什么时候直接改 state、什么时候走 internal_dispatch*
• flattenActions 模式：避免 action 对象 spread 得到处都是

怎么安装？

一条命令搞定：

npx -y skills add lobehub/lobehub --skill zustand --agent claude-code

安装完在项目里就能用，Claude 读 SKILL.md 自动理解这套规范。

适用场景

适合：
– React + Zustand 项目，团队有一定规范要求
– Claude 经常需要帮你写 store、扩 slice
– 想让 AI 生成的状态管理代码更贴近工业标准

不太适合：
– 纯学习阶段，代码量小不需要规范
– 不用 Zustand 的项目

说到底，这个 Skill 不是教你「什么是 Zustand」，而是教 Claude 「你们团队的 Zustand 怎么写」——这对 AI 编程来说，其实比什么都重要。

GitHub：https://github.com/lobehub/lobehub

GitHub: https://github.com/lobehub/lobehub