Frontend Skills
Polski

Skills by technology

A skill is a short instruction for a coding agent, in the open Agent Skills format. Only the skills that match your project's stack are installed; each one names the rules it teaches.

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.

Agent
npx github:dawidolko/frontend-skills init

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
AgentFound by
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

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

Foundations 5

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

    every web project9 rules954 tokens on use

    1 critical 1 serious 5 moderate 2 minor

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

    every web project6 rules869 tokens on use

    1 critical 2 serious 2 moderate 1 minor

  • Writes and reviews browser JavaScript (plain scripts, modules, framework script blocks) - equality, declarations, async and fetch errors, DOM events, assets through the bundler - so it fails loudly, stays fast and keeps working when moved.

    every web project13 rules1070 tokens on use

    1 serious 8 moderate 4 minor

  • Responsive design

    fe-responsive

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

    every web project9 rules1080 tokens on use

    1 critical 6 serious 2 minor

  • TypeScript

    fe-typescript

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

    typescript6 rules1016 tokens on use

    4 moderate 2 minor

Styling 7

  • CSS architecture and tokens

    fe-css-architecture

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

    every web project11 rules1053 tokens on use

    11 minor

  • CSS layout

    fe-css-layout

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

    every web project6 rules879 tokens on use

    1 serious 1 moderate 4 minor

  • Modern CSS features

    fe-css-modern

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

    every web project4 rules839 tokens on use

    1 serious 2 moderate 1 minor

  • Icons

    fe-icons

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

    every web project4 rules968 tokens on use

    1 critical 1 moderate 2 minor

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

    every web project4 rules838 tokens on use

    1 serious 3 moderate

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

    sass9 rules1016 tokens on use

    2 moderate 7 minor

  • Tailwind CSS

    fe-tailwind

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

    tailwind10 rules1097 tokens on use

    2 serious 4 moderate 4 minor

Frameworks 11

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

    angular9 rules1152 tokens on use

    2 serious 6 moderate 1 minor

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

    astro7 rules920 tokens on use

    1 serious 6 moderate

  • Data fetching

    fe-data-fetching

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

    react, vue, svelte, angular, next, nuxt8 rules876 tokens on use

    3 serious 5 moderate

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

    next9 rules1053 tokens on use

    5 serious 4 moderate

  • Nuxt apps

    fe-nuxt

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

    nuxt10 rules1136 tokens on use

    3 serious 7 moderate

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

    react5 rules794 tokens on use

    1 critical 2 serious 2 moderate

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

    react, vue, svelte, angular6 rules888 tokens on use

    3 serious 1 moderate 2 minor

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

    svelte8 rules963 tokens on use

    1 critical 1 serious 4 moderate 2 minor

  • SvelteKit apps

    fe-sveltekit

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

    sveltekit7 rules1033 tokens on use

    2 serious 5 moderate

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

    vue, nuxt12 rules1070 tokens on use

    1 critical 1 serious 8 moderate 2 minor

  • Web components and Lit

    fe-web-components

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

    lit, webc9 rules1077 tokens on use

    6 serious 3 moderate

Accessibility 12

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

    every web project8 rules1070 tokens on use

    1 critical 6 serious 1 minor

  • Carousels and toasts

    fe-a11y-carousel-toast

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

    every web project5 rules791 tokens on use

    1 critical 3 serious 1 moderate

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

    every web project6 rules872 tokens on use

    1 critical 5 serious

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

    every web project12 rules1097 tokens on use

    3 critical 8 serious 1 moderate

  • Dialogs and modals

    fe-a11y-dialog

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

    every web project5 rules846 tokens on use

    1 critical 3 serious 1 minor

  • Accessible forms

    fe-a11y-forms

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

    every web project4 rules875 tokens on use

    1 critical 2 serious 1 minor

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

    every web project9 rules1127 tokens on use

    1 critical 6 serious 2 moderate

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

    every web project5 rules781 tokens on use

    2 critical 2 serious 1 moderate

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

    every web project5 rules872 tokens on use

    4 serious 1 moderate

  • Data tables

    fe-a11y-tables

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

    every web project5 rules864 tokens on use

    3 serious 1 moderate 1 minor

  • Tabs and accordions

    fe-a11y-tabs-accordion

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

    every web project5 rules821 tokens on use

    4 serious 1 moderate

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

    every web project8 rules998 tokens on use

    6 serious 1 moderate 1 minor

Performance 5

  • Core Web Vitals

    fe-core-web-vitals

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

    every web project8 rules956 tokens on use

    7 moderate 1 minor

  • Web fonts

    fe-fonts

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

    every web project6 rules875 tokens on use

    2 moderate 4 minor

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

    every web project9 rules1008 tokens on use

    1 critical 2 serious 5 moderate 1 minor

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

    every web project6 rules820 tokens on use

    3 moderate 3 minor

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

    every web project8 rules837 tokens on use

    7 moderate 1 minor

Quality 5

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

    every web project9 rules1010 tokens on use

    4 serious 4 moderate 1 minor

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

    every web project9 rules971 tokens on use

    1 critical 4 serious 3 moderate 1 minor

  • SEO and metadata

    fe-seo-metadata

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

    every web project10 rules951 tokens on use

    2 serious 5 moderate 3 minor

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

    vitest, jest, playwright, cypress, testing-library5 rules949 tokens on use

    1 serious 3 moderate 1 minor

  • Sets up front-end tooling the way the project already does - package manager and lockfile, Vite 8, ESLint 10 flat config with accessibility plugins, Prettier 3 or Biome 2, Stylelint, TypeScript type checks, browserslist with Baseline targets, Node LTS.

    vite, eslint, prettier, biome6 rules857 tokens on use

    3 moderate 3 minor

Workflow 5

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

    every web project5 rules778 tokens on use

    3 critical 1 serious 1 moderate

  • Build a component

    fe-component

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

    every web project7 rules972 tokens on use

    1 critical 3 serious 3 minor

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

    every web project2 rules670 tokens on use

    1 moderate 1 minor

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

    every web project1 rule748 tokens on use

    1 minor

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

    every web project5 rules787 tokens on use

    1 critical 3 serious 1 moderate

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