fe-js-ts-quality-gate

name	fe-js-ts-quality-gate
description	Enforces ESLint, Prettier, and TypeScript compiler checks from the frontend package.json for JavaScript and TypeScript source. Use when creating or editing .js, .jsx, .ts, or .tsx files under fe/, when generating React or Vite frontend code in this repo, or when the user asks for lint-, format-, or tsc-compliant frontend changes.

Frontend JS/TS Quality Gate

Scope

Apply this skill whenever you create or modify any of:

• .js, .jsx, .ts, .tsx

under the frontend package that owns the tooling scripts. In this repository, that is fe/ (see fe/package.json).

If the repo later adds other Node packages with their own package.json, use the nearest package.json to the changed files and the scripts defined there instead.

Source Of Truth

Compliance means whatever is configured for:

Concern	How it is enforced (this repo)	Defined in / via
ESLint	pnpm run lint → eslint . --max-warnings=0	fe/package.json, fe/eslint.config.js
Prettier	pnpm run format → prettier --check .	fe/package.json, Prettier config in fe/
TypeScript	pnpm run typecheck → tsc -b --pretty false	fe/package.json, fe/tsconfig*.json

Do not invent style or type rules that conflict with these tools. Prefer fixes in code over disabling rules, unless the user explicitly asks otherwise.

Required Workflow

After implementing changes to .js, .jsx, .ts, or .tsx under fe/src/ (or other frontend sources under fe/):

1. Run typecheck (catches tsc errors for TS and project references).
2. Run lint (ESLint must pass with zero warnings).
3. Run format check (Prettier must pass).

Run from fe/:

pnpm run typecheck
pnpm run lint
pnpm run format

4. If any command fails, fix the code (or config, only if the user requested it) and rerun until all three pass.
5. In your final response, state which commands you ran and that they passed (or what failed and the exact error if you could not run them).

For larger edits, you may use pnpm run check once the above are green to also run tests (typecheck + lint + format + test).

Optional Autofix

If ESLint/Prettier report fixable issues, you may run:

pnpm run lint:fix
pnpm run format:fix

Then rerun pnpm run lint and pnpm run format (check mode) to confirm a clean state.

Failure Handling

• If pnpm or dependencies are missing, say so and give the exact commands for the user to run locally after pnpm install in fe/.
• Do not claim ESLint/Prettier/tsc compliance unless the relevant scripts were executed successfully (or you clearly state they were not run).

Relationship To Other Skills

• For PHP/Symfony code under api/, use the php-quality-gate skill instead.
• The older ts-tsx-eslint-prettier skill is style-focused; this skill adds mandatory verification via fe/package.json scripts for all listed extensions.