Foundations

JavaScript in the browser

Writes and reviews browser JavaScript (plain scripts, modules, framework script blocks) - equality, declarations, async and fetch errors, DOM events, assets through the bundler - so it fails loudly, stays fast and keeps working when moved. Use when writing or editing .js, .mjs, .jsx or a script block, debugging a silent failure or a listener leak, or asked to review JavaScript.

fe-javascriptevery web project13 rules79 tokens always loaded, 1070 tokens when used, 1903 tokens in references on demand.

Install

init installs this skill when the project uses every web project. 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-javascript lands for Claude Code

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

---
paths:
  - "**/*.js"
  - "**/*.mjs"
  - "**/*.cjs"
  - "**/*.jsx"
  - "**/*.ts"
  - "**/*.tsx"
---

# JavaScript in the browser (frontend-skills)

Writes and reviews browser JavaScript (plain scripts, modules, framework script blocks) - equality, declarations, async and fetch errors, DOM events, assets through the bundler - so it fails loudly, stays fast and keeps working when moved. Use when writing or editing .js, .mjs, .jsx or a script block, debugging a silent failure or a listener leak, or asked to review JavaScript.

- Compare with `===` and `!==` (js/strict-equality); declare with `const`, or `let` when reassigned, never `var` (js/no-var).
- Never run strings as code: no `eval`, `new Function`, or string timers (js/no-eval); no `document.write` (js/document-write).
- Detect features (`'share' in navigator`, `CSS.supports`), never parse `navigator.userAgent` (js/feature-detect).
- Throw and reject `Error` objects, with `{ cause }` when rethrowing (js/throw-error-objects).
- Check `res.ok` before reading a `fetch` body (js/fetch-check-ok); give requests a `signal` to cancel or time out.
- Never leave a `catch` empty (js/no-empty-catch); await, return or `.catch()` every promise (js/no-floating-promises).
- Attach handlers with `addEventListener` from a module, not `onclick="..."` attributes (js/no-inline-handlers).
- Make `touchstart`, `touchmove` and `wheel` listeners `{ passive: true }` unless they call `preventDefault()` (js/passive-listeners).
- Remove what a view starts (listeners, timers, observers) when it goes away; one `AbortController` signal ends them all (js/listener-cleanup).
- Import images, fonts and media or use the base-path helper; never hard-code `/images/...` in components (js/asset-import).
- Read layout (`getBoundingClientRect`, `offsetWidth`) before writing styles, never alternating in a loop.

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

The real file

Where fe-javascript lands for OpenAI Codex

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

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

---
description: Writes and reviews browser JavaScript (plain scripts, modules, framework script blocks) - equality, declarations, async and fetch errors, DOM events, assets through the bundler - so it fails loudly, stays fast and keeps working when moved. Use when writing or editing .js, .mjs, .jsx or a script block, debugging a silent failure or a listener leak, or asked to review JavaScript.
globs: **/*.js, **/*.mjs, **/*.cjs, **/*.jsx, **/*.ts, **/*.tsx
alwaysApply: false
---

# JavaScript in the browser (frontend-skills)

- Compare with `===` and `!==` (js/strict-equality); declare with `const`, or `let` when reassigned, never `var` (js/no-var).
- Never run strings as code: no `eval`, `new Function`, or string timers (js/no-eval); no `document.write` (js/document-write).
- Detect features (`'share' in navigator`, `CSS.supports`), never parse `navigator.userAgent` (js/feature-detect).
- Throw and reject `Error` objects, with `{ cause }` when rethrowing (js/throw-error-objects).
- Check `res.ok` before reading a `fetch` body (js/fetch-check-ok); give requests a `signal` to cancel or time out.
- Never leave a `catch` empty (js/no-empty-catch); await, return or `.catch()` every promise (js/no-floating-promises).
- Attach handlers with `addEventListener` from a module, not `onclick="..."` attributes (js/no-inline-handlers).
- Make `touchstart`, `touchmove` and `wheel` listeners `{ passive: true }` unless they call `preventDefault()` (js/passive-listeners).
- Remove what a view starts (listeners, timers, observers) when it goes away; one `AbortController` signal ends them all (js/listener-cleanup).
- Import images, fonts and media or use the base-path helper; never hard-code `/images/...` in components (js/asset-import).
- Read layout (`getBoundingClientRect`, `offsetWidth`) before writing styles, never alternating in a loop.

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

The real file

Where fe-javascript lands for GitHub Copilot

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

---
applyTo: "**/*.js,**/*.mjs,**/*.cjs,**/*.jsx,**/*.ts,**/*.tsx"
description: "Writes and reviews browser JavaScript (plain scripts, modules, framework script blocks) - equality, declarations, async and fetch errors, DOM events, assets through the bundler - so it fails loudly, stays fast and keeps working when moved. Use when writing or editing .js, .mjs, .jsx or a script block, debugging a silent failure or a listener leak, or asked to review JavaScript."
---

# JavaScript in the browser (frontend-skills)

- Compare with `===` and `!==` (js/strict-equality); declare with `const`, or `let` when reassigned, never `var` (js/no-var).
- Never run strings as code: no `eval`, `new Function`, or string timers (js/no-eval); no `document.write` (js/document-write).
- Detect features (`'share' in navigator`, `CSS.supports`), never parse `navigator.userAgent` (js/feature-detect).
- Throw and reject `Error` objects, with `{ cause }` when rethrowing (js/throw-error-objects).
- Check `res.ok` before reading a `fetch` body (js/fetch-check-ok); give requests a `signal` to cancel or time out.
- Never leave a `catch` empty (js/no-empty-catch); await, return or `.catch()` every promise (js/no-floating-promises).
- Attach handlers with `addEventListener` from a module, not `onclick="..."` attributes (js/no-inline-handlers).
- Make `touchstart`, `touchmove` and `wheel` listeners `{ passive: true }` unless they call `preventDefault()` (js/passive-listeners).
- Remove what a view starts (listeners, timers, observers) when it goes away; one `AbortController` signal ends them all (js/listener-cleanup).
- Import images, fonts and media or use the base-path helper; never hard-code `/images/...` in components (js/asset-import).
- Read layout (`getBoundingClientRect`, `offsetWidth`) before writing styles, never alternating in a loop.

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

The real file

Where fe-javascript lands for Gemini CLI

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

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

---
trigger: glob
globs: "**/*.js, **/*.mjs, **/*.cjs, **/*.jsx, **/*.ts, **/*.tsx"
description: "Writes and reviews browser JavaScript (plain scripts, modules, framework script blocks) - equality, declarations, async and fetch errors, DOM events, assets through the bundler - so it fails loudly, stays fast and keeps working when moved. Use when writing or editing .js, .mjs, .jsx or a script block, debugging a silent failure or a listener leak, or asked to review JavaScript."
---

# JavaScript in the browser (frontend-skills)

- Compare with `===` and `!==` (js/strict-equality); declare with `const`, or `let` when reassigned, never `var` (js/no-var).
- Never run strings as code: no `eval`, `new Function`, or string timers (js/no-eval); no `document.write` (js/document-write).
- Detect features (`'share' in navigator`, `CSS.supports`), never parse `navigator.userAgent` (js/feature-detect).
- Throw and reject `Error` objects, with `{ cause }` when rethrowing (js/throw-error-objects).
- Check `res.ok` before reading a `fetch` body (js/fetch-check-ok); give requests a `signal` to cancel or time out.
- Never leave a `catch` empty (js/no-empty-catch); await, return or `.catch()` every promise (js/no-floating-promises).
- Attach handlers with `addEventListener` from a module, not `onclick="..."` attributes (js/no-inline-handlers).
- Make `touchstart`, `touchmove` and `wheel` listeners `{ passive: true }` unless they call `preventDefault()` (js/passive-listeners).
- Remove what a view starts (listeners, timers, observers) when it goes away; one `AbortController` signal ends them all (js/listener-cleanup).
- Import images, fonts and media or use the base-path helper; never hard-code `/images/...` in components (js/asset-import).
- Read layout (`getBoundingClientRect`, `offsetWidth`) before writing styles, never alternating in a loop.

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

The real file

Where fe-javascript lands for Devin / Windsurf

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

---
trigger: glob
globs: "**/*.js,**/*.mjs,**/*.cjs,**/*.jsx,**/*.ts,**/*.tsx"
---

# JavaScript in the browser (frontend-skills)

Writes and reviews browser JavaScript (plain scripts, modules, framework script blocks) - equality, declarations, async and fetch errors, DOM events, assets through the bundler - so it fails loudly, stays fast and keeps working when moved. Use when writing or editing .js, .mjs, .jsx or a script block, debugging a silent failure or a listener leak, or asked to review JavaScript.

- Compare with `===` and `!==` (js/strict-equality); declare with `const`, or `let` when reassigned, never `var` (js/no-var).
- Never run strings as code: no `eval`, `new Function`, or string timers (js/no-eval); no `document.write` (js/document-write).
- Detect features (`'share' in navigator`, `CSS.supports`), never parse `navigator.userAgent` (js/feature-detect).
- Throw and reject `Error` objects, with `{ cause }` when rethrowing (js/throw-error-objects).
- Check `res.ok` before reading a `fetch` body (js/fetch-check-ok); give requests a `signal` to cancel or time out.
- Never leave a `catch` empty (js/no-empty-catch); await, return or `.catch()` every promise (js/no-floating-promises).
- Attach handlers with `addEventListener` from a module, not `onclick="..."` attributes (js/no-inline-handlers).
- Make `touchstart`, `touchmove` and `wheel` listeners `{ passive: true }` unless they call `preventDefault()` (js/passive-listeners).
- Remove what a view starts (listeners, timers, observers) when it goes away; one `AbortController` signal ends them all (js/listener-cleanup).
- Import images, fonts and media or use the base-path helper; never hard-code `/images/...` in components (js/asset-import).
- Read layout (`getBoundingClientRect`, `offsetWidth`) before writing styles, never alternating in a loop.

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

The real file

Where fe-javascript lands for OpenCode

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

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

---
paths:
  - "**/*.js"
  - "**/*.mjs"
  - "**/*.cjs"
  - "**/*.jsx"
  - "**/*.ts"
  - "**/*.tsx"
---

# JavaScript in the browser (frontend-skills)

Writes and reviews browser JavaScript (plain scripts, modules, framework script blocks) - equality, declarations, async and fetch errors, DOM events, assets through the bundler - so it fails loudly, stays fast and keeps working when moved. Use when writing or editing .js, .mjs, .jsx or a script block, debugging a silent failure or a listener leak, or asked to review JavaScript.

- Compare with `===` and `!==` (js/strict-equality); declare with `const`, or `let` when reassigned, never `var` (js/no-var).
- Never run strings as code: no `eval`, `new Function`, or string timers (js/no-eval); no `document.write` (js/document-write).
- Detect features (`'share' in navigator`, `CSS.supports`), never parse `navigator.userAgent` (js/feature-detect).
- Throw and reject `Error` objects, with `{ cause }` when rethrowing (js/throw-error-objects).
- Check `res.ok` before reading a `fetch` body (js/fetch-check-ok); give requests a `signal` to cancel or time out.
- Never leave a `catch` empty (js/no-empty-catch); await, return or `.catch()` every promise (js/no-floating-promises).
- Attach handlers with `addEventListener` from a module, not `onclick="..."` attributes (js/no-inline-handlers).
- Make `touchstart`, `touchmove` and `wheel` listeners `{ passive: true }` unless they call `preventDefault()` (js/passive-listeners).
- Remove what a view starts (listeners, timers, observers) when it goes away; one `AbortController` signal ends them all (js/listener-cleanup).
- Import images, fonts and media or use the base-path helper; never hard-code `/images/...` in components (js/asset-import).
- Read layout (`getBoundingClientRect`, `offsetWidth`) before writing styles, never alternating in a loop.

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

The real file

Where fe-javascript lands for Zed

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

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

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

---
inclusion: fileMatch
fileMatchPattern: ["**/*.js", "**/*.mjs", "**/*.cjs", "**/*.jsx", "**/*.ts", "**/*.tsx"]
---

# JavaScript in the browser (frontend-skills)

Writes and reviews browser JavaScript (plain scripts, modules, framework script blocks) - equality, declarations, async and fetch errors, DOM events, assets through the bundler - so it fails loudly, stays fast and keeps working when moved. Use when writing or editing .js, .mjs, .jsx or a script block, debugging a silent failure or a listener leak, or asked to review JavaScript.

- Compare with `===` and `!==` (js/strict-equality); declare with `const`, or `let` when reassigned, never `var` (js/no-var).
- Never run strings as code: no `eval`, `new Function`, or string timers (js/no-eval); no `document.write` (js/document-write).
- Detect features (`'share' in navigator`, `CSS.supports`), never parse `navigator.userAgent` (js/feature-detect).
- Throw and reject `Error` objects, with `{ cause }` when rethrowing (js/throw-error-objects).
- Check `res.ok` before reading a `fetch` body (js/fetch-check-ok); give requests a `signal` to cancel or time out.
- Never leave a `catch` empty (js/no-empty-catch); await, return or `.catch()` every promise (js/no-floating-promises).
- Attach handlers with `addEventListener` from a module, not `onclick="..."` attributes (js/no-inline-handlers).
- Make `touchstart`, `touchmove` and `wheel` listeners `{ passive: true }` unless they call `preventDefault()` (js/passive-listeners).
- Remove what a view starts (listeners, timers, observers) when it goes away; one `AbortController` signal ends them all (js/listener-cleanup).
- Import images, fonts and media or use the base-path helper; never hard-code `/images/...` in components (js/asset-import).
- Read layout (`getBoundingClientRect`, `offsetWidth`) before writing styles, never alternating in a loop.

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

The real file

Where fe-javascript lands for Augment

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

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

---
description: "Writes and reviews browser JavaScript (plain scripts, modules, framework script blocks) - equality, declarations, async and fetch errors, DOM events, assets through the bundler - so it fails loudly, stays fast and keeps working when moved. Use when writing or editing .js, .mjs, .jsx or a script block, debugging a silent failure or a listener leak, or asked to review JavaScript."
globs: **/*.js,**/*.mjs,**/*.cjs,**/*.jsx,**/*.ts,**/*.tsx
alwaysApply: false
---

# JavaScript in the browser (frontend-skills)

- Compare with `===` and `!==` (js/strict-equality); declare with `const`, or `let` when reassigned, never `var` (js/no-var).
- Never run strings as code: no `eval`, `new Function`, or string timers (js/no-eval); no `document.write` (js/document-write).
- Detect features (`'share' in navigator`, `CSS.supports`), never parse `navigator.userAgent` (js/feature-detect).
- Throw and reject `Error` objects, with `{ cause }` when rethrowing (js/throw-error-objects).
- Check `res.ok` before reading a `fetch` body (js/fetch-check-ok); give requests a `signal` to cancel or time out.
- Never leave a `catch` empty (js/no-empty-catch); await, return or `.catch()` every promise (js/no-floating-promises).
- Attach handlers with `addEventListener` from a module, not `onclick="..."` attributes (js/no-inline-handlers).
- Make `touchstart`, `touchmove` and `wheel` listeners `{ passive: true }` unless they call `preventDefault()` (js/passive-listeners).
- Remove what a view starts (listeners, timers, observers) when it goes away; one `AbortController` signal ends them all (js/listener-cleanup).
- Import images, fonts and media or use the base-path helper; never hard-code `/images/...` in components (js/asset-import).
- Read layout (`getBoundingClientRect`, `offsetWidth`) before writing styles, never alternating in a loop.

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

The real file

Where fe-javascript lands for Continue

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

---
name: "JavaScript in the browser"
description: "Writes and reviews browser JavaScript (plain scripts, modules, framework script blocks) - equality, declarations, async and fetch errors, DOM events, assets through the bundler - so it fails loudly, stays fast and keeps working when moved. Use when writing or editing .js, .mjs, .jsx or a script block, debugging a silent failure or a listener leak, or asked to review JavaScript."
globs: ["**/*.js", "**/*.mjs", "**/*.cjs", "**/*.jsx", "**/*.ts", "**/*.tsx"]
alwaysApply: false
---

# JavaScript in the browser (frontend-skills)

- Compare with `===` and `!==` (js/strict-equality); declare with `const`, or `let` when reassigned, never `var` (js/no-var).
- Never run strings as code: no `eval`, `new Function`, or string timers (js/no-eval); no `document.write` (js/document-write).
- Detect features (`'share' in navigator`, `CSS.supports`), never parse `navigator.userAgent` (js/feature-detect).
- Throw and reject `Error` objects, with `{ cause }` when rethrowing (js/throw-error-objects).
- Check `res.ok` before reading a `fetch` body (js/fetch-check-ok); give requests a `signal` to cancel or time out.
- Never leave a `catch` empty (js/no-empty-catch); await, return or `.catch()` every promise (js/no-floating-promises).
- Attach handlers with `addEventListener` from a module, not `onclick="..."` attributes (js/no-inline-handlers).
- Make `touchstart`, `touchmove` and `wheel` listeners `{ passive: true }` unless they call `preventDefault()` (js/passive-listeners).
- Remove what a view starts (listeners, timers, observers) when it goes away; one `AbortController` signal ends them all (js/listener-cleanup).
- Import images, fonts and media or use the base-path helper; never hard-code `/images/...` in components (js/asset-import).
- Read layout (`getBoundingClientRect`, `offsetWidth`) before writing styles, never alternating in a loop.

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

The real file

Where fe-javascript lands for Amazon Q Developer

.frontend-skills/skills/fe-javascript/SKILL.mdskill
.frontend-skills/skills/fe-javascript/references/javascript.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-javascript` (JavaScript in the browser): when editing `**/*.js`, `**/*.mjs`, `**/*.cjs`, `**/*.jsx`, `**/*.ts`, `**/*.tsx`, first read `.frontend-skills/skills/fe-javascript/SKILL.md`.

The real file

Where fe-javascript lands for Aider

.frontend-skills/skills/fe-javascript/SKILL.mdskill
.frontend-skills/skills/fe-javascript/references/javascript.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-javascript` (JavaScript in the browser): when editing `**/*.js`, `**/*.mjs`, `**/*.cjs`, `**/*.jsx`, `**/*.ts`, `**/*.tsx`, first read `.frontend-skills/skills/fe-javascript/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-javascript skill on this file.
Run the front-end audit on what I changed and fix everything serious.
Explain js/strict-equality and fix it here.

Rules it teaches

js/strict-equality
Compare with === and !==; loose == and != convert types first (x == null as a deliberate null-or-undefined test is the exception).
minorstatic
js/no-var
Declare variables with const, or let when they are reassigned; never with var.
minorstatic
js/no-eval
Never run strings as code - no eval, new Function, or a string as the first argument of setTimeout or setInterval.
seriousstatic
js/document-write
Never insert content with document.write; create elements or load scripts with the DOM.
moderatestatic
js/feature-detect
Test for the feature you need (in, CSS.supports, matchMedia), not the browser name in navigator.userAgent.
minorstatic
js/throw-error-objects
Throw and reject with Error objects (or subclasses), never with strings or plain objects.
minorstatic
js/fetch-check-ok
After fetch, check response.ok (or the status) before reading the body; fetch does not reject on 404 or 500.
moderatestatic
js/no-empty-catch
A catch block never swallows an error silently; handle it, report it, or say in a comment why it is safe to ignore.
moderatestatic
js/no-floating-promises
Every promise is awaited, returned or given a .catch(); an async call is never left floating.
moderatemanual
js/no-inline-handlers
Attach event handlers from script with addEventListener, not with onclick="..." attributes in HTML.
moderatestatic
js/passive-listeners
Mark touchstart, touchmove and wheel listeners { passive true } unless the handler really calls preventDefault().
moderatestatic
js/listener-cleanup
Listeners, timers and observers a view starts are removed when it goes away; one AbortController signal can end them all.
moderatemanual
js/asset-import
In a bundled project, images, fonts and media in component markup are imported or use the base-path helper, not hard-coded root paths.
moderatestatic

The rule digest

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

Compare with === and !== (js/strict-equality); declare with const, or let when reassigned, never var (js/no-var).
Never run strings as code: no eval, new Function, or string timers (js/no-eval); no document.write (js/document-write).
Detect features ('share' in navigator, CSS.supports), never parse navigator.userAgent (js/feature-detect).
Throw and reject Error objects, with { cause } when rethrowing (js/throw-error-objects).
Check res.ok before reading a fetch body (js/fetch-check-ok); give requests a signal to cancel or time out.
Never leave a catch empty (js/no-empty-catch); await, return or .catch() every promise (js/no-floating-promises).
Attach handlers with addEventListener from a module, not onclick="..." attributes (js/no-inline-handlers).
Make touchstart, touchmove and wheel listeners { passive: true } unless they call preventDefault() (js/passive-listeners).
Remove what a view starts (listeners, timers, observers) when it goes away; one AbortController signal ends them all (js/listener-cleanup).
Import images, fonts and media or use the base-path helper; never hard-code /images/... in components (js/asset-import).
Read layout (getBoundingClientRect, offsetWidth) before writing styles, never alternating in a loop.

Steps the agent follows

Load app code as modules: <script type="module" src> (deferred and strict by default). A classic script in <head> gets defer (perf/render-blocking-script).
Insert text with textContent; markup from users only through a sanitizer (see the fe-security skill).
Wrap fetch once: a helper that adds signal (AbortSignal.any([controller.signal, AbortSignal.timeout(8000)])), checks ok, throws an Error with the status, and parses JSON. Show loading, empty and error states where it is called.
Use event delegation for lists and tables: one listener on the container, event.target.closest('[data-id]').
Split rarely used features with import(); keep work off the main thread when a handler takes longer than about 50 ms (scheduler.yield() where supported, or setTimeout chunks).
In TypeScript files also follow fe-typescript; in a framework, its skill decides where effects and listeners live.

How the agent checks the work

npx github:dawidolko/frontend-skills audit --changed reports loose equality, var, eval, document.write, user-agent sniffing, thrown literals, unchecked fetch, empty catches, inline handlers, non-passive scroll listeners and hard-coded asset paths.
Run the project's ESLint (eqeqeq, no-var, no-implied-eval, no-empty); with TypeScript, the typed rule @typescript-eslint/no-floating-promises.
In DevTools, the Performance panel's "Forced reflow" warnings and the Memory panel after navigating away and back show thrashing and leaks.

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/javascript.md1903 tokens

SKILL.md on GitHub