Praca z narzędziem

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-componentkażdego projektu webowego7 regułładowane zawsze: 84 tokeny; przy użyciu: 972 tokeny; w referencjach na żądanie: 1297 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-component dla: Claude Code

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

Prawdziwy plik

Gdzie trafia fe-component dla: OpenAI Codex

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

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

Prawdziwy plik

Gdzie trafia fe-component dla: GitHub Copilot

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

Prawdziwy plik

Gdzie trafia fe-component dla: Gemini CLI

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

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

Prawdziwy plik

Gdzie trafia fe-component dla: Devin / Windsurf

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

Prawdziwy plik

Gdzie trafia fe-component dla: OpenCode

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

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

Prawdziwy plik

Gdzie trafia fe-component dla: Zed

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

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

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

Prawdziwy plik

Gdzie trafia fe-component dla: Augment

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

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

Prawdziwy plik

Gdzie trafia fe-component dla: Continue

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

Prawdziwy plik

Gdzie trafia fe-component dla: Amazon Q Developer

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

Prawdziwy plik

Gdzie trafia fe-component dla: Aider

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

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-component na tym pliku.
Uruchom audyt front-endu na moich zmianach i popraw wszystko, co poważne.
Wyjaśnij a11y/prefer-native-element i popraw to tutaj.

Reguły, których uczy

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).
drobnastatyczneWCAG 4.1.2
a11y/control-name
Every button and link has an accessible name; icon-only controls get visually hidden text or aria-label.
krytycznastatyczneWCAG 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.
poważnastatyczneWCAG 2.1.1, 4.1.2
a11y/focus-visible
Never remove the focus outline without drawing a visible replacement for keyboard focus.
poważnastatyczneWCAG 2.4.7
a11y/state-exposed
Custom toggles, disclosures and selections expose their state (aria-expanded, aria-pressed, aria-checked, aria-selected).
poważnaręczneWCAG 4.1.2
html/button-type
Every button states its type (button, submit or reset); the default is submit.
drobnastatyczne
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.
drobnaręczne

Skrót reguł

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

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

Kroki, które wykonuje agent

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.

Jak agent sprawdza swoją pracę

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.

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/component.md1297 tokenów

SKILL.md na GitHubie