skills.rest
flight505
flight505COMMUNITY
Explore all skills by this author →
WebsiteGitHub

story-generation

Generate Storybook CSF 3.0 stories from React, Vue, and Svelte components.

9|2|Updated Jan 9, 2026
Search Tags:#testing#accessibility#components#storybook#generate#csf
One-click install
npx skills add https://github.com/flight505/storybook-assistant --skill story-generation
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: story-generation
Source: https://github.com/flight505/storybook-assistant/tree/main/skills/story-generation
Command: npx skills add https://github.com/flight505/storybook-assistant --skill story-generation

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill automatically generates Storybook CSF 3.0 stories from existing component files by analyzing props, detecting variants, and producing comprehensive stories with interaction tests and accessibility validation.

Core Features & Use Cases

  • Intelligent component analysis across React, Vue, and Svelte to extract names, props, and slots.
  • Automatic variant detection from enums/unions, sizes, booleans, and type-specific patterns to maximize test coverage.
  • Full CSF 3.0 story generation including argTypes, variant stories, default args, interaction tests, and a11y validation.

Quick Start

To generate stories for a component, parse the file, detect variants, and create a story:

  • python3 ${CLAUDE_PLUGIN_ROOT}/skills/story-generation/scripts/parse_component.py path/to/Component.tsx
  • python3 ${CLAUDE_PLUGIN_ROOT}/skills/story-generation/scripts/detect_variants.py path/to/Component.tsx
  • python3 ${CLAUDE_PLUGIN_ROOT}/skills/story-generation/scripts/generate_story.py path/to/Component.tsx --level full --output path/to/Component.stories.tsx

Frequently Asked Questions about story-generation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I auto-generate Storybook CSF 3.0 stories from existing React components?▼

To generate Storybook CSF 3.0 stories, use the generate_story script to analyze React component files, detect variants from props and enums, and output stories with interaction tests and a11y validation.

Can I automatically create Storybook stories for Vue and Svelte components?▼

Yes, automated Storybook story generation supports Vue and Svelte components alongside React, intelligently analyzing component files to extract props, slots, and variants for comprehensive test coverage.

How do I detect component variants for Storybook stories from TypeScript enums and unions?▼

Detect component variants by running the detect_variants script, which analyzes TypeScript enums, unions, sizes, and booleans to identify variant patterns and maximize Storybook test coverage.

Do I need Python to generate Storybook stories with interaction and accessibility tests?▼

Yes, automated Storybook story generation requires Python 3.8+ and uses standard library facilities to parse components and output CSF 3.0 stories, argTypes, and test scaffolding.

What is the best way to scaffold accessibility tests for Storybook component stories?▼

The best way to scaffold a11y tests is using automated story generation, which produces CSF 3.0 stories with built-in accessibility validation and interaction tests by analyzing component props.

Why are my Storybook component variants missing from auto-generated stories?▼

Missing Storybook variants occur when the component analyzer cannot detect patterns from enums, unions, sizes, or booleans, so ensure props are explicitly typed for accurate variant extraction.

Related Skills

Explore More Software Engineering Skills→
aziontechaziontech
22

storybook-update-component

Update Vue Storybook stories to reflect component prop, slot, and event changes.

Official
Advanced
nekorush14nekorush14
4

storybook-development

Generate Storybook CSF3 stories with interaction and visual regression testing.

Community
Advanced
TheBushidoCollectiveTheBushidoCollective
187

storybook-configuration

Configure Storybook main and preview files with addons and framework-specific builders.

Official
Intermediate
PMDevSolutionsPMDevSolutions
7

storybook-story-generation

Generate CSF3 Storybook stories and MDX autodocs from React component source.

Official
Advanced