Accessible forms

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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