React patterns — always apply error boundaries, loading states, accessible markup, proper hooks, controlled forms, stable keys, and correct memoization
87
80%
Does it follow best practices?
Impact
99%
1.83xAverage score across 5 eval scenarios
Passed
No known issues
{
"context": "Tests whether the agent proactively applies React best practices when building a todo list, without being told to. The task says nothing about key props, accessibility, validation feedback, or memoization -- the agent should apply these patterns on its own.",
"type": "weighted_checklist",
"checklist": [
{
"name": "Stable keys not index",
"description": "Todo items rendered in .map() use a stable unique identifier (generated id, UUID, or incrementing counter) as the key prop, NOT the array index. Using key={index} or key={i} is a failure even if items are not explicitly reorderable, because todos can be deleted and inserted.",
"max_score": 16
},
{
"name": "Controlled input for new todo",
"description": "The text input for adding todos is a controlled component with its value bound to state via value={...} and an onChange handler.",
"max_score": 10
},
{
"name": "Form prevents default",
"description": "The form or input handler calls e.preventDefault() to prevent page reload on submit.",
"max_score": 8
},
{
"name": "Empty input validation",
"description": "The component validates that the input is not empty or whitespace-only before adding a todo. Shows feedback or simply prevents submission of blank items.",
"max_score": 10
},
{
"name": "Accessible delete/toggle buttons",
"description": "Delete and toggle buttons have meaningful accessible text -- either visible text content, aria-label, or aria-labelledby that identifies what action the button performs and on which item. Icon-only buttons without labels are a failure.",
"max_score": 14
},
{
"name": "role=alert on validation errors",
"description": "Any validation error message (e.g. for empty input) uses role=\"alert\" so screen readers announce it. The agent was NOT asked about accessibility.",
"max_score": 12
},
{
"name": "aria-required on todo input",
"description": "The required todo text input has aria-required=\"true\". The agent was NOT asked about accessibility.",
"max_score": 10
},
{
"name": "Remaining count not in useEffect",
"description": "The remaining/incomplete count is computed during render (inline or with useMemo), NOT via useEffect updating a separate state variable.",
"max_score": 10
},
{
"name": "TypeScript interfaces for props",
"description": "Component props and the Todo type are defined with TypeScript interfaces. No use of 'any'.",
"max_score": 6
},
{
"name": "Props destructured in signature",
"description": "Function components destructure their props in the function parameter.",
"max_score": 4
}
]
}