关于 storybook-stories
用于按项目所属层级约定编写 Storybook stories 的技能。它强调真实且易访问的示例、复用共享 Provider,并通过对应的 Storybook 构建或视觉检查验证。
主要功能
- 01扩展最近的现有 story
- 02复用共享装饰器和 Provider
- 03使用类型化 CSF 元数据与 StoryObj
- 04选择精简且可交互的状态
- 05遵循 autodocs 与验证约定
适用场景
- 01为组件变更添加 stories
- 02展示组件的关键状态
- 03通过所属 Storybook 检查 story
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ pedronauck/ skills --skill storybook-stories安装后在 Claude Code 中输入/storybook-stories确认已加载。
附带文件references/patterns.md
详细介绍
Storybook 故事
使用该层级最近的现有故事进行扩展,并遵循对应的 Storybook 实例和命名约定。找到 primitives 与 app/domain 故事各自所属的 Storybook 配置。复用全局 QueryClient/router/MSW 装饰器,不要重复添加 providers。
- 组合示例前,先检查共享的 primitive 清单。使用其公开导出;领域组件仍应保持本地。遵循仓库的设计令牌来源、设计文档和界面说明。
- 使用类型化的 CSF 元数据和
StoryObj<typeof meta>。根据组件实际呈现的界面选择布局和装饰器;居中布局适用于某些控件,但不适用于完整路由。 - 仅展示足以说明重要行为的最少受支持状态。没有最低或最高故事数量要求,也不要求穷举属性矩阵或为每个导出编写 JSDoc。
- 受控属性使用
args,复合式组合使用render。仅使用render的故事不需要空的args。当描述能够解释画布中无法呈现的行为、限制或用法时,再添加描述。 - 示例应具有交互性、可访问性且符合实际使用场景。使用组件的真实 API,不要照搬模板中假设存在的变体。
- 遵循项目现有的 autodocs 策略。根据所属模块一致地启用或省略
tags: ["autodocs"];避免重复页面。 - 针对已更改的行为,运行所属的 Storybook/build 或视觉检查。复用现有验证证据;故事本身不自动要求新增单元测试或端到端测试套件。
仅在使用对应的故事组合模式时阅读 references/patterns.md。示例可灵活调整,不是必需的脚手架。
评论
支持 Markdown