Skills
.Work. You
Rest

story-generation

Community

Auto-create CSF 3.0 stories from components.

Software Engineering#testing#accessibility#components#storybook#generate#csf
Authorflight505
Version1.0.0
Installs0

System Documentation

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

Dependency Matrix

Required Modules

None required

Components

scripts

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: story-generation
Download link: https://github.com/flight505/storybook-assistant/archive/main.zip#story-generation

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.