Foundations

TypeScript

Writes and reviews TypeScript for front-end apps (TypeScript 7, React, Vue, Svelte, Angular, Astro) - strict config, no any, types checked at the boundaries (API, storage, forms), narrowing instead of casts, a tsconfig that builds on 6 and 7. Use when editing .ts or .tsx files or a tsconfig, upgrading TypeScript, or when asked to type an API response or review types.

fe-typescripttypescript6 rules87 tokens always loaded, 1016 tokens when used, 2090 tokens in references on demand.

Install

init installs this skill when the project uses typescript. Pick your agent to see where its files land.

npx github:dawidolko/frontend-skills init

Not tested yet with this runner. npx and pnpm dlx are tested; if this one fails, use one of them.

Without --agents, init finds the agents from what the project already has, and asks when it finds none:

How init finds each of the 17 agents

Agent	Found by
Claude Code	`CLAUDE.md` `.claude` `CLAUDE.local.md`
OpenAI Codex	`.codex` `AGENTS.override.md`
Cursor	`.cursor` `.cursorrules`
GitHub Copilot	`.github/copilot-instructions.md` `.github/instructions` `.github/skills` `.github/prompts`
Gemini CLI	`GEMINI.md` `.gemini`
Antigravity CLI	`.agents/rules` `.agent/rules`
Devin / Windsurf	`.devin` `.windsurf` `.windsurfrules`
OpenCode	`opencode.json` `opencode.jsonc` `.opencode`
Cline	`.clinerules` `.cline`
Zed	`.rules` `.zed`
JetBrains Junie	`.junie`
Kiro	`.kiro`
Augment	`.augment` `.augment-guidelines`
Trae	`.trae`
Continue	`.continue`
Amazon Q Developer	`.amazonq`
Aider	`.aider.conf.yml` `CONVENTIONS.md`

Where fe-typescript lands for Claude Code

.claude/skills/fe-typescript/SKILL.mdskill
.claude/skills/fe-typescript/references/typescript.mdskill
.claude/rules/fe-typescript.mdrule file
CLAUDE.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.claude/rules/fe-typescript.md

---
paths:
  - "**/*.ts"
  - "**/*.tsx"
  - "**/*.mts"
  - "**/*.cts"
  - "**/tsconfig*.json"
---

# TypeScript (frontend-skills)

Writes and reviews TypeScript for front-end apps (TypeScript 7, React, Vue, Svelte, Angular, Astro) - strict config, no any, types checked at the boundaries (API, storage, forms), narrowing instead of casts, a tsconfig that builds on 6 and 7. Use when editing .ts or .tsx files or a tsconfig, upgrading TypeScript, or when asked to type an API response or review types.

- Keep `strict` on; never set it or one of its flags to `false` (ts/strict).
- Use no option removed in TypeScript 7: `baseUrl`, `moduleResolution: "node"`, `target: "es5"`, `outFile` (ts/no-deprecated-options).
- With Vite or another per-file compiler, set `verbatimModuleSyntax` and write `import type` (ts/isolated-modules).
- Never write `any`: use the real type, a generic, or `unknown` and narrow it (ts/no-explicit-any).
- Validate data from `fetch`, `JSON.parse`, storage, `postMessage` and URLs at run time; never type it with `as` (ts/validate-untrusted).
- Silence an error only with `@ts-expect-error` and a reason, never `@ts-ignore` (ts/no-ts-ignore).
- Narrow with `typeof`, `instanceof`, `in` and type guards instead of `as` casts and `!` assertions.
- Model states as discriminated unions (`{ status: 'error'; error: Error }`) and end a `switch` over them with a `never` check.
- Infer local types; annotate exported functions, component props and module boundaries.

Before larger changes, read the full skill: `.claude/skills/fe-typescript/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-typescript lands for OpenAI Codex

.agents/skills/fe-typescript/SKILL.mdskill
.agents/skills/fe-typescript/references/typescript.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

OpenAI Codex has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-typescript lands for Cursor

.agents/skills/fe-typescript/SKILL.mdskill
.agents/skills/fe-typescript/references/typescript.mdskill
.cursor/rules/fe-typescript.mdcrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.cursor/rules/fe-typescript.mdc

---
description: Writes and reviews TypeScript for front-end apps (TypeScript 7, React, Vue, Svelte, Angular, Astro) - strict config, no any, types checked at the boundaries (API, storage, forms), narrowing instead of casts, a tsconfig that builds on 6 and 7. Use when editing .ts or .tsx files or a tsconfig, upgrading TypeScript, or when asked to type an API response or review types.
globs: **/*.ts, **/*.tsx, **/*.mts, **/*.cts, **/tsconfig*.json
alwaysApply: false
---

# TypeScript (frontend-skills)

- Keep `strict` on; never set it or one of its flags to `false` (ts/strict).
- Use no option removed in TypeScript 7: `baseUrl`, `moduleResolution: "node"`, `target: "es5"`, `outFile` (ts/no-deprecated-options).
- With Vite or another per-file compiler, set `verbatimModuleSyntax` and write `import type` (ts/isolated-modules).
- Never write `any`: use the real type, a generic, or `unknown` and narrow it (ts/no-explicit-any).
- Validate data from `fetch`, `JSON.parse`, storage, `postMessage` and URLs at run time; never type it with `as` (ts/validate-untrusted).
- Silence an error only with `@ts-expect-error` and a reason, never `@ts-ignore` (ts/no-ts-ignore).
- Narrow with `typeof`, `instanceof`, `in` and type guards instead of `as` casts and `!` assertions.
- Model states as discriminated unions (`{ status: 'error'; error: Error }`) and end a `switch` over them with a `never` check.
- Infer local types; annotate exported functions, component props and module boundaries.

Before larger changes, read the full skill: `.agents/skills/fe-typescript/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-typescript lands for GitHub Copilot

.agents/skills/fe-typescript/SKILL.mdskill
.agents/skills/fe-typescript/references/typescript.mdskill
.github/instructions/fe-typescript.instructions.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.github/instructions/fe-typescript.instructions.md

---
applyTo: "**/*.ts,**/*.tsx,**/*.mts,**/*.cts,**/tsconfig*.json"
description: "Writes and reviews TypeScript for front-end apps (TypeScript 7, React, Vue, Svelte, Angular, Astro) - strict config, no any, types checked at the boundaries (API, storage, forms), narrowing instead of casts, a tsconfig that builds on 6 and 7. Use when editing .ts or .tsx files or a tsconfig, upgrading TypeScript, or when asked to type an API response or review types."
---

# TypeScript (frontend-skills)

- Keep `strict` on; never set it or one of its flags to `false` (ts/strict).
- Use no option removed in TypeScript 7: `baseUrl`, `moduleResolution: "node"`, `target: "es5"`, `outFile` (ts/no-deprecated-options).
- With Vite or another per-file compiler, set `verbatimModuleSyntax` and write `import type` (ts/isolated-modules).
- Never write `any`: use the real type, a generic, or `unknown` and narrow it (ts/no-explicit-any).
- Validate data from `fetch`, `JSON.parse`, storage, `postMessage` and URLs at run time; never type it with `as` (ts/validate-untrusted).
- Silence an error only with `@ts-expect-error` and a reason, never `@ts-ignore` (ts/no-ts-ignore).
- Narrow with `typeof`, `instanceof`, `in` and type guards instead of `as` casts and `!` assertions.
- Model states as discriminated unions (`{ status: 'error'; error: Error }`) and end a `switch` over them with a `never` check.
- Infer local types; annotate exported functions, component props and module boundaries.

Before larger changes, read the full skill: `.agents/skills/fe-typescript/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-typescript lands for Gemini CLI

.agents/skills/fe-typescript/SKILL.mdskill
.agents/skills/fe-typescript/references/typescript.mdskill
GEMINI.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Gemini CLI: Gemini CLI was replaced by Antigravity CLI for unpaid tiers on 2026-06-18; choose "antigravity" too if you use it.

Gemini CLI has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

GEMINI.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-typescript lands for Antigravity CLI

.agents/skills/fe-typescript/SKILL.mdskill
.agents/skills/fe-typescript/references/typescript.mdskill
.agents/rules/fe-typescript.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.agents/rules/fe-typescript.md

---
trigger: glob
globs: "**/*.ts, **/*.tsx, **/*.mts, **/*.cts, **/tsconfig*.json"
description: "Writes and reviews TypeScript for front-end apps (TypeScript 7, React, Vue, Svelte, Angular, Astro) - strict config, no any, types checked at the boundaries (API, storage, forms), narrowing instead of casts, a tsconfig that builds on 6 and 7. Use when editing .ts or .tsx files or a tsconfig, upgrading TypeScript, or when asked to type an API response or review types."
---

# TypeScript (frontend-skills)

- Keep `strict` on; never set it or one of its flags to `false` (ts/strict).
- Use no option removed in TypeScript 7: `baseUrl`, `moduleResolution: "node"`, `target: "es5"`, `outFile` (ts/no-deprecated-options).
- With Vite or another per-file compiler, set `verbatimModuleSyntax` and write `import type` (ts/isolated-modules).
- Never write `any`: use the real type, a generic, or `unknown` and narrow it (ts/no-explicit-any).
- Validate data from `fetch`, `JSON.parse`, storage, `postMessage` and URLs at run time; never type it with `as` (ts/validate-untrusted).
- Silence an error only with `@ts-expect-error` and a reason, never `@ts-ignore` (ts/no-ts-ignore).
- Narrow with `typeof`, `instanceof`, `in` and type guards instead of `as` casts and `!` assertions.
- Model states as discriminated unions (`{ status: 'error'; error: Error }`) and end a `switch` over them with a `never` check.
- Infer local types; annotate exported functions, component props and module boundaries.

Before larger changes, read the full skill: `.agents/skills/fe-typescript/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-typescript lands for Devin / Windsurf

.agents/skills/fe-typescript/SKILL.mdskill
.agents/skills/fe-typescript/references/typescript.mdskill
.devin/rules/fe-typescript.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Devin / Windsurf: Devin CLI also reads .cursor/rules; with Cursor chosen too, the CLI sees both rule files of a skill.

Planned by the installer itself for the example React project in the repository.

.devin/rules/fe-typescript.md

---
trigger: glob
globs: "**/*.ts,**/*.tsx,**/*.mts,**/*.cts,**/tsconfig*.json"
---

# TypeScript (frontend-skills)

Writes and reviews TypeScript for front-end apps (TypeScript 7, React, Vue, Svelte, Angular, Astro) - strict config, no any, types checked at the boundaries (API, storage, forms), narrowing instead of casts, a tsconfig that builds on 6 and 7. Use when editing .ts or .tsx files or a tsconfig, upgrading TypeScript, or when asked to type an API response or review types.

- Keep `strict` on; never set it or one of its flags to `false` (ts/strict).
- Use no option removed in TypeScript 7: `baseUrl`, `moduleResolution: "node"`, `target: "es5"`, `outFile` (ts/no-deprecated-options).
- With Vite or another per-file compiler, set `verbatimModuleSyntax` and write `import type` (ts/isolated-modules).
- Never write `any`: use the real type, a generic, or `unknown` and narrow it (ts/no-explicit-any).
- Validate data from `fetch`, `JSON.parse`, storage, `postMessage` and URLs at run time; never type it with `as` (ts/validate-untrusted).
- Silence an error only with `@ts-expect-error` and a reason, never `@ts-ignore` (ts/no-ts-ignore).
- Narrow with `typeof`, `instanceof`, `in` and type guards instead of `as` casts and `!` assertions.
- Model states as discriminated unions (`{ status: 'error'; error: Error }`) and end a `switch` over them with a `never` check.
- Infer local types; annotate exported functions, component props and module boundaries.

Before larger changes, read the full skill: `.agents/skills/fe-typescript/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-typescript lands for OpenCode

.agents/skills/fe-typescript/SKILL.mdskill
.agents/skills/fe-typescript/references/typescript.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

OpenCode has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-typescript lands for Cline

.claude/skills/fe-typescript/SKILL.mdskill
.claude/skills/fe-typescript/references/typescript.mdskill
.clinerules/fe-typescript.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Cline: If .clinerules is a single file rather than a folder, Cline rule files are not written; skills still are.

Planned by the installer itself for the example React project in the repository.

.clinerules/fe-typescript.md

---
paths:
  - "**/*.ts"
  - "**/*.tsx"
  - "**/*.mts"
  - "**/*.cts"
  - "**/tsconfig*.json"
---

# TypeScript (frontend-skills)

Writes and reviews TypeScript for front-end apps (TypeScript 7, React, Vue, Svelte, Angular, Astro) - strict config, no any, types checked at the boundaries (API, storage, forms), narrowing instead of casts, a tsconfig that builds on 6 and 7. Use when editing .ts or .tsx files or a tsconfig, upgrading TypeScript, or when asked to type an API response or review types.

- Keep `strict` on; never set it or one of its flags to `false` (ts/strict).
- Use no option removed in TypeScript 7: `baseUrl`, `moduleResolution: "node"`, `target: "es5"`, `outFile` (ts/no-deprecated-options).
- With Vite or another per-file compiler, set `verbatimModuleSyntax` and write `import type` (ts/isolated-modules).
- Never write `any`: use the real type, a generic, or `unknown` and narrow it (ts/no-explicit-any).
- Validate data from `fetch`, `JSON.parse`, storage, `postMessage` and URLs at run time; never type it with `as` (ts/validate-untrusted).
- Silence an error only with `@ts-expect-error` and a reason, never `@ts-ignore` (ts/no-ts-ignore).
- Narrow with `typeof`, `instanceof`, `in` and type guards instead of `as` casts and `!` assertions.
- Model states as discriminated unions (`{ status: 'error'; error: Error }`) and end a `switch` over them with a `never` check.
- Infer local types; annotate exported functions, component props and module boundaries.

Before larger changes, read the full skill: `.claude/skills/fe-typescript/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-typescript lands for Zed

.agents/skills/fe-typescript/SKILL.mdskill
.agents/skills/fe-typescript/references/typescript.mdskill
CLAUDE.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Zed: Zed reads only the first instruction file of its list; the block is placed in that file.

Zed has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

CLAUDE.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-typescript lands for JetBrains Junie

.agents/skills/fe-typescript/SKILL.mdskill
.agents/skills/fe-typescript/references/typescript.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

JetBrains Junie: Junie reads .agents/skills only in a trusted project.

JetBrains Junie has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-typescript lands for Kiro

.kiro/skills/fe-typescript/SKILL.mdskill
.kiro/skills/fe-typescript/references/typescript.mdskill
.kiro/steering/fe-typescript.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.kiro/steering/fe-typescript.md

---
inclusion: fileMatch
fileMatchPattern: ["**/*.ts", "**/*.tsx", "**/*.mts", "**/*.cts", "**/tsconfig*.json"]
---

# TypeScript (frontend-skills)

Writes and reviews TypeScript for front-end apps (TypeScript 7, React, Vue, Svelte, Angular, Astro) - strict config, no any, types checked at the boundaries (API, storage, forms), narrowing instead of casts, a tsconfig that builds on 6 and 7. Use when editing .ts or .tsx files or a tsconfig, upgrading TypeScript, or when asked to type an API response or review types.

- Keep `strict` on; never set it or one of its flags to `false` (ts/strict).
- Use no option removed in TypeScript 7: `baseUrl`, `moduleResolution: "node"`, `target: "es5"`, `outFile` (ts/no-deprecated-options).
- With Vite or another per-file compiler, set `verbatimModuleSyntax` and write `import type` (ts/isolated-modules).
- Never write `any`: use the real type, a generic, or `unknown` and narrow it (ts/no-explicit-any).
- Validate data from `fetch`, `JSON.parse`, storage, `postMessage` and URLs at run time; never type it with `as` (ts/validate-untrusted).
- Silence an error only with `@ts-expect-error` and a reason, never `@ts-ignore` (ts/no-ts-ignore).
- Narrow with `typeof`, `instanceof`, `in` and type guards instead of `as` casts and `!` assertions.
- Model states as discriminated unions (`{ status: 'error'; error: Error }`) and end a `switch` over them with a `never` check.
- Infer local types; annotate exported functions, component props and module boundaries.

Before larger changes, read the full skill: `.kiro/skills/fe-typescript/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-typescript lands for Augment

.agents/skills/fe-typescript/SKILL.mdskill
.agents/skills/fe-typescript/references/typescript.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Augment has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-typescript lands for Trae

.trae/skills/fe-typescript/SKILL.mdskill
.trae/skills/fe-typescript/references/typescript.mdskill
.trae/rules/fe-typescript.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Trae: Trae reads AGENTS.md only after it is enabled in its settings.

Planned by the installer itself for the example React project in the repository.

.trae/rules/fe-typescript.md

---
description: "Writes and reviews TypeScript for front-end apps (TypeScript 7, React, Vue, Svelte, Angular, Astro) - strict config, no any, types checked at the boundaries (API, storage, forms), narrowing instead of casts, a tsconfig that builds on 6 and 7. Use when editing .ts or .tsx files or a tsconfig, upgrading TypeScript, or when asked to type an API response or review types."
globs: **/*.ts,**/*.tsx,**/*.mts,**/*.cts,**/tsconfig*.json
alwaysApply: false
---

# TypeScript (frontend-skills)

- Keep `strict` on; never set it or one of its flags to `false` (ts/strict).
- Use no option removed in TypeScript 7: `baseUrl`, `moduleResolution: "node"`, `target: "es5"`, `outFile` (ts/no-deprecated-options).
- With Vite or another per-file compiler, set `verbatimModuleSyntax` and write `import type` (ts/isolated-modules).
- Never write `any`: use the real type, a generic, or `unknown` and narrow it (ts/no-explicit-any).
- Validate data from `fetch`, `JSON.parse`, storage, `postMessage` and URLs at run time; never type it with `as` (ts/validate-untrusted).
- Silence an error only with `@ts-expect-error` and a reason, never `@ts-ignore` (ts/no-ts-ignore).
- Narrow with `typeof`, `instanceof`, `in` and type guards instead of `as` casts and `!` assertions.
- Model states as discriminated unions (`{ status: 'error'; error: Error }`) and end a `switch` over them with a `never` check.
- Infer local types; annotate exported functions, component props and module boundaries.

Before larger changes, read the full skill: `.trae/skills/fe-typescript/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-typescript lands for Continue

.frontend-skills/skills/fe-typescript/SKILL.mdskill
.frontend-skills/skills/fe-typescript/references/typescript.mdskill
.continue/rules/fe-typescript.mdrule file

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.continue/rules/fe-typescript.md

---
name: "TypeScript"
description: "Writes and reviews TypeScript for front-end apps (TypeScript 7, React, Vue, Svelte, Angular, Astro) - strict config, no any, types checked at the boundaries (API, storage, forms), narrowing instead of casts, a tsconfig that builds on 6 and 7. Use when editing .ts or .tsx files or a tsconfig, upgrading TypeScript, or when asked to type an API response or review types."
globs: ["**/*.ts", "**/*.tsx", "**/*.mts", "**/*.cts", "**/tsconfig*.json"]
alwaysApply: false
---

# TypeScript (frontend-skills)

- Keep `strict` on; never set it or one of its flags to `false` (ts/strict).
- Use no option removed in TypeScript 7: `baseUrl`, `moduleResolution: "node"`, `target: "es5"`, `outFile` (ts/no-deprecated-options).
- With Vite or another per-file compiler, set `verbatimModuleSyntax` and write `import type` (ts/isolated-modules).
- Never write `any`: use the real type, a generic, or `unknown` and narrow it (ts/no-explicit-any).
- Validate data from `fetch`, `JSON.parse`, storage, `postMessage` and URLs at run time; never type it with `as` (ts/validate-untrusted).
- Silence an error only with `@ts-expect-error` and a reason, never `@ts-ignore` (ts/no-ts-ignore).
- Narrow with `typeof`, `instanceof`, `in` and type guards instead of `as` casts and `!` assertions.
- Model states as discriminated unions (`{ status: 'error'; error: Error }`) and end a `switch` over them with a `never` check.
- Infer local types; annotate exported functions, component props and module boundaries.

Before larger changes, read the full skill: `.frontend-skills/skills/fe-typescript/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-typescript lands for Amazon Q Developer

.frontend-skills/skills/fe-typescript/SKILL.mdskill
.frontend-skills/skills/fe-typescript/references/typescript.mdskill
.amazonq/rules/frontend-skills.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Amazon Q Developer: Amazon Q Developer IDE plugins reach end of support on 2027-04-30; AWS points to Kiro.

Amazon Q Developer has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

.amazonq/rules/frontend-skills.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

### Skills

- `fe-typescript` (TypeScript): when editing `**/*.ts`, `**/*.tsx`, `**/*.mts`, `**/*.cts`, `**/tsconfig*.json`, first read `.frontend-skills/skills/fe-typescript/SKILL.md`.

The real file

Where fe-typescript lands for Aider

.frontend-skills/skills/fe-typescript/SKILL.mdskill
.frontend-skills/skills/fe-typescript/references/typescript.mdskill
CONVENTIONS.mdinstruction block
.aider.conf.ymlconfig

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Aider has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

CONVENTIONS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

### Skills

- `fe-typescript` (TypeScript): when editing `**/*.ts`, `**/*.tsx`, `**/*.mts`, `**/*.cts`, `**/tsconfig*.json`, first read `.frontend-skills/skills/fe-typescript/SKILL.md`.

The real file

How to use it

Once installed, the agent loads the skill by itself when a task matches its description. You can also ask for it in your own words, for example:

And to check and fix the work:

Use the fe-typescript skill on this file.
Run the front-end audit on what I changed and fix everything serious.
Explain ts/strict and fix it here.

Rules it teaches

ts/strict
TypeScript runs with strict on; no config turns strict or one of its checks (strictNullChecks, noImplicitAny...) off.
moderatestatic
ts/no-deprecated-options
A TypeScript 6 or 7 tsconfig uses no option deprecated in 6.0 and removed in 7.0 (baseUrl, moduleResolution node, target es5).
moderatestatic
ts/isolated-modules
A Vite project's tsconfig sets isolatedModules or verbatimModuleSyntax, so code the bundler compiles file by file type-checks the same way.
minorstatic
ts/no-explicit-any
Type values with a real type or unknown (then narrow), never any.
moderatestatic
ts/validate-untrusted
Data from outside the program (fetch, JSON.parse, storage) is validated at run time, not given a type with as or an annotation.
moderatestatic
ts/no-ts-ignore
Silence a type error with @ts-expect-error and a reason, never @ts-ignore or @ts-nocheck.
minorstatic

The rule digest

This part is copied into each agent's scoped rule file, so it stands on its own:

Keep strict on; never set it or one of its flags to false (ts/strict).
Use no option removed in TypeScript 7: baseUrl, moduleResolution: "node", target: "es5", outFile (ts/no-deprecated-options).
With Vite or another per-file compiler, set verbatimModuleSyntax and write import type (ts/isolated-modules).
Never write any: use the real type, a generic, or unknown and narrow it (ts/no-explicit-any).
Validate data from fetch, JSON.parse, storage, postMessage and URLs at run time; never type it with as (ts/validate-untrusted).
Silence an error only with @ts-expect-error and a reason, never @ts-ignore (ts/no-ts-ignore).
Narrow with typeof, instanceof, in and type guards instead of as casts and ! assertions.
Model states as discriminated unions ({ status: 'error'; error: Error }) and end a switch over them with a never check.
Infer local types; annotate exported functions, component props and module boundaries.

Steps the agent follows

Check the version in the profile. On TypeScript 7 (tsc is the native compiler, no programmatic API until 7.1), tools that import typescript (typescript-eslint, vue-tsc, svelte-check, Astro, MDX) need 6.0 through the alias typescript@npm:@typescript/typescript6; keep TS 7 as @typescript/native for tsc.
Start a browser app's tsconfig from "module": "esnext", "moduleResolution": "bundler", "verbatimModuleSyntax": true, "noUncheckedIndexedAccess": true, and list global types in "types" (it defaults to [] since 6.0, so vite/client or node must be named).
Put one schema per external shape next to the call (Valibot or Zod Mini, or the validator already in the project); derive the type from it (v.InferOutput<typeof User>), so type and check cannot drift.
Type props and events in the framework's way: React ComponentProps<'button'>, Vue defineProps<Props>(), Svelte let { a }: Props = $props(), Angular input.required<T>().
Prefer satisfies to check a literal against a type without widening it; as const objects instead of enum when code runs through type stripping.
Type-check in CI with tsc --noEmit (or the framework's checker): bundlers only strip types.

How the agent checks the work

npx github:dawidolko/frontend-skills audit --changed reads the tsconfig files (strict, removed options, isolated modules) and .tsx, Vue, Svelte and Astro scripts (any, unchecked casts, @ts-ignore). Plain .ts files are not read by the audit yet; run the linter on them.
Lint with typescript-eslint's typed config (no-explicit-any, no-floating-promises, no-unsafe-*, ban-ts-comment).

Checked by the audit

The static checks of these rules run in audit; this is a real session on the example project:

Terminal recording: audit lists findings by severity with rule ids and file:line, and fails at serious. — `audit`: counts by severity, each rule with its first location, the exit code.

Reference files

references/typescript.md2090 tokens

SKILL.md on GitHub