Does it help with accessibility documentation?

Yes, it includes best practices for documenting ARIA labels, keyboard navigation, and other accessibility features within your Storybook pages.

Does it support custom MDX pages?

Yes, it includes specific guidance for creating custom MDX documentation that combines Markdown content with live interactive stories and code blocks.

Can I use this for existing component libraries?

Absolutely. This skill is ideal for improving existing documentation by retrofitting autodocs and JSDoc comments to existing components.

How does this skill use JSDoc for documentation?

The skill provides patterns to extract JSDoc comments from your component interfaces, automatically populating Storybook's Controls table with rich descriptions and default values.

Is it compatible with TypeScript projects?

Yes, the skill is fully optimized for TypeScript, utilizing the 'satisfies Meta' pattern and interface documentation for type-safe components.

Storybook Component Documentation

Name: Storybook Component Documentation
Author: TheBushidoCollective

byTheBushidoCollective

•

Herramientas de Diseño

Generates comprehensive, interactive component documentation using Storybook's autodocs, MDX pages, and JSDoc comments.

This skill empowers developers to create professional, production-grade UI documentation within the Storybook ecosystem. By leveraging autodocs, MDX, and structured JSDoc comments, it automates the extraction of component properties and creates interactive usage examples. It is designed to help teams maintain a single source of truth for their design systems, ensuring that documentation stays in sync with code changes while providing rich context through accessibility guidelines, design tokens, and migration paths.

Características Principales

01Structured JSDoc comment extraction for prop types and descriptions

02Interactive usage examples with live code snippets

03Standardized patterns for accessibility and design token documentation

04Custom MDX documentation pages for rich component narratives

05Automatic documentation generation via Storybook autodocs

0672 GitHub stars

Casos de Uso

01Building a comprehensive design system documentation site

02Standardizing prop documentation across a large frontend project

03Creating migration guides and API references for UI library updates

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add thebushidocollective/han storybook-component-documentation

For use in Claude.ai and ChatGPT

Download Skill