What version of Storybook are the generated stories compatible with?

The skill generates CSF 3.0 stories, which are compatible with Storybook 7, 8, and 9.

How does it detect component variants?

It uses pattern matching and heuristic-based classification to identify variants from TypeScript union types, enums, sizes, and boolean states like 'disabled' or 'loading'.

Which frameworks does this skill support?

The Storybook Component Generator supports React (TypeScript), Vue 3 (Composition API), and Svelte components.

Can it automatically generate tests for my components?

Yes, by using the 'full' testing level, the skill generates interaction tests using play functions and accessibility checks using axe-core rules.

Does this skill require external Python dependencies?

No, the underlying scripts are built using the Python 3.8+ standard library, ensuring they run quickly without needing extra packages.

Storybook Component Generator

Name: Storybook Component Generator
Author: flight505

byflight505

0•

设计工具

Automates the creation of comprehensive Storybook CSF 3.0 stories with integrated interaction and accessibility tests.

This skill streamlines frontend development by automatically analyzing component files to generate production-ready Storybook documentation. It parses prop types, detects variants from TypeScript unions or enums, and scaffolds complete CSF 3.0 story files for React, Vue, and Svelte. Beyond simple rendering, it integrates interaction tests using play functions and accessibility validation with axe-core, ensuring your design system components are robust and compliant with minimal manual effort.

主要功能

01Built-in accessibility (a11y) validation based on axe-core rules

02Automated CSF 3.0 story generation with inferred controls and argTypes

03High-performance, dependency-free Python scripts for instant analysis

04Intelligent prop parsing and variant detection for React, Vue, and Svelte

05Integrated interaction testing using Testing Library play functions

060 GitHub stars

使用场景

01Enforcing accessibility and interaction test coverage for new UI components

02Rapidly documenting an entire existing component library for a design system

03Migrating legacy Storybook files to the modern CSF 3.0 standard automatically

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add flight505/storybook-assistant story-generation

For use in Claude.ai and ChatGPT

Download Skill