Frontend Skills
English

Podstawy

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-javascriptkażdego projektu webowego13 regułładowane zawsze: 79 tokenów; przy użyciu: 1070 tokenów; w referencjach na żądanie: 1903 tokeny.

Instalacja

init instaluje ten skill, gdy projekt używa: każdego projektu webowego. Wybierz agenta, aby zobaczyć, gdzie trafią jego pliki.

Agent
npx github:dawidolko/frontend-skills init

Bez --agents polecenie init rozpoznaje agentów po tym, co projekt już ma, a gdy nie znajdzie żadnego, pyta:

Po czym init rozpoznaje każdego z agentów (17)
AgentRozpoznawany po
Claude CodeCLAUDE.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 CLIGEMINI.md .gemini
Antigravity CLI.agents/rules .agent/rules
Devin / Windsurf.devin .windsurf .windsurfrules
OpenCodeopencode.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

Gdzie trafia fe-javascript dla: Claude Code

  • .claude/skills/fe-javascript/SKILL.mdskill
  • .claude/skills/fe-javascript/references/javascript.mdskill
  • .claude/rules/fe-javascript.mdplik reguł
  • CLAUDE.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.
Prawdziwy plik

Gdzie trafia fe-javascript dla: OpenAI Codex

  • .agents/skills/fe-javascript/SKILL.mdskill
  • .agents/skills/fe-javascript/references/javascript.mdskill
  • AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

OpenAI Codex nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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.
Prawdziwy plik

Gdzie trafia fe-javascript dla: Cursor

  • .agents/skills/fe-javascript/SKILL.mdskill
  • .agents/skills/fe-javascript/references/javascript.mdskill
  • .cursor/rules/fe-javascript.mdcplik reguł
  • AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.
Prawdziwy plik

Gdzie trafia fe-javascript dla: GitHub Copilot

  • .agents/skills/fe-javascript/SKILL.mdskill
  • .agents/skills/fe-javascript/references/javascript.mdskill
  • .github/instructions/fe-javascript.instructions.mdplik reguł
  • AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.
Prawdziwy plik

Gdzie trafia fe-javascript dla: Gemini CLI

  • .agents/skills/fe-javascript/SKILL.mdskill
  • .agents/skills/fe-javascript/references/javascript.mdskill
  • GEMINI.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .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 nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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.
Prawdziwy plik

Gdzie trafia fe-javascript dla: Antigravity CLI

  • .agents/skills/fe-javascript/SKILL.mdskill
  • .agents/skills/fe-javascript/references/javascript.mdskill
  • .agents/rules/fe-javascript.mdplik reguł
  • AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.
Prawdziwy plik

Gdzie trafia fe-javascript dla: Devin / Windsurf

  • .agents/skills/fe-javascript/SKILL.mdskill
  • .agents/skills/fe-javascript/references/javascript.mdskill
  • .devin/rules/fe-javascript.mdplik reguł
  • AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .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.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.
Prawdziwy plik

Gdzie trafia fe-javascript dla: OpenCode

  • .agents/skills/fe-javascript/SKILL.mdskill
  • .agents/skills/fe-javascript/references/javascript.mdskill
  • AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

OpenCode nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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.
Prawdziwy plik

Gdzie trafia fe-javascript dla: Cline

  • .claude/skills/fe-javascript/SKILL.mdskill
  • .claude/skills/fe-javascript/references/javascript.mdskill
  • .clinerules/fe-javascript.mdplik reguł
  • AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

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

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.
Prawdziwy plik

Gdzie trafia fe-javascript dla: Zed

  • .agents/skills/fe-javascript/SKILL.mdskill
  • .agents/skills/fe-javascript/references/javascript.mdskill
  • CLAUDE.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

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

Zed nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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.
Prawdziwy plik

Gdzie trafia fe-javascript dla: JetBrains Junie

  • .agents/skills/fe-javascript/SKILL.mdskill
  • .agents/skills/fe-javascript/references/javascript.mdskill
  • AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

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

JetBrains Junie nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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.
Prawdziwy plik

Gdzie trafia fe-javascript dla: Kiro

  • .kiro/skills/fe-javascript/SKILL.mdskill
  • .kiro/skills/fe-javascript/references/javascript.mdskill
  • .kiro/steering/fe-javascript.mdplik reguł
  • AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.
Prawdziwy plik

Gdzie trafia fe-javascript dla: Augment

  • .agents/skills/fe-javascript/SKILL.mdskill
  • .agents/skills/fe-javascript/references/javascript.mdskill
  • AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Augment nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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.
Prawdziwy plik

Gdzie trafia fe-javascript dla: Trae

  • .trae/skills/fe-javascript/SKILL.mdskill
  • .trae/skills/fe-javascript/references/javascript.mdskill
  • .trae/rules/fe-javascript.mdplik reguł
  • AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

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

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.
Prawdziwy plik

Gdzie trafia fe-javascript dla: Continue

  • .frontend-skills/skills/fe-javascript/SKILL.mdskill
  • .frontend-skills/skills/fe-javascript/references/javascript.mdskill
  • .continue/rules/fe-javascript.mdplik reguł

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.
Prawdziwy plik

Gdzie trafia fe-javascript dla: Amazon Q Developer

  • .frontend-skills/skills/fe-javascript/SKILL.mdskill
  • .frontend-skills/skills/fe-javascript/references/javascript.mdskill
  • .amazonq/rules/frontend-skills.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .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 nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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`.
Prawdziwy plik

Gdzie trafia fe-javascript dla: Aider

  • .frontend-skills/skills/fe-javascript/SKILL.mdskill
  • .frontend-skills/skills/fe-javascript/references/javascript.mdskill
  • CONVENTIONS.mdblok instrukcji
  • .aider.conf.ymlkonfiguracja

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Aider nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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`.
Prawdziwy plik

Jak go używać

Po instalacji agent sam ładuje skill, gdy zadanie pasuje do jego opisu. Możesz też poprosić o niego własnymi słowami, na przykład:

A żeby sprawdzić i poprawić pracę:

  • Użyj skilla fe-javascript na tym pliku.
  • Uruchom audyt front-endu na moich zmianach i popraw wszystko, co poważne.
  • Wyjaśnij js/strict-equality i popraw to tutaj.

Reguły, których uczy

  • js/strict-equality

    Compare with === and !==; loose == and != convert types first (x == null as a deliberate null-or-undefined test is the exception).

    drobnastatyczne

  • js/no-var

    Declare variables with const, or let when they are reassigned; never with var.

    drobnastatyczne

  • js/no-eval

    Never run strings as code - no eval, new Function, or a string as the first argument of setTimeout or setInterval.

    poważnastatyczne

  • js/document-write

    Never insert content with document.write; create elements or load scripts with the DOM.

    umiarkowanastatyczne

  • js/feature-detect

    Test for the feature you need (in, CSS.supports, matchMedia), not the browser name in navigator.userAgent.

    drobnastatyczne

  • js/throw-error-objects

    Throw and reject with Error objects (or subclasses), never with strings or plain objects.

    drobnastatyczne

  • js/fetch-check-ok

    After fetch, check response.ok (or the status) before reading the body; fetch does not reject on 404 or 500.

    umiarkowanastatyczne

  • 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.

    umiarkowanastatyczne

  • js/no-floating-promises

    Every promise is awaited, returned or given a .catch(); an async call is never left floating.

    umiarkowanaręczne

  • js/no-inline-handlers

    Attach event handlers from script with addEventListener, not with onclick="..." attributes in HTML.

    umiarkowanastatyczne

  • js/passive-listeners

    Mark touchstart, touchmove and wheel listeners { passive true } unless the handler really calls preventDefault().

    umiarkowanastatyczne

  • js/listener-cleanup

    Listeners, timers and observers a view starts are removed when it goes away; one AbortController signal can end them all.

    umiarkowanaręczne

  • 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.

    umiarkowanastatyczne

Skrót reguł

Ta część jest kopiowana do zawężonego pliku reguł każdego agenta, więc musi być zrozumiała sama w sobie:

  • 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.

Kroki, które wykonuje agent

  1. 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).
  2. Insert text with textContent; markup from users only through a sanitizer (see the fe-security skill).
  3. 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.
  4. Use event delegation for lists and tables: one listener on the container, event.target.closest('[data-id]').
  5. 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).
  6. In TypeScript files also follow fe-typescript; in a framework, its skill decides where effects and listeners live.

Jak agent sprawdza swoją pracę

  • 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.

Sprawdzane audytem

Testy statyczne tych reguł działają w audit; to prawdziwa sesja na przykładowym projekcie:

Nagranie terminala: audit wypisuje znaleziska według wagi z identyfikatorami reguł i miejscem plik:linia i kończy się błędem od progu serious.
audit: liczby według wagi, każda reguła z pierwszym miejscem, kod wyjścia.

Pliki referencyjne

SKILL.md na GitHubie