Workflow

Build a 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. Use when asked to create or rebuild a component (button, field, dialog, menu, tabs, card, table, toast) or a design-system part.

fe-componentevery web project7 rules84 tokens always loaded, 972 tokens when used, 1297 tokens in references on demand.

Install

init installs this skill when the project uses every web project. Pick your agent to see where its files land.

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`

Where fe-component lands for Claude Code

.claude/skills/fe-component/SKILL.mdskill
.claude/skills/fe-component/references/component.mdskill
.claude/rules/fe-component.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-component.md

---
paths:
  - "**/components/**"
  - "**/ui/**"
  - "**/*.jsx"
  - "**/*.tsx"
  - "**/*.vue"
  - "**/*.svelte"
  - "**/*.astro"
  - "**/*.component.ts"
  - "**/*.component.html"
---

# Build a component (frontend-skills)

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. Use when asked to create or rebuild a component (button, field, dialog, menu, tabs, card, table, toast) or a design-system part.

- Look for an existing component or a UI library primitive before writing a new one.
- Start from the native element that does the job; add ARIA only where none exists (a11y/prefer-native-element).
- Interactive parts are `<button type="button">` or `<a href>`, never clickable `div`s (a11y/no-click-on-static, html/button-type).
- Every control has an accessible name, including icon-only ones (a11y/control-name).
- States are exposed with the right attribute (`aria-expanded`, `aria-pressed`, `aria-selected`, `aria-invalid`) (a11y/state-exposed).
- Follow the APG pattern's keyboard model for composite widgets; one Tab stop, arrows inside.
- Style every state: default, hover, `:focus-visible`, active, disabled, invalid, loading, empty (a11y/focus-visible).
- Use the project's tokens and helpers (`profile.helpers`) for sizes, colours and icons; no raw values.
- The component works from 320px wide, with 200% text, in dark mode and with reduced motion.
- Props pass through `id`, `className`/`class` and ARIA attributes; forward refs to the focusable element.
- Tests find it by role and name and cover keyboard use (test/query-by-role).

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

The real file

Where fe-component lands for OpenAI Codex

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

Where fe-component lands for Cursor

.agents/skills/fe-component/SKILL.mdskill
.agents/skills/fe-component/references/component.mdskill
.cursor/rules/fe-component.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-component.mdc

---
description: 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. Use when asked to create or rebuild a component (button, field, dialog, menu, tabs, card, table, toast) or a design-system part.
globs: **/components/**, **/ui/**, **/*.jsx, **/*.tsx, **/*.vue, **/*.svelte, **/*.astro, **/*.component.ts, **/*.component.html
alwaysApply: false
---

# Build a component (frontend-skills)

- Look for an existing component or a UI library primitive before writing a new one.
- Start from the native element that does the job; add ARIA only where none exists (a11y/prefer-native-element).
- Interactive parts are `<button type="button">` or `<a href>`, never clickable `div`s (a11y/no-click-on-static, html/button-type).
- Every control has an accessible name, including icon-only ones (a11y/control-name).
- States are exposed with the right attribute (`aria-expanded`, `aria-pressed`, `aria-selected`, `aria-invalid`) (a11y/state-exposed).
- Follow the APG pattern's keyboard model for composite widgets; one Tab stop, arrows inside.
- Style every state: default, hover, `:focus-visible`, active, disabled, invalid, loading, empty (a11y/focus-visible).
- Use the project's tokens and helpers (`profile.helpers`) for sizes, colours and icons; no raw values.
- The component works from 320px wide, with 200% text, in dark mode and with reduced motion.
- Props pass through `id`, `className`/`class` and ARIA attributes; forward refs to the focusable element.
- Tests find it by role and name and cover keyboard use (test/query-by-role).

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

The real file

Where fe-component lands for GitHub Copilot

.agents/skills/fe-component/SKILL.mdskill
.agents/skills/fe-component/references/component.mdskill
.github/instructions/fe-component.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-component.instructions.md

---
applyTo: "**/components/**,**/ui/**,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro,**/*.component.ts,**/*.component.html"
description: "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. Use when asked to create or rebuild a component (button, field, dialog, menu, tabs, card, table, toast) or a design-system part."
---

# Build a component (frontend-skills)

- Look for an existing component or a UI library primitive before writing a new one.
- Start from the native element that does the job; add ARIA only where none exists (a11y/prefer-native-element).
- Interactive parts are `<button type="button">` or `<a href>`, never clickable `div`s (a11y/no-click-on-static, html/button-type).
- Every control has an accessible name, including icon-only ones (a11y/control-name).
- States are exposed with the right attribute (`aria-expanded`, `aria-pressed`, `aria-selected`, `aria-invalid`) (a11y/state-exposed).
- Follow the APG pattern's keyboard model for composite widgets; one Tab stop, arrows inside.
- Style every state: default, hover, `:focus-visible`, active, disabled, invalid, loading, empty (a11y/focus-visible).
- Use the project's tokens and helpers (`profile.helpers`) for sizes, colours and icons; no raw values.
- The component works from 320px wide, with 200% text, in dark mode and with reduced motion.
- Props pass through `id`, `className`/`class` and ARIA attributes; forward refs to the focusable element.
- Tests find it by role and name and cover keyboard use (test/query-by-role).

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

The real file

Where fe-component lands for Gemini CLI

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

Where fe-component lands for Antigravity CLI

.agents/skills/fe-component/SKILL.mdskill
.agents/skills/fe-component/references/component.mdskill
.agents/rules/fe-component.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-component.md

---
trigger: glob
globs: "**/components/**, **/ui/**, **/*.jsx, **/*.tsx, **/*.vue, **/*.svelte, **/*.astro, **/*.component.ts, **/*.component.html"
description: "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. Use when asked to create or rebuild a component (button, field, dialog, menu, tabs, card, table, toast) or a design-system part."
---

# Build a component (frontend-skills)

- Look for an existing component or a UI library primitive before writing a new one.
- Start from the native element that does the job; add ARIA only where none exists (a11y/prefer-native-element).
- Interactive parts are `<button type="button">` or `<a href>`, never clickable `div`s (a11y/no-click-on-static, html/button-type).
- Every control has an accessible name, including icon-only ones (a11y/control-name).
- States are exposed with the right attribute (`aria-expanded`, `aria-pressed`, `aria-selected`, `aria-invalid`) (a11y/state-exposed).
- Follow the APG pattern's keyboard model for composite widgets; one Tab stop, arrows inside.
- Style every state: default, hover, `:focus-visible`, active, disabled, invalid, loading, empty (a11y/focus-visible).
- Use the project's tokens and helpers (`profile.helpers`) for sizes, colours and icons; no raw values.
- The component works from 320px wide, with 200% text, in dark mode and with reduced motion.
- Props pass through `id`, `className`/`class` and ARIA attributes; forward refs to the focusable element.
- Tests find it by role and name and cover keyboard use (test/query-by-role).

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

The real file

Where fe-component lands for Devin / Windsurf

.agents/skills/fe-component/SKILL.mdskill
.agents/skills/fe-component/references/component.mdskill
.devin/rules/fe-component.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-component.md

---
trigger: glob
globs: "**/components/**,**/ui/**,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro,**/*.component.ts,**/*.component.html"
---

# Build a component (frontend-skills)

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. Use when asked to create or rebuild a component (button, field, dialog, menu, tabs, card, table, toast) or a design-system part.

- Look for an existing component or a UI library primitive before writing a new one.
- Start from the native element that does the job; add ARIA only where none exists (a11y/prefer-native-element).
- Interactive parts are `<button type="button">` or `<a href>`, never clickable `div`s (a11y/no-click-on-static, html/button-type).
- Every control has an accessible name, including icon-only ones (a11y/control-name).
- States are exposed with the right attribute (`aria-expanded`, `aria-pressed`, `aria-selected`, `aria-invalid`) (a11y/state-exposed).
- Follow the APG pattern's keyboard model for composite widgets; one Tab stop, arrows inside.
- Style every state: default, hover, `:focus-visible`, active, disabled, invalid, loading, empty (a11y/focus-visible).
- Use the project's tokens and helpers (`profile.helpers`) for sizes, colours and icons; no raw values.
- The component works from 320px wide, with 200% text, in dark mode and with reduced motion.
- Props pass through `id`, `className`/`class` and ARIA attributes; forward refs to the focusable element.
- Tests find it by role and name and cover keyboard use (test/query-by-role).

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

The real file

Where fe-component lands for OpenCode

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

Where fe-component lands for Cline

.claude/skills/fe-component/SKILL.mdskill
.claude/skills/fe-component/references/component.mdskill
.clinerules/fe-component.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-component.md

---
paths:
  - "**/components/**"
  - "**/ui/**"
  - "**/*.jsx"
  - "**/*.tsx"
  - "**/*.vue"
  - "**/*.svelte"
  - "**/*.astro"
  - "**/*.component.ts"
  - "**/*.component.html"
---

# Build a component (frontend-skills)

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. Use when asked to create or rebuild a component (button, field, dialog, menu, tabs, card, table, toast) or a design-system part.

- Look for an existing component or a UI library primitive before writing a new one.
- Start from the native element that does the job; add ARIA only where none exists (a11y/prefer-native-element).
- Interactive parts are `<button type="button">` or `<a href>`, never clickable `div`s (a11y/no-click-on-static, html/button-type).
- Every control has an accessible name, including icon-only ones (a11y/control-name).
- States are exposed with the right attribute (`aria-expanded`, `aria-pressed`, `aria-selected`, `aria-invalid`) (a11y/state-exposed).
- Follow the APG pattern's keyboard model for composite widgets; one Tab stop, arrows inside.
- Style every state: default, hover, `:focus-visible`, active, disabled, invalid, loading, empty (a11y/focus-visible).
- Use the project's tokens and helpers (`profile.helpers`) for sizes, colours and icons; no raw values.
- The component works from 320px wide, with 200% text, in dark mode and with reduced motion.
- Props pass through `id`, `className`/`class` and ARIA attributes; forward refs to the focusable element.
- Tests find it by role and name and cover keyboard use (test/query-by-role).

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

The real file

Where fe-component lands for Zed

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

Where fe-component lands for JetBrains Junie

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

Where fe-component lands for Kiro

.kiro/skills/fe-component/SKILL.mdskill
.kiro/skills/fe-component/references/component.mdskill
.kiro/steering/fe-component.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-component.md

---
inclusion: fileMatch
fileMatchPattern: ["**/components/**", "**/ui/**", "**/*.jsx", "**/*.tsx", "**/*.vue", "**/*.svelte", "**/*.astro", "**/*.component.ts", "**/*.component.html"]
---

# Build a component (frontend-skills)

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. Use when asked to create or rebuild a component (button, field, dialog, menu, tabs, card, table, toast) or a design-system part.

- Look for an existing component or a UI library primitive before writing a new one.
- Start from the native element that does the job; add ARIA only where none exists (a11y/prefer-native-element).
- Interactive parts are `<button type="button">` or `<a href>`, never clickable `div`s (a11y/no-click-on-static, html/button-type).
- Every control has an accessible name, including icon-only ones (a11y/control-name).
- States are exposed with the right attribute (`aria-expanded`, `aria-pressed`, `aria-selected`, `aria-invalid`) (a11y/state-exposed).
- Follow the APG pattern's keyboard model for composite widgets; one Tab stop, arrows inside.
- Style every state: default, hover, `:focus-visible`, active, disabled, invalid, loading, empty (a11y/focus-visible).
- Use the project's tokens and helpers (`profile.helpers`) for sizes, colours and icons; no raw values.
- The component works from 320px wide, with 200% text, in dark mode and with reduced motion.
- Props pass through `id`, `className`/`class` and ARIA attributes; forward refs to the focusable element.
- Tests find it by role and name and cover keyboard use (test/query-by-role).

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

The real file

Where fe-component lands for Augment

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

Where fe-component lands for Trae

.trae/skills/fe-component/SKILL.mdskill
.trae/skills/fe-component/references/component.mdskill
.trae/rules/fe-component.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-component.md

---
description: "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. Use when asked to create or rebuild a component (button, field, dialog, menu, tabs, card, table, toast) or a design-system part."
globs: **/components/**,**/ui/**,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro,**/*.component.ts,**/*.component.html
alwaysApply: false
---

# Build a component (frontend-skills)

- Look for an existing component or a UI library primitive before writing a new one.
- Start from the native element that does the job; add ARIA only where none exists (a11y/prefer-native-element).
- Interactive parts are `<button type="button">` or `<a href>`, never clickable `div`s (a11y/no-click-on-static, html/button-type).
- Every control has an accessible name, including icon-only ones (a11y/control-name).
- States are exposed with the right attribute (`aria-expanded`, `aria-pressed`, `aria-selected`, `aria-invalid`) (a11y/state-exposed).
- Follow the APG pattern's keyboard model for composite widgets; one Tab stop, arrows inside.
- Style every state: default, hover, `:focus-visible`, active, disabled, invalid, loading, empty (a11y/focus-visible).
- Use the project's tokens and helpers (`profile.helpers`) for sizes, colours and icons; no raw values.
- The component works from 320px wide, with 200% text, in dark mode and with reduced motion.
- Props pass through `id`, `className`/`class` and ARIA attributes; forward refs to the focusable element.
- Tests find it by role and name and cover keyboard use (test/query-by-role).

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

The real file

Where fe-component lands for Continue

.frontend-skills/skills/fe-component/SKILL.mdskill
.frontend-skills/skills/fe-component/references/component.mdskill
.continue/rules/fe-component.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-component.md

---
name: "Build a component"
description: "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. Use when asked to create or rebuild a component (button, field, dialog, menu, tabs, card, table, toast) or a design-system part."
globs: ["**/components/**", "**/ui/**", "**/*.jsx", "**/*.tsx", "**/*.vue", "**/*.svelte", "**/*.astro", "**/*.component.ts", "**/*.component.html"]
alwaysApply: false
---

# Build a component (frontend-skills)

- Look for an existing component or a UI library primitive before writing a new one.
- Start from the native element that does the job; add ARIA only where none exists (a11y/prefer-native-element).
- Interactive parts are `<button type="button">` or `<a href>`, never clickable `div`s (a11y/no-click-on-static, html/button-type).
- Every control has an accessible name, including icon-only ones (a11y/control-name).
- States are exposed with the right attribute (`aria-expanded`, `aria-pressed`, `aria-selected`, `aria-invalid`) (a11y/state-exposed).
- Follow the APG pattern's keyboard model for composite widgets; one Tab stop, arrows inside.
- Style every state: default, hover, `:focus-visible`, active, disabled, invalid, loading, empty (a11y/focus-visible).
- Use the project's tokens and helpers (`profile.helpers`) for sizes, colours and icons; no raw values.
- The component works from 320px wide, with 200% text, in dark mode and with reduced motion.
- Props pass through `id`, `className`/`class` and ARIA attributes; forward refs to the focusable element.
- Tests find it by role and name and cover keyboard use (test/query-by-role).

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

The real file

Where fe-component lands for Amazon Q Developer

.frontend-skills/skills/fe-component/SKILL.mdskill
.frontend-skills/skills/fe-component/references/component.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-component` (Build a component): when editing `**/components/**`, `**/ui/**`, `**/*.jsx`, `**/*.tsx`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, `**/*.component.ts`, `**/*.component.html`, first read `.frontend-skills/skills/fe-component/SKILL.md`.

The real file

Where fe-component lands for Aider

.frontend-skills/skills/fe-component/SKILL.mdskill
.frontend-skills/skills/fe-component/references/component.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-component` (Build a component): when editing `**/components/**`, `**/ui/**`, `**/*.jsx`, `**/*.tsx`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, `**/*.component.ts`, `**/*.component.html`, first read `.frontend-skills/skills/fe-component/SKILL.md`.

The real file

How to use it

Once installed, the agent loads the skill by itself when a task matches its description. You can also ask for it in your own words, for example:

And to check and fix the work:

Use the fe-component skill on this file.
Run the front-end audit on what I changed and fix everything serious.
Explain a11y/prefer-native-element and fix it here.

Rules it teaches

a11y/prefer-native-element
Use the native element instead of a role it already provides (button, a href, input, h1–h6, nav, main, ul, li).
minorstaticWCAG 4.1.2
a11y/control-name
Every button and link has an accessible name; icon-only controls get visually hidden text or aria-label.
criticalstaticWCAG 4.1.2, 2.4.4
a11y/no-click-on-static
A click handler belongs on a button or link; a static element with one also needs a role, tabindex and a key handler.
seriousstaticWCAG 2.1.1, 4.1.2
a11y/focus-visible
Never remove the focus outline without drawing a visible replacement for keyboard focus.
seriousstaticWCAG 2.4.7
a11y/state-exposed
Custom toggles, disclosures and selections expose their state (aria-expanded, aria-pressed, aria-checked, aria-selected).
seriousmanualWCAG 4.1.2
html/button-type
Every button states its type (button, submit or reset); the default is submit.
minorstatic
test/query-by-role
Tests find elements the way users do - getByRole with a name first, then label and text; test ids only as a last resort.
minormanual

The rule digest

This part is copied into each agent's scoped rule file, so it stands on its own:

Look for an existing component or a UI library primitive before writing a new one.
Start from the native element that does the job; add ARIA only where none exists (a11y/prefer-native-element).
Interactive parts are <button type="button"> or <a href>, never clickable divs (a11y/no-click-on-static, html/button-type).
Every control has an accessible name, including icon-only ones (a11y/control-name).
States are exposed with the right attribute (aria-expanded, aria-pressed, aria-selected, aria-invalid) (a11y/state-exposed).
Follow the APG pattern's keyboard model for composite widgets; one Tab stop, arrows inside.
Style every state: default, hover, :focus-visible, active, disabled, invalid, loading, empty (a11y/focus-visible).
Use the project's tokens and helpers (profile.helpers) for sizes, colours and icons; no raw values.
The component works from 320px wide, with 200% text, in dark mode and with reduced motion.
Props pass through id, className/class and ARIA attributes; forward refs to the focusable element.
Tests find it by role and name and cover keyboard use (test/query-by-role).

Steps the agent follows

Name the job and pick the pattern: native element, or the APG pattern (fe-a11y-dialog, fe-a11y-menus, fe-a11y-tabs-accordion, fe-a11y-combobox, fe-a11y-carousel-toast, fe-a11y-tables).
Write the markup and keyboard behaviour first, unstyled; check it with the keyboard.
Add the API: props for content and state, events named after user intent (onOpenChange, onSelect), ids from useId() or the framework's equivalent.
Style with the project's tokens; add all states and the responsive and reduced-motion rules.
Write tests: render, find by role and name, act with the keyboard and pointer, assert what a user sees; add an axe check where the project has one.
Run npx github:dawidolko/frontend-skills audit --changed and the project's lint, type check and tests; fix every finding.

How the agent checks the work

audit --changed is clean for the new files; explain <id> for anything it reports.
Keyboard only: every part works; with a screen reader: name, role and state are right after each action.
The component renders correctly at 320px, at 200% text and in both colour schemes.

Checked by the audit

The static checks of these rules run in audit; this is a real session on the example project:

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.

Reference files

references/component.md1297 tokens

SKILL.md on GitHub