CtrlK
BlogDocsLog inGet started
Tessl Logo

base/typescript-engineering

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

1.26x
Quality

85%

Does it follow best practices?

Impact

95%

1.26x

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

evals

SKILL.md

tile.json