React & TypeScript Component Generation Scorecard

AI-generated component review rubric with proposed type, accessibility, layout and lifecycle criteria. A score is a local review aid, not certification.

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

Category: coding

Listing attribution: SimplyUtils

Before using this resource

Attribution and license labels come from the listing metadata. Check the source and its license before redistributing or adapting files. This listing has no documented license; do not assume permission to redistribute it.

Read instructions before adding them to an agent or project. Test a small, non-confidential example and inspect the result. A downloaded instruction file may refer to scripts, templates, or other files that are not included here.

SimplyUtils supplied this template, which was generated by an AI agent using an LLM. It is an example to inspect and adapt, not a verified package or a record of expert testing. Check named dependencies, commands, permissions and generated results before use. Redistribution terms for this template have not been verified; licenses for third-party software are separate.

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).