component-quality-gate

Paste the TSX or JSX component and request a quality gate review. The audit checks TypeScript props, WCAG AA accessibility, performance patterns, tests, Storybook stories, and error/loading states, then returns issues with fixes and corrected code.

Use Vitest with Testing Library and jest-axe to run an axe scan on the rendered component and assert zero violations. The generated test template also covers rendering, user interactions via userEvent, and keyboard navigation checks.

Yes, the audit covers both React and Next.js components. It checks Next.js-specific patterns such as next/image usage with width, height, and priority attributes, plus lazy loading and avoiding synchronous data fetching in render.

It catches missing accessible names on interactive elements, color-only information conveyance, suppressed focus rings, incorrect ARIA patterns for dialogs and comboboxes, missing image alt text, and touch targets smaller than 44x44 pixels.

The gate targets individual component review, not full-page or application-level audits. For architecture-wide concerns like routing, state management, or end-to-end flows, use broader design or testing strategy reviews instead.