skills.rest
ceasarXuu
ceasarXuuCOMMUNITY
Explore all skills by this author →
GitHub

storybook-skills-standard

Designs and audits Storybook stories, mocks, docs, and quality gates for component-driven frontend workflows.

3|Updated Mar 20, 2026
Search Tags:#accessibility#design system#storybook#visual regression#msw#csf#component-driven development
One-click install
npx skills add https://github.com/ceasarXuu/AstartesSkills --skill storybook-skills-standard-ceasarxuu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: storybook-skills-standard
Source: https://github.com/ceasarXuu/AstartesSkills/tree/main/skills/storybook-skills-standard
Command: npx skills add https://github.com/ceasarXuu/AstartesSkills --skill storybook-skills-standard-ceasarxuu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Frontend teams often treat Storybook as a loose demo gallery, leaving stories disconnected from tests, docs, accessibility checks, and PR review. This Skill turns Storybook into a governed execution surface where every story is a stable, reviewable UI state. ## Core Features & Use Cases - Story Map and State Matrix Planning: Builds a component tree, state matrix (default, loading, empty, error, boundary), and interaction matrix before any story is written. - Story Granularity and Authoring Standards: Classifies work into Foundations, Primitive, Pattern, Screen, and Connected layers, then authors modern CSF with TypeScript, args, decorators, globals, and MSW mocks. - Quality Gates and Review Workflow: Binds autodocs, play functions, a11y checks, visual baselines, and PR review links to stories, with a Definition of Done and red-flag audit list. - Use Case: When adding a new OrdersPage, use this Skill to produce a Story Map, write Loaded/Empty/Error stories with MSW handlers, and define the a11y and visual regression gates for the PR. ## Quick Start Ask the agent to design or audit Storybook stories for your component or page, including a Story Map, mock strategy, and quality gates.

Frequently Asked Questions about storybook-skills-standard

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

FAQPage Schema
How do I structure Storybook stories for a design system?▼

Organize stories into layers: Foundations for tokens, Primitive for reusable units like Button, Pattern for task components like LoginForm, and Screen for page states. Use clear sidebar titles such as Components/Button and keep one story per concept.

How to mock API requests in Storybook stories?▼

Use MSW with the msw-storybook-addon to intercept network requests per story via parameters.msw handlers. Stories must never connect to real backends, real login state, or unstable third-party services.

When should I use args versus loaders in Storybook?▼

Use args for user-visible state and Controls, decorators for context, and mocks for external dependencies. Loaders are a last resort for async data preparation that args, decorators, and mocks cannot reasonably express.

Does this Storybook standard work with Vue or Angular?▼

The principles apply to Vue, Angular, and Web Components, though the included examples use React with TypeScript and Vite. Verify version-specific API behavior against official Storybook docs for your framework.

What states should a page-level Storybook story cover?▼

Screen stories must cover Loaded, Loading, Empty, and Error states, plus Permission where applicable. Pattern stories need a default or empty state, a success flow, error or validation, and key interactions.

Why should accessibility testing not be turned off in Storybook?▼

The standard sets a11y to error by default so violations block delivery. Use todo only for tracked debt with a follow-up item, and off only for documented exceptions such as intentional anti-pattern demos.

Related Skills

Explore More Software Engineering Skills→
vladolaruvladolaru
6

using-figma

Translate Figma nodes and tokens into a tokenized design specification and implementation plan.

Community
Advanced
sugar-cat7sugar-cat7

vrt-testing

Implement deterministic visual regression tests for Storybook components using Playwright.

Community
Intermediate
gabrielnsmntogabrielnsmnto
3

build-component

Generates React TypeScript components with cva variants, tests, and Storybook stories from design tokens.

Community
Advanced
leonardoteodorooleonardoteodoroo

e2e-testing-patterns

Automate end-to-end testing patterns for Playwright and Cypress workflows.

Community
Advanced