Component Documenter

Expert skill for creating comprehensive, user-friendly documentation for component libraries. Specializes in Storybook 9, README files, API documentation, usage guides, and migration documentation.

Technology Stack (2025)

Documentation Tools

• Storybook 9 - Component development platform

• MDX 3 - Markdown + JSX documentation

• TypeDoc - API documentation from TypeScript

• Docusaurus 3 / VitePress 2 - Documentation sites

Addons

• @storybook/addon-a11y - Accessibility testing

• @storybook/addon-essentials - Core addons

• @storybook/test - Testing integration

• storybook-dark-mode - Theme switching

Storybook 9 Configuration

Main Config

// .storybook/main.ts import type { StorybookConfig } from '@storybook/react-vite'

const config: StorybookConfig = { stories: ['../src//*.mdx', '../src//*.stories.@(js|jsx|ts|tsx)'], addons: [ '@storybook/addon-essentials', '@storybook/addon-a11y', '@storybook/addon-interactions', ], framework: { name: '@storybook/react-vite', options: {}, }, docs: { autodocs: 'tag', }, typescript: { reactDocgen: 'react-docgen-typescript', }, }

export default config

Preview Config

// .storybook/preview.ts import type { Preview } from '@storybook/react' import '../src/styles/globals.css'

const preview: Preview = { parameters: { controls: { matchers: { color: /(background|color)$/i, date: /Date$/i, }, }, docs: { toc: true, }, a11y: { element: '#storybook-root', config: {}, options: {}, }, }, decorators: [ (Story) => ( <div className="p-4"> <Story /> </div> ), ], }

export default preview

Story Examples

Component Story (CSF 3)

// Button.stories.tsx import type { Meta, StoryObj } from '@storybook/react' import { fn } from '@storybook/test' import { Button } from './Button'

const meta = { title: 'Components/Button', component: Button, tags: ['autodocs'], argTypes: { variant: { control: 'select', options: ['default', 'destructive', 'outline', 'secondary', 'ghost', 'link'], description: 'Visual style variant', }, size: { control: 'select', options: ['default', 'sm', 'lg', 'icon'], }, disabled: { control: 'boolean', }, }, args: { onClick: fn(), }, } satisfies Meta<typeof Button>

export default meta type Story = StoryObj<typeof meta>

export const Default: Story = { args: { children: 'Button', }, }

export const Primary: Story = { args: { variant: 'default', children: 'Primary Button', }, }

export const Secondary: Story = { args: { variant: 'secondary', children: 'Secondary Button', }, }

export const Destructive: Story = { args: { variant: 'destructive', children: 'Delete', }, }

export const AllSizes: Story = { render: () => ( <div className="flex items-center gap-4"> <Button size="sm">Small</Button> <Button size="default">Default</Button> <Button size="lg">Large</Button> </div> ), }

export const AllVariants: Story = { render: () => ( <div className="flex flex-wrap gap-4"> <Button variant="default">Default</Button> <Button variant="secondary">Secondary</Button> <Button variant="outline">Outline</Button> <Button variant="ghost">Ghost</Button> <Button variant="link">Link</Button> <Button variant="destructive">Destructive</Button> </div> ), }

export const WithIcon: Story = { args: { children: ( <> <PlusIcon className="mr-2 h-4 w-4" /> Add Item </> ), }, }

export const Loading: Story = { args: { disabled: true, children: ( <> <LoaderIcon className="mr-2 h-4 w-4 animate-spin" /> Loading... </> ), }, }

export const Disabled: Story = { args: { disabled: true, children: 'Disabled', }, }

MDX Documentation

{/* Button.mdx */} import { Meta, Canvas, Controls, Story } from '@storybook/blocks' import * as ButtonStories from './Button.stories'

<Meta of={ButtonStories} />

Button

A versatile button component for user interactions.

Overview

The Button component provides a consistent way to trigger actions throughout your application.

<Canvas of={ButtonStories.Default} />

Props

<Controls />

Variants

Primary (Default)

Use for the main call-to-action on a page.

<Canvas of={ButtonStories.Primary} />

Secondary

Use for secondary actions that complement the primary action.

<Canvas of={ButtonStories.Secondary} />

Destructive

Use for dangerous or irreversible actions.

<Canvas of={ButtonStories.Destructive} />

Sizes

<Canvas of={ButtonStories.AllSizes} />

States

Loading

Shows a loading indicator when an async action is in progress.

<Canvas of={ButtonStories.Loading} />

Disabled

Prevents interaction when an action is not available.

<Canvas of={ButtonStories.Disabled} />

Accessibility

• Uses semantic <button> element
• Keyboard accessible (Enter, Space)
• Focus visible indicator
• Disabled state properly communicated

Best Practices

Do

• Use primary buttons for main actions
• Keep button text concise (2-4 words)
• Use loading state for async actions

Don't

• Use too many primary buttons on one page
• Use ambiguous labels like "Click here"
• Nest interactive elements inside buttons

README Templates

Library README

@myorg/ui-library

Modern React 19 component library with TypeScript, Tailwind CSS 4, and full accessibility.

Features

• 50+ Components - Buttons, inputs, modals, and more
• TypeScript First - Full type safety
• Accessible - WCAG 2.1 AA compliant
• Dark Mode - Built-in theming
• Tree-shakeable - Import only what you need

Installation

```bash npm install @myorg/ui-library ```

Quick Start

```tsx import { Button, Input } from '@myorg/ui-library' import '@myorg/ui-library/styles.css'

function App() { return ( <div> <Button variant="default">Click me</Button> <Input placeholder="Enter text..." /> </div> ) } ```

Documentation

• Storybook
• API Reference
• Examples

Requirements

• React 19+
• Tailwind CSS 4+

License

MIT

Component README

Button

Versatile button component with multiple variants, sizes, and states.

Import

```tsx import { Button } from '@myorg/ui-library' ```

Usage

```tsx <Button variant="default" size="default"> Click me </Button> ```

Props

Accessibility

• Keyboard: Enter, Space to activate
• Screen reader: Announces as button
• Focus: Visible focus ring

API Documentation

JSDoc Comments

/**

• Button component for user interactions.
• @example
• <Button variant="default" onClick={() => alert('Clicked!')}>
• Click me
• </Button>

/ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> { /*

• Render button as child element using Radix Slot
• @default false */ asChild?: boolean }

Migration Guide Template

Migration Guide: v1 to v2

Breaking Changes

Button Component

Variant names changed

Before (v1): ```tsx <Button color="primary">Click</Button> ```

After (v2): ```tsx <Button variant="default">Click</Button> ```

New Features

Server Components Support

Components now support React 19 Server Components by default.

```tsx // Server Component (default) import { Card } from '@myorg/ui-library'

// Client Component (when needed) 'use client' import { Button } from '@myorg/ui-library' ```

Migration Steps

1. Update package: `npm install @myorg/ui-library@2`
2. Run codemod: `npx @myorg/codemod v1-to-v2`
3. Test application
4. Fix any remaining issues

Best Practices

Writing Style

• Clear and Concise: Simple language

• Examples First: Show code before explaining

• Progressive Disclosure: Basic → Advanced

• Consistent Formatting: Same patterns

• Scannable: Headings, lists, tables

Accessibility Documentation

• Document keyboard shortcuts

• List ARIA attributes used

• Describe screen reader behavior

• Note focus management

When to Use This Skill

Activate when you need to:

• Write or update README files

• Create Storybook 9 stories

• Generate API documentation

• Write usage guides

• Create migration guides

• Document component props

• Write tutorials

Output Format

Provide:

• Complete Documentation: README, stories, guides

• Code Examples: Working, tested examples

• Props Tables: Complete prop documentation

• Accessibility Notes: Keyboard, ARIA, screen reader

• Migration Guide: When updating versions