Style

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-iconskażdego projektu webowego4 regułyładowane zawsze: 81 tokenów; przy użyciu: 968 tokenów; w referencjach na żądanie: 1857 tokenów.

Instalacja

init instaluje ten skill, gdy projekt używa: każdego projektu webowego. Wybierz agenta, aby zobaczyć, gdzie trafią jego pliki.

npx github:dawidolko/frontend-skills init

Ten sposób nie był jeszcze testowany. npx i pnpm dlx są przetestowane; jeśli ten zawiedzie, użyj jednego z nich.

Bez --agents polecenie init rozpoznaje agentów po tym, co projekt już ma, a gdy nie znajdzie żadnego, pyta:

Po czym init rozpoznaje każdego z agentów (17)

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

Gdzie trafia fe-icons dla: Claude Code

.claude/skills/fe-icons/SKILL.mdskill
.claude/skills/fe-icons/references/icons.mdskill
.claude/rules/fe-icons.mdplik reguł
CLAUDE.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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

Prawdziwy plik

Gdzie trafia fe-icons dla: OpenAI Codex

.agents/skills/fe-icons/SKILL.mdskill
.agents/skills/fe-icons/references/icons.mdskill
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

OpenAI Codex nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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.

Prawdziwy plik

Gdzie trafia fe-icons dla: Cursor

.agents/skills/fe-icons/SKILL.mdskill
.agents/skills/fe-icons/references/icons.mdskill
.cursor/rules/fe-icons.mdcplik reguł
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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

Prawdziwy plik

Gdzie trafia fe-icons dla: GitHub Copilot

.agents/skills/fe-icons/SKILL.mdskill
.agents/skills/fe-icons/references/icons.mdskill
.github/instructions/fe-icons.instructions.mdplik reguł
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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

Prawdziwy plik

Gdzie trafia fe-icons dla: Gemini CLI

.agents/skills/fe-icons/SKILL.mdskill
.agents/skills/fe-icons/references/icons.mdskill
GEMINI.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

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

Gemini CLI nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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.

Prawdziwy plik

Gdzie trafia fe-icons dla: Antigravity CLI

.agents/skills/fe-icons/SKILL.mdskill
.agents/skills/fe-icons/references/icons.mdskill
.agents/rules/fe-icons.mdplik reguł
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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

Prawdziwy plik

Gdzie trafia fe-icons dla: Devin / Windsurf

.agents/skills/fe-icons/SKILL.mdskill
.agents/skills/fe-icons/references/icons.mdskill
.devin/rules/fe-icons.mdplik reguł
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

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

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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

Prawdziwy plik

Gdzie trafia fe-icons dla: OpenCode

.agents/skills/fe-icons/SKILL.mdskill
.agents/skills/fe-icons/references/icons.mdskill
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

OpenCode nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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.

Prawdziwy plik

Gdzie trafia fe-icons dla: Cline

.claude/skills/fe-icons/SKILL.mdskill
.claude/skills/fe-icons/references/icons.mdskill
.clinerules/fe-icons.mdplik reguł
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

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

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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

Prawdziwy plik

Gdzie trafia fe-icons dla: Zed

.agents/skills/fe-icons/SKILL.mdskill
.agents/skills/fe-icons/references/icons.mdskill
CLAUDE.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

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

Zed nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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.

Prawdziwy plik

Gdzie trafia fe-icons dla: JetBrains Junie

.agents/skills/fe-icons/SKILL.mdskill
.agents/skills/fe-icons/references/icons.mdskill
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

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

JetBrains Junie nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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.

Prawdziwy plik

Gdzie trafia fe-icons dla: Kiro

.kiro/skills/fe-icons/SKILL.mdskill
.kiro/skills/fe-icons/references/icons.mdskill
.kiro/steering/fe-icons.mdplik reguł
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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

Prawdziwy plik

Gdzie trafia fe-icons dla: Augment

.agents/skills/fe-icons/SKILL.mdskill
.agents/skills/fe-icons/references/icons.mdskill
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Augment nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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.

Prawdziwy plik

Gdzie trafia fe-icons dla: Trae

.trae/skills/fe-icons/SKILL.mdskill
.trae/skills/fe-icons/references/icons.mdskill
.trae/rules/fe-icons.mdplik reguł
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

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

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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

Prawdziwy plik

Gdzie trafia fe-icons dla: Continue

.frontend-skills/skills/fe-icons/SKILL.mdskill
.frontend-skills/skills/fe-icons/references/icons.mdskill
.continue/rules/fe-icons.mdplik reguł

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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

Prawdziwy plik

Gdzie trafia fe-icons dla: Amazon Q Developer

.frontend-skills/skills/fe-icons/SKILL.mdskill
.frontend-skills/skills/fe-icons/references/icons.mdskill
.amazonq/rules/frontend-skills.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

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

Amazon Q Developer nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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

Prawdziwy plik

Gdzie trafia fe-icons dla: Aider

.frontend-skills/skills/fe-icons/SKILL.mdskill
.frontend-skills/skills/fe-icons/references/icons.mdskill
CONVENTIONS.mdblok instrukcji
.aider.conf.ymlkonfiguracja

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Aider nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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

Prawdziwy plik

Jak go używać

Po instalacji agent sam ładuje skill, gdy zadanie pasuje do jego opisu. Możesz też poprosić o niego własnymi słowami, na przykład:

A żeby sprawdzić i poprawić pracę:

Użyj skilla fe-icons na tym pliku.
Uruchom audyt front-endu na moich zmianach i popraw wszystko, co poważne.
Wyjaśnij html/icon-from-set i popraw to tutaj.

Reguły, których uczy

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.
drobnastatyczne
html/project-icons
Icons use the project's generated icon classes (its icon classes), not separate SVG image files.
drobnastatyczne
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.
umiarkowanastatyczne
a11y/img-alt
Every img and area element has an alt attribute; a decorative image has alt="".
krytycznastatyczneWCAG 1.1.1

Skrót reguł

Ta część jest kopiowana do zawężonego pliku reguł każdego agenta, więc musi być zrozumiała sama w sobie:

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

Kroki, które wykonuje agent

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.

Jak agent sprawdza swoją pracę

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.

Sprawdzane audytem

Testy statyczne tych reguł działają w audit; to prawdziwa sesja na przykładowym projekcie:

Nagranie terminala: audit wypisuje znaleziska według wagi z identyfikatorami reguł i miejscem plik:linia i kończy się błędem od progu serious. — `audit`: liczby według wagi, każda reguła z pierwszym miejscem, kod wyjścia.

Pliki referencyjne

references/icons.md1857 tokenów

SKILL.md na GitHubie