Frontend Skills
English

Dostępność

Contrast, colour, size and reflow

Keeps visual design readable and usable to WCAG 2.2 AA as a target - text and UI contrast, no colour-only meaning, 24px targets, reflow at 320px, resize and text spacing, dismissible hover content. Use when choosing colours or design tokens, styling links, buttons, fields, focus rings or tooltips, building a theme or dark mode, or when asked "is this contrast OK".

fe-a11y-visualkażdego projektu webowego8 regułładowane zawsze: 94 tokeny; przy użyciu: 998 tokenów; w referencjach na żądanie: 1747 tokenów.

Instalacja

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

Agent
npx github:dawidolko/frontend-skills init

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)
AgentRozpoznawany po
Claude CodeCLAUDE.md .claude CLAUDE.local.md
OpenAI Codex.codex AGENTS.override.md
Cursor.cursor .cursorrules
GitHub Copilot.github/copilot-instructions.md .github/instructions .github/skills .github/prompts
Gemini CLIGEMINI.md .gemini
Antigravity CLI.agents/rules .agent/rules
Devin / Windsurf.devin .windsurf .windsurfrules
OpenCodeopencode.json opencode.jsonc .opencode
Cline.clinerules .cline
Zed.rules .zed
JetBrains Junie.junie
Kiro.kiro
Augment.augment .augment-guidelines
Trae.trae
Continue.continue
Amazon Q Developer.amazonq
Aider.aider.conf.yml CONVENTIONS.md

Gdzie trafia fe-a11y-visual dla: Claude Code

  • .claude/skills/fe-a11y-visual/SKILL.mdskill
  • .claude/skills/fe-a11y-visual/references/visual.mdskill
  • .claude/rules/fe-a11y-visual.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-a11y-visual.md
---
paths:
  - "**/*.css"
  - "**/*.scss"
  - "**/*.less"
  - "**/*.html"
  - "**/*.jsx"
  - "**/*.tsx"
  - "**/*.vue"
  - "**/*.svelte"
  - "**/*.astro"
---

# Contrast, colour, size and reflow (frontend-skills)

Keeps visual design readable and usable to WCAG 2.2 AA as a target - text and UI contrast, no colour-only meaning, 24px targets, reflow at 320px, resize and text spacing, dismissible hover content. Use when choosing colours or design tokens, styling links, buttons, fields, focus rings or tooltips, building a theme or dark mode, or when asked "is this contrast OK".

- Text contrast is at least 4.5:1; large text (24px, or 18.5px bold) at least 3:1; 4.49 fails (a11y/color-contrast).
- Field borders, checkboxes, toggles, focus rings and meaningful icons reach 3:1 against their neighbours (a11y/non-text-contrast).
- Colour is never the only cue: errors get text and an icon, links in text get an underline (a11y/no-color-only).
- Pointer targets are at least 24 by 24 CSS px, or spaced 24px apart (a11y/target-size).
- Layouts reflow at 320px wide with no sideways scrolling, except tables, maps and code (a11y/reflow).
- Text survives the WCAG spacing overrides: no fixed heights with `overflow: hidden` on text (a11y/text-spacing).
- Do not set the root font size in px; size type in `rem` (a11y/font-size-relative).
- Hover and focus popups close with Escape, can be hovered, and never time out (a11y/hover-content-dismissible).
- Never block zoom in the viewport meta tag (a11y/zoom-not-blocked); never use images of text.
- Respect `prefers-reduced-motion` and `prefers-color-scheme`; test both themes for every rule above.

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

Gdzie trafia fe-a11y-visual dla: OpenAI Codex

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

  • .agents/skills/fe-a11y-visual/SKILL.mdskill
  • .agents/skills/fe-a11y-visual/references/visual.mdskill
  • .cursor/rules/fe-a11y-visual.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-a11y-visual.mdc
---
description: Keeps visual design readable and usable to WCAG 2.2 AA as a target - text and UI contrast, no colour-only meaning, 24px targets, reflow at 320px, resize and text spacing, dismissible hover content. Use when choosing colours or design tokens, styling links, buttons, fields, focus rings or tooltips, building a theme or dark mode, or when asked "is this contrast OK".
globs: **/*.css, **/*.scss, **/*.less, **/*.html, **/*.jsx, **/*.tsx, **/*.vue, **/*.svelte, **/*.astro
alwaysApply: false
---

# Contrast, colour, size and reflow (frontend-skills)

- Text contrast is at least 4.5:1; large text (24px, or 18.5px bold) at least 3:1; 4.49 fails (a11y/color-contrast).
- Field borders, checkboxes, toggles, focus rings and meaningful icons reach 3:1 against their neighbours (a11y/non-text-contrast).
- Colour is never the only cue: errors get text and an icon, links in text get an underline (a11y/no-color-only).
- Pointer targets are at least 24 by 24 CSS px, or spaced 24px apart (a11y/target-size).
- Layouts reflow at 320px wide with no sideways scrolling, except tables, maps and code (a11y/reflow).
- Text survives the WCAG spacing overrides: no fixed heights with `overflow: hidden` on text (a11y/text-spacing).
- Do not set the root font size in px; size type in `rem` (a11y/font-size-relative).
- Hover and focus popups close with Escape, can be hovered, and never time out (a11y/hover-content-dismissible).
- Never block zoom in the viewport meta tag (a11y/zoom-not-blocked); never use images of text.
- Respect `prefers-reduced-motion` and `prefers-color-scheme`; test both themes for every rule above.

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

Gdzie trafia fe-a11y-visual dla: GitHub Copilot

  • .agents/skills/fe-a11y-visual/SKILL.mdskill
  • .agents/skills/fe-a11y-visual/references/visual.mdskill
  • .github/instructions/fe-a11y-visual.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-a11y-visual.instructions.md
---
applyTo: "**/*.css,**/*.scss,**/*.less,**/*.html,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro"
description: "Keeps visual design readable and usable to WCAG 2.2 AA as a target - text and UI contrast, no colour-only meaning, 24px targets, reflow at 320px, resize and text spacing, dismissible hover content. Use when choosing colours or design tokens, styling links, buttons, fields, focus rings or tooltips, building a theme or dark mode, or when asked \"is this contrast OK\"."
---

# Contrast, colour, size and reflow (frontend-skills)

- Text contrast is at least 4.5:1; large text (24px, or 18.5px bold) at least 3:1; 4.49 fails (a11y/color-contrast).
- Field borders, checkboxes, toggles, focus rings and meaningful icons reach 3:1 against their neighbours (a11y/non-text-contrast).
- Colour is never the only cue: errors get text and an icon, links in text get an underline (a11y/no-color-only).
- Pointer targets are at least 24 by 24 CSS px, or spaced 24px apart (a11y/target-size).
- Layouts reflow at 320px wide with no sideways scrolling, except tables, maps and code (a11y/reflow).
- Text survives the WCAG spacing overrides: no fixed heights with `overflow: hidden` on text (a11y/text-spacing).
- Do not set the root font size in px; size type in `rem` (a11y/font-size-relative).
- Hover and focus popups close with Escape, can be hovered, and never time out (a11y/hover-content-dismissible).
- Never block zoom in the viewport meta tag (a11y/zoom-not-blocked); never use images of text.
- Respect `prefers-reduced-motion` and `prefers-color-scheme`; test both themes for every rule above.

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

Gdzie trafia fe-a11y-visual dla: Gemini CLI

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

  • .agents/skills/fe-a11y-visual/SKILL.mdskill
  • .agents/skills/fe-a11y-visual/references/visual.mdskill
  • .agents/rules/fe-a11y-visual.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-a11y-visual.md
---
trigger: glob
globs: "**/*.css, **/*.scss, **/*.less, **/*.html, **/*.jsx, **/*.tsx, **/*.vue, **/*.svelte, **/*.astro"
description: "Keeps visual design readable and usable to WCAG 2.2 AA as a target - text and UI contrast, no colour-only meaning, 24px targets, reflow at 320px, resize and text spacing, dismissible hover content. Use when choosing colours or design tokens, styling links, buttons, fields, focus rings or tooltips, building a theme or dark mode, or when asked \"is this contrast OK\"."
---

# Contrast, colour, size and reflow (frontend-skills)

- Text contrast is at least 4.5:1; large text (24px, or 18.5px bold) at least 3:1; 4.49 fails (a11y/color-contrast).
- Field borders, checkboxes, toggles, focus rings and meaningful icons reach 3:1 against their neighbours (a11y/non-text-contrast).
- Colour is never the only cue: errors get text and an icon, links in text get an underline (a11y/no-color-only).
- Pointer targets are at least 24 by 24 CSS px, or spaced 24px apart (a11y/target-size).
- Layouts reflow at 320px wide with no sideways scrolling, except tables, maps and code (a11y/reflow).
- Text survives the WCAG spacing overrides: no fixed heights with `overflow: hidden` on text (a11y/text-spacing).
- Do not set the root font size in px; size type in `rem` (a11y/font-size-relative).
- Hover and focus popups close with Escape, can be hovered, and never time out (a11y/hover-content-dismissible).
- Never block zoom in the viewport meta tag (a11y/zoom-not-blocked); never use images of text.
- Respect `prefers-reduced-motion` and `prefers-color-scheme`; test both themes for every rule above.

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

Gdzie trafia fe-a11y-visual dla: Devin / Windsurf

  • .agents/skills/fe-a11y-visual/SKILL.mdskill
  • .agents/skills/fe-a11y-visual/references/visual.mdskill
  • .devin/rules/fe-a11y-visual.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-a11y-visual.md
---
trigger: glob
globs: "**/*.css,**/*.scss,**/*.less,**/*.html,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro"
---

# Contrast, colour, size and reflow (frontend-skills)

Keeps visual design readable and usable to WCAG 2.2 AA as a target - text and UI contrast, no colour-only meaning, 24px targets, reflow at 320px, resize and text spacing, dismissible hover content. Use when choosing colours or design tokens, styling links, buttons, fields, focus rings or tooltips, building a theme or dark mode, or when asked "is this contrast OK".

- Text contrast is at least 4.5:1; large text (24px, or 18.5px bold) at least 3:1; 4.49 fails (a11y/color-contrast).
- Field borders, checkboxes, toggles, focus rings and meaningful icons reach 3:1 against their neighbours (a11y/non-text-contrast).
- Colour is never the only cue: errors get text and an icon, links in text get an underline (a11y/no-color-only).
- Pointer targets are at least 24 by 24 CSS px, or spaced 24px apart (a11y/target-size).
- Layouts reflow at 320px wide with no sideways scrolling, except tables, maps and code (a11y/reflow).
- Text survives the WCAG spacing overrides: no fixed heights with `overflow: hidden` on text (a11y/text-spacing).
- Do not set the root font size in px; size type in `rem` (a11y/font-size-relative).
- Hover and focus popups close with Escape, can be hovered, and never time out (a11y/hover-content-dismissible).
- Never block zoom in the viewport meta tag (a11y/zoom-not-blocked); never use images of text.
- Respect `prefers-reduced-motion` and `prefers-color-scheme`; test both themes for every rule above.

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

Gdzie trafia fe-a11y-visual dla: OpenCode

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

  • .claude/skills/fe-a11y-visual/SKILL.mdskill
  • .claude/skills/fe-a11y-visual/references/visual.mdskill
  • .clinerules/fe-a11y-visual.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-a11y-visual.md
---
paths:
  - "**/*.css"
  - "**/*.scss"
  - "**/*.less"
  - "**/*.html"
  - "**/*.jsx"
  - "**/*.tsx"
  - "**/*.vue"
  - "**/*.svelte"
  - "**/*.astro"
---

# Contrast, colour, size and reflow (frontend-skills)

Keeps visual design readable and usable to WCAG 2.2 AA as a target - text and UI contrast, no colour-only meaning, 24px targets, reflow at 320px, resize and text spacing, dismissible hover content. Use when choosing colours or design tokens, styling links, buttons, fields, focus rings or tooltips, building a theme or dark mode, or when asked "is this contrast OK".

- Text contrast is at least 4.5:1; large text (24px, or 18.5px bold) at least 3:1; 4.49 fails (a11y/color-contrast).
- Field borders, checkboxes, toggles, focus rings and meaningful icons reach 3:1 against their neighbours (a11y/non-text-contrast).
- Colour is never the only cue: errors get text and an icon, links in text get an underline (a11y/no-color-only).
- Pointer targets are at least 24 by 24 CSS px, or spaced 24px apart (a11y/target-size).
- Layouts reflow at 320px wide with no sideways scrolling, except tables, maps and code (a11y/reflow).
- Text survives the WCAG spacing overrides: no fixed heights with `overflow: hidden` on text (a11y/text-spacing).
- Do not set the root font size in px; size type in `rem` (a11y/font-size-relative).
- Hover and focus popups close with Escape, can be hovered, and never time out (a11y/hover-content-dismissible).
- Never block zoom in the viewport meta tag (a11y/zoom-not-blocked); never use images of text.
- Respect `prefers-reduced-motion` and `prefers-color-scheme`; test both themes for every rule above.

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

Gdzie trafia fe-a11y-visual dla: Zed

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

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

  • .kiro/skills/fe-a11y-visual/SKILL.mdskill
  • .kiro/skills/fe-a11y-visual/references/visual.mdskill
  • .kiro/steering/fe-a11y-visual.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-a11y-visual.md
---
inclusion: fileMatch
fileMatchPattern: ["**/*.css", "**/*.scss", "**/*.less", "**/*.html", "**/*.jsx", "**/*.tsx", "**/*.vue", "**/*.svelte", "**/*.astro"]
---

# Contrast, colour, size and reflow (frontend-skills)

Keeps visual design readable and usable to WCAG 2.2 AA as a target - text and UI contrast, no colour-only meaning, 24px targets, reflow at 320px, resize and text spacing, dismissible hover content. Use when choosing colours or design tokens, styling links, buttons, fields, focus rings or tooltips, building a theme or dark mode, or when asked "is this contrast OK".

- Text contrast is at least 4.5:1; large text (24px, or 18.5px bold) at least 3:1; 4.49 fails (a11y/color-contrast).
- Field borders, checkboxes, toggles, focus rings and meaningful icons reach 3:1 against their neighbours (a11y/non-text-contrast).
- Colour is never the only cue: errors get text and an icon, links in text get an underline (a11y/no-color-only).
- Pointer targets are at least 24 by 24 CSS px, or spaced 24px apart (a11y/target-size).
- Layouts reflow at 320px wide with no sideways scrolling, except tables, maps and code (a11y/reflow).
- Text survives the WCAG spacing overrides: no fixed heights with `overflow: hidden` on text (a11y/text-spacing).
- Do not set the root font size in px; size type in `rem` (a11y/font-size-relative).
- Hover and focus popups close with Escape, can be hovered, and never time out (a11y/hover-content-dismissible).
- Never block zoom in the viewport meta tag (a11y/zoom-not-blocked); never use images of text.
- Respect `prefers-reduced-motion` and `prefers-color-scheme`; test both themes for every rule above.

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

Gdzie trafia fe-a11y-visual dla: Augment

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

  • .trae/skills/fe-a11y-visual/SKILL.mdskill
  • .trae/skills/fe-a11y-visual/references/visual.mdskill
  • .trae/rules/fe-a11y-visual.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-a11y-visual.md
---
description: "Keeps visual design readable and usable to WCAG 2.2 AA as a target - text and UI contrast, no colour-only meaning, 24px targets, reflow at 320px, resize and text spacing, dismissible hover content. Use when choosing colours or design tokens, styling links, buttons, fields, focus rings or tooltips, building a theme or dark mode, or when asked \"is this contrast OK\"."
globs: **/*.css,**/*.scss,**/*.less,**/*.html,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro
alwaysApply: false
---

# Contrast, colour, size and reflow (frontend-skills)

- Text contrast is at least 4.5:1; large text (24px, or 18.5px bold) at least 3:1; 4.49 fails (a11y/color-contrast).
- Field borders, checkboxes, toggles, focus rings and meaningful icons reach 3:1 against their neighbours (a11y/non-text-contrast).
- Colour is never the only cue: errors get text and an icon, links in text get an underline (a11y/no-color-only).
- Pointer targets are at least 24 by 24 CSS px, or spaced 24px apart (a11y/target-size).
- Layouts reflow at 320px wide with no sideways scrolling, except tables, maps and code (a11y/reflow).
- Text survives the WCAG spacing overrides: no fixed heights with `overflow: hidden` on text (a11y/text-spacing).
- Do not set the root font size in px; size type in `rem` (a11y/font-size-relative).
- Hover and focus popups close with Escape, can be hovered, and never time out (a11y/hover-content-dismissible).
- Never block zoom in the viewport meta tag (a11y/zoom-not-blocked); never use images of text.
- Respect `prefers-reduced-motion` and `prefers-color-scheme`; test both themes for every rule above.

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

Gdzie trafia fe-a11y-visual dla: Continue

  • .frontend-skills/skills/fe-a11y-visual/SKILL.mdskill
  • .frontend-skills/skills/fe-a11y-visual/references/visual.mdskill
  • .continue/rules/fe-a11y-visual.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-a11y-visual.md
---
name: "Contrast, colour, size and reflow"
description: "Keeps visual design readable and usable to WCAG 2.2 AA as a target - text and UI contrast, no colour-only meaning, 24px targets, reflow at 320px, resize and text spacing, dismissible hover content. Use when choosing colours or design tokens, styling links, buttons, fields, focus rings or tooltips, building a theme or dark mode, or when asked \"is this contrast OK\"."
globs: ["**/*.css", "**/*.scss", "**/*.less", "**/*.html", "**/*.jsx", "**/*.tsx", "**/*.vue", "**/*.svelte", "**/*.astro"]
alwaysApply: false
---

# Contrast, colour, size and reflow (frontend-skills)

- Text contrast is at least 4.5:1; large text (24px, or 18.5px bold) at least 3:1; 4.49 fails (a11y/color-contrast).
- Field borders, checkboxes, toggles, focus rings and meaningful icons reach 3:1 against their neighbours (a11y/non-text-contrast).
- Colour is never the only cue: errors get text and an icon, links in text get an underline (a11y/no-color-only).
- Pointer targets are at least 24 by 24 CSS px, or spaced 24px apart (a11y/target-size).
- Layouts reflow at 320px wide with no sideways scrolling, except tables, maps and code (a11y/reflow).
- Text survives the WCAG spacing overrides: no fixed heights with `overflow: hidden` on text (a11y/text-spacing).
- Do not set the root font size in px; size type in `rem` (a11y/font-size-relative).
- Hover and focus popups close with Escape, can be hovered, and never time out (a11y/hover-content-dismissible).
- Never block zoom in the viewport meta tag (a11y/zoom-not-blocked); never use images of text.
- Respect `prefers-reduced-motion` and `prefers-color-scheme`; test both themes for every rule above.

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

Gdzie trafia fe-a11y-visual dla: Amazon Q Developer

  • .frontend-skills/skills/fe-a11y-visual/SKILL.mdskill
  • .frontend-skills/skills/fe-a11y-visual/references/visual.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-a11y-visual` (Contrast, colour, size and reflow): when editing `**/*.css`, `**/*.scss`, `**/*.less`, `**/*.html`, `**/*.jsx`, `**/*.tsx`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, first read `.frontend-skills/skills/fe-a11y-visual/SKILL.md`.
Prawdziwy plik

Gdzie trafia fe-a11y-visual dla: Aider

  • .frontend-skills/skills/fe-a11y-visual/SKILL.mdskill
  • .frontend-skills/skills/fe-a11y-visual/references/visual.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-a11y-visual` (Contrast, colour, size and reflow): when editing `**/*.css`, `**/*.scss`, `**/*.less`, `**/*.html`, `**/*.jsx`, `**/*.tsx`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, first read `.frontend-skills/skills/fe-a11y-visual/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:

Frazy z opisu skilla, po których agent go wybiera (po angielsku, jak w skillu):

  • is this contrast OK

A żeby sprawdzić i poprawić pracę:

  • Użyj skilla fe-a11y-visual na tym pliku.
  • Uruchom audyt front-endu na moich zmianach i popraw wszystko, co poważne.
  • Wyjaśnij a11y/color-contrast i popraw to tutaj.

Reguły, których uczy

  • a11y/color-contrast

    Text has a contrast ratio of at least 4.5:1 with its background; large text (24px, or 18.5px bold) at least 3:1.

    poważnaw przeglądarceWCAG 1.4.3

  • a11y/non-text-contrast

    Borders of fields, checkboxes, toggles, focus rings and meaningful icons have at least 3:1 contrast with their neighbours.

    poważnaręczneWCAG 1.4.11

  • a11y/no-color-only

    Colour is never the only cue; errors, states, links in text and chart series also differ by text, icon, shape or underline.

    poważnaw przeglądarceWCAG 1.4.1

  • a11y/target-size

    Pointer targets are at least 24 by 24 CSS pixels, or spaced so a 24px circle on each does not touch another target.

    poważnaw przeglądarceWCAG 2.5.8

  • a11y/reflow

    At 320 CSS pixels wide (400% zoom) content reflows into one column with no horizontal scrolling, except tables, maps and similar.

    poważnaręczneWCAG 1.4.10

  • a11y/text-spacing

    Text survives line height 1.5, paragraph spacing 2em, letter spacing 0.12em and word spacing 0.16em without being cut off.

    poważnaw przeglądarceWCAG 1.4.12

  • a11y/font-size-relative

    The root font size is not set in pixels, so text follows the reader's default size; use rem for type.

    drobnastatyczneWCAG 1.4.4

  • a11y/hover-content-dismissible

    Tooltips and popups shown on hover or focus close with Escape, stay while the pointer moves onto them, and do not vanish on a timer.

    umiarkowanaręczneWCAG 1.4.13

Skrót reguł

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

  • Text contrast is at least 4.5:1; large text (24px, or 18.5px bold) at least 3:1; 4.49 fails (a11y/color-contrast).
  • Field borders, checkboxes, toggles, focus rings and meaningful icons reach 3:1 against their neighbours (a11y/non-text-contrast).
  • Colour is never the only cue: errors get text and an icon, links in text get an underline (a11y/no-color-only).
  • Pointer targets are at least 24 by 24 CSS px, or spaced 24px apart (a11y/target-size).
  • Layouts reflow at 320px wide with no sideways scrolling, except tables, maps and code (a11y/reflow).
  • Text survives the WCAG spacing overrides: no fixed heights with overflow: hidden on text (a11y/text-spacing).
  • Do not set the root font size in px; size type in rem (a11y/font-size-relative).
  • Hover and focus popups close with Escape, can be hovered, and never time out (a11y/hover-content-dismissible).
  • Never block zoom in the viewport meta tag (a11y/zoom-not-blocked); never use images of text.
  • Respect prefers-reduced-motion and prefers-color-scheme; test both themes for every rule above.

Kroki, które wykonuje agent

  1. Find the colour tokens (CSS custom properties, Tailwind @theme, a tokens file) and fix contrast there, as tested pairs of foreground and background, for light and dark themes.
  2. Style states visibly beyond colour: :hover and :focus-visible change shape or underline; selected items get a check mark; errors get an icon and text.
  3. Size controls with min-width/min-height and padding, not with a fixed width/height on the icon.
  4. Lay out with flex-wrap, grid with minmax(min(…, 100%), 1fr), max-width, and overflow-wrap: anywhere for long strings.
  5. Let text boxes grow: min-height, no clipping; truncation (line-clamp) only where the full text is reachable.

Jak agent sprawdza swoją pracę

  • npx github:dawidolko/frontend-skills audit --changed finds a root font size in px and a zoom block; the rest needs a rendered page.
  • audit --url <page> runs axe-core for text contrast, links that rely on colour and target size.
  • By hand: zoom to 400% (or a 320px window), apply a text spacing bookmarklet, view in greyscale, and check field borders and focus rings with a contrast checker.

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

SKILL.md na GitHubie