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

设计工具

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.

主要功能

Built-in accessibility (a11y) validation based on axe-core rules
Automated CSF 3.0 story generation with inferred controls and argTypes
High-performance, dependency-free Python scripts for instant analysis
Intelligent prop parsing and variant detection for React, Vue, and Svelte
Integrated interaction testing using Testing Library play functions
0 GitHub stars

使用场景

Enforcing accessibility and interaction test coverage for new UI components
Rapidly documenting an entire existing component library for a design system
Migrating legacy Storybook files to the modern CSF 3.0 standard automatically

关于

主要功能

Built-in accessibility (a11y) validation based on axe-core rules
Automated CSF 3.0 story generation with inferred controls and argTypes
High-performance, dependency-free Python scripts for instant analysis
Intelligent prop parsing and variant detection for React, Vue, and Svelte
Integrated interaction testing using Testing Library play functions
0 GitHub stars

使用场景

Enforcing accessibility and interaction test coverage for new UI components
Rapidly documenting an entire existing component library for a design system
Migrating legacy Storybook files to the modern CSF 3.0 standard automatically