Back to Details

format-storybook

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

format-storybook

format-storybook

Catalogue stub — full skill: mikemai2awesome/agent-skills
目录占位符 — 完整技能：mikemai2awesome/agent-skills

Decision tree

决策树

  1. Is the full skill already installed?
    • Global: 
      grep -q "^das:" ~/.agents/skills/format-storybook/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
    • Project: 
      grep -q "^das:" .agents/skills/format-storybook/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
    • No 
      das:
      block → full skill installed, invoke and proceed
    • das:
      block present → go to step 2
  2. Detect scope, then install:
    bash
    [ -e ~/.agents/skills/format-storybook ] && echo "global" || echo "project"
    Global:
    bash
    npx skills add mikemai2awesome/agent-skills --skill format-storybook -g -y
    Project:
    bash
    npx skills add mikemai2awesome/agent-skills --skill format-storybook -y
    Claude Code: send either command as a chat message starting with 
    !
    to run it without leaving the conversation.
  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. 检测范围，然后安装：
    bash
    [ -e ~/.agents/skills/format-storybook ] && echo "global" || echo "project"
    全局安装：
    bash
    npx skills add mikemai2awesome/agent-skills --skill format-storybook -g -y
    项目安装：
    bash
    npx skills add mikemai2awesome/agent-skills --skill format-storybook -y
    Claude Code： 发送以
    !
    开头的任一命令作为聊天消息，即可无需离开对话直接运行。

What it does

功能说明

Enforces scalable, maintainable Storybook patterns across a component library:
  • File structure — co-locate stories with components; 
    stories/component.stories.js
    + 
    stories/template.js
    + optional 
    component.docs.mdx
  • Template composition — import child component templates instead of duplicating markup; single source of truth per component
  • Controls & args — progressive disclosure: sensible defaults + optional controls for edge cases; arg types and descriptions
  • Visual regression — Chromatic integration patterns; snapshot testing strategy
  • CSF conventions — Component Story Format 3.0; default export metadata; named story exports
  • Documentation — MDX docs pages; component API tables; usage examples; do/don't patterns
在组件库中推行可扩展、易维护的Storybook模式：
  • 文件结构 — 将故事文件与组件放在同一目录下；
    stories/component.stories.js
    + 
    stories/template.js
    + 可选的
    component.docs.mdx
  • 模板组合 — 导入子组件模板而非重复编写标记；每个组件使用单一数据源
  • Controls与args — 渐进式披露：合理默认值 + 针对边缘情况的可选控件；参数类型及描述
  • 视觉回归测试 — Chromatic集成模式；快照测试策略
  • CSF规范 — Component Story Format 3.0；默认导出元数据；命名故事导出
  • 文档 — MDX文档页面；组件API表格；使用示例；注意事项

When NOT to use

不适用于以下场景

  • React Native Storybook stories specifically → use 
    storybook-rn-skill
  • Design token generation → use 
    design-tokens-skill
  • Component implementation from scratch → use 
    shadcn-ui
    or 
    baseline-ui
  • 专门针对React Native的Storybook故事 → 使用
    storybook-rn-skill
  • 设计令牌生成 → 使用
    design-tokens-skill
  • 从零开始实现组件 → 使用
    shadcn-ui
    或
    baseline-ui