mcpField
F
format-storybook

format-storybook

github.com/podoDevelopment29169 installsUpdated 1d ago
Repository

About format-storybook

format-storybook is a skill for maintaining scalable, consistent Storybook patterns in component libraries. It covers story structure, composition, controls, documentation, and visual regression practices.

Key features

  1. 01Co-located story file structure
  2. 02Reusable template composition
  3. 03Progressive controls and args
  4. 04Chromatic visual regression patterns
  5. 05CSF 3.0 conventions and MDX documentation

Use cases

  1. 01Organizing stories in a component library
  2. 02Documenting component APIs and usage
  3. 03Planning visual regression snapshots

Install

Copy the command and run it in a terminal.

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

After installing, type/format-storybookin Claude Code to confirm it loaded.

Bundled filesstub.yaml

Details

From the project README

format-storybook

Catalogue stub — full skill: 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:

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

    Global:

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

    Project:

    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.

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

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

Comments

Markdown supported