Storybook Component Documentation

What it does

This skill assists in creating comprehensive component documentation within Storybook projects. It leverages Storybook's autodocs feature, MDX pages for custom documentation, and JSDoc comments to automatically generate and enrich documentation for UI components. The goal is to streamline the documentation process as part of writing and content creation workflows.

When to use it

• When building a component library using Storybook.
• To automate the generation of documentation from existing Storybook stories.
• For creating custom, detailed documentation pages with full control over content and formatting.
• When needing to document component props and their types for developer reference.

Key capabilities

• Autodocs: Automatically generates documentation pages based on story metadata.
• MDX Documentation: Allows creation of custom documentation pages using MDX syntax.
• JSDoc Comments: Enables extraction of prop information from JSDoc comments within component code.
• Story Descriptions: Supports adding descriptions to individual Storybook stories for more context.

Example prompts

• "Generate autodocs for the Button component."
• "Create an MDX page documenting the Tooltip component's features and accessibility considerations."
• "Extract JSDoc comments from the Card component's code to document its props."

Tips & gotchas

• Ensure the autodocs tag is included in your Storybook story metadata to enable automatic documentation generation.
• Use clear and concise descriptions for components, stories, and individual props to improve readability and understanding.
• This skill focuses on component documentation within a Storybook environment; it does not handle general writing or content creation tasks outside of this context.