storybook-stories

Create consistent Storybook stories with meta typing, render/args patterns, and decorators.

2.5k|134|Updated Mar 28, 2026
One-click install
npx skills add https://github.com/compozy/compozy --skill storybook-stories-compozy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: storybook-stories
Source: https://github.com/compozy/compozy/tree/main/.agents/skills/storybook-stories
Command: npx skills add https://github.com/compozy/compozy --skill storybook-stories-compozy

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Storybook story creation and maintenance often lacks consistency across components, leading to fragmented documentation and inconsistent UI demos.

Core Features & Use Cases

  • Enforces consistent Storybook patterns across the component library, ensuring proper structure, docs, and interactive examples.
  • Guides meta, imports, and typing to produce concise, well-typed stories aligned with project standards.
  • Supports both component and system stories with appropriate render or args-based definitions and decorator usage for centering and layout.

Quick Start

Write a new story by following the project's standard Storybook conventions and place it under the appropriate stories/ folder.

Frequently Asked Questions about storybook-stories

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

FAQPage Schema
How do I standardize Storybook stories across a component library?▼

Standardize Storybook stories by applying consistent meta typing, render and args patterns, and decorators across components. This enforces design-token usage and accessibility guidelines while ensuring concise, well-documented component and system stories.

What is the best way to structure Storybook component stories with proper typing?▼

The best way to structure Storybook stories is by using proper meta typing alongside appropriate render or args-based definitions. This ensures stories are concise, well-typed, and aligned with project standards for both component and system demos.

How do I add decorators to Storybook stories for layout and centering?▼

Add decorators to Storybook stories by applying appropriate render or args-based definitions that support centering and layout. This ensures consistent structural patterns across both component and system stories within the project.

Can I use Storybook stories to enforce design-token usage and accessibility guidelines?▼

Yes, you can enforce design-token usage and accessibility guidelines within Storybook stories. Creating stories with standardized patterns ensures consistent documentation and interactive examples that align with project accessibility standards.

Does this Storybook story generation approach support both component and system stories?▼

Yes, this Storybook story generation approach supports both component and system stories. It provides appropriate meta typing, render or args patterns, and decorators to ensure consistent documentation across all levels of the UI library.