Darmowy i otwarty · MIT
Skille front-endowe dla każdego agenta AI
Jedno polecenie poznaje stack Twojego projektu, instaluje tylko pasujące skille dla każdego agenta, którego używasz, i raportuje, co poprawić w HTML, CSS, JavaScripcie i kodzie frameworka: reguła, linia, dlaczego to ważne i źródło.
Uruchom w folderze projektu (Node.js 20 lub nowszy):
npx github:dawidolko/frontend-skills init 
init na przykładowym projekcie: wykryty stack, zaplanowane skille i pliki, pierwszy audyt.
audit: liczby według wagi, każda reguła z pierwszym miejscem, kod wyjścia.
explain a11y/img-alt: hasło słownika w terminalu.Trzy kroki, jedno polecenie
init wykonuje wszystkie trzy. Każdy krok jest też osobnym poleceniem.
Twój projekt
-
1. Poznaje Twój stack
Czyta
package.json, pliki lock i konfiguracje, bez sieci. Zapisuje.frontend-skills/profile.json: frameworki i wersje, style, testy oraz Twoje własne narzędzia, np. funkcję rem albo generowane klasy ikon.profile.json -
2. Instaluje dla Twoich agentów
Wykrywa agentów używanych w projekcie i zapisuje tylko skille pasujące do stacku, w formacie każdego agenta: foldery skilli, pliki reguł zawężone do typów plików, jeden krótki blok w
AGENTS.mdlubCLAUDE.md. Każdy plik jest zapisywany w rejestrze.skille + pliki reguł -
3. Audytuje i poprawia
Sprawdza kod źródłowy według słownika i pisze raport, na podstawie którego da się działać. Agent czyta skondensowany JSON i poprawia kod; Ty czytasz raport w Markdownie.
frontend-report.md
kod pisany przez agenta zgodnie z regułami
Zobacz, jak działa
Prawdziwe sesje terminala i prawdziwe pliki z tego repozytorium, nagrane na jego przykładowym projekcie React. Komunikaty narzędzia są po angielsku.
audit: liczby według wagi, każda reguła z pierwszym miejscem, kod wyjścia.explain a11y/img-alt: hasło słownika w terminalu.Project: react-vite · 2026-11-11 · 3 files read, 131 static rules run.
| critical | serious | moderate | minor |
|---|---|---|---|
| 2 | 3 | 4 | 5 |
**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:16outline-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.---
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>`.fe-react.Nagrane przez tools/record.mjs; animacja zatrzymuje się, gdy prosisz o mniej ruchu.
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.
npx github:dawidolko/frontend-skills init Ten sposób nie był jeszcze testowany. npx i pnpm dlx są przetestowane; jeśli ten zawiedzie, użyj jednego z nich.
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)
| Agent | Rozpoznawany po |
|---|---|
| Claude Code | CLAUDE.md .claude CLAUDE.local.md |
| OpenAI Codex | .codex AGENTS.override.md |
| Cursor | .cursor .cursorrules |
| GitHub Copilot | .github/copilot-instructions.md .github/instructions .github/skills .github/prompts |
| Gemini CLI | GEMINI.md .gemini |
| Antigravity CLI | .agents/rules .agent/rules |
| Devin / Windsurf | .devin .windsurf .windsurfrules |
| OpenCode | opencode.json opencode.jsonc .opencode |
| Cline | .clinerules .cline |
| Zed | .rules .zed |
| JetBrains Junie | .junie |
| Kiro | .kiro |
| Augment | .augment .augment-guidelines |
| Trae | .trae |
| Continue | .continue |
| Amazon Q Developer | .amazonq |
| Aider | .aider.conf.yml CONVENTIONS.md |
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.
---
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>`.Co trafia gdzie dla: OpenAI Codex
.agents/skills/fe-react/SKILL.mdskill.agents/skills/fe-react/references/react.mdskillAGENTS.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.
## 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.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.
---
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>`.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.
---
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>`.Co trafia gdzie dla: Gemini CLI
.agents/skills/fe-react/SKILL.mdskill.agents/skills/fe-react/references/react.mdskillGEMINI.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.
## 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.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.
---
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>`.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.
---
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>`.Co trafia gdzie dla: OpenCode
.agents/skills/fe-react/SKILL.mdskill.agents/skills/fe-react/references/react.mdskillAGENTS.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.
## 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.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.
---
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>`.Co trafia gdzie dla: Zed
.agents/skills/fe-react/SKILL.mdskill.agents/skills/fe-react/references/react.mdskillCLAUDE.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.
## 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.Co trafia gdzie dla: JetBrains Junie
.agents/skills/fe-react/SKILL.mdskill.agents/skills/fe-react/references/react.mdskillAGENTS.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.
## 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.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.
---
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>`.Co trafia gdzie dla: Augment
.agents/skills/fe-react/SKILL.mdskill.agents/skills/fe-react/references/react.mdskillAGENTS.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.
## 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.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.
---
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>`.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.
---
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>`.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.
## 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`.Co trafia gdzie dla: Aider
.frontend-skills/skills/fe-react/SKILL.mdskill.frontend-skills/skills/fe-react/references/react.mdskillCONVENTIONS.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.
## 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`.Słownik, rozdział po rozdziale
275 reguł ze stałym identyfikatorem, każda z uzasadnieniem, poprawką, przykładami i źródłami.
Skille dla Twojego stacku
50 skilli w siedmiu grupach. init instaluje tylko te, których potrzebuje Twój stack.
Działa z agentami, których już używasz
Każdy skill jest pisany raz, w otwartym formacie Agent Skills, i zamieniany na pliki w formacie każdego agenta. Co czyta który agent, z linkami do dokumentacji, opisuje docs/agents.md.
- Claude Code
- OpenAI Codex
- Cursor
- GitHub Copilot
- Gemini CLI
- Antigravity CLI
- Devin / Windsurf
- OpenCode
- Cline
- Zed
- JetBrains Junie
- Kiro
- Augment
- Trae
- Continue
- Amazon Q Developer
- Aider
z plikami reguł zawężonymi do typów plików: Claude Code, Cursor, GitHub Copilot, Antigravity CLI, Devin / Windsurf, Cline, Kiro, Trae, Continue.
Darmowy, otwarty, do przeczytania
Licencja MIT. Bez konta, bez płatności, bez telemetrii. Narzędzie nie łączy się z siecią, chyba że sam to uruchomisz: audit --url pyta, zanim pobierze Lighthouse i axe-core. Działa prosto z GitHuba przez npx; niczego nie instaluje globalnie.
Tanie w utrzymaniu w kontekście
Agent stale ładuje tylko nazwę i opis każdego zainstalowanego skilla. Dla wszystkich skilli (50) to około 4219 tokenów; treść skilla (średnio około 937 tokenów) ładuje się dopiero wtedy, gdy zadanie jej potrzebuje.
Tokeny to szacunek frontend-skills estimate v1 (calibrated on o200k), zmierzony poleceniem frontend-skills tokens --all podczas budowania tej strony.
Czego automatyczne testy nie zrobią
Testy statyczne i audyty w przeglądarce wykrywają tylko część problemów z dostępnością. Czy tekst alternatywny mówi to, co trzeba, czy kolejność czytania ma sens, czy własny widżet nie więzi fokusu klawiatury: to musi sprawdzić człowiek. Raport podaje te punkty jako listę kontrolną obok znalezisk. Narzędzie pomaga pracować w kierunku WCAG 2.2 AA; niczego nie certyfikuje.
Wypróbuj na swoim projekcie
Jedno polecenie, nic do instalowania globalnie, wszystko, co zapisze, usuniesz przez uninstall.
npx github:dawidolko/frontend-skills init