Storybook组件开发助手Skill storybook

Storybook组件开发助手是一款专注于前端组件开发与文档化的专家工具。它提供Storybook配置、组件故事编写、交互测试、插件集成和自动化文档生成等核心功能，帮助开发者高效构建可复用、可测试、文档完善的UI组件库和设计系统。适用于React、Vue、Angular等主流前端框架，是提升团队协作效率和代码质量的关键工具。关键词：Storybook配置、组件故事、交互测试、UI文档、设计系统、前端组件库、React组件、Vue组件、自动化文档。

前端开发 0 次安装 5 次浏览更新于 2/26/2026

name: storybook description: Storybook配置、故事编写、插件、交互测试和文档生成。 allowed-tools: 读取、写入、编辑、Bash、Glob、Grep

Storybook 技能

为使用Storybook进行组件开发提供专家级协助。

能力范围

配置Storybook
编写组件故事
添加交互测试
配置插件
生成文档

故事模式

import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';

const meta: Meta<typeof Button> = {
  title: '组件/按钮',
  component: Button,
  tags: ['autodocs'],
  argTypes: {
    variant: { control: 'select', options: ['primary', 'secondary'] },
    size: { control: 'select', options: ['sm', 'md', 'lg'] },
  },
};

export default meta;
type Story = StoryObj<typeof Button>;

export const Primary: Story = {
  args: {
    variant: 'primary',
    children: '点击我',
  },
};

export const WithInteraction: Story = {
  args: { children: '点击我' },
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    await userEvent.click(canvas.getByRole('button'));
  },
};

目标流程

组件库开发
设计系统构建
文档生成