components-auditor
OfficialAudit component quality and accessibility
Software Engineering#code quality#testing#accessibility#design system#storybook#visual regression#component audit
AuthorStack-and-Flow
Version1.0.0
Installs0
System Documentation
What problem does it solve?
It prevents design-system components from drifting from the shared contract by systematically checking code structure, Storybook conventions, test coverage, visual state completeness, and accessibility requirements before changes ship.
Core Features & Use Cases
- Component contract enforcement: Verifies the required 6-file pattern, file responsibilities, TypeScript/public prop typing rules, CVA placement, named exports, and token usage consistency.
- Storybook and testing quality gates: Confirms JSDoc Storybook conventions, disallows unsupported docs configuration, and ensures tests cover hook logic, DOM behavior, ARIA, interaction/keyboard behavior, and disabled states.
- Visual and accessibility verification: Runs the full visual review protocol (focus/contrast, motion, gradients/transitions, touch target) and ensures reduced motion and accessibility gates are satisfied.
Quick Start
Use the components-auditor skill to review an existing component directory against the component contract, Storybook/test references, and the visual review protocol before submitting a PR.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: components-auditor Download link: https://github.com/Stack-and-Flow/design-system/archive/main.zip#components-auditor Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.