Styling

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. Use when adding or changing an icon, an icon button, an SVG sprite or icon font, or setting up icons in a new project.

fe-iconsevery web project4 rules81 tokens always loaded, 968 tokens when used, 1857 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-icons lands for Claude Code

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

---
paths:
  - "**/*.html"
  - "**/*.jsx"
  - "**/*.tsx"
  - "**/*.vue"
  - "**/*.svelte"
  - "**/*.astro"
  - "**/*.component.html"
  - "**/icons/*.svg"
---

# Icons (frontend-skills)

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. Use when adding or changing an icon, an icon button, an SVG sprite or icon font, or setting up icons in a new project.

- Use the project's icon set: its generated classes (html/project-icons), its component or a `<use href="#id">` of its sprite (html/icon-from-set).
- Never hard-code a path to an icon file (`<img src="/icons/x.svg">`, `sprite.svg#x`) in markup; in CSS, no `url()` to an icon file (`css/icon-from-set`).
- Add an icon by putting its SVG in the set's source folder and rebuilding; never copy it into `public/`.
- One source folder, one generator, one naming scheme (`close`, `chevron-down`): no second set beside it.
- Icons draw in `currentColor` and size in `em` or a size token, so they follow the text.
- A decorative icon next to text gets `aria-hidden="true"`; an icon-only button or link gets its name on the button (`aria-label` or visually hidden text).
- An icon shown with `<img>` has `alt`: empty for decoration, the meaning otherwise (a11y/img-alt).
- Other images and media go through the bundler, not root paths (js/asset-import).

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

The real file

Where fe-icons lands for OpenAI Codex

.agents/skills/fe-icons/SKILL.mdskill
.agents/skills/fe-icons/references/icons.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-icons lands for Cursor

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

---
description: 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. Use when adding or changing an icon, an icon button, an SVG sprite or icon font, or setting up icons in a new project.
globs: **/*.html, **/*.jsx, **/*.tsx, **/*.vue, **/*.svelte, **/*.astro, **/*.component.html, **/icons/*.svg
alwaysApply: false
---

# Icons (frontend-skills)

- Use the project's icon set: its generated classes (html/project-icons), its component or a `<use href="#id">` of its sprite (html/icon-from-set).
- Never hard-code a path to an icon file (`<img src="/icons/x.svg">`, `sprite.svg#x`) in markup; in CSS, no `url()` to an icon file (`css/icon-from-set`).
- Add an icon by putting its SVG in the set's source folder and rebuilding; never copy it into `public/`.
- One source folder, one generator, one naming scheme (`close`, `chevron-down`): no second set beside it.
- Icons draw in `currentColor` and size in `em` or a size token, so they follow the text.
- A decorative icon next to text gets `aria-hidden="true"`; an icon-only button or link gets its name on the button (`aria-label` or visually hidden text).
- An icon shown with `<img>` has `alt`: empty for decoration, the meaning otherwise (a11y/img-alt).
- Other images and media go through the bundler, not root paths (js/asset-import).

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

The real file

Where fe-icons lands for GitHub Copilot

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

---
applyTo: "**/*.html,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro,**/*.component.html,**/icons/*.svg"
description: "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. Use when adding or changing an icon, an icon button, an SVG sprite or icon font, or setting up icons in a new project."
---

# Icons (frontend-skills)

- Use the project's icon set: its generated classes (html/project-icons), its component or a `<use href="#id">` of its sprite (html/icon-from-set).
- Never hard-code a path to an icon file (`<img src="/icons/x.svg">`, `sprite.svg#x`) in markup; in CSS, no `url()` to an icon file (`css/icon-from-set`).
- Add an icon by putting its SVG in the set's source folder and rebuilding; never copy it into `public/`.
- One source folder, one generator, one naming scheme (`close`, `chevron-down`): no second set beside it.
- Icons draw in `currentColor` and size in `em` or a size token, so they follow the text.
- A decorative icon next to text gets `aria-hidden="true"`; an icon-only button or link gets its name on the button (`aria-label` or visually hidden text).
- An icon shown with `<img>` has `alt`: empty for decoration, the meaning otherwise (a11y/img-alt).
- Other images and media go through the bundler, not root paths (js/asset-import).

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

The real file

Where fe-icons lands for Gemini CLI

.agents/skills/fe-icons/SKILL.mdskill
.agents/skills/fe-icons/references/icons.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-icons lands for Antigravity CLI

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

---
trigger: glob
globs: "**/*.html, **/*.jsx, **/*.tsx, **/*.vue, **/*.svelte, **/*.astro, **/*.component.html, **/icons/*.svg"
description: "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. Use when adding or changing an icon, an icon button, an SVG sprite or icon font, or setting up icons in a new project."
---

# Icons (frontend-skills)

- Use the project's icon set: its generated classes (html/project-icons), its component or a `<use href="#id">` of its sprite (html/icon-from-set).
- Never hard-code a path to an icon file (`<img src="/icons/x.svg">`, `sprite.svg#x`) in markup; in CSS, no `url()` to an icon file (`css/icon-from-set`).
- Add an icon by putting its SVG in the set's source folder and rebuilding; never copy it into `public/`.
- One source folder, one generator, one naming scheme (`close`, `chevron-down`): no second set beside it.
- Icons draw in `currentColor` and size in `em` or a size token, so they follow the text.
- A decorative icon next to text gets `aria-hidden="true"`; an icon-only button or link gets its name on the button (`aria-label` or visually hidden text).
- An icon shown with `<img>` has `alt`: empty for decoration, the meaning otherwise (a11y/img-alt).
- Other images and media go through the bundler, not root paths (js/asset-import).

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

The real file

Where fe-icons lands for Devin / Windsurf

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

---
trigger: glob
globs: "**/*.html,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro,**/*.component.html,**/icons/*.svg"
---

# Icons (frontend-skills)

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. Use when adding or changing an icon, an icon button, an SVG sprite or icon font, or setting up icons in a new project.

- Use the project's icon set: its generated classes (html/project-icons), its component or a `<use href="#id">` of its sprite (html/icon-from-set).
- Never hard-code a path to an icon file (`<img src="/icons/x.svg">`, `sprite.svg#x`) in markup; in CSS, no `url()` to an icon file (`css/icon-from-set`).
- Add an icon by putting its SVG in the set's source folder and rebuilding; never copy it into `public/`.
- One source folder, one generator, one naming scheme (`close`, `chevron-down`): no second set beside it.
- Icons draw in `currentColor` and size in `em` or a size token, so they follow the text.
- A decorative icon next to text gets `aria-hidden="true"`; an icon-only button or link gets its name on the button (`aria-label` or visually hidden text).
- An icon shown with `<img>` has `alt`: empty for decoration, the meaning otherwise (a11y/img-alt).
- Other images and media go through the bundler, not root paths (js/asset-import).

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

The real file

Where fe-icons lands for OpenCode

.agents/skills/fe-icons/SKILL.mdskill
.agents/skills/fe-icons/references/icons.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-icons lands for Cline

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

---
paths:
  - "**/*.html"
  - "**/*.jsx"
  - "**/*.tsx"
  - "**/*.vue"
  - "**/*.svelte"
  - "**/*.astro"
  - "**/*.component.html"
  - "**/icons/*.svg"
---

# Icons (frontend-skills)

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. Use when adding or changing an icon, an icon button, an SVG sprite or icon font, or setting up icons in a new project.

- Use the project's icon set: its generated classes (html/project-icons), its component or a `<use href="#id">` of its sprite (html/icon-from-set).
- Never hard-code a path to an icon file (`<img src="/icons/x.svg">`, `sprite.svg#x`) in markup; in CSS, no `url()` to an icon file (`css/icon-from-set`).
- Add an icon by putting its SVG in the set's source folder and rebuilding; never copy it into `public/`.
- One source folder, one generator, one naming scheme (`close`, `chevron-down`): no second set beside it.
- Icons draw in `currentColor` and size in `em` or a size token, so they follow the text.
- A decorative icon next to text gets `aria-hidden="true"`; an icon-only button or link gets its name on the button (`aria-label` or visually hidden text).
- An icon shown with `<img>` has `alt`: empty for decoration, the meaning otherwise (a11y/img-alt).
- Other images and media go through the bundler, not root paths (js/asset-import).

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

The real file

Where fe-icons lands for Zed

.agents/skills/fe-icons/SKILL.mdskill
.agents/skills/fe-icons/references/icons.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-icons lands for JetBrains Junie

.agents/skills/fe-icons/SKILL.mdskill
.agents/skills/fe-icons/references/icons.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-icons lands for Kiro

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

---
inclusion: fileMatch
fileMatchPattern: ["**/*.html", "**/*.jsx", "**/*.tsx", "**/*.vue", "**/*.svelte", "**/*.astro", "**/*.component.html", "**/icons/*.svg"]
---

# Icons (frontend-skills)

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. Use when adding or changing an icon, an icon button, an SVG sprite or icon font, or setting up icons in a new project.

- Use the project's icon set: its generated classes (html/project-icons), its component or a `<use href="#id">` of its sprite (html/icon-from-set).
- Never hard-code a path to an icon file (`<img src="/icons/x.svg">`, `sprite.svg#x`) in markup; in CSS, no `url()` to an icon file (`css/icon-from-set`).
- Add an icon by putting its SVG in the set's source folder and rebuilding; never copy it into `public/`.
- One source folder, one generator, one naming scheme (`close`, `chevron-down`): no second set beside it.
- Icons draw in `currentColor` and size in `em` or a size token, so they follow the text.
- A decorative icon next to text gets `aria-hidden="true"`; an icon-only button or link gets its name on the button (`aria-label` or visually hidden text).
- An icon shown with `<img>` has `alt`: empty for decoration, the meaning otherwise (a11y/img-alt).
- Other images and media go through the bundler, not root paths (js/asset-import).

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

The real file

Where fe-icons lands for Augment

.agents/skills/fe-icons/SKILL.mdskill
.agents/skills/fe-icons/references/icons.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-icons lands for Trae

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

---
description: "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. Use when adding or changing an icon, an icon button, an SVG sprite or icon font, or setting up icons in a new project."
globs: **/*.html,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro,**/*.component.html,**/icons/*.svg
alwaysApply: false
---

# Icons (frontend-skills)

- Use the project's icon set: its generated classes (html/project-icons), its component or a `<use href="#id">` of its sprite (html/icon-from-set).
- Never hard-code a path to an icon file (`<img src="/icons/x.svg">`, `sprite.svg#x`) in markup; in CSS, no `url()` to an icon file (`css/icon-from-set`).
- Add an icon by putting its SVG in the set's source folder and rebuilding; never copy it into `public/`.
- One source folder, one generator, one naming scheme (`close`, `chevron-down`): no second set beside it.
- Icons draw in `currentColor` and size in `em` or a size token, so they follow the text.
- A decorative icon next to text gets `aria-hidden="true"`; an icon-only button or link gets its name on the button (`aria-label` or visually hidden text).
- An icon shown with `<img>` has `alt`: empty for decoration, the meaning otherwise (a11y/img-alt).
- Other images and media go through the bundler, not root paths (js/asset-import).

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

The real file

Where fe-icons lands for Continue

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

---
name: "Icons"
description: "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. Use when adding or changing an icon, an icon button, an SVG sprite or icon font, or setting up icons in a new project."
globs: ["**/*.html", "**/*.jsx", "**/*.tsx", "**/*.vue", "**/*.svelte", "**/*.astro", "**/*.component.html", "**/icons/*.svg"]
alwaysApply: false
---

# Icons (frontend-skills)

- Use the project's icon set: its generated classes (html/project-icons), its component or a `<use href="#id">` of its sprite (html/icon-from-set).
- Never hard-code a path to an icon file (`<img src="/icons/x.svg">`, `sprite.svg#x`) in markup; in CSS, no `url()` to an icon file (`css/icon-from-set`).
- Add an icon by putting its SVG in the set's source folder and rebuilding; never copy it into `public/`.
- One source folder, one generator, one naming scheme (`close`, `chevron-down`): no second set beside it.
- Icons draw in `currentColor` and size in `em` or a size token, so they follow the text.
- A decorative icon next to text gets `aria-hidden="true"`; an icon-only button or link gets its name on the button (`aria-label` or visually hidden text).
- An icon shown with `<img>` has `alt`: empty for decoration, the meaning otherwise (a11y/img-alt).
- Other images and media go through the bundler, not root paths (js/asset-import).

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

The real file

Where fe-icons lands for Amazon Q Developer

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

The real file

Where fe-icons lands for Aider

.frontend-skills/skills/fe-icons/SKILL.mdskill
.frontend-skills/skills/fe-icons/references/icons.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-icons` (Icons): when editing `**/*.html`, `**/*.jsx`, `**/*.tsx`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, `**/*.component.html`, `**/icons/*.svg`, first read `.frontend-skills/skills/fe-icons/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-icons skill on this file.
Run the front-end audit on what I changed and fix everything serious.
Explain html/icon-from-set and fix it here.

Rules it teaches

html/icon-from-set
When the project has an icon set (sprite, icon classes or an Icon component), markup uses it, never a hard-coded path to an icon file.
minorstatic
html/project-icons
Icons use the project's generated icon classes (its icon classes), not separate SVG image files.
minorstatic
js/asset-import
In a bundled project, images, fonts and media in component markup are imported or use the base-path helper, not hard-coded root paths.
moderatestatic
a11y/img-alt
Every img and area element has an alt attribute; a decorative image has alt="".
criticalstaticWCAG 1.1.1

The rule digest

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

Use the project's icon set: its generated classes (html/project-icons), its component or a <use href="#id"> of its sprite (html/icon-from-set).
Never hard-code a path to an icon file (<img src="/icons/x.svg">, sprite.svg#x) in markup; in CSS, no url() to an icon file (css/icon-from-set).
Add an icon by putting its SVG in the set's source folder and rebuilding; never copy it into public/.
One source folder, one generator, one naming scheme (close, chevron-down): no second set beside it.
Icons draw in currentColor and size in em or a size token, so they follow the text.
A decorative icon next to text gets aria-hidden="true"; an icon-only button or link gets its name on the button (aria-label or visually hidden text).
An icon shown with <img> has alt: empty for decoration, the meaning otherwise (a11y/img-alt).
Other images and media go through the bundler, not root paths (js/asset-import).

Steps the agent follows

Find the set: helpers in the profile (icon-classes, icon-sprite); if it is missing, run npx github:dawidolko/frontend-skills learn and confirm what it finds with the person; an Icon component it does not detect goes into lessons.md as a convention.
Use it the framework's way: React or Preact <Icon name="close" /> over a sprite or SVGR imports; Vue <SvgIcon name="close" /> (vite-plugin-svg-icons) or ~icons/ components (unplugin-icons); Svelte <Icon name="close" />; Angular <mat-icon svgIcon="close"> with MatIconRegistry; Astro <Icon name="close" /> from astro-icon/components (SVGs in src/icons/); plain sites a sprite <use href="#icon-close"> or the generated classes.
No set yet: create one from src/icons/*.svg with the build (sprite plugin or unplugin-icons custom collection) and one small Icon component; remove fixed fill and width/height from the SVG files so the component controls them.
Icon-only controls: <button type="button" aria-label="Close"><Icon name="close" aria-hidden="true" /></button>; touch targets at least 24 by 24 CSS px.

How the agent checks the work

npx github:dawidolko/frontend-skills audit --changed reports hard-coded icon files in markup where the project has a set, images without alt and hard-coded asset paths.
After a build, the sprite or icon CSS has a content hash in its file name and every icon you added is in it.
With a screen reader or the accessibility tree, an icon-only button reads its name once, not "image" or the file name.

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/icons.md1857 tokens

SKILL.md on GitHub