Skip to content
Back to skills

Refactor Typescript

ASecurity

TypeScript norms: no `any`, no cast to silence the checker, strict flags on, and domain types that make an illegal state unrepresentable. Use when editing TypeScript files.

  • 4 stars
  • 0 votes
  • 0 copies
  • 2 views
  • Added October 1, 2026
ai-agentstypescriptreactrefactoringapifrontenddocumentation

Works with

  • api

Security analysis

A100/100

Scanned October 1, 2026

npx -y skills add Univers42/claude-deal-with-the-devil --skill refactor-typescript --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Refactor Typescript?

Add the live security badge to your README. It updates with every re-scan.

Security grade badge for Refactor Typescript
[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/univers42-refactor-typescript/badge)](https://www.skillsdirectory.com/skills/univers42-refactor-typescript)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

Download with Pro
SKILL.md
---
# GENERATED by 'devil export gemini' from the kit's Claude-format sources. Do not edit; run 'devil export gemini' instead.
name: refactor-typescript
description: >
  TypeScript norms: no `any`, no cast to silence the checker, strict flags on, and domain
  types that make an illegal state unrepresentable. Use when editing TypeScript files.
paths:
  - "**/*.ts"
  - "**/*.tsx"
user-invocable: false
metadata:
  stage: rule
  since: "1.0.0"
---

# TypeScript Refactoring

## Types are the point — don't opt out of them

- **No `any`.** Use `unknown` and narrow. An `any` that must stay carries an issue link
  and a one-line reason, like any suppression (`rules/quality-bar.md`).
- No `as` to silence the compiler. A cast is a claim you are right and the checker is
  wrong; prove it with a type guard instead. `as const` and `satisfies` are fine.
- No non-null `!`. If it cannot be null, the type should say so; if it can, handle it.
- `strict: true`, plus `noUncheckedIndexedAccess`, `exactOptionalPropertyTypes`,
  `noImplicitOverride`, `noFallthroughCasesInSwitch`. `arr[i]` is `T | undefined` and
  that is correct.
- Model the domain so illegal states are unrepresentable: a discriminated union beats
  four optional fields and a comment explaining which combinations are valid.
- Validate anything crossing the boundary at runtime — `zod`/`valibot` on API input,
  env vars and parsed JSON. A TypeScript type is erased at runtime; it is documentation
  the compiler checks, not a guard.

## Structure

- Max 40 lines per function; max 4 parameters, then an options object.
- Named exports only. A default export renames itself at every import site.
- No barrel `index.ts` re-exporting a whole tree — it breaks tree-shaking and creates
  import cycles. Import from the module.
- One concern per file; a file over 300 lines is at least two modules.
- `readonly` on anything that is not mutated, arrays included (`readonly T[]`).

## Async

- Every promise is awaited or explicitly `void`-ed. A floating promise swallows its
  rejection — `@typescript-eslint/no-floating-promises` catches it, keep it on.
- `Promise.all` for independent work; sequential `await` in a loop is a serial
  bottleneck unless order matters. `Promise.allSettled` when one failure must not
  cancel the rest.
- No `async` on a function that never awaits.
- Errors in `catch` are `unknown`. Narrow before reading `.message`.

## React and the DOM (`.tsx`)

- The dependency array is complete. Disabling `react-hooks/exhaustive-deps` is a bug
  report, not a fix.
- Derive during render instead of syncing with an effect. Most `useEffect` that sets
  state is a computed value in disguise.
- Every effect that subscribes, times or fetches returns its cleanup.
- Stable keys from data identity, never the array index.
- Accessibility is part of correctness, not polish: semantic elements before
  `role`, a label on every input, focus managed on route and dialog changes, and
  contrast that passes (`rules/quality-bar.md` layer 6, and the `frontend` skill).

## Dependencies

- Check `package.json` before adding anything — the project probably already has a
  date library, a fetch wrapper and a validator (`rules/minimalism-ladder.md` rung 4).
- `date-fns`/`Temporal` over moment; native `fetch` over axios in a modern runtime;
  `structuredClone` over a deep-clone dependency.
- A dependency used for one function gets inlined.

## After refactoring

- `tsc --noEmit` — zero errors.
- `eslint . --max-warnings 0` with `@typescript-eslint` strict-type-checked, plus
  `jsx-a11y` for anything rendered.
- `prettier --check .`
- The detected test runner green (`rules/test-frameworks.md` — Vitest for new projects,
  Jest where it already is).
- `npm audit --audit-level=high` / `osv-scanner` — no known-vuln dependency.

Attribution

Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.

Comments

Loading comments…

Newsletter

Get the weekly list of safe new skills, and the ones we pulled.