storybook

Storybook configuration, stories, addons, interaction testing, and documentation.

不碰外部（只输出文字）无严重或高危命中a5c-ai/babysitter

它会碰到什么

扫了多少2 个文本文件，2 KB

它会碰到什么不碰外部（只输出文字）

命中总数0 处

命中统计严重 0 · 高 0 · 中 0 · 低 0

这一栏是扫描器报的事实，不是结论。命中多不等于有毒（安全工具、规则库、示例脚本本来就会包含危险写法），命中少也不等于干净。它和你手上的凭据、文件、网络有什么关系，需要你自己看。

技能内容

Storybook Skill

Expert assistance for component development with Storybook.

Capabilities

Configure Storybook
Write component stories
Add interaction testing
Configure addons
Generate documentation

Story Patterns

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

const meta: Meta<typeof Button> = {
  title: 'Components/Button',
  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: 'Click me',
  },
};

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

Target Processes

component-library
design-system
documentation

想直接用这个技能？

本站把开放许可（MIT / Apache 等）的技能按仓库打包整理到网盘，点一下转存到你自己的网盘，不用一个个从 GitHub 拉。许可未声明的技能只给原始仓库链接，不打包。

去原始仓库

它属于哪个仓库

仓库a5c-ai/babysitter

星标★ 1,796

本站分层T1

该仓技能数2115

原文件路径library/specializations/web-development/skills/storybook/SKILL.md

同一个仓库里的其他技能

看这个仓库的全部 2115 个技能