Free and open source · MIT

Front-end skills for every AI coding agent

One command learns your project's stack, installs only the skills that fit it for each coding agent you use, and reports what to fix in your HTML, CSS, JavaScript and framework code: the rule, the line, why it matters and the source.

Run it in your project's folder (Node.js 20 or newer):

npx github:dawidolko/frontend-skills init

How it works Install for your agent

initauditexplain

init on the example project: the stack it found, the skills and files it planned, the first audit.

Terminal recording: audit lists findings by severity with rule ids and file:line, and fails at serious. — `audit`: counts by severity, each rule with its first location, the exit code.

Terminal recording: explain a11y/img-alt prints the rule, why it matters, the fix, examples and sources. — `explain a11y/img-alt`: the dictionary entry in the terminal.

Three steps, one command

init runs all three. Each step is also a command of its own.

your project

1. Learn your stack

Reads package.json, lockfiles and config files, with no network. Writes .frontend-skills/profile.json: frameworks and versions, styling, tests, and your own helpers, such as a rem function or generated icon classes.

profile.json
2. Install for your agents

Finds the agents the project uses and writes only the skills that match the stack, in each agent's own format: skills folders, rule files scoped to file types, one short block in AGENTS.md or CLAUDE.md. Every file is recorded.

skills + rule files
3. Audit and fix

Checks the source against the dictionary and writes a report a person can act on. Your agent reads the condensed JSON and fixes the code; you read the Markdown report.

frontend-report.md

code your agent writes to the rules

See it run

Real terminal sessions and real files from this repository, recorded on its example React project.

auditexplainReportAgent files

frontend-report.md

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: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, the report audit writes, as a person reads it.

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

The rule file the installer writes for Cursor from the fe-react skill.

Recorded with tools/record.mjs; the animation stops when you ask for less motion.

Install for your agent

Pick how you run Node.js packages and which agent you use. init learns the stack and installs only the skills that fit; below are the files it writes for that agent.

npx github:dawidolko/frontend-skills init

Not tested yet with this runner. npx and pnpm dlx are tested; if this one fails, use one of them.

Without --agents, init finds the agents from what the project already has, and asks when it finds none:

How init finds each of the 17 agents

Agent	Found by
Claude Code	`CLAUDE.md` `.claude` `CLAUDE.local.md`
OpenAI Codex	`.codex` `AGENTS.override.md`
Cursor	`.cursor` `.cursorrules`
GitHub Copilot	`.github/copilot-instructions.md` `.github/instructions` `.github/skills` `.github/prompts`
Gemini CLI	`GEMINI.md` `.gemini`
Antigravity CLI	`.agents/rules` `.agent/rules`
Devin / Windsurf	`.devin` `.windsurf` `.windsurfrules`
OpenCode	`opencode.json` `opencode.jsonc` `.opencode`
Cline	`.clinerules` `.cline`
Zed	`.rules` `.zed`
JetBrains Junie	`.junie`
Kiro	`.kiro`
Augment	`.augment` `.augment-guidelines`
Trae	`.trae`
Continue	`.continue`
Amazon Q Developer	`.amazonq`
Aider	`.aider.conf.yml` `CONVENTIONS.md`

What lands where for Claude Code

.claude/skills/fe-react/SKILL.mdskill
.claude/skills/fe-react/references/react.mdskill
.claude/rules/fe-react.mdrule file
CLAUDE.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.claude/rules/fe-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>`.

The real file

What lands where for OpenAI Codex

.agents/skills/fe-react/SKILL.mdskill
.agents/skills/fe-react/references/react.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

OpenAI Codex has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

What lands where for Cursor

.agents/skills/fe-react/SKILL.mdskill
.agents/skills/fe-react/references/react.mdskill
.cursor/rules/fe-react.mdcrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.cursor/rules/fe-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>`.

The real file

What lands where for GitHub Copilot

.agents/skills/fe-react/SKILL.mdskill
.agents/skills/fe-react/references/react.mdskill
.github/instructions/fe-react.instructions.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.github/instructions/fe-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>`.

The real file

What lands where for Gemini CLI

.agents/skills/fe-react/SKILL.mdskill
.agents/skills/fe-react/references/react.mdskill
GEMINI.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Gemini CLI: Gemini CLI was replaced by Antigravity CLI for unpaid tiers on 2026-06-18; choose "antigravity" too if you use it.

Gemini CLI has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

GEMINI.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

What lands where for Antigravity CLI

.agents/skills/fe-react/SKILL.mdskill
.agents/skills/fe-react/references/react.mdskill
.agents/rules/fe-react.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.agents/rules/fe-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>`.

The real file

What lands where for Devin / Windsurf

.agents/skills/fe-react/SKILL.mdskill
.agents/skills/fe-react/references/react.mdskill
.devin/rules/fe-react.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Devin / Windsurf: Devin CLI also reads .cursor/rules; with Cursor chosen too, the CLI sees both rule files of a skill.

Planned by the installer itself for the example React project in the repository.

.devin/rules/fe-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>`.

The real file

What lands where for OpenCode

.agents/skills/fe-react/SKILL.mdskill
.agents/skills/fe-react/references/react.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

OpenCode has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

What lands where for Cline

.claude/skills/fe-react/SKILL.mdskill
.claude/skills/fe-react/references/react.mdskill
.clinerules/fe-react.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

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

Planned by the installer itself for the example React project in the repository.

.clinerules/fe-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>`.

The real file

What lands where for Zed

.agents/skills/fe-react/SKILL.mdskill
.agents/skills/fe-react/references/react.mdskill
CLAUDE.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

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

Zed has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

CLAUDE.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

What lands where for JetBrains Junie

.agents/skills/fe-react/SKILL.mdskill
.agents/skills/fe-react/references/react.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

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

JetBrains Junie has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

What lands where for Kiro

.kiro/skills/fe-react/SKILL.mdskill
.kiro/skills/fe-react/references/react.mdskill
.kiro/steering/fe-react.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.kiro/steering/fe-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>`.

The real file

What lands where for Augment

.agents/skills/fe-react/SKILL.mdskill
.agents/skills/fe-react/references/react.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Augment has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

What lands where for Trae

.trae/skills/fe-react/SKILL.mdskill
.trae/skills/fe-react/references/react.mdskill
.trae/rules/fe-react.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

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

Planned by the installer itself for the example React project in the repository.

.trae/rules/fe-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>`.

The real file

What lands where for Continue

.frontend-skills/skills/fe-react/SKILL.mdskill
.frontend-skills/skills/fe-react/references/react.mdskill
.continue/rules/fe-react.mdrule file

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.continue/rules/fe-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>`.

The real file

What lands where for Amazon Q Developer

.frontend-skills/skills/fe-react/SKILL.mdskill
.frontend-skills/skills/fe-react/references/react.mdskill
.amazonq/rules/frontend-skills.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Amazon Q Developer: Amazon Q Developer IDE plugins reach end of support on 2027-04-30; AWS points to Kiro.

Amazon Q Developer has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

.amazonq/rules/frontend-skills.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

### Skills

- `fe-react` (React components): when editing `**/*.jsx`, `**/*.tsx`, first read `.frontend-skills/skills/fe-react/SKILL.md`.

The real file

What lands where for Aider

.frontend-skills/skills/fe-react/SKILL.mdskill
.frontend-skills/skills/fe-react/references/react.mdskill
CONVENTIONS.mdinstruction block
.aider.conf.ymlconfig

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Aider has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

CONVENTIONS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

### Skills

- `fe-react` (React components): when editing `**/*.jsx`, `**/*.tsx`, first read `.frontend-skills/skills/fe-react/SKILL.md`.

The real file

The dictionary, chapter by chapter

275 rules with a stable id, each with why, fix, examples and sources.

Accessibility58 rules
Performance26 rules
HTML11 rules
CSS23 rules
Responsive layout7 rules
JavaScript13 rules
TypeScript6 rules
React3 rules
Next.js9 rules
Vue10 rules
Nuxt8 rules
Angular9 rules
Svelte10 rules
Astro6 rules
Web Components9 rules
Tailwind CSS9 rules
Sass8 rules
State13 rules
SEO9 rules
Internationalisation7 rules
Security9 rules
Testing5 rules
Tooling7 rules

Skills for your stack

50 skills in seven groups. init installs only those your stack needs.

Foundations5 · Native forms and validation, HTML documents and semantics, JavaScript in the browser, Responsive design…
Styling7 · CSS architecture and tokens, CSS layout, Modern CSS features, Icons…
Frameworks11 · Angular components, Astro sites and islands, Data fetching, Next.js App Router…
Accessibility12 · ARIA, names and live regions, Carousels and toasts, Combobox, listbox and custom select, Accessibility, WCAG 2.2 map…
Performance5 · Core Web Vitals, Web fonts, Images and media delivery, Lighthouse and PageSpeed…
Quality5 · Internationalisation, Front-end security, SEO and metadata, Front-end testing…
Workflow5 · Audit the project, Build a component, Fix findings, Learn the project…

Works with the agents you already use

Each skill is written once in the open Agent Skills format and turned into each agent's own files. What each agent reads, with links to its documentation, is in 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

with rule files scoped to file types: Claude Code, Cursor, GitHub Copilot, Antigravity CLI, Devin / Windsurf, Cline, Kiro, Trae, Continue.

Free, open source, yours to read

MIT licence. No account, no payment, no telemetry. The tool makes no network call unless you start one: audit --url asks before it fetches Lighthouse and axe-core. It runs straight from GitHub with npx; nothing is installed globally.

Cheap to keep loaded

An agent always loads only the name and description of each installed skill. For all 50 skills that is about 4219 tokens; a skill's body (about 937 tokens on average) loads only when a task needs it.

Tokens are estimates by frontend-skills estimate v1 (calibrated on o200k), measured with frontend-skills tokens --all when this site was built.

What automated checks cannot do

Static checks and browser audits find only part of the accessibility problems. Whether an alt text says the right thing, whether the reading order makes sense, whether a custom widget traps the keyboard: a person has to look. The report lists those as a checklist next to the findings. The tool helps you work to WCAG 2.2 AA; it certifies nothing.

Try it on your project

One command, nothing to install globally, everything it writes can be removed with uninstall.

npx github:dawidolko/frontend-skills init

Front-end skills for every AI coding agent

In numbers

Three steps, one command

1. Learn your stack

2. Install for your agents

3. Audit and fix

See it run

Critical

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

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

Serious

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

Install for your agent

What lands where for Claude Code

What lands where for OpenAI Codex

What lands where for Cursor

What lands where for GitHub Copilot

What lands where for Gemini CLI

What lands where for Antigravity CLI

What lands where for Devin / Windsurf

What lands where for OpenCode

What lands where for Cline

What lands where for Zed

What lands where for JetBrains Junie

What lands where for Kiro

What lands where for Augment

What lands where for Trae

What lands where for Continue

What lands where for Amazon Q Developer

What lands where for Aider

The dictionary, chapter by chapter

Skills for your stack

Works with the agents you already use

Free, open source, yours to read

Cheap to keep loaded

What automated checks cannot do

Try it on your project

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

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

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