How do I install the Format Storybook skill?

Run npx skillmds add podo/format-storybook in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Format Storybook safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: makes network calls, reads secrets. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Format Storybook?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Format Storybook free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Format Storybook?

podo (@podo) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Format Storybook by podo — Agent Skill

Name: Format Storybook
Rating: 4.2 (5 reviews)
Author: podo

Format Storybook

Structures and organizes Storybook files for scalability using battle-tested patterns from Cassondra Roberts' "A Storybook format that scales with you". Covers story definitions, template composition, controls/args, visual regression with Chromatic, component documentation, and CSF conventions. Activates on any Storybook question — file structure, controls, args, or component documentation.

podo 6a711b7 2 files · 2.7 KB Updated Sep 9, 2026

File contents

format-storybook

Catalogue stub — full skill: mikemai2awesome/agent-skills

Decision tree

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

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

---name: format-storybookdescription: Structures and organizes Storybook files for scalability using battle-tested patterns from Cassondra Roberts' "A Storybook format that scales with you". Covers story definitions, template composition, controls/args, visual regression with Chromatic, component documentation, and CSF conventions. Activates on any Storybook question — file structure, controls, args, or component documentation.--- # format-storybook > Catalogue stub — full skill: [mikemai2awesome/agent-skills](https://github.com/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. ## 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`

Frequently asked questions