# Storybook Scaffolder

> Generates a Storybook story file (*.stories.tsx) with M3 design token imports and interactive variant stories. Use when documenting React components for development and QA testing.

- Skill: `majiayu000/storybook-scaffolder` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/storybook-scaffolder`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/storybook-scaffolder/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/majiayu000/storybook-scaffolder

---


# Storybook Scaffolder Workflow (v2)

1. Get component path.
2. Generate `.stories.tsx` file from template.
3. **Prepend this line to the top of the generated file:** `import 'src/styles/design-tokens.css';`
4. Report success.