Use this skill whenever the user asks you to write, edit, review, refactor, debug, or design TypeScript or TSX code. It is especially relevant for application code, backend routes, React/UI work, schemas, runtime boundaries, persistence, async workflows, API contracts, tests, lint/typecheck fixes, and code review. Apply it even when the user does not explicitly mention "TypeScript" if the files or project are TypeScript-based.
89
85%
Does it follow best practices?
Impact
95%
1.26xAverage score across 5 eval scenarios
Passed
No known issues
{
"context": "Tests whether the agent refactors TSX UI code around typed state, accessible controls, derived data, named feature logic, and UI-focused tests. The starter component mixes server data, form input, async status, and policy decisions.",
"type": "weighted_checklist",
"checklist": [
{
"name": "Small state",
"description": "Removes duplicated derived local state for values that can be calculated from props, form input, or existing state.",
"max_score": 8
},
{
"name": "Async union",
"description": "Models submit or invite request state with a discriminated union rather than several loosely related booleans.",
"max_score": 10
},
{
"name": "Exhaustive render",
"description": "Handles all variants of the UI state explicitly in rendering or helper logic so a new state would be caught by TypeScript.",
"max_score": 8
},
{
"name": "Feature logic",
"description": "Moves non-trivial invite eligibility, normalization, or recipient shaping into named feature-owned functions rather than leaving it inline in the component.",
"max_score": 8
},
{
"name": "Small handlers",
"description": "Keeps event handlers small and delegates meaningful work to named functions.",
"max_score": 8
},
{
"name": "State separation",
"description": "Keeps form state, server data, and local UI request state conceptually separate in types and variables.",
"max_score": 8
},
{
"name": "No mirror",
"description": "Does not mirror server-provided team members into local state unless they are locally editable with a clear synchronization plan.",
"max_score": 8
},
{
"name": "Semantic controls",
"description": "Uses semantic form elements and buttons for interactive controls instead of custom div controls.",
"max_score": 8
},
{
"name": "Optional absence",
"description": "Represents internal absence with optional properties or undefined rather than nullable UI fields unless null is externally meaningful.",
"max_score": 8
},
{
"name": "Named exports",
"description": "Uses named exports for application code unless the framework convention requires otherwise.",
"max_score": 6
},
{
"name": "UI tests",
"description": "Adds focused tests around user-visible behavior and accessibility-relevant states, without snapshot-only tests or private implementation assertions.",
"max_score": 12
},
{
"name": "No new package",
"description": "Does not add a dependency for simple form, state, or collection helpers that existing React and TypeScript can handle.",
"max_score": 8
}
]
}