skills.rest
parhumm
parhummCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-story-generate

Generate CSF3 Storybook stories with variant coverage and state matrices.

25|1|Updated Jan 29, 2026
Search Tags:#storybook#csf3#cva#msw#component-stories#variant-coverage
One-click install
npx skills add https://github.com/parhumm/jaan-to --skill frontend-story-generate
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-story-generate
Source: https://github.com/parhumm/jaan-to/tree/main/adapters/codex/skillpack/skills/frontend-story-generate
Command: npx skills add https://github.com/parhumm/jaan-to --skill frontend-story-generate

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Automate the creation of CSF3 Storybook stories for UI components, delivering complete variant coverage and state matrices to reduce manual storytelling overhead.

Core Features & Use Cases

  • Generate declarative CSF3 stories for components with variant coverage and state matrices.
  • Produce accompanying documentation and an integration-ready scaffold for Storybook.
  • Support API-dependent components with MSW-based handlers and per-story overrides to demonstrate realistic data flows.

Quick Start

Provide the path to a component or run a scan to identify missing stories, then review the generated CSF3 stories and documentation.

Frequently Asked Questions about frontend-story-generate

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

FAQPage Schema
How do I generate CSF3 Storybook stories with full variant coverage for my React components?▼

Yes, you can automate Storybook story generation for component libraries by scanning your project to identify missing stories and producing declarative CSF3 files with complete state matrices and metadata-driven documentation packages.

Does this Storybook story generator work with Vue components and design-system conventions?▼

Yes, it supports generating CSF3 stories for Vue components and applies design-system conventions by using optional MCP guidance to align generated stories with your existing project templates and component library standards.

How do I handle API-dependent components in Storybook stories using MSW handlers?▼

You can handle API-dependent components in Storybook stories by utilizing the generated MSW-based handlers and per-story overrides to demonstrate realistic data flows without requiring live API connections during component development.

What's the best way to document component variants and state matrices in Storybook?▼

The best way to document component variants and state matrices is to generate declarative CSF3 stories accompanied by a metadata-driven documentation package, providing an integration-ready scaffold for your Storybook component library.

Do I need existing templates and project access to generate CSF3 stories?▼

Yes, you need project access to component source files and existing templates, along with optional MCP guidance, to ensure the generated CSF3 stories align with your specific project conventions and design-system rules.

Related Skills

Explore More Software Engineering Skills→
igpastorigpastor

Component Scaffolding Skill

Scaffold React, Next.js, and Vue 3 UI components with files and boilerplate.

Community
Intermediate
PMDevSolutionsPMDevSolutions
7

storybook-story-generation

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

Official
Advanced
vecearvecear

mocking-assistant

Automate MSW-based API and service mocks with fixtures and test overrides.

Community
Advanced
TheBushidoCollectiveTheBushidoCollective
187

storybook-story-writing

Create CSF3 Storybook stories with TypeScript-typed Meta and StoryObj.

Official
Intermediate