Quality

Build, lint and format tooling

Sets up front-end tooling the way the project already does - package manager and lockfile, Vite 8, ESLint 10 flat config with accessibility plugins, Prettier 3 or Biome 2, Stylelint, TypeScript type checks, browserslist with Baseline targets, Node LTS. Use when adding or upgrading a linter, formatter, bundler or TypeScript, fixing a broken config or CI step, or when asked "set up linting".

fe-toolingvite, eslint, prettier, biome6 rules88 tokens always loaded, 857 tokens when used, 1519 tokens in references on demand.

Install

init installs this skill when the project uses vite, eslint, prettier, biome. 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-tooling lands for Claude Code

.claude/skills/fe-tooling/SKILL.mdskill
.claude/skills/fe-tooling/references/tooling.mdskill
.claude/rules/fe-tooling.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-tooling.md

---
paths:
  - "**/package.json"
  - "**/eslint.config.*"
  - "**/vite.config.*"
  - "**/tsconfig*.json"
  - "**/biome.json"
  - "**/.prettierrc*"
  - "**/stylelint.config.*"
  - "**/.browserslistrc"
---

# Build, lint and format tooling (frontend-skills)

Sets up front-end tooling the way the project already does - package manager and lockfile, Vite 8, ESLint 10 flat config with accessibility plugins, Prettier 3 or Biome 2, Stylelint, TypeScript type checks, browserslist with Baseline targets, Node LTS. Use when adding or upgrading a linter, formatter, bundler or TypeScript, fixing a broken config or CI step, or when asked "set up linting".

- Run the project's scripts with its package manager; never install tools globally (tooling/use-project-scripts).
- Keep one committed lockfile; CI installs with the frozen command (tooling/one-lockfile).
- ESLint 10 reads only `eslint.config.*`; migrate `.eslintrc*` and `.eslintignore` (tooling/eslint-flat-config).
- TypeScript projects run a separate type check in CI; bundlers only strip types (tooling/typecheck-separately).
- Lint with the framework's accessibility plugin or compiler warnings (tooling/a11y-lint).
- Declare browser targets once, as a Baseline query; no blanket polyfills (perf/no-legacy-javascript).
- One formatter per file type; with ESLint and Prettier together, turn off ESLint's style rules (`eslint-config-prettier`).
- Pin the Node version to a supported LTS line (22, 24 or 26 in November 2026) in `.nvmrc` and `engines`.
- Never weaken a lint rule or a type to make a check pass; fix the code or explain the exception inline.
- Do not switch tools in passing (ESLint to Oxlint, Prettier to Biome); propose it separately.

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

The real file

Where fe-tooling lands for OpenAI Codex

.agents/skills/fe-tooling/SKILL.mdskill
.agents/skills/fe-tooling/references/tooling.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-tooling lands for Cursor

.agents/skills/fe-tooling/SKILL.mdskill
.agents/skills/fe-tooling/references/tooling.mdskill
.cursor/rules/fe-tooling.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-tooling.mdc

---
description: Sets up front-end tooling the way the project already does - package manager and lockfile, Vite 8, ESLint 10 flat config with accessibility plugins, Prettier 3 or Biome 2, Stylelint, TypeScript type checks, browserslist with Baseline targets, Node LTS. Use when adding or upgrading a linter, formatter, bundler or TypeScript, fixing a broken config or CI step, or when asked "set up linting".
globs: **/package.json, **/eslint.config.*, **/vite.config.*, **/tsconfig*.json, **/biome.json, **/.prettierrc*, **/stylelint.config.*, **/.browserslistrc
alwaysApply: false
---

# Build, lint and format tooling (frontend-skills)

- Run the project's scripts with its package manager; never install tools globally (tooling/use-project-scripts).
- Keep one committed lockfile; CI installs with the frozen command (tooling/one-lockfile).
- ESLint 10 reads only `eslint.config.*`; migrate `.eslintrc*` and `.eslintignore` (tooling/eslint-flat-config).
- TypeScript projects run a separate type check in CI; bundlers only strip types (tooling/typecheck-separately).
- Lint with the framework's accessibility plugin or compiler warnings (tooling/a11y-lint).
- Declare browser targets once, as a Baseline query; no blanket polyfills (perf/no-legacy-javascript).
- One formatter per file type; with ESLint and Prettier together, turn off ESLint's style rules (`eslint-config-prettier`).
- Pin the Node version to a supported LTS line (22, 24 or 26 in November 2026) in `.nvmrc` and `engines`.
- Never weaken a lint rule or a type to make a check pass; fix the code or explain the exception inline.
- Do not switch tools in passing (ESLint to Oxlint, Prettier to Biome); propose it separately.

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

The real file

Where fe-tooling lands for GitHub Copilot

.agents/skills/fe-tooling/SKILL.mdskill
.agents/skills/fe-tooling/references/tooling.mdskill
.github/instructions/fe-tooling.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-tooling.instructions.md

---
applyTo: "**/package.json,**/eslint.config.*,**/vite.config.*,**/tsconfig*.json,**/biome.json,**/.prettierrc*,**/stylelint.config.*,**/.browserslistrc"
description: "Sets up front-end tooling the way the project already does - package manager and lockfile, Vite 8, ESLint 10 flat config with accessibility plugins, Prettier 3 or Biome 2, Stylelint, TypeScript type checks, browserslist with Baseline targets, Node LTS. Use when adding or upgrading a linter, formatter, bundler or TypeScript, fixing a broken config or CI step, or when asked \"set up linting\"."
---

# Build, lint and format tooling (frontend-skills)

- Run the project's scripts with its package manager; never install tools globally (tooling/use-project-scripts).
- Keep one committed lockfile; CI installs with the frozen command (tooling/one-lockfile).
- ESLint 10 reads only `eslint.config.*`; migrate `.eslintrc*` and `.eslintignore` (tooling/eslint-flat-config).
- TypeScript projects run a separate type check in CI; bundlers only strip types (tooling/typecheck-separately).
- Lint with the framework's accessibility plugin or compiler warnings (tooling/a11y-lint).
- Declare browser targets once, as a Baseline query; no blanket polyfills (perf/no-legacy-javascript).
- One formatter per file type; with ESLint and Prettier together, turn off ESLint's style rules (`eslint-config-prettier`).
- Pin the Node version to a supported LTS line (22, 24 or 26 in November 2026) in `.nvmrc` and `engines`.
- Never weaken a lint rule or a type to make a check pass; fix the code or explain the exception inline.
- Do not switch tools in passing (ESLint to Oxlint, Prettier to Biome); propose it separately.

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

The real file

Where fe-tooling lands for Gemini CLI

.agents/skills/fe-tooling/SKILL.mdskill
.agents/skills/fe-tooling/references/tooling.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-tooling lands for Antigravity CLI

.agents/skills/fe-tooling/SKILL.mdskill
.agents/skills/fe-tooling/references/tooling.mdskill
.agents/rules/fe-tooling.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-tooling.md

---
trigger: glob
globs: "**/package.json, **/eslint.config.*, **/vite.config.*, **/tsconfig*.json, **/biome.json, **/.prettierrc*, **/stylelint.config.*, **/.browserslistrc"
description: "Sets up front-end tooling the way the project already does - package manager and lockfile, Vite 8, ESLint 10 flat config with accessibility plugins, Prettier 3 or Biome 2, Stylelint, TypeScript type checks, browserslist with Baseline targets, Node LTS. Use when adding or upgrading a linter, formatter, bundler or TypeScript, fixing a broken config or CI step, or when asked \"set up linting\"."
---

# Build, lint and format tooling (frontend-skills)

- Run the project's scripts with its package manager; never install tools globally (tooling/use-project-scripts).
- Keep one committed lockfile; CI installs with the frozen command (tooling/one-lockfile).
- ESLint 10 reads only `eslint.config.*`; migrate `.eslintrc*` and `.eslintignore` (tooling/eslint-flat-config).
- TypeScript projects run a separate type check in CI; bundlers only strip types (tooling/typecheck-separately).
- Lint with the framework's accessibility plugin or compiler warnings (tooling/a11y-lint).
- Declare browser targets once, as a Baseline query; no blanket polyfills (perf/no-legacy-javascript).
- One formatter per file type; with ESLint and Prettier together, turn off ESLint's style rules (`eslint-config-prettier`).
- Pin the Node version to a supported LTS line (22, 24 or 26 in November 2026) in `.nvmrc` and `engines`.
- Never weaken a lint rule or a type to make a check pass; fix the code or explain the exception inline.
- Do not switch tools in passing (ESLint to Oxlint, Prettier to Biome); propose it separately.

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

The real file

Where fe-tooling lands for Devin / Windsurf

.agents/skills/fe-tooling/SKILL.mdskill
.agents/skills/fe-tooling/references/tooling.mdskill
.devin/rules/fe-tooling.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-tooling.md

---
trigger: glob
globs: "**/package.json,**/eslint.config.*,**/vite.config.*,**/tsconfig*.json,**/biome.json,**/.prettierrc*,**/stylelint.config.*,**/.browserslistrc"
---

# Build, lint and format tooling (frontend-skills)

Sets up front-end tooling the way the project already does - package manager and lockfile, Vite 8, ESLint 10 flat config with accessibility plugins, Prettier 3 or Biome 2, Stylelint, TypeScript type checks, browserslist with Baseline targets, Node LTS. Use when adding or upgrading a linter, formatter, bundler or TypeScript, fixing a broken config or CI step, or when asked "set up linting".

- Run the project's scripts with its package manager; never install tools globally (tooling/use-project-scripts).
- Keep one committed lockfile; CI installs with the frozen command (tooling/one-lockfile).
- ESLint 10 reads only `eslint.config.*`; migrate `.eslintrc*` and `.eslintignore` (tooling/eslint-flat-config).
- TypeScript projects run a separate type check in CI; bundlers only strip types (tooling/typecheck-separately).
- Lint with the framework's accessibility plugin or compiler warnings (tooling/a11y-lint).
- Declare browser targets once, as a Baseline query; no blanket polyfills (perf/no-legacy-javascript).
- One formatter per file type; with ESLint and Prettier together, turn off ESLint's style rules (`eslint-config-prettier`).
- Pin the Node version to a supported LTS line (22, 24 or 26 in November 2026) in `.nvmrc` and `engines`.
- Never weaken a lint rule or a type to make a check pass; fix the code or explain the exception inline.
- Do not switch tools in passing (ESLint to Oxlint, Prettier to Biome); propose it separately.

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

The real file

Where fe-tooling lands for OpenCode

.agents/skills/fe-tooling/SKILL.mdskill
.agents/skills/fe-tooling/references/tooling.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-tooling lands for Cline

.claude/skills/fe-tooling/SKILL.mdskill
.claude/skills/fe-tooling/references/tooling.mdskill
.clinerules/fe-tooling.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-tooling.md

---
paths:
  - "**/package.json"
  - "**/eslint.config.*"
  - "**/vite.config.*"
  - "**/tsconfig*.json"
  - "**/biome.json"
  - "**/.prettierrc*"
  - "**/stylelint.config.*"
  - "**/.browserslistrc"
---

# Build, lint and format tooling (frontend-skills)

Sets up front-end tooling the way the project already does - package manager and lockfile, Vite 8, ESLint 10 flat config with accessibility plugins, Prettier 3 or Biome 2, Stylelint, TypeScript type checks, browserslist with Baseline targets, Node LTS. Use when adding or upgrading a linter, formatter, bundler or TypeScript, fixing a broken config or CI step, or when asked "set up linting".

- Run the project's scripts with its package manager; never install tools globally (tooling/use-project-scripts).
- Keep one committed lockfile; CI installs with the frozen command (tooling/one-lockfile).
- ESLint 10 reads only `eslint.config.*`; migrate `.eslintrc*` and `.eslintignore` (tooling/eslint-flat-config).
- TypeScript projects run a separate type check in CI; bundlers only strip types (tooling/typecheck-separately).
- Lint with the framework's accessibility plugin or compiler warnings (tooling/a11y-lint).
- Declare browser targets once, as a Baseline query; no blanket polyfills (perf/no-legacy-javascript).
- One formatter per file type; with ESLint and Prettier together, turn off ESLint's style rules (`eslint-config-prettier`).
- Pin the Node version to a supported LTS line (22, 24 or 26 in November 2026) in `.nvmrc` and `engines`.
- Never weaken a lint rule or a type to make a check pass; fix the code or explain the exception inline.
- Do not switch tools in passing (ESLint to Oxlint, Prettier to Biome); propose it separately.

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

The real file

Where fe-tooling lands for Zed

.agents/skills/fe-tooling/SKILL.mdskill
.agents/skills/fe-tooling/references/tooling.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-tooling lands for JetBrains Junie

.agents/skills/fe-tooling/SKILL.mdskill
.agents/skills/fe-tooling/references/tooling.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-tooling lands for Kiro

.kiro/skills/fe-tooling/SKILL.mdskill
.kiro/skills/fe-tooling/references/tooling.mdskill
.kiro/steering/fe-tooling.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-tooling.md

---
inclusion: fileMatch
fileMatchPattern: ["**/package.json", "**/eslint.config.*", "**/vite.config.*", "**/tsconfig*.json", "**/biome.json", "**/.prettierrc*", "**/stylelint.config.*", "**/.browserslistrc"]
---

# Build, lint and format tooling (frontend-skills)

Sets up front-end tooling the way the project already does - package manager and lockfile, Vite 8, ESLint 10 flat config with accessibility plugins, Prettier 3 or Biome 2, Stylelint, TypeScript type checks, browserslist with Baseline targets, Node LTS. Use when adding or upgrading a linter, formatter, bundler or TypeScript, fixing a broken config or CI step, or when asked "set up linting".

- Run the project's scripts with its package manager; never install tools globally (tooling/use-project-scripts).
- Keep one committed lockfile; CI installs with the frozen command (tooling/one-lockfile).
- ESLint 10 reads only `eslint.config.*`; migrate `.eslintrc*` and `.eslintignore` (tooling/eslint-flat-config).
- TypeScript projects run a separate type check in CI; bundlers only strip types (tooling/typecheck-separately).
- Lint with the framework's accessibility plugin or compiler warnings (tooling/a11y-lint).
- Declare browser targets once, as a Baseline query; no blanket polyfills (perf/no-legacy-javascript).
- One formatter per file type; with ESLint and Prettier together, turn off ESLint's style rules (`eslint-config-prettier`).
- Pin the Node version to a supported LTS line (22, 24 or 26 in November 2026) in `.nvmrc` and `engines`.
- Never weaken a lint rule or a type to make a check pass; fix the code or explain the exception inline.
- Do not switch tools in passing (ESLint to Oxlint, Prettier to Biome); propose it separately.

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

The real file

Where fe-tooling lands for Augment

.agents/skills/fe-tooling/SKILL.mdskill
.agents/skills/fe-tooling/references/tooling.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-tooling lands for Trae

.trae/skills/fe-tooling/SKILL.mdskill
.trae/skills/fe-tooling/references/tooling.mdskill
.trae/rules/fe-tooling.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-tooling.md

---
description: "Sets up front-end tooling the way the project already does - package manager and lockfile, Vite 8, ESLint 10 flat config with accessibility plugins, Prettier 3 or Biome 2, Stylelint, TypeScript type checks, browserslist with Baseline targets, Node LTS. Use when adding or upgrading a linter, formatter, bundler or TypeScript, fixing a broken config or CI step, or when asked \"set up linting\"."
globs: **/package.json,**/eslint.config.*,**/vite.config.*,**/tsconfig*.json,**/biome.json,**/.prettierrc*,**/stylelint.config.*,**/.browserslistrc
alwaysApply: false
---

# Build, lint and format tooling (frontend-skills)

- Run the project's scripts with its package manager; never install tools globally (tooling/use-project-scripts).
- Keep one committed lockfile; CI installs with the frozen command (tooling/one-lockfile).
- ESLint 10 reads only `eslint.config.*`; migrate `.eslintrc*` and `.eslintignore` (tooling/eslint-flat-config).
- TypeScript projects run a separate type check in CI; bundlers only strip types (tooling/typecheck-separately).
- Lint with the framework's accessibility plugin or compiler warnings (tooling/a11y-lint).
- Declare browser targets once, as a Baseline query; no blanket polyfills (perf/no-legacy-javascript).
- One formatter per file type; with ESLint and Prettier together, turn off ESLint's style rules (`eslint-config-prettier`).
- Pin the Node version to a supported LTS line (22, 24 or 26 in November 2026) in `.nvmrc` and `engines`.
- Never weaken a lint rule or a type to make a check pass; fix the code or explain the exception inline.
- Do not switch tools in passing (ESLint to Oxlint, Prettier to Biome); propose it separately.

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

The real file

Where fe-tooling lands for Continue

.frontend-skills/skills/fe-tooling/SKILL.mdskill
.frontend-skills/skills/fe-tooling/references/tooling.mdskill
.continue/rules/fe-tooling.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-tooling.md

---
name: "Build, lint and format tooling"
description: "Sets up front-end tooling the way the project already does - package manager and lockfile, Vite 8, ESLint 10 flat config with accessibility plugins, Prettier 3 or Biome 2, Stylelint, TypeScript type checks, browserslist with Baseline targets, Node LTS. Use when adding or upgrading a linter, formatter, bundler or TypeScript, fixing a broken config or CI step, or when asked \"set up linting\"."
globs: ["**/package.json", "**/eslint.config.*", "**/vite.config.*", "**/tsconfig*.json", "**/biome.json", "**/.prettierrc*", "**/stylelint.config.*", "**/.browserslistrc"]
alwaysApply: false
---

# Build, lint and format tooling (frontend-skills)

- Run the project's scripts with its package manager; never install tools globally (tooling/use-project-scripts).
- Keep one committed lockfile; CI installs with the frozen command (tooling/one-lockfile).
- ESLint 10 reads only `eslint.config.*`; migrate `.eslintrc*` and `.eslintignore` (tooling/eslint-flat-config).
- TypeScript projects run a separate type check in CI; bundlers only strip types (tooling/typecheck-separately).
- Lint with the framework's accessibility plugin or compiler warnings (tooling/a11y-lint).
- Declare browser targets once, as a Baseline query; no blanket polyfills (perf/no-legacy-javascript).
- One formatter per file type; with ESLint and Prettier together, turn off ESLint's style rules (`eslint-config-prettier`).
- Pin the Node version to a supported LTS line (22, 24 or 26 in November 2026) in `.nvmrc` and `engines`.
- Never weaken a lint rule or a type to make a check pass; fix the code or explain the exception inline.
- Do not switch tools in passing (ESLint to Oxlint, Prettier to Biome); propose it separately.

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

The real file

Where fe-tooling lands for Amazon Q Developer

.frontend-skills/skills/fe-tooling/SKILL.mdskill
.frontend-skills/skills/fe-tooling/references/tooling.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-tooling` (Build, lint and format tooling): when editing `**/package.json`, `**/eslint.config.*`, `**/vite.config.*`, `**/tsconfig*.json`, `**/biome.json`, `**/.prettierrc*`, `**/stylelint.config.*`, `**/.browserslistrc`, first read `.frontend-skills/skills/fe-tooling/SKILL.md`.

The real file

Where fe-tooling lands for Aider

.frontend-skills/skills/fe-tooling/SKILL.mdskill
.frontend-skills/skills/fe-tooling/references/tooling.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-tooling` (Build, lint and format tooling): when editing `**/package.json`, `**/eslint.config.*`, `**/vite.config.*`, `**/tsconfig*.json`, `**/biome.json`, `**/.prettierrc*`, `**/stylelint.config.*`, `**/.browserslistrc`, first read `.frontend-skills/skills/fe-tooling/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:

Phrases from the skill description that make the agent pick it:

set up linting

And to check and fix the work:

Use the fe-tooling skill on this file.
Run the front-end audit on what I changed and fix everything serious.
Explain tooling/use-project-scripts and fix it here.

Rules it teaches

tooling/use-project-scripts
Run checks through the project's own scripts and package manager; never install tools globally or switch package managers.
minormanual
tooling/one-lockfile
A project has exactly one committed lockfile, and CI installs from it with the frozen command (npm ci, pnpm install --frozen-lockfile).
moderatemanual
tooling/eslint-flat-config
ESLint is configured in eslint.config.* (flat config); .eslintrc files and .eslintignore are migrated, not kept beside it.
moderatemanual
tooling/typecheck-separately
A TypeScript project runs a separate type check (tsc --noEmit, vue-tsc, svelte-check, astro check) in CI; the bundler does not.
moderatemanual
tooling/a11y-lint
The linter runs the framework's accessibility rules (jsx-a11y, vuejs-accessibility, angular-eslint template, Svelte a11y warnings).
minormanual
perf/no-legacy-javascript
Do not ship polyfills and down-level transforms for features your target browsers already support; declare targets once.
minorbrowser

The rule digest

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

Run the project's scripts with its package manager; never install tools globally (tooling/use-project-scripts).
Keep one committed lockfile; CI installs with the frozen command (tooling/one-lockfile).
ESLint 10 reads only eslint.config.*; migrate .eslintrc* and .eslintignore (tooling/eslint-flat-config).
TypeScript projects run a separate type check in CI; bundlers only strip types (tooling/typecheck-separately).
Lint with the framework's accessibility plugin or compiler warnings (tooling/a11y-lint).
Declare browser targets once, as a Baseline query; no blanket polyfills (perf/no-legacy-javascript).
One formatter per file type; with ESLint and Prettier together, turn off ESLint's style rules (eslint-config-prettier).
Pin the Node version to a supported LTS line (22, 24 or 26 in November 2026) in .nvmrc and engines.
Never weaken a lint rule or a type to make a check pass; fix the code or explain the exception inline.
Do not switch tools in passing (ESLint to Oxlint, Prettier to Biome); propose it separately.

Steps the agent follows

Read package.json scripts, the lockfile and config files first; the profile lists what was detected.
Fix configs in place: migrate ESLint to flat config with @eslint/migrate-config, move ignores into the config, keep one formatter config.
Add the missing CI steps in this order: install (frozen), lint, typecheck, test, build, frontend-skills audit.
For Vite 8 (Rolldown inside): remove the rolldown-vite alias, check plugins for Vite 8 support, set build.target or browserslist once.
Keep tool output short for agents: eslint --format compact, vitest run --reporter=dot, tsc --pretty false.

How the agent checks the work

npx github:dawidolko/frontend-skills audit runs the static rules; this skill's own rules are checked by reading the config files, as listed in ## Rules.
Run <pm> run lint, <pm> run typecheck, <pm> run build and read the first error, not the last.
npx github:dawidolko/frontend-skills doctor shows which agent files are installed and current.

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/tooling.md1519 tokens

SKILL.md on GitHub