mcpField
S
storybook-stories

storybook-stories

github.com/pedronauck开发644306 次安装1 周前更新
代码仓库

关于 storybook-stories

用于按项目所属层级约定编写 Storybook stories 的技能。它强调真实且易访问的示例、复用共享 Provider,并通过对应的 Storybook 构建或视觉检查验证。

主要功能

  1. 01扩展最近的现有 story
  2. 02复用共享装饰器和 Provider
  3. 03使用类型化 CSF 元数据与 StoryObj
  4. 04选择精简且可交互的状态
  5. 05遵循 autodocs 与验证约定

适用场景

  1. 01为组件变更添加 stories
  2. 02展示组件的关键状态
  3. 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