storybook-stories

Generate and refactor Storybook stories following project patterns and design tokens.

567|82|Updated Mar 15, 2026

Search Tags:#testing #react #design system #frontend development #storybook #ui components

Ready to run

npx skills add https://github.com/pedronauck/skills --skill storybook-stories-pedronauck

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: storybook-stories
Source: https://github.com/pedronauck/skills/tree/main/skills/storybook-stories
Command: npx skills add https://github.com/pedronauck/skills --skill storybook-stories-pedronauck

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the creation and maintenance of Storybook stories, ensuring consistency, adherence to design system rules, and efficient documentation of UI components.

Core Features & Use Cases

Standardized Story Creation: Generates stories following established project patterns.
Design System Compliance: Enforces the use of base UI components and design tokens.
Use Case: When adding a new Button component to your project, use this Skill to generate its Button.stories.tsx file, ensuring it's correctly imported, configured, and styled according to your design system.

Quick Start

Use the storybook-stories skill to create a new story file for the Avatar component.

Frequently Asked Questions about storybook-stories

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

FAQPage Schema

How do I generate Storybook stories for React UI components?▼

To generate Storybook stories, use this Skill to automatically create and refactor story files adhering to project-specific patterns, ensuring consistent UI component representation and interactive examples within your Storybook environment.

How do I enforce design system rules when creating Storybook stories?▼

Enforce design system rules by using this Skill to generate stories that strictly adhere to base UI component usage, design tokens, and accessibility guidelines, ensuring standard representation and styling for your React frontend development.

How do I document a new Button component in Storybook?▼

Document a new Button component by generating its `Button.stories.tsx` file, which ensures the component is correctly imported, configured, and styled according to your established design system patterns and documentation requirements.

Can I use this to create interactive examples for design system components?▼

Yes, you can create interactive examples for design system components, as this Skill facilitates the generation of documentation and consistent UI component representation within the Storybook environment for your React project.

Do I need specific base UI components to build consistent Storybook stories?▼

Yes, building consistent Storybook stories requires adherence to project-specific `@compozy/ui` component usage, design tokens, and accessibility guidelines to ensure standardized creation and accurate documentation of your UI components.