--- name: component-documenter description: Write professional documentation including README files, Storybook stories, API docs, usage examples, and migration guides for component libraries allowed-tools: - Read - Write - Edit - Bash - Glob - Grep - Task --- # Component Documenter Expert skill for creating comprehensive, user-friendly documentation for component libraries. Specializes in README files, Storybook stories, API documentation, usage guides, and migration documentation. ## Core Capabilities ### 1. README Documentation - Professional project overview - Installation instructions - Quick start guides - Feature highlights - Usage examples - Configuration options - Contributing guidelines - Troubleshooting sections ### 2. Storybook Integration - Story creation for all components - Controls/Args documentation - Multiple story variants - Interactive examples - MDX documentation pages - Accessibility addon integration - Visual regression testing setup ### 3. API Documentation - Props interface documentation - Type definitions - Method signatures - Event handlers - Return types - Default values - Required vs optional props ### 4. Usage Guides - Getting started tutorials - Common use cases - Best practices - Code examples - Do's and Don'ts - Accessibility guidelines - Performance tips ### 5. Migration Guides - Version upgrade guides - Breaking changes documentation - Migration steps - Codemod scripts - Before/after examples - Deprecation notices ### 6. Component Examples - Basic usage examples - Advanced patterns - Edge case handling - Integration examples - Real-world scenarios - Interactive demos ## Workflow ### Phase 1: Documentation Planning 1. **Understand Audience** - Developers using the library - Contributors to the project - Designers implementing specs - Stakeholders reviewing features 2. **Identify Content Needs** - What needs documentation? - What's missing in current docs? - Common questions/issues - User pain points 3. **Choose Documentation Types** - README for project overview - Storybook for component demos - JSDoc for inline code docs - Markdown files for guides - TypeScript for type docs ### Phase 2: Writing Documentation 1. **Create README** - Clear project description - Installation steps - Quick start example - Links to detailed docs 2. **Write Storybook Stories** - Default story for each component - Variant stories (sizes, colors, states) - Interactive controls - Accessibility checks 3. **Document API** - Props with types - Usage examples - Edge cases - Return values 4. **Create Usage Guides** - Step-by-step tutorials - Common patterns - Integration examples - Best practices ### Phase 3: Maintenance 1. **Keep Updated** - Update with code changes - Add new examples - Document breaking changes - Fix outdated content 2. **Gather Feedback** - User questions - GitHub issues - Support requests - Usage analytics 3. **Continuous Improvement** - Add missing examples - Clarify confusing sections - Improve searchability - Update screenshots ## README Templates ### Library README ```markdown # @myorg/ui-library Modern React component library with TypeScript, Tailwind CSS, and full accessibility support. [![npm version](https://badge.fury.io/js/%40myorg%2Fui-library.svg)](https://www.npmjs.com/package/@myorg/ui-library) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) ## Features - 🎨 **50+ Components** - Buttons, inputs, modals, and more - 🎯 **TypeScript First** - Full type safety out of the box - ♿ **Accessible** - WCAG AA compliant, keyboard navigation - 🌗 **Dark Mode** - Built-in theming system - 📦 **Tree-shakeable** - Import only what you need - 🎭 **Customizable** - Tailwind CSS and CSS variables - 📱 **Responsive** - Mobile-first design ## 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 (

) } ``` ## Documentation - 📚 [Full Documentation](https://ui-library.myorg.com) - 🎨 [Storybook](https://storybook.ui-library.myorg.com) - 📝 [API Reference](https://ui-library.myorg.com/api) - 🚀 [Examples](https://github.com/myorg/ui-library/tree/main/examples) ## Components ### Form Components - [Button](https://ui-library.myorg.com/button) - Buttons in various styles - [Input](https://ui-library.myorg.com/input) - Text inputs with validation - [Select](https://ui-library.myorg.com/select) - Dropdown selection - [Checkbox](https://ui-library.myorg.com/checkbox) - Checkbox input ### Layout Components - [Card](https://ui-library.myorg.com/card) - Content container - [Stack](https://ui-library.myorg.com/stack) - Flexbox layout - [Grid](https://ui-library.myorg.com/grid) - Grid layout ### Feedback Components - [Alert](https://ui-library.myorg.com/alert) - Alert messages - [Toast](https://ui-library.myorg.com/toast) - Toast notifications - [Modal](https://ui-library.myorg.com/modal) - Modal dialogs ## Usage ### Basic Example ```tsx import { Button } from '@myorg/ui-library' function MyComponent() { return ( ) } ``` ### With TypeScript ```tsx import { Button, type ButtonProps } from '@myorg/ui-library' interface MyButtonProps extends ButtonProps { customProp?: string } function MyButton({ customProp, ...props }: MyButtonProps) { return ``` ## Props | Prop | Type | Default | Description | |------|------|---------|-------------| | `variant` | `'primary' \| 'secondary' \| 'outline' \| 'ghost'` | `'primary'` | Visual style variant | | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Button size | | `disabled` | `boolean` | `false` | Disables button | | `loading` | `boolean` | `false` | Shows loading state | | `onClick` | `(e: MouseEvent) => void` | - | Click handler | | `children` | `ReactNode` | - | Button content | ## Examples ### Variants ```tsx ``` ### Sizes ```tsx ``` ### States ```tsx ``` ### With Icons ```tsx ``` ## Accessibility - Uses semantic ` ), } export const WithIcon: Story = { args: { children: ( <> Add Item ), }, } export const Loading: Story = { args: { loading: true, children: 'Loading...', }, } export const Disabled: Story = { args: { disabled: true, children: 'Disabled', }, } ``` ### MDX Documentation Story ```mdx {/* Button.mdx */} import { Meta, Story, Canvas, Controls } from '@storybook/blocks' import * as ButtonStories from './Button.stories' # Button Versatile button component for user interactions. ## Overview The Button component provides a consistent way to trigger actions throughout your application. It supports multiple variants, sizes, and states.

component-documenter

Install this skill

Comments