SuperAPI AI 工具集

storybook

前端与建站

查看项目

更新于 10-16 03:46

技能介绍

用途:为 TypeScript/React 组件库搭建和扩展 Storybook 9+,把它当作组件的工作台与测试台。适合在新建 Storybook、编写 *.stories.tsx、修改 .storybook/main.ts 或 preview.ts、添加或升级 addon、用 play 函数接测试、排查 Storybook 变慢或 controls 显示错误时使用。底层组件设计与 Storybook 外的测试语义应改用 react-optimise、clean-code-ts-react 或 react-testing-library,规范本身查 WCAG/ARIA 文档。

主要能力按生命周期分 8 类:配置(main.ts 用 satisfies StorybookConfig、按构建选框架包、收窄 stories glob、用 npx storybook add 装 addon、用 staticDirs 提供资源、在 preview.ts 注入设计 token CSS 变量);CSF3 故事编写(satisfies Meta<typeof Component>、显式设 meta.component、默认导出为 meta、命名导出为故事、tags: ['autodocs'] 放 meta、故事按用户可见状态命名、与组件同目录、设计系统用标题层级);args/argTypes/controls(尽量依赖推断、回调用 storybook/test 的 fn()、联合类型显式声明 control、args 不放 JSX、区分 args/parameters/globals);装饰器(全局 Provider 放 preview.ts、网络用 MSW 模拟、非网络模块用子路径导入模拟、装饰器写 <Story />、多品牌用 addon-themes、RTL 方向切换);交互测试(从 storybook/test 导入而非 @storybook/test、所有 userEvent 调用 await、从 play 参数解构 canvas/userEvent、用 findBy* 替代 waitFor、CI 用 @storybook/addon-vitest、composeStories 复用故事);无障碍(preview.ts 设 parameters.a11y.test = 'error' 作为门禁、按规则而非整篇故事禁用、runOnly 限定 WCAG AA、portal 组件设 a11y.context、globals.a11y.manual 标记故意违规);文档与设计系统(组件页用 autodocs、跨切面用 MDX、MDX 用 <Canvas of={Story} /> 引用故事、状态标签、token 作为故事、parameters.design 关联 Figma);构建部署(优先 Vite、裁剪测试包、部署到 Chromatic/Vercel、CI 缓存、用 refs 组合多包设计系统、manager.ts 品牌、Chromatic modes 跨主题/视口/方向快照)。

使用方式:先读 references/_sections.md 了解分类与影响优先级;按任务路径选读对应前缀规则,如新建项目读全部 config- 再读 csf-,写故事读 csf- 与 args-,接测试读 test-,无障碍门禁读全部 axe-。遇到疑难先查 gotchas.md,新增规则用 assets/templates/_template.md。其余用法、安装命令、代码示例与定价信息暂未提供。