Skills
.Work. You
Rest

storybook-scaffolder

Community

Scaffold Storybook stories, visualize components.

#typescript#frontend#react#design system#scaffolding#component library#storybook#ui development
Authorokgoogle13
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Manually creating Storybook .stories.tsx files for every new React component is a repetitive task that can slow down development. This skill automates the scaffolding, ensuring consistent story definitions and accelerating UI development.

Core Features & Use Cases

  • Automated Story Creation: Generates a new Storybook file (.stories.tsx) for an existing React component, including Meta and StoryObj boilerplate.
  • Intelligent Pathing: Automatically determines component name, import path, and story title from the provided component file path.
  • Placeholder for Args: Provides TODO comments for defining argTypes and args, guiding the user to complete the story's interactive properties.
  • Use Case: When developing new UI components, use this skill to quickly create their Storybook stories, enabling isolated development, visual testing, and documentation for your design system.

Quick Start

Create a Storybook story for the 'MyButton' component located at 'src/components/Common/MyButton/MyButton.tsx'.

Dependency Matrix

Required Modules

@storybook/react

Components

Standard package

💻 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: storybook-scaffolder
Download link: https://github.com/okgoogle13/careercopilot/archive/main.zip#storybook-scaffolder

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.