Frontend Skills
Polski

Accessibility

Accessible forms

Builds and reviews accessible forms in any stack (HTML, React, Vue, Svelte, Angular, Astro) to WCAG 2.2 AA as a target - labels, autocomplete, required fields, grouping, error messages, focus after submit, sign-in without memory tests. Use when writing or changing a form, an input component, validation or a sign-in or checkout flow, or when asked "is this form accessible".

fe-a11y-formsevery web project4 rules92 tokens always loaded, 875 tokens when used, 1223 tokens in references on demand.

Install

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

Agent
npx github:dawidolko/frontend-skills init

Without --agents, init finds the agents from what the project already has, and asks when it finds none:

How init finds each of the 17 agents
AgentFound by
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

Where fe-a11y-forms lands for Claude Code

  • .claude/skills/fe-a11y-forms/SKILL.mdskill
  • .claude/skills/fe-a11y-forms/references/forms.mdskill
  • .claude/rules/fe-a11y-forms.mdrule file
  • CLAUDE.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.claude/rules/fe-a11y-forms.md
---
paths:
  - "**/*.html"
  - "**/*.jsx"
  - "**/*.tsx"
  - "**/*.vue"
  - "**/*.svelte"
  - "**/*.astro"
  - "**/*.component.html"
---

# Accessible forms (frontend-skills)

Builds and reviews accessible forms in any stack (HTML, React, Vue, Svelte, Angular, Astro) to WCAG 2.2 AA as a target - labels, autocomplete, required fields, grouping, error messages, focus after submit, sign-in without memory tests. Use when writing or changing a form, an input component, validation or a sign-in or checkout flow, or when asked "is this form accessible".

- Every field has a programmatic label: `<label for>` + `id`, a wrapping `<label>`, or `aria-labelledby`; a placeholder is never the label (a11y/input-label).
- Personal-data fields carry a standard `autocomplete` token (`email`, `given-name`, `tel`, `postal-code`, `new-password`) (a11y/autocomplete-valid).
- Errors are text next to the field, linked with `aria-describedby`, marked with `aria-invalid="true"`, and say how to fix the input (a11y/form-errors).
- Required fields say so in the label text or with a visible marker explained once, plus the `required` attribute.
- Related choices (radio groups, an address block) sit in `<fieldset>` with a `<legend>`.
- The submit control is `<button type="submit">`; other buttons in a form are `type="button"` (html/button-type).
- Never block paste into password or code fields, never ask for the same data twice in one flow, never use a puzzle or memory test as the only way to sign in (WCAG 3.3.7, 3.3.8).
- Never rely on colour alone for an error or a required marker.

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

Where fe-a11y-forms lands for OpenAI Codex

  • .agents/skills/fe-a11y-forms/SKILL.mdskill
  • .agents/skills/fe-a11y-forms/references/forms.mdskill
  • AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

OpenAI Codex has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md
## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.
The real file

Where fe-a11y-forms lands for Cursor

  • .agents/skills/fe-a11y-forms/SKILL.mdskill
  • .agents/skills/fe-a11y-forms/references/forms.mdskill
  • .cursor/rules/fe-a11y-forms.mdcrule file
  • AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.cursor/rules/fe-a11y-forms.mdc
---
description: Builds and reviews accessible forms in any stack (HTML, React, Vue, Svelte, Angular, Astro) to WCAG 2.2 AA as a target - labels, autocomplete, required fields, grouping, error messages, focus after submit, sign-in without memory tests. Use when writing or changing a form, an input component, validation or a sign-in or checkout flow, or when asked "is this form accessible".
globs: **/*.html, **/*.jsx, **/*.tsx, **/*.vue, **/*.svelte, **/*.astro, **/*.component.html
alwaysApply: false
---

# Accessible forms (frontend-skills)

- Every field has a programmatic label: `<label for>` + `id`, a wrapping `<label>`, or `aria-labelledby`; a placeholder is never the label (a11y/input-label).
- Personal-data fields carry a standard `autocomplete` token (`email`, `given-name`, `tel`, `postal-code`, `new-password`) (a11y/autocomplete-valid).
- Errors are text next to the field, linked with `aria-describedby`, marked with `aria-invalid="true"`, and say how to fix the input (a11y/form-errors).
- Required fields say so in the label text or with a visible marker explained once, plus the `required` attribute.
- Related choices (radio groups, an address block) sit in `<fieldset>` with a `<legend>`.
- The submit control is `<button type="submit">`; other buttons in a form are `type="button"` (html/button-type).
- Never block paste into password or code fields, never ask for the same data twice in one flow, never use a puzzle or memory test as the only way to sign in (WCAG 3.3.7, 3.3.8).
- Never rely on colour alone for an error or a required marker.

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

Where fe-a11y-forms lands for GitHub Copilot

  • .agents/skills/fe-a11y-forms/SKILL.mdskill
  • .agents/skills/fe-a11y-forms/references/forms.mdskill
  • .github/instructions/fe-a11y-forms.instructions.mdrule file
  • AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.github/instructions/fe-a11y-forms.instructions.md
---
applyTo: "**/*.html,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro,**/*.component.html"
description: "Builds and reviews accessible forms in any stack (HTML, React, Vue, Svelte, Angular, Astro) to WCAG 2.2 AA as a target - labels, autocomplete, required fields, grouping, error messages, focus after submit, sign-in without memory tests. Use when writing or changing a form, an input component, validation or a sign-in or checkout flow, or when asked \"is this form accessible\"."
---

# Accessible forms (frontend-skills)

- Every field has a programmatic label: `<label for>` + `id`, a wrapping `<label>`, or `aria-labelledby`; a placeholder is never the label (a11y/input-label).
- Personal-data fields carry a standard `autocomplete` token (`email`, `given-name`, `tel`, `postal-code`, `new-password`) (a11y/autocomplete-valid).
- Errors are text next to the field, linked with `aria-describedby`, marked with `aria-invalid="true"`, and say how to fix the input (a11y/form-errors).
- Required fields say so in the label text or with a visible marker explained once, plus the `required` attribute.
- Related choices (radio groups, an address block) sit in `<fieldset>` with a `<legend>`.
- The submit control is `<button type="submit">`; other buttons in a form are `type="button"` (html/button-type).
- Never block paste into password or code fields, never ask for the same data twice in one flow, never use a puzzle or memory test as the only way to sign in (WCAG 3.3.7, 3.3.8).
- Never rely on colour alone for an error or a required marker.

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

Where fe-a11y-forms lands for Gemini CLI

  • .agents/skills/fe-a11y-forms/SKILL.mdskill
  • .agents/skills/fe-a11y-forms/references/forms.mdskill
  • GEMINI.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

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

Gemini CLI has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

GEMINI.md
## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.
The real file

Where fe-a11y-forms lands for Antigravity CLI

  • .agents/skills/fe-a11y-forms/SKILL.mdskill
  • .agents/skills/fe-a11y-forms/references/forms.mdskill
  • .agents/rules/fe-a11y-forms.mdrule file
  • AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.agents/rules/fe-a11y-forms.md
---
trigger: glob
globs: "**/*.html, **/*.jsx, **/*.tsx, **/*.vue, **/*.svelte, **/*.astro, **/*.component.html"
description: "Builds and reviews accessible forms in any stack (HTML, React, Vue, Svelte, Angular, Astro) to WCAG 2.2 AA as a target - labels, autocomplete, required fields, grouping, error messages, focus after submit, sign-in without memory tests. Use when writing or changing a form, an input component, validation or a sign-in or checkout flow, or when asked \"is this form accessible\"."
---

# Accessible forms (frontend-skills)

- Every field has a programmatic label: `<label for>` + `id`, a wrapping `<label>`, or `aria-labelledby`; a placeholder is never the label (a11y/input-label).
- Personal-data fields carry a standard `autocomplete` token (`email`, `given-name`, `tel`, `postal-code`, `new-password`) (a11y/autocomplete-valid).
- Errors are text next to the field, linked with `aria-describedby`, marked with `aria-invalid="true"`, and say how to fix the input (a11y/form-errors).
- Required fields say so in the label text or with a visible marker explained once, plus the `required` attribute.
- Related choices (radio groups, an address block) sit in `<fieldset>` with a `<legend>`.
- The submit control is `<button type="submit">`; other buttons in a form are `type="button"` (html/button-type).
- Never block paste into password or code fields, never ask for the same data twice in one flow, never use a puzzle or memory test as the only way to sign in (WCAG 3.3.7, 3.3.8).
- Never rely on colour alone for an error or a required marker.

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

Where fe-a11y-forms lands for Devin / Windsurf

  • .agents/skills/fe-a11y-forms/SKILL.mdskill
  • .agents/skills/fe-a11y-forms/references/forms.mdskill
  • .devin/rules/fe-a11y-forms.mdrule file
  • AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

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

Planned by the installer itself for the example React project in the repository.

.devin/rules/fe-a11y-forms.md
---
trigger: glob
globs: "**/*.html,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro,**/*.component.html"
---

# Accessible forms (frontend-skills)

Builds and reviews accessible forms in any stack (HTML, React, Vue, Svelte, Angular, Astro) to WCAG 2.2 AA as a target - labels, autocomplete, required fields, grouping, error messages, focus after submit, sign-in without memory tests. Use when writing or changing a form, an input component, validation or a sign-in or checkout flow, or when asked "is this form accessible".

- Every field has a programmatic label: `<label for>` + `id`, a wrapping `<label>`, or `aria-labelledby`; a placeholder is never the label (a11y/input-label).
- Personal-data fields carry a standard `autocomplete` token (`email`, `given-name`, `tel`, `postal-code`, `new-password`) (a11y/autocomplete-valid).
- Errors are text next to the field, linked with `aria-describedby`, marked with `aria-invalid="true"`, and say how to fix the input (a11y/form-errors).
- Required fields say so in the label text or with a visible marker explained once, plus the `required` attribute.
- Related choices (radio groups, an address block) sit in `<fieldset>` with a `<legend>`.
- The submit control is `<button type="submit">`; other buttons in a form are `type="button"` (html/button-type).
- Never block paste into password or code fields, never ask for the same data twice in one flow, never use a puzzle or memory test as the only way to sign in (WCAG 3.3.7, 3.3.8).
- Never rely on colour alone for an error or a required marker.

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

Where fe-a11y-forms lands for OpenCode

  • .agents/skills/fe-a11y-forms/SKILL.mdskill
  • .agents/skills/fe-a11y-forms/references/forms.mdskill
  • AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

OpenCode has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md
## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.
The real file

Where fe-a11y-forms lands for Cline

  • .claude/skills/fe-a11y-forms/SKILL.mdskill
  • .claude/skills/fe-a11y-forms/references/forms.mdskill
  • .clinerules/fe-a11y-forms.mdrule file
  • AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

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

Planned by the installer itself for the example React project in the repository.

.clinerules/fe-a11y-forms.md
---
paths:
  - "**/*.html"
  - "**/*.jsx"
  - "**/*.tsx"
  - "**/*.vue"
  - "**/*.svelte"
  - "**/*.astro"
  - "**/*.component.html"
---

# Accessible forms (frontend-skills)

Builds and reviews accessible forms in any stack (HTML, React, Vue, Svelte, Angular, Astro) to WCAG 2.2 AA as a target - labels, autocomplete, required fields, grouping, error messages, focus after submit, sign-in without memory tests. Use when writing or changing a form, an input component, validation or a sign-in or checkout flow, or when asked "is this form accessible".

- Every field has a programmatic label: `<label for>` + `id`, a wrapping `<label>`, or `aria-labelledby`; a placeholder is never the label (a11y/input-label).
- Personal-data fields carry a standard `autocomplete` token (`email`, `given-name`, `tel`, `postal-code`, `new-password`) (a11y/autocomplete-valid).
- Errors are text next to the field, linked with `aria-describedby`, marked with `aria-invalid="true"`, and say how to fix the input (a11y/form-errors).
- Required fields say so in the label text or with a visible marker explained once, plus the `required` attribute.
- Related choices (radio groups, an address block) sit in `<fieldset>` with a `<legend>`.
- The submit control is `<button type="submit">`; other buttons in a form are `type="button"` (html/button-type).
- Never block paste into password or code fields, never ask for the same data twice in one flow, never use a puzzle or memory test as the only way to sign in (WCAG 3.3.7, 3.3.8).
- Never rely on colour alone for an error or a required marker.

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

Where fe-a11y-forms lands for Zed

  • .agents/skills/fe-a11y-forms/SKILL.mdskill
  • .agents/skills/fe-a11y-forms/references/forms.mdskill
  • CLAUDE.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

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

Zed has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

CLAUDE.md
## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.
The real file

Where fe-a11y-forms lands for JetBrains Junie

  • .agents/skills/fe-a11y-forms/SKILL.mdskill
  • .agents/skills/fe-a11y-forms/references/forms.mdskill
  • AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

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

JetBrains Junie has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md
## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.
The real file

Where fe-a11y-forms lands for Kiro

  • .kiro/skills/fe-a11y-forms/SKILL.mdskill
  • .kiro/skills/fe-a11y-forms/references/forms.mdskill
  • .kiro/steering/fe-a11y-forms.mdrule file
  • AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.kiro/steering/fe-a11y-forms.md
---
inclusion: fileMatch
fileMatchPattern: ["**/*.html", "**/*.jsx", "**/*.tsx", "**/*.vue", "**/*.svelte", "**/*.astro", "**/*.component.html"]
---

# Accessible forms (frontend-skills)

Builds and reviews accessible forms in any stack (HTML, React, Vue, Svelte, Angular, Astro) to WCAG 2.2 AA as a target - labels, autocomplete, required fields, grouping, error messages, focus after submit, sign-in without memory tests. Use when writing or changing a form, an input component, validation or a sign-in or checkout flow, or when asked "is this form accessible".

- Every field has a programmatic label: `<label for>` + `id`, a wrapping `<label>`, or `aria-labelledby`; a placeholder is never the label (a11y/input-label).
- Personal-data fields carry a standard `autocomplete` token (`email`, `given-name`, `tel`, `postal-code`, `new-password`) (a11y/autocomplete-valid).
- Errors are text next to the field, linked with `aria-describedby`, marked with `aria-invalid="true"`, and say how to fix the input (a11y/form-errors).
- Required fields say so in the label text or with a visible marker explained once, plus the `required` attribute.
- Related choices (radio groups, an address block) sit in `<fieldset>` with a `<legend>`.
- The submit control is `<button type="submit">`; other buttons in a form are `type="button"` (html/button-type).
- Never block paste into password or code fields, never ask for the same data twice in one flow, never use a puzzle or memory test as the only way to sign in (WCAG 3.3.7, 3.3.8).
- Never rely on colour alone for an error or a required marker.

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

Where fe-a11y-forms lands for Augment

  • .agents/skills/fe-a11y-forms/SKILL.mdskill
  • .agents/skills/fe-a11y-forms/references/forms.mdskill
  • AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Augment has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md
## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.
The real file

Where fe-a11y-forms lands for Trae

  • .trae/skills/fe-a11y-forms/SKILL.mdskill
  • .trae/skills/fe-a11y-forms/references/forms.mdskill
  • .trae/rules/fe-a11y-forms.mdrule file
  • AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

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

Planned by the installer itself for the example React project in the repository.

.trae/rules/fe-a11y-forms.md
---
description: "Builds and reviews accessible forms in any stack (HTML, React, Vue, Svelte, Angular, Astro) to WCAG 2.2 AA as a target - labels, autocomplete, required fields, grouping, error messages, focus after submit, sign-in without memory tests. Use when writing or changing a form, an input component, validation or a sign-in or checkout flow, or when asked \"is this form accessible\"."
globs: **/*.html,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro,**/*.component.html
alwaysApply: false
---

# Accessible forms (frontend-skills)

- Every field has a programmatic label: `<label for>` + `id`, a wrapping `<label>`, or `aria-labelledby`; a placeholder is never the label (a11y/input-label).
- Personal-data fields carry a standard `autocomplete` token (`email`, `given-name`, `tel`, `postal-code`, `new-password`) (a11y/autocomplete-valid).
- Errors are text next to the field, linked with `aria-describedby`, marked with `aria-invalid="true"`, and say how to fix the input (a11y/form-errors).
- Required fields say so in the label text or with a visible marker explained once, plus the `required` attribute.
- Related choices (radio groups, an address block) sit in `<fieldset>` with a `<legend>`.
- The submit control is `<button type="submit">`; other buttons in a form are `type="button"` (html/button-type).
- Never block paste into password or code fields, never ask for the same data twice in one flow, never use a puzzle or memory test as the only way to sign in (WCAG 3.3.7, 3.3.8).
- Never rely on colour alone for an error or a required marker.

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

Where fe-a11y-forms lands for Continue

  • .frontend-skills/skills/fe-a11y-forms/SKILL.mdskill
  • .frontend-skills/skills/fe-a11y-forms/references/forms.mdskill
  • .continue/rules/fe-a11y-forms.mdrule file

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.continue/rules/fe-a11y-forms.md
---
name: "Accessible forms"
description: "Builds and reviews accessible forms in any stack (HTML, React, Vue, Svelte, Angular, Astro) to WCAG 2.2 AA as a target - labels, autocomplete, required fields, grouping, error messages, focus after submit, sign-in without memory tests. Use when writing or changing a form, an input component, validation or a sign-in or checkout flow, or when asked \"is this form accessible\"."
globs: ["**/*.html", "**/*.jsx", "**/*.tsx", "**/*.vue", "**/*.svelte", "**/*.astro", "**/*.component.html"]
alwaysApply: false
---

# Accessible forms (frontend-skills)

- Every field has a programmatic label: `<label for>` + `id`, a wrapping `<label>`, or `aria-labelledby`; a placeholder is never the label (a11y/input-label).
- Personal-data fields carry a standard `autocomplete` token (`email`, `given-name`, `tel`, `postal-code`, `new-password`) (a11y/autocomplete-valid).
- Errors are text next to the field, linked with `aria-describedby`, marked with `aria-invalid="true"`, and say how to fix the input (a11y/form-errors).
- Required fields say so in the label text or with a visible marker explained once, plus the `required` attribute.
- Related choices (radio groups, an address block) sit in `<fieldset>` with a `<legend>`.
- The submit control is `<button type="submit">`; other buttons in a form are `type="button"` (html/button-type).
- Never block paste into password or code fields, never ask for the same data twice in one flow, never use a puzzle or memory test as the only way to sign in (WCAG 3.3.7, 3.3.8).
- Never rely on colour alone for an error or a required marker.

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

Where fe-a11y-forms lands for Amazon Q Developer

  • .frontend-skills/skills/fe-a11y-forms/SKILL.mdskill
  • .frontend-skills/skills/fe-a11y-forms/references/forms.mdskill
  • .amazonq/rules/frontend-skills.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

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

Amazon Q Developer has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

.amazonq/rules/frontend-skills.md
## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

### Skills

- `fe-a11y-forms` (Accessible forms): when editing `**/*.html`, `**/*.jsx`, `**/*.tsx`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, `**/*.component.html`, first read `.frontend-skills/skills/fe-a11y-forms/SKILL.md`.
The real file

Where fe-a11y-forms lands for Aider

  • .frontend-skills/skills/fe-a11y-forms/SKILL.mdskill
  • .frontend-skills/skills/fe-a11y-forms/references/forms.mdskill
  • CONVENTIONS.mdinstruction block
  • .aider.conf.ymlconfig

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Aider has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

CONVENTIONS.md
## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

### Skills

- `fe-a11y-forms` (Accessible forms): when editing `**/*.html`, `**/*.jsx`, `**/*.tsx`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, `**/*.component.html`, first read `.frontend-skills/skills/fe-a11y-forms/SKILL.md`.
The real file

How to use it

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

Phrases from the skill description that make the agent pick it:

  • is this form accessible

And to check and fix the work:

  • Use the fe-a11y-forms skill on this file.
  • Run the front-end audit on what I changed and fix everything serious.
  • Explain a11y/input-label and fix it here.

Rules it teaches

  • a11y/input-label

    Every form field has a programmatic label (label element, aria-label or aria-labelledby); a placeholder is not a label.

    criticalstaticWCAG 1.3.1, 3.3.2, 4.1.2

  • a11y/autocomplete-valid

    An autocomplete attribute holds only tokens the HTML standard defines (email, given-name, new-password…).

    seriousstaticWCAG 1.3.5

  • a11y/form-errors

    An input error is shown in text next to the field, tied to it with aria-describedby, and says how to fix it.

    seriousmanualWCAG 3.3.1, 3.3.3, 4.1.3

  • html/button-type

    Every button states its type (button, submit or reset); the default is submit.

    minorstatic

The rule digest

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

  • Every field has a programmatic label: <label for> + id, a wrapping <label>, or aria-labelledby; a placeholder is never the label (a11y/input-label).
  • Personal-data fields carry a standard autocomplete token (email, given-name, tel, postal-code, new-password) (a11y/autocomplete-valid).
  • Errors are text next to the field, linked with aria-describedby, marked with aria-invalid="true", and say how to fix the input (a11y/form-errors).
  • Required fields say so in the label text or with a visible marker explained once, plus the required attribute.
  • Related choices (radio groups, an address block) sit in <fieldset> with a <legend>.
  • The submit control is <button type="submit">; other buttons in a form are type="button" (html/button-type).
  • Never block paste into password or code fields, never ask for the same data twice in one flow, never use a puzzle or memory test as the only way to sign in (WCAG 3.3.7, 3.3.8).
  • Never rely on colour alone for an error or a required marker.

Steps the agent follows

  1. Find the project's form primitives (an Input, Field or FormField component, a form library) and fix them once; a lesson in lessons.md may name them.
  2. For each field: visible label, id, correct type and inputmode, autocomplete, required where needed, a hint linked with aria-describedby.
  3. Validate on submit (and on blur only after a first submit). On error: keep the values, set aria-invalid, render the messages, move focus to the first invalid field or to an error summary with links.
  4. Announce asynchronous results (saved, sent) in a polite live region that exists before the message is put in it.
  5. Keep targets at least 24 by 24 CSS pixels and the focus indicator visible on every control.

How the agent checks the work

  • npx github:dawidolko/frontend-skills audit --changed finds unlabeled fields, invalid autocomplete values and buttons without a type.
  • audit --url <page> adds axe-core results for the rendered form (labels from components included).
  • By hand: fill and submit the form with the keyboard only, then with a screen reader (VoiceOver, NVDA): every field announces its label, state and error.

Checked by the audit

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

Terminal recording: audit lists findings by severity with rule ids and file:line, and fails at serious.
audit: counts by severity, each rule with its first location, the exit code.

Reference files

SKILL.md on GitHub