mcpField
S
storybook

storybook

github.com/exceptionlessDevelopment2.5k60 installsUpdated 1d ago
Repository

About storybook

storybook is a project-specific skill for running Storybook and authoring Svelte component stories. It describes colocated story files, metadata and controls, autodocs, and composing stories with snippets.

Key features

  1. 01Run Storybook with an npm script
  2. 02Co-locate Svelte stories with components
  3. 03Configure stories with defineMeta
  4. 04Set controls through argTypes
  5. 05Enable autodocs tags
  6. 06Compose stories with snippets

Use cases

  1. 01Run the component Storybook
  2. 02Create a story for a Svelte component
  3. 03Add prop controls to a story
  4. 04Document complex content compositions

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/exceptionless/exceptionless --skill storybook

After installing, type/storybookin Claude Code to confirm it loaded.

Details

From the project README

Storybook

Documentation: storybook.js.org

Running Storybook

npm run storybook

File Location

Co-locate stories with components as *.stories.svelte.

Basic Story Pattern

From stack-status-badge.stories.svelte:

<script module lang="ts">
    import { defineMeta } from '@storybook/addon-svelte-csf';

    import { StackStatus } from '../models';
    import StackStatusBadge from './stack-status-badge.svelte';

    const { Story } = defineMeta({
        argTypes: {
            status: {
                control: { type: 'select' },
                options: [StackStatus.Open, StackStatus.Fixed, StackStatus.Regressed]
            }
        },
        component: StackStatusBadge,
        tags: ['autodocs'],
        title: 'Components/Stacks/StackStatusBadge'
    });
</script>

<Story name="Open" args={{ status: StackStatus.Open }} />
<Story name="Fixed" args={{ status: StackStatus.Fixed }} />
<Story name="Regressed" args={{ status: StackStatus.Regressed }} />

Story with Snippets

From notification.stories.svelte:

<script module lang="ts">
    import { Button } from '$comp/ui/button';
    import CheckCircle from '@lucide/svelte/icons/check-circle';
    import Ban from '@lucide/svelte/icons/ban';
    import { defineMeta } from '@storybook/addon-svelte-csf';

    import NotificationDescription from './notification-description.svelte';
    import NotificationTitle from './notification-title.svelte';
    import Notification from './notification.svelte';

    const { Story } = defineMeta({
        component: Notification,
        tags: ['autodocs'],
        title: 'Components/Shared/Notification'
    });
</script>

<Story name="Success">
    <Notification variant="success">
        {#snippet icon()}<CheckCircle />{/snippet}
        <NotificationTitle>Operation completed successfully!</NotificationTitle>
        <NotificationDescription>Your changes have been saved.</NotificationDescription>
    </Notification>
</Story>

<Story name="Destructive">
    <Notification variant="destructive">
        {#snippet icon()}<Ban />{/snippet}
        <NotificationTitle>Something went wrong</NotificationTitle>
        <NotificationDescription>An error occurred. Please try again.</NotificationDescription>
    </Notification>
</Story>

<Story name="With Action">
    <Notification variant="information">
        {#snippet action()}
            <Button variant="outline" size="sm">Take Action</Button>
        {/snippet}
        <NotificationTitle>Action required</NotificationTitle>
        <NotificationDescription>Click the button to proceed.</NotificationDescription>
    </Notification>
</Story>

Key Patterns

  • defineMeta: Returns Story component, configure component, title, tags
  • tags: ['autodocs']: Auto-generate documentation page
  • argTypes: Configure controls for props (select, text, boolean, etc.)
  • Simple args: <Story name="Open" args={{ status: 'open' }} />
  • Custom content: Use children with snippets for complex compositions
  • Title hierarchy: Use / for organization (e.g., Components/Shared/Notification)

Comments

Markdown supported