command

svelte-storybook — Claude Code command for Storybook

Q: How do I install svelte-storybook in Claude Code?

Run `npx claude-code-templates@latest --command svelte/svelte-storybook`. The command file is placed at `.claude/commands/svelte-storybook.md`.

Get help setting up Storybook in SvelteKit, writing component stories, and working through configuration issues. It can also review an existing setup.

Install into Claude Code · claude-code-templates All methods and platforms ↓

npx claude-code-templates@latest --command svelte/svelte-storybook

Open on GitHub

What svelte-storybook does

This command assists with Storybook setup for SvelteKit, component stories, addons, and troubleshooting. It can also advise on organizing stories, documenting components with controls and docs, and adding visual tests.

Before suggesting configuration changes, it checks the project’s current Storybook setup, version, and addons. Existing choices affect the guidance, so that check matters. Its recommendations cover Svelte CSF, mocking SvelteKit modules, accessibility checks, and test integration.

What it helps with

set up Storybook in a SvelteKit project
write stories for components
choose addons and adjust configuration
troubleshoot Storybook issues
add visual testing and CI/CD setup

Example prompts for the agent

Set up Storybook for this SvelteKit project.
Write stories for these components and suggest where to organize them.
Review the Storybook configuration and help add accessibility testing.

How to install svelte-storybook

1claude-code-templates

npx claude-code-templates@latest --command svelte/svelte-storybook

2Manually: put the files in place

.claude/commands/svelte-storybook.md

Call it with /svelte-storybook. For all projects use ~/.claude/commands/

Manually: put the files in place

~/.codex/prompts/svelte-storybook.md

Call it with /prompts:svelte-storybook. Codex marks this format deprecated in favour of skills

Manually: put the files in place

.github/prompts/svelte-storybook.prompt.md

Manually: put the files in place

.gemini/commands/svelte-storybook.toml

Gemini stores commands as TOML: the prompt text goes into the prompt field

Questions about svelte-storybook

How do I install svelte-storybook in Claude Code?

Run npx claude-code-templates@latest --command svelte/svelte-storybook. The command file is placed at .claude/commands/svelte-storybook.md.

What does svelte-storybook do?

It helps with Storybook setup in SvelteKit projects, component stories, configuration, addons, and testing tasks.

What does it check before giving setup advice?

It checks the project’s existing Storybook setup, including the version and addons in use.

Source text

svelte-storybook.md · MIT

---
description: "General-purpose Storybook assistance for SvelteKit projects, including setup guidance, best practices, and common tasks."
---

# /svelte:storybook

General-purpose Storybook assistance for SvelteKit projects, including setup guidance, best practices, and common tasks.

## Instructions

You are acting as the Svelte Storybook Specialist Agent. Provide comprehensive assistance with Storybook for SvelteKit projects.

1. **Assess the Request**:
   - Determine if it's about setup, story creation, configuration, or troubleshooting
   - Check the current Storybook setup in the project
   - Identify specific Storybook version and addons

2. **Common Tasks**:
   - Setting up Storybook in a SvelteKit project
   - Creating stories for components
   - Configuring Storybook for SvelteKit modules
   - Adding addons and customizations
   - Optimizing Storybook performance
   - Setting up visual testing

3. **Best Practices**:
   - Use Svelte CSF format for native syntax
   - Implement proper mocking for SvelteKit modules
   - Structure stories for maintainability
   - Document components with controls and docs
   - Set up accessibility testing

4. **Guidance Areas**:
   - Project structure for stories
   - Naming conventions
   - Story organization
   - Addon selection
   - Testing integration
   - CI/CD setup

## Example Usage

User: "Help me set up Storybook for my component library"

Assistant will:
- Check if Storybook is already installed
- Guide through installation if needed
- Set up proper configuration
- Create example stories
- Configure essential addons
- Provide project structure recommendations
- Set up build and deployment scripts

Similar slash commands

All slash commands for Frontend and UI →

From the same set804

The whole set →

sync-health-monitor A slash command that checks GitHub-Linear sync health: API limits, webhooks, latency, error patterns. Useful when issues stop reaching the other side. 121installs svelte-storybook-mock Sets up SvelteKit module mocks in Storybook stories so a component renders in isolation, without the app running. 121installs ai-wrapper-product Guides you through building a product around an AI API: prompts, token accounting, usage limits and output validation. 120installs sync-migration-assistant A slash command that migrates issues between GitHub and Linear with validation and rollback. Useful when a project changes trackers. 120installs svelte-migrate Plan Svelte and SvelteKit upgrades, adopt runes, and work through breaking changes with this Claude Code command. 120installs screenshot Takes a picture of the whole screen, a single app window or a pixel region when the agent has no built-in capture route for the task. 119installs diagrammer Turns plain-text prompts into blueprint-styled SVG charts via JSON specs. Helpful when documentation or slide decks require clean vector visuals. 119installs svelte-storybook-setup Sets up Storybook for SvelteKit projects with framework settings, addons, story folders, and npm scripts. 119installs