storybook

Configure Storybook environments and author CSF3 stories for React applications.

3|Updated Apr 12, 2026

Search Tags:#testing #accessibility #frontend #react #nextjs #vite #storybook

Ready to run

npx skills add https://github.com/mauriciodelrio/delriodev-skills --skill storybook-mauriciodelrio

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: storybook
Source: https://github.com/mauriciodelrio/delriodev-skills/tree/main/es-skills/software/frontend/storybook
Command: npx skills add https://github.com/mauriciodelrio/delriodev-skills --skill storybook-mauriciodelrio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill tackles the complexity of configuring Storybook for React projects and authoring interactive stories, ensuring consistent documentation, accessibility, and testing without manual errors.

Core Features & Use Cases

Setup and Configuration: Handles initialization for Vite or Next.js, including addons for accessibility, themes, and interactions.
CSF3 Story Writing: Guides creation of typed stories with args, play functions, and autodocs for component variants.
Use Case: For a design system, use this Skill to generate stories for a Button component that demonstrate states like default, disabled, and loading while validating WCAG compliance and running interaction tests.

Quick Start

Use this skill to set up Storybook and write a story for the new Header component in the Next.js app.

Frequently Asked Questions about storybook

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

FAQPage Schema

How do I set up Storybook in a Next.js or Vite React project?▼

Storybook setup for React projects involves initializing the environment for Vite or Next.js, including addons for accessibility, themes, and interactions. This configuration ensures UI documentation and testing function without manual errors.

How do I write CSF3 stories with play functions for component interaction testing?▼

Writing CSF3 stories involves creating typed stories with args, play functions, and autodocs for component variants. This format enables interaction testing by simulating user events and validating component states directly in Storybook.

Can I validate accessibility and WCAG compliance using Storybook?▼

Accessibility validation in Storybook uses addon integration to check WCAG compliance during component development. It automatically tests UI components against accessibility rules, ensuring design system variants meet required standards.

Does Storybook test-storybook work with CI pipelines for visual testing?▼

Storybook test-storybook supports CI-compatible testing by running interaction tests and visual validation automatically. This integration allows frontend workflows to catch UI regressions and verify component behavior during continuous integration.

What is the best way to document React component states like disabled and loading in Storybook?▼

Documenting React component states in Storybook uses CSF3 format to define args for variants like default, disabled, and loading. Autodocs automatically generates documentation from these stories, showcasing interactive states for design systems.