Frontend Skills
English

Skille według technologii

Skill to krótka instrukcja dla agenta AI w otwartym formacie Agent Skills. Instalowane są tylko skille pasujące do stacku projektu; każdy wymienia reguły, których uczy. Treść skilli jest po angielsku, bo czytają ją agenci.

Instalacja dla Twojego agenta

Wybierz, czym uruchamiasz pakiety Node.js i którego agenta używasz. init poznaje stack i instaluje tylko pasujące skille; poniżej pliki, które zapisze dla tego agenta.

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

Co trafia gdzie dla: Claude Code

  • .claude/skills/fe-react/SKILL.mdskill
  • .claude/skills/fe-react/references/react.mdskill
  • .claude/rules/fe-react.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-react.md
---
paths:
  - "**/*.jsx"
  - "**/*.tsx"
---

# React components (frontend-skills)

Writes and reviews React 19 components (also inside Next.js, Vite or React Router apps) - keys, state, effects, events, refs, forms with actions, memoization and React Compiler - so they stay correct, accessible and fast. Use when creating or editing a .jsx or .tsx component or hook, fixing a re-render or stale-state bug, or when asked "review this React code".

- Keys come from the data (`key={item.id}`), never the array index for lists that change (react/no-array-index-key).
- Compute derived values during render; an effect only synchronises with something outside React (react/no-derived-state-effect).
- Declare components at module level; never define a component inside another (react/no-nested-component).
- Keep state minimal and close to where it is used; lift it only as far as the nearest shared parent.
- Handle user actions in event handlers, not in effects that watch state.
- Every effect that subscribes, listens or starts a timer returns a cleanup.
- Interactive elements are `<button>` and `<a>`, not `div` with `onClick` (a11y/no-click-on-static); every `<img>` has `alt` (a11y/img-alt).
- Never mutate state or props; never call hooks conditionally; never read `ref.current` during render.

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

Co trafia gdzie dla: OpenAI Codex

  • .agents/skills/fe-react/SKILL.mdskill
  • .agents/skills/fe-react/references/react.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

Co trafia gdzie dla: Cursor

  • .agents/skills/fe-react/SKILL.mdskill
  • .agents/skills/fe-react/references/react.mdskill
  • .cursor/rules/fe-react.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-react.mdc
---
description: Writes and reviews React 19 components (also inside Next.js, Vite or React Router apps) - keys, state, effects, events, refs, forms with actions, memoization and React Compiler - so they stay correct, accessible and fast. Use when creating or editing a .jsx or .tsx component or hook, fixing a re-render or stale-state bug, or when asked "review this React code".
globs: **/*.jsx, **/*.tsx
alwaysApply: false
---

# React components (frontend-skills)

- Keys come from the data (`key={item.id}`), never the array index for lists that change (react/no-array-index-key).
- Compute derived values during render; an effect only synchronises with something outside React (react/no-derived-state-effect).
- Declare components at module level; never define a component inside another (react/no-nested-component).
- Keep state minimal and close to where it is used; lift it only as far as the nearest shared parent.
- Handle user actions in event handlers, not in effects that watch state.
- Every effect that subscribes, listens or starts a timer returns a cleanup.
- Interactive elements are `<button>` and `<a>`, not `div` with `onClick` (a11y/no-click-on-static); every `<img>` has `alt` (a11y/img-alt).
- Never mutate state or props; never call hooks conditionally; never read `ref.current` during render.

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

Co trafia gdzie dla: GitHub Copilot

  • .agents/skills/fe-react/SKILL.mdskill
  • .agents/skills/fe-react/references/react.mdskill
  • .github/instructions/fe-react.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-react.instructions.md
---
applyTo: "**/*.jsx,**/*.tsx"
description: "Writes and reviews React 19 components (also inside Next.js, Vite or React Router apps) - keys, state, effects, events, refs, forms with actions, memoization and React Compiler - so they stay correct, accessible and fast. Use when creating or editing a .jsx or .tsx component or hook, fixing a re-render or stale-state bug, or when asked \"review this React code\"."
---

# React components (frontend-skills)

- Keys come from the data (`key={item.id}`), never the array index for lists that change (react/no-array-index-key).
- Compute derived values during render; an effect only synchronises with something outside React (react/no-derived-state-effect).
- Declare components at module level; never define a component inside another (react/no-nested-component).
- Keep state minimal and close to where it is used; lift it only as far as the nearest shared parent.
- Handle user actions in event handlers, not in effects that watch state.
- Every effect that subscribes, listens or starts a timer returns a cleanup.
- Interactive elements are `<button>` and `<a>`, not `div` with `onClick` (a11y/no-click-on-static); every `<img>` has `alt` (a11y/img-alt).
- Never mutate state or props; never call hooks conditionally; never read `ref.current` during render.

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

Co trafia gdzie dla: Gemini CLI

  • .agents/skills/fe-react/SKILL.mdskill
  • .agents/skills/fe-react/references/react.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

Co trafia gdzie dla: Antigravity CLI

  • .agents/skills/fe-react/SKILL.mdskill
  • .agents/skills/fe-react/references/react.mdskill
  • .agents/rules/fe-react.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-react.md
---
trigger: glob
globs: "**/*.jsx, **/*.tsx"
description: "Writes and reviews React 19 components (also inside Next.js, Vite or React Router apps) - keys, state, effects, events, refs, forms with actions, memoization and React Compiler - so they stay correct, accessible and fast. Use when creating or editing a .jsx or .tsx component or hook, fixing a re-render or stale-state bug, or when asked \"review this React code\"."
---

# React components (frontend-skills)

- Keys come from the data (`key={item.id}`), never the array index for lists that change (react/no-array-index-key).
- Compute derived values during render; an effect only synchronises with something outside React (react/no-derived-state-effect).
- Declare components at module level; never define a component inside another (react/no-nested-component).
- Keep state minimal and close to where it is used; lift it only as far as the nearest shared parent.
- Handle user actions in event handlers, not in effects that watch state.
- Every effect that subscribes, listens or starts a timer returns a cleanup.
- Interactive elements are `<button>` and `<a>`, not `div` with `onClick` (a11y/no-click-on-static); every `<img>` has `alt` (a11y/img-alt).
- Never mutate state or props; never call hooks conditionally; never read `ref.current` during render.

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

Co trafia gdzie dla: Devin / Windsurf

  • .agents/skills/fe-react/SKILL.mdskill
  • .agents/skills/fe-react/references/react.mdskill
  • .devin/rules/fe-react.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-react.md
---
trigger: glob
globs: "**/*.jsx,**/*.tsx"
---

# React components (frontend-skills)

Writes and reviews React 19 components (also inside Next.js, Vite or React Router apps) - keys, state, effects, events, refs, forms with actions, memoization and React Compiler - so they stay correct, accessible and fast. Use when creating or editing a .jsx or .tsx component or hook, fixing a re-render or stale-state bug, or when asked "review this React code".

- Keys come from the data (`key={item.id}`), never the array index for lists that change (react/no-array-index-key).
- Compute derived values during render; an effect only synchronises with something outside React (react/no-derived-state-effect).
- Declare components at module level; never define a component inside another (react/no-nested-component).
- Keep state minimal and close to where it is used; lift it only as far as the nearest shared parent.
- Handle user actions in event handlers, not in effects that watch state.
- Every effect that subscribes, listens or starts a timer returns a cleanup.
- Interactive elements are `<button>` and `<a>`, not `div` with `onClick` (a11y/no-click-on-static); every `<img>` has `alt` (a11y/img-alt).
- Never mutate state or props; never call hooks conditionally; never read `ref.current` during render.

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

Co trafia gdzie dla: OpenCode

  • .agents/skills/fe-react/SKILL.mdskill
  • .agents/skills/fe-react/references/react.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

Co trafia gdzie dla: Cline

  • .claude/skills/fe-react/SKILL.mdskill
  • .claude/skills/fe-react/references/react.mdskill
  • .clinerules/fe-react.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-react.md
---
paths:
  - "**/*.jsx"
  - "**/*.tsx"
---

# React components (frontend-skills)

Writes and reviews React 19 components (also inside Next.js, Vite or React Router apps) - keys, state, effects, events, refs, forms with actions, memoization and React Compiler - so they stay correct, accessible and fast. Use when creating or editing a .jsx or .tsx component or hook, fixing a re-render or stale-state bug, or when asked "review this React code".

- Keys come from the data (`key={item.id}`), never the array index for lists that change (react/no-array-index-key).
- Compute derived values during render; an effect only synchronises with something outside React (react/no-derived-state-effect).
- Declare components at module level; never define a component inside another (react/no-nested-component).
- Keep state minimal and close to where it is used; lift it only as far as the nearest shared parent.
- Handle user actions in event handlers, not in effects that watch state.
- Every effect that subscribes, listens or starts a timer returns a cleanup.
- Interactive elements are `<button>` and `<a>`, not `div` with `onClick` (a11y/no-click-on-static); every `<img>` has `alt` (a11y/img-alt).
- Never mutate state or props; never call hooks conditionally; never read `ref.current` during render.

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

Co trafia gdzie dla: Zed

  • .agents/skills/fe-react/SKILL.mdskill
  • .agents/skills/fe-react/references/react.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

Co trafia gdzie dla: JetBrains Junie

  • .agents/skills/fe-react/SKILL.mdskill
  • .agents/skills/fe-react/references/react.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

Co trafia gdzie dla: Kiro

  • .kiro/skills/fe-react/SKILL.mdskill
  • .kiro/skills/fe-react/references/react.mdskill
  • .kiro/steering/fe-react.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-react.md
---
inclusion: fileMatch
fileMatchPattern: ["**/*.jsx", "**/*.tsx"]
---

# React components (frontend-skills)

Writes and reviews React 19 components (also inside Next.js, Vite or React Router apps) - keys, state, effects, events, refs, forms with actions, memoization and React Compiler - so they stay correct, accessible and fast. Use when creating or editing a .jsx or .tsx component or hook, fixing a re-render or stale-state bug, or when asked "review this React code".

- Keys come from the data (`key={item.id}`), never the array index for lists that change (react/no-array-index-key).
- Compute derived values during render; an effect only synchronises with something outside React (react/no-derived-state-effect).
- Declare components at module level; never define a component inside another (react/no-nested-component).
- Keep state minimal and close to where it is used; lift it only as far as the nearest shared parent.
- Handle user actions in event handlers, not in effects that watch state.
- Every effect that subscribes, listens or starts a timer returns a cleanup.
- Interactive elements are `<button>` and `<a>`, not `div` with `onClick` (a11y/no-click-on-static); every `<img>` has `alt` (a11y/img-alt).
- Never mutate state or props; never call hooks conditionally; never read `ref.current` during render.

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

Co trafia gdzie dla: Augment

  • .agents/skills/fe-react/SKILL.mdskill
  • .agents/skills/fe-react/references/react.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

Co trafia gdzie dla: Trae

  • .trae/skills/fe-react/SKILL.mdskill
  • .trae/skills/fe-react/references/react.mdskill
  • .trae/rules/fe-react.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-react.md
---
description: "Writes and reviews React 19 components (also inside Next.js, Vite or React Router apps) - keys, state, effects, events, refs, forms with actions, memoization and React Compiler - so they stay correct, accessible and fast. Use when creating or editing a .jsx or .tsx component or hook, fixing a re-render or stale-state bug, or when asked \"review this React code\"."
globs: **/*.jsx,**/*.tsx
alwaysApply: false
---

# React components (frontend-skills)

- Keys come from the data (`key={item.id}`), never the array index for lists that change (react/no-array-index-key).
- Compute derived values during render; an effect only synchronises with something outside React (react/no-derived-state-effect).
- Declare components at module level; never define a component inside another (react/no-nested-component).
- Keep state minimal and close to where it is used; lift it only as far as the nearest shared parent.
- Handle user actions in event handlers, not in effects that watch state.
- Every effect that subscribes, listens or starts a timer returns a cleanup.
- Interactive elements are `<button>` and `<a>`, not `div` with `onClick` (a11y/no-click-on-static); every `<img>` has `alt` (a11y/img-alt).
- Never mutate state or props; never call hooks conditionally; never read `ref.current` during render.

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

Co trafia gdzie dla: Continue

  • .frontend-skills/skills/fe-react/SKILL.mdskill
  • .frontend-skills/skills/fe-react/references/react.mdskill
  • .continue/rules/fe-react.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-react.md
---
name: "React components"
description: "Writes and reviews React 19 components (also inside Next.js, Vite or React Router apps) - keys, state, effects, events, refs, forms with actions, memoization and React Compiler - so they stay correct, accessible and fast. Use when creating or editing a .jsx or .tsx component or hook, fixing a re-render or stale-state bug, or when asked \"review this React code\"."
globs: ["**/*.jsx", "**/*.tsx"]
alwaysApply: false
---

# React components (frontend-skills)

- Keys come from the data (`key={item.id}`), never the array index for lists that change (react/no-array-index-key).
- Compute derived values during render; an effect only synchronises with something outside React (react/no-derived-state-effect).
- Declare components at module level; never define a component inside another (react/no-nested-component).
- Keep state minimal and close to where it is used; lift it only as far as the nearest shared parent.
- Handle user actions in event handlers, not in effects that watch state.
- Every effect that subscribes, listens or starts a timer returns a cleanup.
- Interactive elements are `<button>` and `<a>`, not `div` with `onClick` (a11y/no-click-on-static); every `<img>` has `alt` (a11y/img-alt).
- Never mutate state or props; never call hooks conditionally; never read `ref.current` during render.

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

Co trafia gdzie dla: Amazon Q Developer

  • .frontend-skills/skills/fe-react/SKILL.mdskill
  • .frontend-skills/skills/fe-react/references/react.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-react` (React components): when editing `**/*.jsx`, `**/*.tsx`, first read `.frontend-skills/skills/fe-react/SKILL.md`.
Prawdziwy plik

Co trafia gdzie dla: Aider

  • .frontend-skills/skills/fe-react/SKILL.mdskill
  • .frontend-skills/skills/fe-react/references/react.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-react` (React components): when editing `**/*.jsx`, `**/*.tsx`, first read `.frontend-skills/skills/fe-react/SKILL.md`.
Prawdziwy plik

Podstawy 5

  • Builds and reviews HTML forms that work natively - the right input types and inputmode, autocomplete tokens, constraint validation and custom messages, select placeholders, file inputs, and submission through the form's submit event. Accessibility of forms is in fe-a11y-forms.

    każdego projektu webowego9 regułprzy użyciu: 954 tokeny

    1 krytyczna 1 poważna 5 umiarkowana 2 drobna

  • Writes and reviews HTML documents and templates (plain HTML, JSX, Vue, Svelte, Astro, Angular) with valid structure, semantic elements, landmarks, headings, images and buttons that work for everyone.

    każdego projektu webowego6 regułprzy użyciu: 869 tokenów

    1 krytyczna 2 poważna 2 umiarkowana 1 drobna

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

    każdego projektu webowego13 regułprzy użyciu: 1070 tokenów

    1 poważna 8 umiarkowana 4 drobna

  • Responsive design

    fe-responsive

    Makes pages and components work from 320 CSS px phones to wide screens and at 400% zoom - viewport meta, fluid type and space, content breakpoints and container queries, no fixed wide boxes, dvh units, touch targets, no hover-only content, orientation and print.

    każdego projektu webowego9 regułprzy użyciu: 1080 tokenów

    1 krytyczna 6 poważna 2 drobna

  • TypeScript

    fe-typescript

    Writes and reviews TypeScript for front-end apps (TypeScript 7, React, Vue, Svelte, Angular, Astro) - strict config, no any, types checked at the boundaries (API, storage, forms), narrowing instead of casts, a tsconfig that builds on 6 and 7.

    typescript6 regułprzy użyciu: 1016 tokenów

    4 umiarkowana 2 drobna

Style 7

  • CSS architecture and tokens

    fe-css-architecture

    Organises and reviews stylesheets (CSS, SCSS, Less, component styles) around the project's own tokens, helpers and icon set - cascade layers, specificity, rem sizing, unitless line-height, z-index scale, no magic numbers or hard-coded asset paths.

    każdego projektu webowego11 regułprzy użyciu: 1053 tokeny

    11 drobna

  • CSS layout

    fe-css-layout

    Builds and reviews page and component layout in CSS with grid, flexbox, gap, container queries and logical properties, with no float columns, no fixed heights on text and no magic offsets.

    każdego projektu webowego6 regułprzy użyciu: 879 tokenów

    1 poważna 1 umiarkowana 4 drobna

  • Modern CSS features

    fe-css-modern

    Uses current CSS features where they replace JavaScript or preprocessor work - native nesting, :has(), @scope, color-mix() and oklch, light-dark(), @starting-style, @property, text-wrap, anchor positioning - each with its Baseline status and a fallback.

    każdego projektu webowego4 regułyprzy użyciu: 839 tokenów

    1 poważna 2 umiarkowana 1 drobna

  • Icons

    fe-icons

    Uses and builds icons the way the project does - one icon set generated by the build from a folder of SVG files (sprite, icon classes or an Icon component per framework), currentColor sizing, decorative vs meaningful icons - and never a hard-coded icon file path.

    każdego projektu webowego4 regułyprzy użyciu: 968 tokenów

    1 krytyczna 1 umiarkowana 2 drobna

  • Adds smooth, safe motion - transitions and keyframes on transform and opacity, prefers-reduced-motion, pause controls for auto-playing content, View Transitions and scroll-driven animations with feature checks, @starting-style for entry effects, and motion libraries set for reduced motion.

    każdego projektu webowego4 regułyprzy użyciu: 838 tokenów

    1 poważna 3 umiarkowana

  • Writes and reviews Sass (SCSS) for Dart Sass - the module system with @use and @forward, sass:math and sass:color, division, placeholders, the project's px-to-rem helper - and says when plain CSS now does the job.

    sass9 regułprzy użyciu: 1016 tokenów

    2 umiarkowana 7 drobna

  • Tailwind CSS

    fe-tailwind

    Writes and reviews Tailwind CSS 4 code - CSS-first setup with @import and @theme, complete class names, tokens instead of arbitrary values, conflict-free class lists, sr-only labels, focus and reduced-motion variants.

    tailwind10 regułprzy użyciu: 1097 tokenów

    2 poważna 4 umiarkowana 4 drobna

Frameworki 11

  • Writes and reviews Angular 22 components, templates and services - signals, built-in control flow, zoneless and OnPush defaults, SSR and hydration, NgOptimizedImage, router accessibility, DomSanitizer - for fast, accessible apps.

    angular9 regułprzy użyciu: 1152 tokeny

    2 poważna 6 umiarkowana 1 drobna

  • Writes and reviews Astro 7 sites - islands and client directives, server islands, processed scripts, astro:assets images, content collections and environment variables - so pages ship little JavaScript and stay safe.

    astro7 regułprzy użyciu: 920 tokenów

    1 poważna 6 umiarkowana

  • Data fetching

    fe-data-fetching

    Loads and changes server data in front-end apps - framework loaders, TanStack Query, SWR, Nuxt useFetch, Angular httpResource - with correct cache keys, one stable client, loading and error states, race-free effects and invalidation after mutations.

    react, vue, svelte, angular, next, nuxt8 regułprzy użyciu: 876 tokenów

    3 poważna 5 umiarkowana

  • Writes and reviews Next.js 16 App Router code - Server and Client Components, async params, Server Actions, caching, metadata, next/image, next/font and environment variables - so routes stay fast, safe and correct.

    next9 regułprzy użyciu: 1053 tokeny

    5 poważna 4 umiarkowana

  • Nuxt apps

    fe-nuxt

    Writes and reviews Nuxt 4 apps - useFetch and useAsyncData vs $fetch, keys, per-request state, server-safe setup, runtime config, route announcements - so pages render on the server without leaks, double requests or hydration errors.

    nuxt10 regułprzy użyciu: 1136 tokenów

    3 poważna 7 umiarkowana

  • Writes and reviews React 19 components (also inside Next.js, Vite or React Router apps) - keys, state, effects, events, refs, forms with actions, memoization and React Compiler - so they stay correct, accessible and fast.

    react5 regułprzy użyciu: 794 tokeny

    1 krytyczna 2 poważna 2 umiarkowana

  • Decides where front-end state lives and writes stores that stay correct - component state, URL, context, Pinia, Zustand, Redux Toolkit, Svelte runes, Angular signals - with stable selectors and no server data copied into stores.

    react, vue, svelte, angular6 regułprzy użyciu: 888 tokenów

    3 poważna 1 umiarkowana 2 drobna

  • Writes and reviews Svelte 5 components in runes mode - $state, $derived, $effect, $props, snippets, event attributes, keyed each blocks - and moves Svelte 4 syntax forward, so components stay reactive, correct and accessible.

    svelte8 regułprzy użyciu: 963 tokeny

    1 krytyczna 1 poważna 4 umiarkowana 2 drobna

  • SvelteKit apps

    fe-sveltekit

    Builds and reviews SvelteKit 3 apps (and Kit 2 projects on the way up) - routes, load functions, form actions with progressive enhancement, page titles, server-only state and rendering options - so pages work before JavaScript, load without waterfalls and never leak data between users.

    sveltekit7 regułprzy użyciu: 1033 tokeny

    2 poważna 5 umiarkowana

  • Writes and reviews Vue 3.5 single-file components with script setup and the Composition API - keyed lists, props and emits, refs and reactive, pure computeds, watchers with cleanup, navigation links - so they stay reactive, correct and accessible.

    vue, nuxt12 regułprzy użyciu: 1070 tokenów

    1 krytyczna 1 poważna 8 umiarkowana 2 drobna

  • Web components and Lit

    fe-web-components

    Writes and reviews custom elements, plain or with Lit 3 - names, lifecycle, attributes and properties, shadow DOM styling, events, form-associated controls with ElementInternals, accessibility across the shadow boundary.

    lit, webc9 regułprzy użyciu: 1077 tokenów

    6 poważna 3 umiarkowana

Dostępność 12

  • Gets names, roles, states and announcements right in any stack to WCAG 2.2 AA as a target - native elements before ARIA, accessible names for icon buttons and links, valid roles and aria-* attributes, aria-hidden used safely, state attributes, live regions for status messages.

    każdego projektu webowego8 regułprzy użyciu: 1070 tokenów

    1 krytyczna 6 poważna 1 drobna

  • Carousels and toasts

    fe-a11y-carousel-toast

    Builds carousels, sliders of content, toasts, snackbars and notifications that people can pause, operate and hear (WAI-ARIA APG Carousel and Alert patterns, WCAG 2.2.1, 2.2.2, 4.1.3 at AA as a target).

    każdego projektu webowego5 regułprzy użyciu: 791 tokenów

    1 krytyczna 3 poważna 1 umiarkowana

  • Builds autocomplete inputs, searchable selects, select-only comboboxes and listboxes that work with keyboard and screen readers (WAI-ARIA APG Combobox and Listbox patterns), after checking whether a native select or datalist is enough.

    każdego projektu webowego6 regułprzy użyciu: 872 tokeny

    1 krytyczna 5 poważna

  • The entry point for accessibility in any front-end stack - WCAG 2.2 A and AA mapped to code, the page basics (language, title, landmarks, iframes, timing), what automated checks find and what needs a person, and which accessibility skill to load next.

    każdego projektu webowego12 regułprzy użyciu: 1097 tokenów

    3 krytyczna 8 poważna 1 umiarkowana

  • Dialogs and modals

    fe-a11y-dialog

    Builds modal and non-modal dialogs, alert dialogs, drawers and confirmations that work with keyboard and screen readers (WAI-ARIA APG Dialog pattern) on the native dialog element - name, initial focus, inert background, Escape, focus return.

    każdego projektu webowego5 regułprzy użyciu: 846 tokenów

    1 krytyczna 3 poważna 1 drobna

  • Accessible forms

    fe-a11y-forms

    Builds and reviews accessible forms in any stack (HTML, React, Vue, Svelte, Angular, Astro) to WCAG 2.2 AA as a target - labels, autocomplete, required fields, grouping, error messages, focus after submit, sign-in without memory tests.

    każdego projektu webowego4 regułyprzy użyciu: 875 tokenów

    1 krytyczna 2 poważna 1 drobna

  • Makes every control work from the keyboard in any stack (HTML, React, Vue, Svelte, Angular, Astro) to WCAG 2.2 AA as a target - native controls, focus order, visible focus, focus not hidden by sticky bars, skip links, focus after route changes, no traps.

    każdego projektu webowego9 regułprzy użyciu: 1127 tokenów

    1 krytyczna 6 poważna 2 umiarkowana

  • Makes audio, video and moving content usable to WCAG 2.2 AA as a target - captions with track, transcripts, audio description, no autoplaying sound, pause controls for anything that moves or loops, no flashing, reduced motion.

    każdego projektu webowego5 regułprzy użyciu: 781 tokenów

    2 krytyczna 2 poważna 1 umiarkowana

  • Builds site navigation, dropdowns, disclosure menus and menu buttons that work with keyboard and screen readers (WAI-ARIA APG Disclosure and Menu Button patterns) - links in a nav, aria-expanded, aria-current, when role="menu" is right and its keys.

    każdego projektu webowego5 regułprzy użyciu: 872 tokeny

    4 poważna 1 umiarkowana

  • Data tables

    fe-a11y-tables

    Builds data tables that screen readers can navigate and small screens can show (WCAG 2.2 AA as a target) - th with scope, captions, sortable headers with aria-sort, responsive scroll containers, and when a table should be a list or a grid.

    każdego projektu webowego5 regułprzy użyciu: 864 tokeny

    3 poważna 1 umiarkowana 1 drobna

  • Tabs and accordions

    fe-a11y-tabs-accordion

    Builds tabs, accordions and FAQ sections with the right roles, states and keyboard model (WAI-ARIA APG Tabs and Accordion patterns), preferring details and summary where they fit.

    każdego projektu webowego5 regułprzy użyciu: 821 tokenów

    4 poważna 1 umiarkowana

  • Keeps visual design readable and usable to WCAG 2.2 AA as a target - text and UI contrast, no colour-only meaning, 24px targets, reflow at 320px, resize and text spacing, dismissible hover content.

    każdego projektu webowego8 regułprzy użyciu: 998 tokenów

    6 poważna 1 umiarkowana 1 drobna

Wydajność 5

  • Core Web Vitals

    fe-core-web-vitals

    Improves Core Web Vitals in any stack - LCP 2.5 s, INP 200 ms and CLS 0.1 at the 75th percentile - with causes and fixes per framework (Next.js, Nuxt, Angular, Astro, SvelteKit, plain HTML), field measurement with web-vitals and the back/forward cache.

    każdego projektu webowego8 regułprzy użyciu: 956 tokenów

    7 umiarkowana 1 drobna

  • Web fonts

    fe-fonts

    Loads web fonts fast and without layout shift - self-hosted WOFF2, font-display, a correct preload with crossorigin, subsetting and unicode-range, variable fonts, metric-matched fallbacks, system font stacks, and next/font or @nuxt/fonts.

    każdego projektu webowego6 regułprzy użyciu: 875 tokenów

    2 umiarkowana 4 drobna

  • Delivers images that are light, sharp and stable - AVIF or WebP, srcset and sizes, picture for formats and art direction, width and height against layout shift, an eager high-priority LCP image, lazy loading below the fold, video instead of GIF, SVG for icons and logos, and the framework image components.

    każdego projektu webowego9 regułprzy użyciu: 1008 tokenów

    1 krytyczna 2 poważna 5 umiarkowana 1 drobna

  • Runs and reads Lighthouse 13 for performance, accessibility, best practices and SEO - locally, in Chrome DevTools, PageSpeed Insights and CI with Lighthouse CI - and turns the report into fixes without chasing the score.

    każdego projektu webowego6 regułprzy użyciu: 820 tokenów

    3 umiarkowana 3 drobna

  • Ships less and earlier - JavaScript and CSS delivery, code splitting, hydration cost, third-party scripts and facades, resource hints, caching headers and modern browser targets - in any stack.

    każdego projektu webowego8 regułprzy użyciu: 837 tokenów

    7 umiarkowana 1 drobna

Jakość 5

  • Makes front-end code ready for more than one language and region - lang and dir, right-to-left layout with logical properties, whole messages with ICU plurals, Intl for dates, numbers, prices and sorting, complete locale files.

    każdego projektu webowego9 regułprzy użyciu: 1010 tokenów

    4 poważna 4 umiarkowana 1 drobna

  • Keeps front-end code from opening security holes in any stack - XSS sinks (innerHTML, dangerouslySetInnerHTML, v-html, {@html}) and sanitizing, no eval, postMessage origins, secrets kept out of public env variables, CSP and HTTP-only headers, SRI, window.open, HTTPS.

    każdego projektu webowego9 regułprzy użyciu: 971 tokenów

    1 krytyczna 4 poważna 3 umiarkowana 1 drobna

  • SEO and metadata

    fe-seo-metadata

    Gets pages found and shared correctly - titles, meta descriptions, canonical URLs, robots and noindex, status codes, sitemaps, hreflang, Open Graph and JSON-LD structured data, with the metadata API of Next.js, Nuxt, Astro, SvelteKit and Angular.

    każdego projektu webowego10 regułprzy użyciu: 951 tokenów

    2 poważna 5 umiarkowana 3 drobna

  • Writes reliable front-end tests with the project's own runner - unit and component tests with Vitest or Jest and Testing Library queries by role, end-to-end tests with Playwright 1.65 or Cypress, network mocking, accessibility scans with axe-core, without flakes.

    vitest, jest, playwright, cypress, testing-library5 regułprzy użyciu: 949 tokenów

    1 poważna 3 umiarkowana 1 drobna

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

    vite, eslint, prettier, biome6 regułprzy użyciu: 857 tokenów

    3 umiarkowana 3 drobna

Praca z narzędziem 5

  • Audits a front-end project with frontend-skills - runs the static audit (and the page audit with --url when a page is running), reads the condensed JSON, explains the top findings by rule id with their source, lists what needs a person, and proposes an order of fixes.

    każdego projektu webowego5 regułprzy użyciu: 778 tokenów

    3 krytyczna 1 poważna 1 umiarkowana

  • Build a component

    fe-component

    Builds a new UI component the right way round in any stack - native semantics first, the keyboard model from the WAI-ARIA APG pattern, names and states, every visual state, responsive and reduced motion, the project helpers and tokens, tests by role, then the audit.

    każdego projektu webowego7 regułprzy użyciu: 972 tokeny

    1 krytyczna 3 poważna 3 drobna

  • Fixes front-end audit findings by rule id - smallest correct change first, shared components before pages, the rule's own fix and source, re-running audit --changed after each fix, and never suppressing a finding without the rule id and a reason.

    każdego projektu webowego2 regułyprzy użyciu: 670 tokenów

    1 umiarkowana 1 drobna

  • Teaches the agent this project before front-end work - runs frontend-skills init or learn, reads the profile (stack, versions, helpers), confirms detected conventions such as the rem function, icon build and tokens with the person, and records confirmed lessons.

    każdego projektu webowego1 regułaprzy użyciu: 748 tokenów

    1 drobna

  • Reviews a diff or pull request of front-end code - runs audit --changed, maps the touched files to their skills, walks the manual rules of those skills (keyboard, screen reader, motion, content), and reports findings by rule id with file, line and fix.

    każdego projektu webowego5 regułprzy użyciu: 787 tokenów

    1 krytyczna 3 poważna 1 umiarkowana

Tokeny to szacunek frontend-skills estimate v1 (calibrated on o200k), zmierzony poleceniem frontend-skills tokens --all podczas budowania tej strony.