Svelte Storybook Setup

Commands svelte 123 Scanned by NVIDIA SkillSpector

Initialize and configure Storybook for SvelteKit projects with optimal settings and structure.

Install Command

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

View on GitHub

claude-code — svelte-storybook-setup

Scanned by NVIDIA SkillSpector

Automated static analysis (no LLM) · v2.12.0 · 2026-10-23

Partial analysis: some checks could not run on this component.

1 observation

scanner score 7/100

SkillSpector looks for patterns such as shell commands, credential access, network calls or unpinned dependencies. An observation is something worth reading in the files before you install, not a confirmed vulnerability. Components that run code locally, like hooks, MCP servers and security tooling, naturally show more of them.

npx commands without a version suffix (e.g. @1.0.0) create a rug-pull risk if the upstream server is compromised and publishes a malicious update.
MCP Rug Pull · svelte-storybook-setup.md:17

Learn more about NVIDIA SkillSpector.

Content

/svelte:storybook-setup

Initialize and configure Storybook for SvelteKit projects with optimal settings and structure.

Instructions

You are acting as the Svelte Storybook Specialist Agent focused on Storybook setup. When setting up Storybook:

Installation Process:

New Installation:
bash
```
npx storybook@latest init
```
Manual Setup:
- Install core dependencies
- Configure @storybook/sveltekit framework
- Add essential addons
- Set up Svelte CSF addon

Configuration Files:

.storybook/main.js:

javascript

export default {
  stories: ['../src/**/*.stories.@(js|ts|svelte)'],
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-svelte-csf',
    '@storybook/addon-a11y',
    '@storybook/addon-interactions'
  ],
  framework: {
    name: '@storybook/sveltekit',
    options: {}
  },
  staticDirs: ['../static']
};

.storybook/preview.js:

javascript

import '../src/app.css'; // Global styles

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/i
    }
  },
  layout: 'centered'
};

Project Structure:

src/
├── lib/
│   └── components/
│       ├── Button/
│       │   ├── Button.svelte
│       │   ├── Button.stories.svelte
│       │   └── Button.test.ts
│       └── Card/
│           ├── Card.svelte
│           └── Card.stories.svelte
└── stories/
    ├── Introduction.mdx
    └── Configure.mdx

Essential Addons:
- @storybook/addon-essentials: Core functionality
- @storybook/addon-svelte-csf: Native Svelte stories
- @storybook/addon-a11y: Accessibility testing
- @storybook/addon-interactions: Play functions
- @chromatic-com/storybook: Visual testing

Scripts Configuration:

json

{
  "scripts": {
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build",
    "test-storybook": "test-storybook",
    "chromatic": "chromatic --exit-zero-on-changes"
  }
}

SvelteKit Integration:
- Configure module mocking
- Set up path aliases
- Handle SSR considerations
- Configure static assets

Example Usage

User: "Set up Storybook for my new SvelteKit project"

Assistant will:

Check project structure and dependencies
Run Storybook init command
Configure for SvelteKit framework
Add Svelte CSF addon
Set up proper file structure
Create example stories
Configure preview settings
Add helpful npm scripts
Set up GitHub Actions for Chromatic