Does it support TypeScript prop extraction?

Absolutely. It utilizes JSDoc and TypeScript interface analysis patterns to extract prop types, descriptions, and default values for display in the Storybook ArgTypes table.

How does this skill help with Storybook Autodocs?

It provides the correct syntax and configuration for the 'autodocs' tag and meta parameters to ensure high-quality, automated documentation pages are generated from your stories.

Can I use it for documenting design system tokens?

Yes, the skill includes advanced patterns for documenting color palettes, typography, and layout tokens using specialized Storybook documentation blocks.

Does it support migration guides?

The skill includes specific templates for creating version-to-version migration guides within your Storybook environment to help users upgrade components.

Can it help generate MDX files?

Yes, it provides structured patterns and templates for creating custom MDX pages that combine markdown content with live component previews and property controls.

Storybook Component Documentation

Name: Storybook Component Documentation
Author: TheBushidoCollective

byTheBushidoCollective

•

学習とドキュメンテーション

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

This skill empowers developers to create professional-grade UI documentation by leveraging Storybook's most powerful features. It automates the generation of documentation from source code using the autodocs tag, creates custom MDX pages for complex usage guides, and extracts rich prop information from JSDoc comments. Whether you are building a new design system or maintaining an existing library, this skill ensures your components are well-documented, accessible, and easy for other developers to integrate by following industry best practices for documentation architecture.

主な機能

01Custom MDX documentation with live Canvas and Control blocks

02Automated documentation generation via Storybook Autodocs

03Rich prop extraction from TypeScript interfaces and JSDoc

04Structured component and story-level documentation parameters

0595 GitHub stars

06Standardized patterns for migration guides and design system tokens

ユースケース

01Documenting complex UI components for improved team collaboration

02Building and maintaining a comprehensive company design system

03Generating API references and interactive usage examples for libraries

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