mcpField
F
format-storybook

format-storybook

github.com/podo开发29169 次安装1 天前更新
代码仓库

关于 format-storybook

format-storybook 是用于在组件库中维护可扩展、一致 Storybook 模式的技能，涵盖故事文件结构、组合方式、控件、文档与视觉回归实践。

主要功能

  1. 01组件旁组织故事文件
  2. 02复用模板进行组合
  3. 03渐进式控件与 args
  4. 04Chromatic 视觉回归模式
  5. 05CSF 3.0 规范与 MDX 文档

适用场景

  1. 01整理组件库中的故事文件
  2. 02编写组件 API 与用法文档
  3. 03规划视觉回归快照

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/podo/design-agent-skills --skill format-storybook

安装后在 Claude Code 中输入/format-storybook确认已加载。

附带文件stub.yaml

详细介绍

format-storybook

目录占位条目 — 完整技能：mikemai2awesome/agent-skills

决策树

  1. 是否已安装完整技能？

    • 全局：grep -q "^das:" ~/.agents/skills/format-storybook/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
    • 项目：grep -q "^das:" .agents/skills/format-storybook/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
    • 没有 das: 区块 → 已安装完整技能，调用并继续
    • 存在 das: 区块 → 转到第 2 步

  2. 检测作用域，然后安装：

    [ -e ~/.agents/skills/format-storybook ] && echo "global" || echo "project"

    全局：

    npx skills add mikemai2awesome/agent-skills --skill format-storybook -g -y

    项目：

    npx skills add mikemai2awesome/agent-skills --skill format-storybook -y

    Claude Code： 将任一命令作为以 ! 开头的聊天消息发送，即可在不离开对话的情况下运行。

功能

在组件库中贯彻可扩展、易维护的 Storybook 模式：

  • 文件结构 — 将 story 与组件放在一起；stories/component.stories.js + stories/template.js + 可选的 component.docs.mdx
  • 模板组合 — 导入子组件模板，而不是重复编写标记；每个组件只有一个事实来源
  • 控件与 args — 渐进式展示：合理的默认值 + 用于边缘情况的可选控件；arg 类型和说明
  • 视觉回归 — Chromatic 集成模式；快照测试策略
  • CSF 约定 — Component Story Format 3.0；默认导出元数据；命名 story 导出
  • 文档 — MDX 文档页面；组件 API 表格；用法示例；推荐与不推荐的模式

不适用场景

  • 专门用于 React Native 的 Storybook story → 使用 storybook-rn-skill
  • 设计令牌生成 → 使用 design-tokens-skill
  • 从零开始实现组件 → 使用 shadcn-ui 或 baseline-ui

评论

支持 Markdown