mcpField
S
storybook

storybook

github.com/exceptionless开发2.5k60 次安装1 天前更新
代码仓库

关于 storybook

storybook 是用于运行 Storybook 和编写 Svelte 组件故事的项目技能，说明故事文件的放置方式、元数据与控件配置、自动文档标签，以及使用片段组合故事。

主要功能

  1. 01通过 npm 脚本运行 Storybook
  2. 02将 Svelte 故事文件与组件并置
  3. 03使用 defineMeta 配置故事
  4. 04通过 argTypes 设置控件
  5. 05启用 autodocs 标签
  6. 06使用片段组合故事

适用场景

  1. 01运行组件 Storybook
  2. 02为 Svelte 组件创建故事
  3. 03为故事添加属性控件
  4. 04记录复杂内容组合

安装

复制下面的命令，在终端中运行。

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

安装后在 Claude Code 中输入/storybook确认已加载。

详细介绍

Storybook

文档： storybook.js.org

运行 Storybook

npm run storybook

文件位置

将故事文件与组件放在一起，命名为 *.stories.svelte。

基本故事模式

摘自 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 }} />

带有片段的故事

摘自 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>

关键模式

  • defineMeta：返回 Story 组件，配置 component、title、tags
  • tags: ['autodocs']：自动生成文档页面
  • argTypes：为属性配置控件（选择框、文本、布尔值等）
  • 简单参数：<Story name="Open" args={{ status: 'open' }} />
  • 自定义内容：使用带有片段的子内容构建复杂组合
  • 标题层级：使用 / 进行组织（例如 Components/Shared/Notification）

评论

支持 Markdown