用途
SmoothUI Component Craft 用于创建、改进、修复或审查 SmoothUI 组件，强调生产级动画、无障碍性与性能。它通过一个严格的分阶段工作流，编排多个质量技能，最终产出打磨完善、可访问且性能良好的 SmoothUI 组件。
严格工作流
每个组件任务都按以下阶段依次执行，不得跳过任何阶段。
阶段 1：头脑风暴与调研
首先调用 superpowers:brainstorming，在编写任何代码之前探索意图、需求和设计。头脑风暴期间需要：明确组件功能及其交互模式；识别动画需求（进入、退出、悬停、状态过渡）；决定使用 Motion 还是 GSAP（除非需要复杂的形变或时间线，否则优先 Motion）；识别受控/非受控状态需求；列出变体和 props。头脑风暴之后，在 packages/smoothui/components/ 中调研现有组件，寻找可遵循的相似模式。
阶段 2：使用 Interface Craft 进行设计
调用 interface-craft 设计动画与交互层：定义动画阶段与顺序；规划弹簧配置（duration: 0.25，UI 的 bounce ≤0.1）；设计悬停/聚焦/激活状态；如有需要规划布局动画。输出为包含具体 Motion/GSAP 数值的动画规格。
阶段 3：实现
从 references/scaffolding.md 读取脚手架模板。创建所有必需文件：
- 组件 — packages/smoothui/components/[name]/index.tsx：交互时添加 "use client" 指令；以 [ComponentName]Props 导出类型；使用来自 @repo/shadcn-ui/lib/utils 的 cn()；从 motion/react 导入 useReducedMotion。
- package.json — packages/smoothui/components/[name]/package.json：内部依赖使用 workspace:*。
- tsconfig.json — packages/smoothui/components/[name]/tsconfig.json。
- 导出 — 添加到 packages/smoothui/components/index.ts。
- 示例 — apps/docs/examples/[name].tsx：默认导出命名为 [ComponentName]Demo；展示所有变体。
- 文档 — apps/docs/content/docs/components/[name].mdx：frontmatter 包含 title、description、icon、dependencies、installer；使用 <AutoTypeTable> 展示 props。
- 导航 — 按字母顺序添加到 apps/docs/content/docs/components/meta.json 的正确分区。
动画要求（不可协商）：从 motion/react 导入并使用 useReducedMotion；当 shouldReduceMotion 为 true 时，使用即时过渡（duration: 0）或静态状态；只动画 transform 和 opacity；弹簧使用 { type: "spring", duration: 0.25, bounce: 0.1 }；进入缓动使用 cubic-bezier(.23, 1, .32, 1)；移动缓动使用 cubic-bezier(0.645, 0.045, 0.355, 1)；绝不使用 "easeInOut" 这类字符串缓动；悬停动画需通过 matchMedia("(hover: hover) and (pointer: fine)") 检测支持悬停的设备。
无障碍要求（不可协商）：使用语义化 HTML（<button>、<nav>，而非带 role 的 <div>）；使用 ARIA 属性（aria-label、aria-expanded、role 等）；支持键盘导航（方向键、Enter、Escape 视情况而定）；正确管理 tabIndex（绝不使用正值）；为图片提供替代文本；符合颜色对比度要求。
阶段 4：质量审查
按顺序运行全部三个审查技能：调用 vercel-react-best-practices 检查 React/Next.js 性能模式；调用 web-design-guidelines 检查 Web 界面指南合规性；调用 rams 运行无障碍与视觉设计审查。在认为组件完成之前修复所有发现的问题。
阶段 5：验证
从项目根目录运行 pnpm check 验证 lint；运行 pnpm build 验证构建通过；如有可能，启动开发服务器并在浏览器中目视验证。
改进现有组件
对于改进任务，如果改动较小（例如“添加一个变体”），可跳过阶段 1 的头脑风暴；否则遵循完整工作流。始终需要：先阅读现有组件；识别缺失项（减少动效？键盘导航？悬停检测？）；应用更改；运行阶段 4 的审查技能；运行阶段 5 的验证。
快速参考：文件路径
| 文件 | 路径 |
|---|---|
| 组件 | packages/smoothui/components/[name]/ |
| 组件索引 | packages/smoothui/components/index.ts |
| 示例 | apps/docs/examples/[name].tsx |
| 文档 | apps/docs/content/docs/components/[name].mdx |
| 导航配置 | apps/docs/content/docs/components/meta.json |
适用场景与限制
该技能适用于在 SmoothUI 项目中创建、改进、修复或审查组件，尤其适合需要动画、无障碍和性能质量保障的组件开发任务。其工作流依赖多个可调用的技能（superpowers:brainstorming、interface-craft、vercel-react-best-practices、web-design-guidelines、rams）以及特定的项目目录结构、脚手架模板和 pnpm 命令。关于收费、价格、平台支持范围等信息，资料中暂未提供。