CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl-labs/frontend-state-management

Proactively choose the right state management pattern: derived state, URL state, server state, local state, lifted state, Context, or external store. Always apply without being asked.

84

1.16x
Quality

76%

Does it follow best practices?

Impact

97%

1.16x

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 correct state management patterns when building a directory app with search, filters, pagination, a detail modal, and derived stats. The task describes only business requirements -- the agent must choose the right state pattern for each concern without being told.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Search and filters in URL params",
      "description": "Search query, department filter, location filter, sort order, and current page number use URL search params (useSearchParams or equivalent), NOT useState. Users can share or bookmark a filtered directory URL and refresh without losing state.",
      "max_score": 18
    },
    {
      "name": "Filtered list computed not stored",
      "description": "The filtered, sorted, and paginated list of members is derived from the full data plus the current URL filter/sort/page values using inline computation or useMemo, NOT stored in a separate useState synced via useEffect.",
      "max_score": 16
    },
    {
      "name": "Stats computed not stored",
      "description": "The displayed member count, total count, and unique department count are computed inline or with useMemo from the filtered data, NOT stored in separate useState variables.",
      "max_score": 16
    },
    {
      "name": "Team data fetched in custom hook",
      "description": "Team member data is fetched in a custom hook (useTeamMembers or similar) or data-fetching library, NOT stored in React Context or a global store. The hook manages loading, error, and data states.",
      "max_score": 14
    },
    {
      "name": "Fetch cleanup with AbortController",
      "description": "The data-fetching useEffect includes AbortController or cancelled flag in its cleanup function to prevent stale responses.",
      "max_score": 12
    },
    {
      "name": "Modal state local to component",
      "description": "The member detail modal's open/close state and the selected member ID are managed with useState in the component that owns the modal, NOT in a global store, Context, or URL params.",
      "max_score": 12
    },
    {
      "name": "Loading and error states handled",
      "description": "The directory renders distinct loading UI while data is being fetched, and an error message when the fetch fails.",
      "max_score": 6
    },
    {
      "name": "No Context or global store used",
      "description": "The app does NOT use React Context or an external store (Zustand, Redux) for any state, since all state is either URL-based, server-fetched, derived, or local UI. There is no cross-cutting shared client state in this app.",
      "max_score": 6
    }
  ]
}

evals

tile.json