用途:这是 shadcn-hooks 项目中新增 React hook 的操作指南,适用于用户希望在该仓库创建、添加或实现新 hook 的场景。事实来源为 src/registry/hooks/,packages/shadcn-hooks/ 为自动生成目录,不应手动编辑,也不要在本技能中执行任何同步命令,由用户自行运行。
主要流程(清单):
- 创建注册表条目 src/registry/hooks/use-<name>/,包含 5 个文件:index.ts(hook 实现,使用 @/registry/hooks/... 与 @/registry/lib/... 别名,具名导出,导出公共类型,TypeScript 严格模式不用 any,尽量复用已有 hook)、registry-item.json(列出依赖,前缀 @shadcnhooks/,无依赖则空数组)、demo/demo-01.tsx(客户端组件,从 '..' 导入,使用 shadcn UI 组件,交互式演示)、index.mdx(文档页,含安装、API、Credits)、index.test.ts(vitest + @testing-library/react,覆盖默认行为、状态变化、边界与回调)。
- 在 src/registry/hooks/meta.json 的对应分类下注册 use-<name>,分类包括 State、Advanced、Lifecycle、Browser、Dev、External。
- 更新 content/docs/introduction.mdx,在对应分类中按字母顺序添加链接行。
- 创建技能参考 skills/shadcn-hooks/references/use<Name>.md,含用法、类型声明、参数与返回值表格。
- 在 skills/shadcn-hooks/SKILL.md 对应分类表格添加条目,独立 hook 用 AUTO,包装外部 npm 包的用 EXTERNAL。
- 验证:检查 lint、运行 pnpm test run src/registry/hooks/use-<name>/index.test.ts,并确认开发服务器正确渲染文档页。
限制:不要修改 packages/shadcn-hooks/,不要运行 pnpm run sync 或 pnpm --dir packages/shadcn-hooks sync,该步骤留给用户;packages/shadcn-hooks/src/index.ts 的导出也自动管理,无需手动编辑。