Zustand TypeScript 状态库
用规范化的 TypeScript 模式构建可响应的 Zustand 全局状态库。
该技能仅提供 Zustand/TypeScript 代码模板,没有网络、凭据、文件写入或破坏性默认操作,且仓库提供 MIT 许可证和 Microsoft 作者元数据。扣分原因是未明确数据流、敏感数据处理、用户确认、回滚边界或依赖安全;这些对代码模板虽风险较低,但信任控制并不完整。
SKILL.md 与模板在 Zustand、subscribeWithSelector、状态/动作分离和选择器用法上基本一致,并要求添加测试。扣分原因是模板含有 unknown[]、占位 fetch 和未实现的业务逻辑,未提供该技能专属测试、版本兼容矩阵或异常输入行为;静态评估按上限不得超过10分。
目标用户和触发场景较清晰:React 状态管理、全局 store 和响应式模式;同时说明了目录、导出和测试位置。扣分原因是未声明不适用场景、Zustand 版本要求、非 React 用法边界或更精确的触发条件;未涉及海外服务依赖,因此没有额外的中国网络可达性扣分。
文档采用 Quick Start、规范示例、集成步骤和 assets/template.ts 的渐进式结构,名称、MIT 许可证、作者和1.0.0版本已声明。扣分原因是缺少安装/依赖说明、兼容版本、FAQ、已知限制、变更记录以及明确维护责任和更新路径。
技能能提供一个包含类型、状态、动作、订阅和重置操作的 Zustand store 基础骨架,核心输出方向明确。扣分原因是模板仍需替换占位符、补充真实数据类型和 fetch 逻辑,并需人工验证业务语义;静态材料没有代表性完成产物或对比收益证据,按静态上限不得超过7分。
SKILL.md 和模板中的示例可直接审阅,仓库还展示了通用 harness、测试和 CI 文件。扣分原因是所给材料没有该 zustand-store-ts 技能的专属验收标准、提交测试或第三方复现证据,且通用测试并不能证明该技能关键路径;静态上限不得超过5分。
- 模板中的 loadItems 仅返回空数组,不能视为真实数据加载实现。
- unknown[] 和通过类型断言读取 item.id 会削弱 TypeScript 类型安全,使用前应替换为具体实体类型。
- 未声明 Zustand 版本、依赖安装方式及 subscribeWithSelector 的兼容要求。
- 仓库级 CI 和测试材料不能替代该技能路径的专属验收测试。
它能做什么 & 适用场景
这是 Microsoft Agent Skills 仓库中的一个 TypeScript 前端开发技能,专注于使用 Zustand 构建 React 状态管理 store。它要求使用 subscribeWithSelector 中间件,并将状态与操作分别定义。技能还强调使用独立选择器以减少不必要的重新渲染,并支持在 React 外订阅状态变化。适合需要统一 store 结构和集成测试步骤的前端项目。
提供 Zustand store 模板的使用指引;要求通过 subscribeWithSelector 创建 store;指导定义独立的状态接口、操作接口及组合类型;指导使用独立选择器读取状态;指导在 React 外订阅状态;建议将 store 放入 src/frontend/src/store/、从 index.ts 导出,并在同目录添加测试。
- React 开发者需要创建包含状态和异步操作的全局 store 时。
- TypeScript 项目需要统一 Zustand 状态与操作类型时。
- 应用需要监听 selectedId 等状态变化,并在 React 组件外执行响应逻辑时。
- 团队希望通过单独选择器减少组件因无关状态变化而重新渲染时。
优缺点一览
- 明确要求 subscribeWithSelector,适合需要选择性订阅的 store。
- 通过独立接口和组合类型强化状态与操作的 TypeScript 结构。
- 覆盖 React 内选择器、React 外订阅、导出和测试目录等集成约定。
- 提供可复制的 assets/template.ts 模板。
- 内容聚焦 Zustand store 结构,没有说明 Zustand 版本或完整依赖安装方式。
- 没有提供具体测试代码或测试框架配置。
- 只给出约定和示例,复杂业务状态、错误处理及持久化策略未覆盖。
如何安装
运行 npx skills add microsoft/skills,在安装向导中选择此技能。技能会安装到所选 Agent 的目录,例如 GitHub Copilot 使用 .github/skills/;多个 Agent 共用时可通过符号链接复用。仓库采用 MIT 许可证。
如何使用
在创建 React 全局状态库、实现 Zustand 响应式状态模式或设计 TypeScript store 时触发此技能。可使用提示:"Create a TypeScript Zustand store for project items with subscribeWithSelector, separate state and actions, individual selectors, and tests." 具体模板位于 assets/template.ts;使用时需替换 StoreName 和 description 占位符。