skills.rest
ForgePlan
ForgePlanOFFICIAL
Explore all skills by this author →
WebsiteGitHub

canvas-storybook-test

Automate Storybook story testing against design specifications with Vitest, axe-core, and Chromatic.

3|Updated Apr 3, 2026
Search Tags:#testing#accessibility#validation#storybook#ui-components
One-click install
npx skills add https://github.com/ForgePlan/marketplace --skill canvas-storybook-test
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: canvas-storybook-test
Source: https://github.com/ForgePlan/marketplace/tree/main/plugins/agents-canvas/skills/canvas-storybook-test
Command: npx skills add https://github.com/ForgePlan/marketplace --skill canvas-storybook-test

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires vitest, storybook, axe-core, chromatic, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill automates and validates Storybook tests against design specifications, ensuring consistency and accessibility without manual checks.

Core Features & Use Cases

  • Automated Testing: Validates Storybook stories against design requirements automatically.
  • Accessibility Checks: Ensures WCAG compliance and accessibility standards are met.
  • Use Case: For developers and QA engineers who want to automate the testing of UI components in Storybook to ensure they match design specifications and are accessible.

Quick Start

Use the canvas-storybook-test skill to run all tests for your storybook 'example-project'.

Frequently Asked Questions about canvas-storybook-test

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

FAQPage Schema
How do I automate Storybook testing and validation against design specifications?▼

Automate Storybook testing by validating stories against design specs covering visual parity, accessibility, interaction, and token fidelity. This ensures UI components match design requirements automatically without manual checks.

How do I run accessibility checks on UI components in Storybook?▼

Run accessibility checks on Storybook UI components using axe-core to ensure WCAG compliance and accessibility standards are met. This validates component interactions and visual parity automatically.

Do I need Vitest and Chromatic to validate Storybook stories?▼

Yes, validating Storybook stories requires Vitest, axe-core, and Chromatic to execute tests. These dependencies enable automated visual parity, interaction, and accessibility validation for UI components.

Can I use Storybook test automation for UI component development projects?▼

Storybook test automation applies directly to UI component development and Storybook-based projects. It validates component interactions, token fidelity, and visual parity against design specifications.

What is the best way to ensure visual parity between Storybook stories and design specs?▼

The best way to ensure visual parity is using Chromatic with Vitest to validate Storybook stories against design specifications. This covers token fidelity and interaction testing automatically.

Related Skills

Explore More Software Engineering Skills→
gaia-reactgaia-react
21

new-component

Scaffold React component structures with Vitest tests and Storybook stories.

Official
Intermediate
tabgabtabgab

opp-repl-feature-and-release-tests

Orchestrate opp_repl test suites and aggregate per-suite results for CI release gating.

Community
Advanced
rcellasrcellas

vitest-a11y

Write Vitest accessibility tests covering WCAG 2.2 and ARIA APG patterns.

Community
Advanced
MarcoAntoliniMarcoAntolini
1

playwright-testing

Automate end-to-end and component testing of web applications with Playwright.

Community
Advanced