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

{
  "context": "Tests whether the agent proactively applies correct state management patterns when building a multi-step form. The task describes only business requirements -- the agent must keep form state local, derive validation, use object state for many fields, and handle submission correctly without being told.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Form state local not global",
      "description": "All form input state (field values across all steps) is managed locally within the wizard component or its children using useState or useReducer, NOT in React Context or a global store. Form data may be lifted to the wizard parent for cross-step access, but must not be in a Provider or external store.",
      "max_score": 18
    },
    {
      "name": "Validation derived not stored",
      "description": "Validation results (isValid, field-level error messages for format/length/match checks, whether Next button is disabled) are computed from current form values, NOT stored in a separate useState that is synced via useEffect. There must be no useEffect that watches form fields and sets validation state.",
      "max_score": 18
    },
    {
      "name": "Object state or useReducer for many fields",
      "description": "For steps with 4+ fields, the agent uses a single state object (useState with an object) or useReducer rather than individual useState calls per field. A generic update function handles field changes.",
      "max_score": 16
    },
    {
      "name": "Submission loading state prevents double submit",
      "description": "The form tracks a submitting/loading boolean that disables the submit button during the async POST to /api/register, preventing double submission.",
      "max_score": 12
    },
    {
      "name": "Server errors displayed with role=alert",
      "description": "Submission errors from the server are displayed to the user, and error messages use role=\"alert\" or equivalent for accessibility. Errors are cleared when the user takes corrective action.",
      "max_score": 12
    },
    {
      "name": "Form state not in URL",
      "description": "Form input values are NOT stored in URL search params. The current step number may optionally be in the URL, but field values mid-editing must remain in component state.",
      "max_score": 10
    },
    {
      "name": "Step navigation state colocated",
      "description": "The current step index is managed locally in the wizard component (useState), not in a global store or Context.",
      "max_score": 8
    },
    {
      "name": "No server data in Context",
      "description": "If any server data is fetched (e.g. dropdown options for industry/language), it is fetched in a custom hook, NOT stored in React Context.",
      "max_score": 6
    }
  ]
}

evals

tile.json