Svelte Storybook Launcher

Provide general-purpose Storybook assistance for SvelteKit projects including setup guidance, best practices, story creation, and troubleshooting common configuration issues.

When to Use This Command

Run this command when...

• You have a general Storybook question or task for your SvelteKit project that does not fit neatly into setup, migration, or story creation categories
• You need guidance on Storybook best practices, configuration options, or architectural decisions for your Svelte component library
• You want help troubleshooting a Storybook issue that spans configuration, addons, and story rendering

Do NOT use this command when...

• You have a specific task like "set up Storybook" or "create a story" -- use the dedicated setup or story commands for focused output
• Your question is about Svelte development without any Storybook involvement

Quick Start

Copy
# .claude/commands/svelte-storybook-launcher.md
# General Storybook assistance
Help with: $ARGUMENTS

Copy
# Run the command
claude "svelte-storybook-launcher configure custom decorators for theme switching in all stories"

Expected output:
- Decorator implementation for theme context
- Preview.ts configuration with theme parameter
- Toolbar addon setup for theme toggle
- Story-level override examples
- Testing verification steps

Core Concepts

Concept	Description
Decorators	Wrapper components that provide context, styling, or layout to stories
Parameters	Story-level configuration for viewport, backgrounds, and addon behavior
Loaders	Async data fetching that runs before story rendering
Toolbars	Custom controls in the Storybook toolbar for global state management
Composition	Combining multiple Storybook instances into a unified interface

Storybook Ecosystem:

  .storybook/
  |-- main.ts -----> Framework + Addons
  |-- preview.ts --> Decorators + Parameters
  |-- manager.ts --> UI Customization
       |
  Stories (*.stories.ts)
  |-- Component stories
  |-- Page stories
  |-- Documentation
       |
  Addons
  |-- a11y, viewport, controls
  |-- interactions, docs

Configuration

Parameter	Default	Description
Scope	Project-wide	Whether assistance targets global config or specific stories
Detail Level	Practical	Conceptual overview, practical code, or deep-dive explanation
Framework Version	Auto-detect	Storybook major version for version-appropriate guidance
Addon Focus	All installed	Which addons to include in configuration guidance
Output Style	Code + explanation	Whether to provide code only, explanation only, or both

Best Practices

1. Start with a clear question -- "how do I add dark mode toggle to stories" gets a more actionable answer than "help with Storybook"
2. Mention your current setup -- include which Storybook version, addons, and framework package you are using for version-appropriate guidance
3. Provide error messages -- when troubleshooting, include the exact error text and the file where it occurs for accurate diagnosis
4. Ask about conventions -- if you are unsure about file organization, naming, or patterns, ask before building a large story library on unclear foundations
5. Request examples -- ask for concrete code examples rather than conceptual explanations when you need to implement something immediately

Common Issues

1. Conflicting guidance from different versions -- Storybook patterns changed significantly across major versions. Specify your version to avoid outdated advice
2. Too many configuration options -- focus on the essentials (main.ts, preview.ts) before customizing manager.ts or adding optional addons
3. Stories work in dev but fail in build -- static Storybook builds may resolve paths differently. Test with npx storybook build periodically during development