Generate AI-ready component docs
from Storybook

Automatically create SKILL.md files from your Storybook components using AI. Make your design system truly AI-friendly.

Get Started View on GitHub

storybook-to-skills-md

$ pnpm add -g storybook-to-skills-md

✓ Package installed successfully

$ storybook-to-skills-md generate \

--storybook-url https://your-storybook.com \

--provider openai \

--model gpt-5.2

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

[COMPONENT] Button

[EXTRACT] Fetching sources... OK (1.2s)

[GENERATE] Creating skill files... OK (8.5s, ~4,200 tokens)

[OK] Completed (10.5s, ~4,200 tokens)

How it works

Three steps. Minimal configuration.

Install

Install the CLI globally using your favorite package manager.

$ npm install -g storybook-to-skills-md

$ pnpm add -g storybook-to-skills-md

$ yarn global add storybook-to-skills-md

$ bun add -g storybook-to-skills-md

Run

Point it to your Storybook and choose your LLM provider.

storybook-to-skills-md generate \
  --storybook-url https://... \
  --provider openai

Use with AI

SKILL.md files are ready to be consumed by AI agents.

skills/
├── button/SKILL.md
├── input/SKILL.md
└── ...

Built for modern workflows

Multiple LLM Providers

Works with OpenAI, Anthropic Claude, and Google Gemini. Choose your preferred provider.

Offline Mode

Use local index.json from built Storybook. No server needed.

Incremental Generation

Smart caching skips unchanged components. Only regenerate what changed.

GitHub Action

Automate SKILL.md generation in CI/CD with our official GitHub Action.

Customizable Prompts

Bring your own system prompt to customize generated documentation style.

TypeScript Native

Built with TypeScript. Full type safety and great DX.

CI/CD with GitHub Action

Automate SKILL.md generation in your GitHub Actions workflow. Run it on every push, PR, or release.

- name: Generate SKILL.md
  uses: sergiocarracedo/storybook-to-skill-md-action@v1
  with:
    storybook-url: 'https://your-storybook.com'
    source-dir: './src/components'
    output-dir: './skills'
    provider: 'openai'
    model: 'gpt-4o'
    api-key: ${{ secrets.OPENAI_API_KEY }}

View on GitHub View Docs →

Installation

$ npm install -g storybook-to-skills-md

$ pnpm add -g storybook-to-skills-md

$ yarn global add storybook-to-skills-md

$ bun add -g storybook-to-skills-md

Read the quick start guide →

Generate AI-ready component docs from Storybook