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-1/

{
  "context": "Tests whether the agent proactively applies React best practices when building a dashboard, without being told to. The task says nothing about error boundaries, loading states, accessibility, or cleanup -- the agent should add these on its own.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Error boundary wraps dashboard",
      "description": "An ErrorBoundary class component (with getDerivedStateFromError and componentDidCatch) wraps the Dashboard or is placed at the route/app level. The agent was NOT asked to add error boundaries.",
      "max_score": 14
    },
    {
      "name": "Error boundary fallback has role=alert",
      "description": "The ErrorBoundary's fallback UI uses role=\"alert\" so screen readers announce the failure state. The agent was NOT asked about accessibility.",
      "max_score": 10
    },
    {
      "name": "Loading state rendered",
      "description": "A distinct loading UI (spinner, skeleton, or loading text) is rendered while data is being fetched. The agent was NOT asked to handle loading states.",
      "max_score": 12
    },
    {
      "name": "Error state with retry and role=alert",
      "description": "An error message is rendered when the fetch fails, with a retry button/action, and the error container uses role=\"alert\". The agent was NOT asked to handle errors or make them accessible.",
      "max_score": 14
    },
    {
      "name": "Empty state handled",
      "description": "A meaningful message is shown when the stats array is empty (e.g. 'No stats available'), rather than rendering an empty grid or nothing. The agent was NOT asked to handle empty states.",
      "max_score": 10
    },
    {
      "name": "useEffect cleanup prevents stale updates",
      "description": "The data-fetching useEffect returns a cleanup function (cancelled flag or AbortController) to prevent state updates after unmount. The agent was NOT asked about cleanup.",
      "max_score": 12
    },
    {
      "name": "Stable unique keys on stat cards",
      "description": "Stat cards rendered in a .map() use item.id (or another stable unique identifier) as the key prop, NOT the array index.",
      "max_score": 10
    },
    {
      "name": "Error state cleared on success",
      "description": "The error state is reset (set to null) when a successful fetch occurs, so stale error messages don't persist.",
      "max_score": 8
    },
    {
      "name": "TypeScript interfaces for props",
      "description": "All component props are typed 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

scenario-1

criteria.json

task.md

tile.json