skills.rest
david-nossebro
david-nossebroCOMMUNITY
Explore all skills by this author →
GitHub

storybook-expert

Fix fragile Storybook stories and tests to match the repo's setup.

Updated May 3, 2026
Search Tags:#testing#accessibility#chromatic#storybook#visual regression#interaction testing#vitest addon
One-click install
npx skills add https://github.com/david-nossebro/agent-commons --skill storybook-expert
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: storybook-expert
Source: https://github.com/david-nossebro/agent-commons/tree/main/shared/skills/storybook-expert
Command: npx skills add https://github.com/david-nossebro/agent-commons --skill storybook-expert

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It helps you reliably research, design, implement, and debug Storybook stories and Storybook-driven tests instead of guessing Storybook APIs or ending up with flaky, inaccessible, or visually unstable UI checks.

Core Features & Use Cases

  • Story-first testing: treat stories as reusable test cases for development, review, and automation rather than writing disconnected tests.
  • Correct test-stack selection: choose the right approach for the task (Vitest addon on Vite Storybook, the Storybook test-runner otherwise, accessibility checks via the a11y addon, and visual testing via Visual Tests/Chromatic).
  • Deterministic interactions and audits: implement robust play interactions with accessible queries and awaited assertions, configure parameters.a11y.test intentionally, and keep visual baselines stable.

Quick Start

Use the storybook-expert skill to add missing Storybook states and play interaction tests that run consistently with your repo’s existing testing and CI setup.

Frequently Asked Questions about storybook-expert

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

FAQPage Schema
How do I fix flaky Storybook interaction tests in my CI pipeline?▼

Fix flaky Storybook interaction tests by ensuring deterministic async behavior using awaited userEvent actions and assertions within your play functions. This aligns test execution with your repo's existing Storybook setup to prevent timing-related failures in CI.

What is the best way to run accessibility audits in Storybook?▼

Run accessibility audits in Storybook using the a11y addon and configuring parameters.a11y.test intentionally. This approach ensures user-centric accessible queries are validated consistently during story development and review.

Should I use the Vitest addon or the Storybook test-runner for component testing?▼

Use the Vitest addon for Vite-based Storybook setups, and the Storybook test-runner otherwise. Correct test-stack selection depends on your build tool and ensures proper CI alignment for visual and interaction testing.

How do I write Storybook stories that cover all component states for visual regression?▼

Write Storybook stories that cover all component states by adopting a story-first testing approach. Treat stories as reusable test cases for development and automation to maintain stable visual baselines for Chromatic and visual regression workflows.

Why are my Storybook visual regression tests failing unexpectedly?▼

Storybook visual regression tests fail unexpectedly when implementations are misaligned with the repo's Storybook setup or visual baselines are unstable. Ensure deliberate selection between visual test workflows and correct CI alignment to keep visual checks stable.

Related Skills

Explore More Software Engineering Skills→
TheBushidoCollectiveTheBushidoCollective
187

storybook-configuration

Configure Storybook main and preview files with addons and framework-specific builders.

Official
Intermediate
messebmesseb

storybook

Develop, document, and test UI components in isolation with Storybook.

Community
Intermediate
yonatangrossyonatangross
217

storybook-testing

Test Storybook 9/10 components with Vitest, play() interactions, and Chromatic TurboSnap.

Community
Intermediate
rnavarychrnavarych
14

role-aqa:e2e-testing

Guide end-to-end test automation across Playwright, Cypress, Selenium, and WebdriverIO.

Community
Advanced