React & TypeScript Component Generation Scorecard

Standardized evaluation rubric scoring AI-generated UI components on TypeScript strictness, WCAG accessibility, performance, and responsive styling.

Tags: evals, react, typescript, accessibility, scorecard, ui-testing

Category: coding

Author: SimplyUtils Team

React & TypeScript Component Generation Scorecard

Scoring Rubric (100 Points Total)

1. TypeScript & Type Safety (25 pts)

[ ] Zero any or unvalidated type assertions.
[ ] Exported prop interface with accurate JSDoc comments.
[ ] Proper event handler typing (e.g. React.MouseEvent<HTMLButtonElement>).

2. Accessibility & ARIA (25 pts)

[ ] All interactive elements are keyboard focusable (tabIndex={0}).
[ ] Proper semantic landmarks (<main>, <nav>, <header>).
[ ] ARIA states (aria-expanded, aria-selected, aria-busy) bound to dynamic state.

3. Styling & Responsive Design (25 pts)

[ ] Looks polished on 390px mobile viewport through 1440px desktop.
[ ] Dark mode support verified with appropriate semantic color tokens.

4. Performance & Lifecycle (25 pts)

[ ] No unmemoized expensive loops in render path.
[ ] Proper cleanup functions in useEffect (event listeners, timers).