用途:为 SmoothUI 项目创建、改进、修复或审查组件,产出兼顾动画质量、无障碍与性能的成品组件。
主要能力:以严格分阶段流程编排多个质量技能。阶段一先调用 superpowers:brainstorming 梳理意图、需求与设计,明确交互模式、动画需求、Motion 与 GSAP 取舍、受控/非受控状态、变体与 props,再检索 packages/smoothui/components/ 中相似组件。阶段二调用 interface-craft 设计动画与交互层,输出含具体 Motion/GSAP 数值的动画规格。阶段三按 references/scaffolding.md 模板实现组件、package.json、tsconfig.json、导出、示例与文档,并更新导航 meta.json。阶段四依次运行 vercel-react-best-practices、web-design-guidelines、rams 三项审查并修复问题。阶段五运行 pnpm check 与 pnpm build 验证,并尽可能在浏览器中目视确认。
动画要求:使用 motion/react 的 useReducedMotion,减少动态时用瞬时过渡或静态状态;只动画 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);不使用字符串缓动;悬停动画需用 matchMedia("(hover: hover) and (pointer: fine)") 检测设备。
无障碍要求:语义化 HTML、ARIA 属性、键盘导航、合理 tabIndex、图片替代文本与颜色对比度。
适用场景:SmoothUI 组件的新建、改进与质量审查。限制:改进小改动可跳过阶段一,其余需走完整流程;具体安装与依赖细节资料未提供。