Frontend Skills
English

Jak to działa

Dwie rzeczy w jednym repozytorium: słownik (skille, które mówią agentowi, jak pisać kod front-endu, oraz reguły ze stałymi identyfikatorami) i polecenie, które dopasowuje słownik do konkretnego projektu.

Nagranie terminala: init poznaje projekt React z Tailwindem, instaluje pasujące skille dla Claude Code, zapisuje profil i uruchamia pierwszy audyt.
init na przykładowym projekcie: wykryty stack, zaplanowane skille i pliki, pierwszy audyt.

Profil projektu

init i learn czytają projekt w jednym przebiegu, bez sieci: pliki package.json (oraz workspace'y w monorepo), pliki lock, konfiguracje takie jak next.config.*, angular.json czy tailwind.config.* i zainstalowane wersje z node_modules. Folder bez package.json, w którym są pliki HTML, CSS i JavaScript, to zwykła strona. Wynikiem jest .frontend-skills/profile.json, commitowany razem z projektem:

.frontend-skills/profile.json
{
  "version": 1,
  "packageManager": "pnpm",
  "projects": [
    {
      "path": "apps/web",
      "frameworks": { "next": "16.4.0", "react": "19.3.0" },
      "typescript": "7.0.0",
      "styling": ["tailwind"],
      "testing": ["vitest", "playwright"]
    }
  ],
  "stack": ["web", "react", "next", "typescript", "tailwind", "vitest", "playwright"],
  "helpers": {
    "rem-function": { "name": "rem-calc", "call": "rem-calc(16px)", "file": "src/styles/_functions.scss" }
  },
  "agents": ["claude", "cursor"],
  "skills": ["fe-html", "fe-react", "fe-a11y-forms"],
  "audit": { "failOn": "serious", "ignore": [], "exclude": [] }
}
Przykład

stack decyduje, które skille zostaną zainstalowane: skill trafia do projektu, gdy profil ma choć jeden z wymaganych przez niego kluczy. Obiekt audit należy do Ciebie; learn i update go nie zmieniają.

Własne narzędzia Twojego projektu

Reguły trzymają się konwencji projektu, jeśli ją ma. Profil zapisuje takie narzędzia jak funkcja px→rem, generowane klasy ikon, sprite SVG, design tokeny albo zestaw zmiennych CSS, a reguły, które od nich zależą, podają Twoje narzędzie: „pisz rozmiary przez rem-calc(16px)” zamiast ogólnej wskazówki. Możesz poprawić albo dopisać narzędzie w profilu; Twoje wpisy przetrwają learn i update.

Pliki dla każdego agenta

Skill jest pisany raz, jako folder Agent Skills (SKILL.md, references/, scripts/). Każdy agent ma adapter, który wie, gdzie ten agent szuka plików i w jakim formacie. Nikt nie edytuje wygenerowanych plików; update zapisuje je od nowa, a uninstall usuwa.

Co jest zapisywane dla każdego agenta
AgentCzytane foldery skilliPliki reguł zawężone do typów plikówInstrukcje ładowane zawsze
Claude Code.claude/skills/.claude/rules/<skill>.mdAGENTS.md *
OpenAI Codex.agents/skills/—AGENTS.md
Cursor.agents/skills/ .cursor/skills/ .claude/skills/ .codex/skills/.cursor/rules/<skill>.mdcAGENTS.md
GitHub Copilot.agents/skills/ .github/skills/ .claude/skills/.github/instructions/<skill>.instructions.mdAGENTS.md *
Gemini CLI.agents/skills/ .gemini/skills/—GEMINI.md
Antigravity CLI.agents/skills/.agents/rules/<skill>.mdAGENTS.md
Devin / Windsurf.agents/skills/ .devin/skills/ .windsurf/skills/ .claude/skills/ .github/skills/ .kiro/skills/ .cursor/skills/ .codex/skills/.devin/rules/<skill>.mdAGENTS.md
OpenCode.agents/skills/ .opencode/skills/ .claude/skills/—AGENTS.md
Cline.claude/skills/ .cline/skills/ .clinerules/skills/.clinerules/<skill>.mdAGENTS.md
Zed.agents/skills/—AGENTS.md *
JetBrains Junie.agents/skills/ .junie/skills/—AGENTS.md *
Kiro.kiro/skills/.kiro/steering/<skill>.mdAGENTS.md
Augment.agents/skills/ .augment/skills/ .claude/skills/—AGENTS.md
Trae.trae/skills/.trae/rules/<skill>.mdAGENTS.md
Continue—.continue/rules/<skill>.md—
Amazon Q Developer——.amazonq/rules/frontend-skills.md
Aider——CONVENTIONS.md

* zależy od plików, które projekt już ma (na przykład istniejący CLAUDE.md).

Instalacja dla Twojego 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

Jeden folder dla większości agentów

Wielu agentów czyta wspólny folder .agents/skills/, a niektórzy czytają dwa foldery i pokazaliby każdy skill dwa razy. Instalator wybiera najmniejszy zestaw folderów, który czyta każdy wybrany agent, z najmniejszą liczbą duplikatów, i nazywa duplikaty, których nie dało się uniknąć; doctor sprawdza to później ponownie.

Twoje pliki instrukcji zostają Twoje

Wspólne pliki, takie jak AGENTS.md, CLAUDE.md czy GEMINI.md, dostają jeden krótki blok między <!-- frontend-skills:start --> a <!-- frontend-skills:end -->. Tekst poza blokiem nigdy nie jest zmieniany, kolejne uruchomienie podmienia blok w miejscu, a plik powstaje tylko wtedy, gdy go nie było.

Reguły zawężone do typów plików

Tam, gdzie agent to obsługuje, każdy skill dostaje też krótki plik reguł z jego skrótem reguł i wzorcami plików, których dotyczy, więc reguła CSS nie jest ładowana, gdy agent edytuje test. Istnieje osiem takich formatów, każdy z własnym kluczem (paths, globs, applyTo, fileMatchPattern…). To prawdziwy plik zapisywany dla Cursora ze skilla fe-react:

.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>`.
Plik reguł, który instalator zapisuje dla Cursora ze skilla fe-react.

Budżety tokenów

Agent stale płaci za listę nazw i opisów skilli, blok instrukcji i reguły ładowane zawsze. Za użycie płaci treścią skilla, plikiem referencyjnym tylko wtedy, gdy jest potrzebny, i wynikiem poleceń. Budżety pilnuje walidator repozytorium:

CzęśćBudżetSpecyfikacja Agent Skills
description400 znaków1024
cały SKILL.md120 linii i 1800 tokenówponiżej 500 linii i 5000 tokenów (zalecenie)
skrót ## Rules12 punktów i 450 tokenówbez limitu
jeden plik referencyjny300 linii i 4000 tokenówbez limitu
blok instrukcji250 tokenówbez limitu

Zmierzony koszt każdego skilla

Ładowane zawsze: 4219 tokenów za nazwy i opisy wszystkich skilli (50). Projekt dostaje tylko skille potrzebne jego stackowi, więc jego lista jest krótsza.

SkillŁadowane zawszeTreść skilla, przy użyciuReferencje, na żądanieRazem
fe-a11y-aria91107013722533
fe-a11y-carousel-toast10279111272020
fe-a11y-combobox8287211672121
fe-a11y-core92109727113900
fe-a11y-dialog8284612802208
fe-a11y-forms9287512232190
fe-a11y-keyboard93112715932813
fe-a11y-media8878113422211
fe-a11y-menus8987212712232
fe-a11y-tables9286410431999
fe-a11y-tabs-accordion7982112182118
fe-a11y-visual9499817472839
fe-angular78115220883318
fe-astro7392015012494
fe-audit837787311592
fe-component8497212972353
fe-core-web-vitals10895615182582
fe-css-architecture92105322973442
fe-css-layout8287916662627
fe-css-modern9483918102743
fe-data-fetching7687618032755
fe-fix906708141574
fe-fonts7587513392289
fe-forms8795414722513
fe-html7686912892234
fe-i18n83101015502643
fe-icons8196818572906
fe-images81100817262815
fe-javascript79107019033052
fe-learn807487481576
fe-lighthouse8282014852387
fe-motion7983814322349
fe-nextjs81105319423076
fe-nuxt81113620243241
fe-perf-delivery8183714312349
fe-react8379410701947
fe-responsive93108019713144
fe-review807877891656
fe-sass75101619263017
fe-security9097114502511
fe-seo-metadata9395116892733
fe-state7188814902449
fe-svelte7796315442584
fe-sveltekit77103316372747
fe-tailwind75109715462718
fe-testing9194916362676
fe-tooling8885715192464
fe-typescript87101620903193
fe-vue81107019263077
fe-web-components76107716992852

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

Lekcje

Gdy potwierdzisz coś o swoim projekcie („pola formularza używają naszego komponentu Field”), zostaje to zapisane jako jedna linia w .frontend-skills/lessons.md, a każdy skill czyta ten plik jako pierwszy. Lekcja ma najwyżej 300 znaków, może wymieniać identyfikatory reguł, których dotyczy, i jest odrzucana, jeśli wygląda na sekret.

Zapisanie lekcji:

npx github:dawidolko/frontend-skills learn --lesson "Form fields use components/ui/Field.tsx" --kind convention
.frontend-skills/lessons.md
- 2026-11-11 · convention · Form fields use components/ui/Field.tsx, which renders label, hint and error. [a11y/input-label]

Audyt i raport

audit czyta kod źródłowy i sprawdza go każdą regułą, która ma test statyczny. Z --url uruchamia też, po zapytaniu, Lighthouse i axe-core w Twoim Chrome i przypisuje ich wyniki do tych samych identyfikatorów reguł. Reguły, których maszyna nie oceni, trafiają na listę kontrolną.

W kodzie źródłowym

Brak alt, lang, tytułu lub viewportu; zablokowane powiększanie; dodatni tabindex; obsługa kliknięć na elementach statycznych; pola bez etykiet; błędny autocomplete; usunięty obrys fokusu; obrazy bez wymiarów; skrypty blokujące renderowanie; fonty bez font-display; za duże obrazy; indeksy jako klucze; 100vh.

Na wyrenderowanej stronie

Kontrast kolorów, dostępne nazwy wyliczone przez komponenty, regiony i nagłówki gotowej strony, kolejność fokusu, rozmiar celów dotykowych, wydajność według Lighthouse, audyty SEO i dobrych praktyk.

Przez człowieka

Czy tekst alternatywny znaczy to, co trzeba, jakość komunikatów błędów, kolejność czytania, pułapki klawiatury we własnych widżetach, komunikaty czytnika ekranu, obciążenie poznawcze.

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.
frontend-report.md

Project: react-vite · 2026-11-11 · 3 files read, 131 static rules run.

criticalseriousmoderateminor
2345

**Result: findings at serious or above.**

Automated checks find only part of the problems; the checklist at the end needs a person.

Critical

a11y/img-alt Every img and area element has an alt attribute; a decorative image has alt="".

Why: Without alt, a screen reader announces the file name or nothing, and the image's meaning is lost; when the image fails to load, nothing replaces it.

Fix: Describe what the image says in this context (alt="Revenue grew 20% in 2026"), not what it looks like. For an image that only decorates, write alt="" so assistive technology skips it. An image inside a link that has no other text needs the link's purpose as its alt.

Sources: WCAG 2.2, Understanding SC 1.1.1 Non-text Content · MDN, the img element (alt) · WAI Images Tutorial, decorative images

  • src/App.tsx:8 <img> has no alt attribute; describe it, or use alt="" if it is decorative.

a11y/input-label Every form field has a programmatic label (label element, aria-label or aria-labelledby); a placeholder is not a label.

Why: A field without a programmatic label is announced only as "edit text": the user does not know what to type.

Fix: Pair a visible <label for="email"> with <input id="email">, or wrap the field in the label. When the design has no visible label (a search field next to its button), use aria-label or aria-labelledby; keep a visible label wherever you can.

Sources: WCAG 2.2, Understanding SC 3.3.2 Labels or Instructions · WCAG 2.2, Understanding SC 1.3.1 Info and Relationships · WAI Forms Tutorial, labeling controls · MDN, the label element

  • src/App.tsx:15 <input type="email"> has no label; add <label for>, wrap it in <label> or use aria-label.

Serious

a11y/focus-visible Never remove the focus outline without drawing a visible replacement for keyboard focus.

Why: Keyboard users see where they are only through the focus indicator.

Fix: Style :focus-visible instead of removing focus styles: button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }. If the design needs no ring for mouse clicks, :focus:not(:focus-visible) { outline: none; } is acceptable. With Tailwind, pair outline-none with a focus-visible:ring-* or focus-visible:outline-* class.

Sources: WCAG 2.2, Understanding SC 2.4.7 Focus Visible · MDN, the :focus-visible pseudo-class · Tailwind CSS, outline-style (outline-hidden and outline-none)

  • src/App.tsx:16 outline-none removes the focus indicator; add a focus-visible:ring-* or focus-visible:outline-* class.
  • src/app.css:9 "a:focus" removes the focus outline with no visible replacement.
frontend-report.md, raport zapisywany przez audit, tak jak czyta go człowiek.

Skondensowany wynik dla agentów

Z --json audyt wypisuje jedną linię na regułę, z poprawką i każdym miejscem jako plik:linia, bez innej prozy, więc agent wydaje tokeny na znaleziska. To prawdziwy wynik dla przykładowego projektu react-vite:

$ npx github:dawidolko/frontend-skills audit --json
{"v":1,"failOn":"serious","failed":true,"counts":{"critical":2,"serious":3,"moderate":4,"minor":5},"rules":{"a11y/img-alt":{"s":"critical","fix":"Describe what the image says in this context (alt=\"Revenue grew 20% in 2026\"), not what it looks like.","at":["src/App.tsx:8"]},"a11y/input-label":{"s":"critical","fix":"Pair a visible <label for=\"email\"> with <input id=\"email\">, or wrap the field in the label.","at":["src/App.tsx:15"]},"a11y/focus-visible":{"s":"serious","fix":"Style :focus-visible instead of removing focus styles: button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }.","at":["src/App.tsx:16","src/app.css:9"]},"a11y/no-click-on-static":{"s":"serious","fix":"Use <button type=\"button\"> for an action and <a href> for navigation; both are focusable, keyboard operable and announced correctly for free.","at":["src/App.tsx:9"]},"js/asset-import":{"s":"moderate","fix":"Import the file from the source tree (import hero from './hero.jpg') and use the result, or the framework's image component with that import (next/image, Astro <Image>, @nuxt/image, SvelteKit enhanced:img).","at":["src/App.tsx:8"]},"perf/img-dimensions":{"s":"moderate","fix":"Write the image's intrinsic size: <img src=\"hero.jpg\" width=\"1200\" height=\"600\" alt=\"…\">, and let CSS scale it with max-width: 100%; height: auto;.","at":["src/App.tsx:8"]},"react/no-array-index-key":{"s":"moderate","fix":"Use a stable id from the data: key={todo.id}.","at":["src/App.tsx:12"]},"seo/meta-description":{"s":"moderate","fix":"Write one or two sentences per page that say what is on it, in the page's language.","at":["index.html:3"]},"css/asset-url":{"s":"minor","fix":"Keep images and fonts next to the source (src/assets/…) and reference them relatively (url('../assets/hero.jpg')) or through the project's alias (@/assets/…, ~/assets/…).","at":["src/app.css:5"]},"html/button-type":{"s":"minor","fix":"Write type=\"button\" on every button that runs script, and type=\"submit\" on the one that submits, so intent is visible in the markup.","at":["src/App.tsx:16"]},"perf/font-display":{"s":"minor","fix":"Add font-display: swap to show fallback text at once, or font-display: optional when you would rather keep the fallback than shift the layout.","at":["src/app.css:3"]},"responsive/dynamic-viewport-units":{"s":"minor","fix":"Use min-height: 100dvh (follows the visible area) or 100svh (the smallest, stable value).","at":["src/App.tsx:7"]},"ts/isolated-modules":{"s":"minor","fix":"Add \"verbatimModuleSyntax\": true (which implies isolated modules and keeps imports exactly as written) or at least \"isolatedModules\": true, then write import type { User } from './types' for type-only imports.","at":["tsconfig.json:1"]}}}

Kody wyjścia: 0, gdy nic nie osiąga progu --fail-on (domyślnie serious), 1, gdy coś osiąga, 2 przy błędnym użyciu, 3, gdy wymagane narzędzie jest niedostępne.

Nagranie terminala: explain a11y/img-alt wypisuje regułę, uzasadnienie, poprawkę, przykłady i źródła.
explain a11y/img-alt: hasło słownika w terminalu.

Pomijanie znaleziska

Napisz fs-ignore <id reguły> w komentarzu w tej samej linii lub linię wyżej albo wpisz identyfikatory reguł i ścieżki w audit.ignore i audit.exclude w profilu.

Domyślnie bezpieczne

Nic, co napisałeś, nie jest nadpisywane. Każdy plik i blok zapisany przez polecenie trafia do .frontend-skills/install.json z sumą kontrolną; uninstall usuwa plik tylko wtedy, gdy suma wciąż się zgadza, a plik, który zmieniłeś, zostawia. --dry-run pokazuje plan i niczego nie zapisuje.