skills.rest
alvis
alvisCOMMUNITY
Explore all skills by this author →
Website𝕏@alvishttangGitHub

storybook

Audit Storybook instances for setup failures, accessibility violations, and visual regressions.

4|1|Updated Jul 31, 2025
Search Tags:#accessibility#a11y#screenshots#audit#storybook#component testing#visual regression
One-click install
npx skills add https://github.com/alvis/.agents --skill storybook-alvis
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: storybook
Source: https://github.com/alvis/.agents/tree/main/plugins/web/skills/storybook
Command: npx skills add https://github.com/alvis/.agents --skill storybook-alvis

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires jq, curl, agent-browser, imagemagick, claude, and includes scripts (resource) components.

What problem does it solve? Storybook components can ship with broken renders, missing focus indicators, accessibility violations, and interaction failures that manual review misses. This Skill automates a full audit of a running Storybook instance and produces a prioritized P0/P1/P2 report with evidence. ## Core Features & Use Cases - Setup smoke checks: Detects Storybook in package.json, starts or reuses the server, and verifies the index, sidebar, and sampled story renders. - Per-story state capture: Screenshots default, hover, active, and focus-visible states, deduplicating visually identical states via ImageMagick pHash. - Addon panel scraping: Harvests addon-a11y violations and addon-interactions results, degrading gracefully when addons are absent. - Visual grounding and reporting: Uses a model to review retained screenshots, then aggregates all findings into report.md and report.json with severity bucketing. - Use Case: Before a release, run the audit against your component library to catch render crashes, missing focus rings, and a11y violations across every story without editing any component code. ## Quick Start Audit the Storybook in this project on port 6006 and give me the prioritized report.

Frequently Asked Questions about storybook

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

FAQPage Schema
How do I audit a Storybook instance for accessibility violations?▼

Run the audit lifecycle against your project: it detects Storybook in package.json, starts the server, scrapes the addon-a11y panel per story, and buckets violations by impact into a P0/P1/P2 report. Serious and critical impacts become P0 blockers.

How to test hover, active, and focus-visible states in Storybook?▼

The capture-states script navigates each story iframe, synthesizes hover, mousedown, and focus events on the primary interactive element, and screenshots each state. Identical states are deduplicated via ImageMagick pHash, and a missing focus-visible indicator is recorded as a finding.

Does this work if the a11y or interactions addons are not installed?▼

Yes. Panel scraping records available:false when optional addons are absent and treats it as reduced coverage rather than a failure. The audit still completes with smoke, state, and grounding evidence, returning a partial result.

What tools are required to run a Storybook audit?▼

The scripts require jq, curl, agent-browser, and ImageMagick, plus claude only for the optional visual grounding step. A Chrome DevTools Protocol session must be confirmed with list_pages before scripts that need CDP.

Can the audit fix the issues it finds in my components?▼

No. The audit is strictly read-only: components, stories, and configuration stay untouched. It reports findings with evidence paths and severity so owners can fix them separately.

Why does the audit report partial instead of success?▼

A partial result means optional addons, ImageMagick, grounding, states, or panel evidence were unavailable but a useful report still exists. Success requires complete coverage of every selected story.

Related Skills

Explore More Software Engineering Skills→
cromesdkcromesdk

angular-storybook-setup

Install and configure Storybook with addons for Angular 20 Tailwind CSS applications.

Official
Advanced
ElvinOuyangElvinOuyang

adversarial-review-cycle

Run two-pass adversarial reviews with severity classification and ship-or-spin gating.

Community
Advanced
AradotsoAradotso
4

agent-react-devtools

Inspects live React component trees, props, state, hooks, and rendering performance.

Official
Intermediate
partme-aipartme-ai
610

cypress

Guide Cypress end-to-end and component testing with CI/CD configuration.

Official
Intermediate