Does it include installation instructions in the docs?

Yes, it generates a standard documentation header including CLI installation commands and import statements for the specific component.

Can it document different component states?

Yes, it creates specific stories for every visual state—such as Loading, Success, Error, and Disabled—matching them to your component's state inventory.

Does it support Tailwind CSS?

Absolutely. It maps Tailwind utility classes for font size, weight, and tracking into detailed typography tables with exact pixel values.

What version of Storybook is this compatible with?

The skill generates code using the modern Component Story Format (CSF 3.0) with Meta and StoryObj types, compatible with Storybook 7 and 8.

How does the skill handle design tokens?

It automatically extracts CSS variables from your component's class names and creates a visual table showing the token name, variable, usage, and a live color/border preview.

Storybook Documentation Generator

Name: Storybook Documentation Generator
Author: Ankish8

byAnkish8

•

デザインツール

Generates standardized, comprehensive Storybook documentation including design token tables, typography specifications, and interactive component stories.

The Storybook Generator skill automates the creation of high-quality documentation for UI components. It follows a rigorous pattern that includes installation instructions, import guides, and automatically generated tables for design tokens and typography. By parsing component code and Tailwind CSS classes, it builds interactive playgrounds and state-based stories that match your component's visual inventory. This skill is essential for maintaining a consistent design system and accelerating the developer-to-designer handoff process.

主な機能

011 GitHub stars

02Automatic extraction of CSS variables for design token tables

03Tailwind-to-Typography mapping for font specifications

04Standardized documentation layout for consistent UI libraries

05State-based story generation for complex component inventories

06Interactive usage examples and playground configuration

ユースケース

01Standardizing component documentation across large engineering teams

02Building a comprehensive design system documentation site

03Automating the creation of interactive playgrounds for UI components

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ankish8/storybook-npm storybook-generator

For use in Claude.ai and ChatGPT

Download Skill