CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl-labs/react-patterns

React patterns — always apply error boundaries, loading states, accessible markup, proper hooks, controlled forms, stable keys, and correct memoization

87

1.83x
Quality

80%

Does it follow best practices?

Impact

99%

1.83x

Average score across 5 eval scenarios

SecuritybySnyk

Passed

No known issues

Overview
Quality
Evals
Security
Files

criteria.jsonevals/scenario-5/

{
  "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
    }
  ]
}

evals

tile.json