skills.rest
pedronauck
pedronauckCOMMUNITY
Explore all skills by this author →
Website𝕏@pedronauckGitHub

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
One-click install
npx skills add https://github.com/pedronauck/skills --skill storybook-stories-pedronauck
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
bkywksjbkywksj
309

ui-frontend

Define standardized React UI patterns for Tauri desktop apps.

Community
Intermediate
Ayushman-11Ayushman-11

ui-visual-validator

Validate UI modifications through visual regression testing and design system compliance.

Community
Advanced
ilandahanilandahan
9

atomic-design

Extract Figma design tokens and scaffold atomic UI components.

Community
Advanced
HouseGarofaloHouseGarofalo
3

storybook

Document and test React UI components with Storybook stories and MDX.

Official
Intermediate