storybook-assistant

🎨 Storybook Assistant Plugin for Claude Code

Complete SOTA 2026 Storybook assistant with Vision AI design-to-code, natural language generation, AI-powered accessibility remediation, React Server Components, AI visual regression testing, design token sync, usage analytics, dark mode generation, and comprehensive testing (Storybook 10, React 19, Next.js 15).

---

🚀 First time here? Start with the ELI5 section for a quick overview, then check How to Use to get started, or ask "What can the Storybook Assistant do?" to see all available features!

---

✨ Features

🚀 Auto-Configured Storybook 10

• Automatic framework detection (React, Vue, Svelte, Angular, Next.js, Solid, Lit)
• SOTA 2026 best practices out-of-the-box
• Essential features (actions, backgrounds, controls, viewport) now built-in
• Vite-powered builds (48% smaller, 2-4x faster than Storybook 8)
• One command setup: /setup-storybook

🧪 Modern Testing Stack

• Interaction Tests: Play functions with Vitest + Playwright (real browser testing)
• Accessibility Tests: WCAG compliance with axe-core (catches 57% of issues)
• Visual Regression: Pixel-perfect UI change detection
• Code Coverage: V8-powered coverage (faster than Istanbul)

🎨 AI-Powered Visual Generation (Optional)

• Style guides with color palettes, typography, spacing
• Component mockups to guide implementation
• Architecture diagrams for documentation
• Powered by Gemini 3 Pro Image / FLUX.2 Pro
• 100% optional - Works perfectly without OPENROUTER_API_KEY

🖥️ Multi-Platform Support

• Web (React/Vue/Svelte/Angular): ✅ Full support
• Tauri Applications: ✅ Full support with IPC mocking
• Electron Applications: ⚠️ Partial support (pure UI components, architectural guidance)

📦 Component Development

• Auto-generate stories for existing components
• Scaffold new components with stories, tests, and docs
• Intelligent variant detection (sizes, states, themes)
• Design system integration (MUI, Ant Design, shadcn/ui, Chakra, Mantine)

---

🚀 Quick Start

Prerequisites

• Node.js ≥ 20.0.0
• npm ≥ 10.0.0
• Claude Code CLI with CLAUDE_CODE_OAUTH_TOKEN or ANTHROPIC_API_KEY
• OpenRouter API Key (optional, for visual generation): Get key

Installation

Method 1: Via Claude Code CLI (Recommended)

claude

# In Claude prompt:
/plugin

# When prompted, enter:
flight505/storybook-assistant-plugin

Method 2: Manual Clone

# Clone to Claude plugins directory
git clone https://github.com/flight505/storybook-assistant-plugin.git ~/.claude/plugins/storybook-assistant

# Start Claude normally - plugin auto-loads
claude

Method 3: Project-Specific

# In your project directory
git clone https://github.com/flight505/storybook-assistant-plugin.git

# Start Claude with plugin
claude --plugin-dir ./storybook-assistant-plugin

Verify installation: Plugin will automatically check environment on SessionStart and display available features.

---

💡 How to Use After Installation

Once installed, the plugin is available in your Claude Code CLI sessions:

1. Start Claude Code in your project directory

cd your-project
claude

2. Discover Features

# Ask what the Storybook Assistant can do
"What can the Storybook Assistant do?"
"Show me Storybook plugin features"
"What Storybook commands are available?"
"Help with Storybook Assistant"

3. Use Commands - Type any command starting with /

# Initialize Storybook in your project
/setup-storybook

# Generate stories for existing components
/generate-stories

# Create new component with story and tests
/create-component

4. Or Use Natural Language

"Set up Storybook in this Next.js project"
"Generate stories for my Button component"
"Create a new Card component with dark mode support"
"Fix accessibility issues in LoginForm.tsx"

The plugin understands natural language and will automatically trigger the right skills!

---

📋 Quick Reference

Essential Commands