Storybook

Skill a5c-ai/babysitter/library/specializations/web-development/skills/storybook

Storybook configuration, stories, addons, interaction testing, and documentation.From its SKILL.md

Install

npx -y skills add a5c-ai/babysitter --skill storybook

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

SKILL.md

1.5 KB, 253 tokens by cl100k_base, as published. Nobody here has run it

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

What ships with it: 1 file

356 B alongside SKILL.md

README.md356 B