component-validator

What problem does it solve?

Validates UI components after implementation to catch quality issues early. It ensures post-implementation checks happen consistently across teams, reducing regressions.

Core Features & Use Cases

• TypeScript Validation: Ensures proper typing, explicit returns, and no compile errors before release.
• Design Token Usage: Verifies components use tokens instead of hard-coded values for consistency.
• Responsive Validation: Checks layouts across mobile, tablet, and desktop breakpoints.
• Accessibility Validation: Verifies contrast, focus, alt text, keyboard navigation, and ARIA labeling.
• Quality Gate for Each Section: Runs after each section to prevent regression and ensure design alignment.

Quick Start

Use this skill after implementing a section to trigger validations. Start by running TypeScript checks and accessibility audits, then review the design-token usage and responsive behavior using your standard CI checks.