storybook-stories

Create and refactor Storybook stories for React components with consistent metadata.

Updated May 28, 2026

Search Tags:#documentation #react #storybook #design-system #ui-components #component-stories

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill eliminates inconsistent, low-quality Storybook stories by standardizing how components are documented, composed, and presented in the UI library.

Core Features & Use Cases

Consistent Story Structure: Creates Storybook stories with the correct file placement, meta configuration, and export patterns.
Design System Compliance: Enforces use of base UI components from @agh/ui, design tokens, and approved project rules.
Component Documentation: Supports clear examples for simple and compound components, including interactive cases that need render functions.
Use Case: A developer adding a new dialog or button can use this Skill to produce concise, accessible stories that match the repository’s conventions.

Quick Start

Ask the AI to create a Storybook story for a component using the repository’s standard patterns, base UI components, and design system rules.

Frequently Asked Questions about storybook-stories

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

FAQPage Schema

How do I create consistent Storybook stories for React components?▼

To create consistent Storybook stories for React components, use a standardized pattern that defines correct file placement, meta configuration, and export structures. This ensures component documentation remains uniform across the UI library.

How do I structure Storybook stories for compound React components?▼

Structuring Storybook stories for compound React components requires using render functions to compose interactive examples. This approach accurately documents complex component composition and maintainable visual demos.

Does this approach to Storybook stories enforce design system compliance?▼

Yes, this approach to Storybook stories enforces design system compliance by requiring adherence to base UI components from @agh/ui, design tokens, and approved project rules. This guarantees all visual demos match repository conventions.

What is the best way to maintain Storybook meta typing without autodocs?▼

The best way to maintain Storybook meta typing without autodocs is to apply explicit Storybook meta typing alongside concise story patterns. This eliminates inconsistent metadata while keeping interactive examples accurate.

Why do my Storybook stories have inconsistent metadata and structure?▼

Your Storybook stories have inconsistent metadata and structure because they lack standardized file placement and meta configuration. Applying a consistent story pattern with explicit typing resolves these low-quality documentation issues.