Foundations

Native forms and validation

Builds and reviews HTML forms that work natively - the right input types and inputmode, autocomplete tokens, constraint validation and custom messages, select placeholders, file inputs, and submission through the form's submit event. Accessibility of forms is in fe-a11y-forms. Use when writing a form, a field component, validation or a submit handler, or asked "why does this form not validate".

fe-formsevery web project9 rules87 tokens always loaded, 954 tokens when used, 1472 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.

npx github:dawidolko/frontend-skills init

Not tested yet with this runner. npx and pnpm dlx are tested; if this one fails, use one of them.

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

Agent	Found by
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`

Where fe-forms lands for Claude Code

.claude/skills/fe-forms/SKILL.mdskill
.claude/skills/fe-forms/references/native-forms.mdskill
.claude/rules/fe-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-forms.md

---
paths:
  - "**/*.html"
  - "**/*.jsx"
  - "**/*.tsx"
  - "**/*.vue"
  - "**/*.svelte"
  - "**/*.astro"
  - "**/*.component.html"
---

# Native forms and validation (frontend-skills)

Builds and reviews HTML forms that work natively - the right input types and inputmode, autocomplete tokens, constraint validation and custom messages, select placeholders, file inputs, and submission through the form's submit event. Accessibility of forms is in fe-a11y-forms. Use when writing a form, a field component, validation or a submit handler, or asked "why does this form not validate".

- Put fields in a `<form>`, handle its `submit` event and give it one `<button type="submit">` (html/form-submit, html/button-type).
- Every field has a label; follow `fe-a11y-forms` for errors and groups (a11y/input-label).
- Pick the type for the data: `email`, `tel`, `url`, `search`, `date`, `number` for quantities only (html/input-type).
- Codes of digits use `type="text" inputmode="numeric"`, never `type="number"` (html/no-number-for-codes).
- Fields about the person carry a standard `autocomplete` token (a11y/autocomplete-valid).
- Password fields say `current-password` or `new-password`; never `autocomplete="off"`, never block paste (html/password-autocomplete).
- Validation attributes match the type: `pattern` and `maxlength` on text-like types, `min`, `max`, `step` on numbers and dates (html/constraint-attr-type).
- A required single select starts with `<option value="">` (html/required-select-placeholder).
- Validate on the server too; client checks are a convenience.
- Never disable the submit button to signal invalid input; let submit run and show the errors.

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

The real file

Where fe-forms lands for OpenAI Codex

.agents/skills/fe-forms/SKILL.mdskill
.agents/skills/fe-forms/references/native-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-forms lands for Cursor

.agents/skills/fe-forms/SKILL.mdskill
.agents/skills/fe-forms/references/native-forms.mdskill
.cursor/rules/fe-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-forms.mdc

---
description: Builds and reviews HTML forms that work natively - the right input types and inputmode, autocomplete tokens, constraint validation and custom messages, select placeholders, file inputs, and submission through the form's submit event. Accessibility of forms is in fe-a11y-forms. Use when writing a form, a field component, validation or a submit handler, or asked "why does this form not validate".
globs: **/*.html, **/*.jsx, **/*.tsx, **/*.vue, **/*.svelte, **/*.astro, **/*.component.html
alwaysApply: false
---

# Native forms and validation (frontend-skills)

- Put fields in a `<form>`, handle its `submit` event and give it one `<button type="submit">` (html/form-submit, html/button-type).
- Every field has a label; follow `fe-a11y-forms` for errors and groups (a11y/input-label).
- Pick the type for the data: `email`, `tel`, `url`, `search`, `date`, `number` for quantities only (html/input-type).
- Codes of digits use `type="text" inputmode="numeric"`, never `type="number"` (html/no-number-for-codes).
- Fields about the person carry a standard `autocomplete` token (a11y/autocomplete-valid).
- Password fields say `current-password` or `new-password`; never `autocomplete="off"`, never block paste (html/password-autocomplete).
- Validation attributes match the type: `pattern` and `maxlength` on text-like types, `min`, `max`, `step` on numbers and dates (html/constraint-attr-type).
- A required single select starts with `<option value="">` (html/required-select-placeholder).
- Validate on the server too; client checks are a convenience.
- Never disable the submit button to signal invalid input; let submit run and show the errors.

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

The real file

Where fe-forms lands for GitHub Copilot

.agents/skills/fe-forms/SKILL.mdskill
.agents/skills/fe-forms/references/native-forms.mdskill
.github/instructions/fe-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-forms.instructions.md

---
applyTo: "**/*.html,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro,**/*.component.html"
description: "Builds and reviews HTML forms that work natively - the right input types and inputmode, autocomplete tokens, constraint validation and custom messages, select placeholders, file inputs, and submission through the form's submit event. Accessibility of forms is in fe-a11y-forms. Use when writing a form, a field component, validation or a submit handler, or asked \"why does this form not validate\"."
---

# Native forms and validation (frontend-skills)

- Put fields in a `<form>`, handle its `submit` event and give it one `<button type="submit">` (html/form-submit, html/button-type).
- Every field has a label; follow `fe-a11y-forms` for errors and groups (a11y/input-label).
- Pick the type for the data: `email`, `tel`, `url`, `search`, `date`, `number` for quantities only (html/input-type).
- Codes of digits use `type="text" inputmode="numeric"`, never `type="number"` (html/no-number-for-codes).
- Fields about the person carry a standard `autocomplete` token (a11y/autocomplete-valid).
- Password fields say `current-password` or `new-password`; never `autocomplete="off"`, never block paste (html/password-autocomplete).
- Validation attributes match the type: `pattern` and `maxlength` on text-like types, `min`, `max`, `step` on numbers and dates (html/constraint-attr-type).
- A required single select starts with `<option value="">` (html/required-select-placeholder).
- Validate on the server too; client checks are a convenience.
- Never disable the submit button to signal invalid input; let submit run and show the errors.

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

The real file

Where fe-forms lands for Gemini CLI

.agents/skills/fe-forms/SKILL.mdskill
.agents/skills/fe-forms/references/native-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-forms lands for Antigravity CLI

.agents/skills/fe-forms/SKILL.mdskill
.agents/skills/fe-forms/references/native-forms.mdskill
.agents/rules/fe-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-forms.md

---
trigger: glob
globs: "**/*.html, **/*.jsx, **/*.tsx, **/*.vue, **/*.svelte, **/*.astro, **/*.component.html"
description: "Builds and reviews HTML forms that work natively - the right input types and inputmode, autocomplete tokens, constraint validation and custom messages, select placeholders, file inputs, and submission through the form's submit event. Accessibility of forms is in fe-a11y-forms. Use when writing a form, a field component, validation or a submit handler, or asked \"why does this form not validate\"."
---

# Native forms and validation (frontend-skills)

- Put fields in a `<form>`, handle its `submit` event and give it one `<button type="submit">` (html/form-submit, html/button-type).
- Every field has a label; follow `fe-a11y-forms` for errors and groups (a11y/input-label).
- Pick the type for the data: `email`, `tel`, `url`, `search`, `date`, `number` for quantities only (html/input-type).
- Codes of digits use `type="text" inputmode="numeric"`, never `type="number"` (html/no-number-for-codes).
- Fields about the person carry a standard `autocomplete` token (a11y/autocomplete-valid).
- Password fields say `current-password` or `new-password`; never `autocomplete="off"`, never block paste (html/password-autocomplete).
- Validation attributes match the type: `pattern` and `maxlength` on text-like types, `min`, `max`, `step` on numbers and dates (html/constraint-attr-type).
- A required single select starts with `<option value="">` (html/required-select-placeholder).
- Validate on the server too; client checks are a convenience.
- Never disable the submit button to signal invalid input; let submit run and show the errors.

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

The real file

Where fe-forms lands for Devin / Windsurf

.agents/skills/fe-forms/SKILL.mdskill
.agents/skills/fe-forms/references/native-forms.mdskill
.devin/rules/fe-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-forms.md

---
trigger: glob
globs: "**/*.html,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro,**/*.component.html"
---

# Native forms and validation (frontend-skills)

Builds and reviews HTML forms that work natively - the right input types and inputmode, autocomplete tokens, constraint validation and custom messages, select placeholders, file inputs, and submission through the form's submit event. Accessibility of forms is in fe-a11y-forms. Use when writing a form, a field component, validation or a submit handler, or asked "why does this form not validate".

- Put fields in a `<form>`, handle its `submit` event and give it one `<button type="submit">` (html/form-submit, html/button-type).
- Every field has a label; follow `fe-a11y-forms` for errors and groups (a11y/input-label).
- Pick the type for the data: `email`, `tel`, `url`, `search`, `date`, `number` for quantities only (html/input-type).
- Codes of digits use `type="text" inputmode="numeric"`, never `type="number"` (html/no-number-for-codes).
- Fields about the person carry a standard `autocomplete` token (a11y/autocomplete-valid).
- Password fields say `current-password` or `new-password`; never `autocomplete="off"`, never block paste (html/password-autocomplete).
- Validation attributes match the type: `pattern` and `maxlength` on text-like types, `min`, `max`, `step` on numbers and dates (html/constraint-attr-type).
- A required single select starts with `<option value="">` (html/required-select-placeholder).
- Validate on the server too; client checks are a convenience.
- Never disable the submit button to signal invalid input; let submit run and show the errors.

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

The real file

Where fe-forms lands for OpenCode

.agents/skills/fe-forms/SKILL.mdskill
.agents/skills/fe-forms/references/native-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-forms lands for Cline

.claude/skills/fe-forms/SKILL.mdskill
.claude/skills/fe-forms/references/native-forms.mdskill
.clinerules/fe-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-forms.md

---
paths:
  - "**/*.html"
  - "**/*.jsx"
  - "**/*.tsx"
  - "**/*.vue"
  - "**/*.svelte"
  - "**/*.astro"
  - "**/*.component.html"
---

# Native forms and validation (frontend-skills)

Builds and reviews HTML forms that work natively - the right input types and inputmode, autocomplete tokens, constraint validation and custom messages, select placeholders, file inputs, and submission through the form's submit event. Accessibility of forms is in fe-a11y-forms. Use when writing a form, a field component, validation or a submit handler, or asked "why does this form not validate".

- Put fields in a `<form>`, handle its `submit` event and give it one `<button type="submit">` (html/form-submit, html/button-type).
- Every field has a label; follow `fe-a11y-forms` for errors and groups (a11y/input-label).
- Pick the type for the data: `email`, `tel`, `url`, `search`, `date`, `number` for quantities only (html/input-type).
- Codes of digits use `type="text" inputmode="numeric"`, never `type="number"` (html/no-number-for-codes).
- Fields about the person carry a standard `autocomplete` token (a11y/autocomplete-valid).
- Password fields say `current-password` or `new-password`; never `autocomplete="off"`, never block paste (html/password-autocomplete).
- Validation attributes match the type: `pattern` and `maxlength` on text-like types, `min`, `max`, `step` on numbers and dates (html/constraint-attr-type).
- A required single select starts with `<option value="">` (html/required-select-placeholder).
- Validate on the server too; client checks are a convenience.
- Never disable the submit button to signal invalid input; let submit run and show the errors.

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

The real file

Where fe-forms lands for Zed

.agents/skills/fe-forms/SKILL.mdskill
.agents/skills/fe-forms/references/native-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-forms lands for JetBrains Junie

.agents/skills/fe-forms/SKILL.mdskill
.agents/skills/fe-forms/references/native-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-forms lands for Kiro

.kiro/skills/fe-forms/SKILL.mdskill
.kiro/skills/fe-forms/references/native-forms.mdskill
.kiro/steering/fe-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-forms.md

---
inclusion: fileMatch
fileMatchPattern: ["**/*.html", "**/*.jsx", "**/*.tsx", "**/*.vue", "**/*.svelte", "**/*.astro", "**/*.component.html"]
---

# Native forms and validation (frontend-skills)

Builds and reviews HTML forms that work natively - the right input types and inputmode, autocomplete tokens, constraint validation and custom messages, select placeholders, file inputs, and submission through the form's submit event. Accessibility of forms is in fe-a11y-forms. Use when writing a form, a field component, validation or a submit handler, or asked "why does this form not validate".

- Put fields in a `<form>`, handle its `submit` event and give it one `<button type="submit">` (html/form-submit, html/button-type).
- Every field has a label; follow `fe-a11y-forms` for errors and groups (a11y/input-label).
- Pick the type for the data: `email`, `tel`, `url`, `search`, `date`, `number` for quantities only (html/input-type).
- Codes of digits use `type="text" inputmode="numeric"`, never `type="number"` (html/no-number-for-codes).
- Fields about the person carry a standard `autocomplete` token (a11y/autocomplete-valid).
- Password fields say `current-password` or `new-password`; never `autocomplete="off"`, never block paste (html/password-autocomplete).
- Validation attributes match the type: `pattern` and `maxlength` on text-like types, `min`, `max`, `step` on numbers and dates (html/constraint-attr-type).
- A required single select starts with `<option value="">` (html/required-select-placeholder).
- Validate on the server too; client checks are a convenience.
- Never disable the submit button to signal invalid input; let submit run and show the errors.

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

The real file

Where fe-forms lands for Augment

.agents/skills/fe-forms/SKILL.mdskill
.agents/skills/fe-forms/references/native-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-forms lands for Trae

.trae/skills/fe-forms/SKILL.mdskill
.trae/skills/fe-forms/references/native-forms.mdskill
.trae/rules/fe-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-forms.md

---
description: "Builds and reviews HTML forms that work natively - the right input types and inputmode, autocomplete tokens, constraint validation and custom messages, select placeholders, file inputs, and submission through the form's submit event. Accessibility of forms is in fe-a11y-forms. Use when writing a form, a field component, validation or a submit handler, or asked \"why does this form not validate\"."
globs: **/*.html,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro,**/*.component.html
alwaysApply: false
---

# Native forms and validation (frontend-skills)

- Put fields in a `<form>`, handle its `submit` event and give it one `<button type="submit">` (html/form-submit, html/button-type).
- Every field has a label; follow `fe-a11y-forms` for errors and groups (a11y/input-label).
- Pick the type for the data: `email`, `tel`, `url`, `search`, `date`, `number` for quantities only (html/input-type).
- Codes of digits use `type="text" inputmode="numeric"`, never `type="number"` (html/no-number-for-codes).
- Fields about the person carry a standard `autocomplete` token (a11y/autocomplete-valid).
- Password fields say `current-password` or `new-password`; never `autocomplete="off"`, never block paste (html/password-autocomplete).
- Validation attributes match the type: `pattern` and `maxlength` on text-like types, `min`, `max`, `step` on numbers and dates (html/constraint-attr-type).
- A required single select starts with `<option value="">` (html/required-select-placeholder).
- Validate on the server too; client checks are a convenience.
- Never disable the submit button to signal invalid input; let submit run and show the errors.

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

The real file

Where fe-forms lands for Continue

.frontend-skills/skills/fe-forms/SKILL.mdskill
.frontend-skills/skills/fe-forms/references/native-forms.mdskill
.continue/rules/fe-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-forms.md

---
name: "Native forms and validation"
description: "Builds and reviews HTML forms that work natively - the right input types and inputmode, autocomplete tokens, constraint validation and custom messages, select placeholders, file inputs, and submission through the form's submit event. Accessibility of forms is in fe-a11y-forms. Use when writing a form, a field component, validation or a submit handler, or asked \"why does this form not validate\"."
globs: ["**/*.html", "**/*.jsx", "**/*.tsx", "**/*.vue", "**/*.svelte", "**/*.astro", "**/*.component.html"]
alwaysApply: false
---

# Native forms and validation (frontend-skills)

- Put fields in a `<form>`, handle its `submit` event and give it one `<button type="submit">` (html/form-submit, html/button-type).
- Every field has a label; follow `fe-a11y-forms` for errors and groups (a11y/input-label).
- Pick the type for the data: `email`, `tel`, `url`, `search`, `date`, `number` for quantities only (html/input-type).
- Codes of digits use `type="text" inputmode="numeric"`, never `type="number"` (html/no-number-for-codes).
- Fields about the person carry a standard `autocomplete` token (a11y/autocomplete-valid).
- Password fields say `current-password` or `new-password`; never `autocomplete="off"`, never block paste (html/password-autocomplete).
- Validation attributes match the type: `pattern` and `maxlength` on text-like types, `min`, `max`, `step` on numbers and dates (html/constraint-attr-type).
- A required single select starts with `<option value="">` (html/required-select-placeholder).
- Validate on the server too; client checks are a convenience.
- Never disable the submit button to signal invalid input; let submit run and show the errors.

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

The real file

Where fe-forms lands for Amazon Q Developer

.frontend-skills/skills/fe-forms/SKILL.mdskill
.frontend-skills/skills/fe-forms/references/native-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-forms` (Native forms and validation): when editing `**/*.html`, `**/*.jsx`, `**/*.tsx`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, `**/*.component.html`, first read `.frontend-skills/skills/fe-forms/SKILL.md`.

The real file

Where fe-forms lands for Aider

.frontend-skills/skills/fe-forms/SKILL.mdskill
.frontend-skills/skills/fe-forms/references/native-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-forms` (Native forms and validation): when editing `**/*.html`, `**/*.jsx`, `**/*.tsx`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, `**/*.component.html`, first read `.frontend-skills/skills/fe-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:

why does this form not validate

And to check and fix the work:

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

Rules it teaches

html/input-type
An input for an email address, phone number or URL uses type email, tel or url, not text.
minorstatic
html/no-number-for-codes
Codes made of digits (postal codes, card numbers, one-time codes, PINs) use type text with inputmode numeric, not type number.
moderatestatic
html/password-autocomplete
Password fields say current-password (sign-in) or new-password (sign-up, change) in autocomplete, and never use autocomplete off.
moderatestatic
html/constraint-attr-type
Validation attributes match the input type (pattern and maxlength on text-like types, min, max and step on number and date types).
moderatestatic
html/required-select-placeholder
A required single-choice select starts with an empty placeholder option (value=""), so the required check can fail.
moderatestatic
html/form-submit
Fields sit in a form that is handled on its submit event with a submit button, so Enter, autofill and native validation work.
moderatemanual
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
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:

Put fields in a <form>, handle its submit event and give it one <button type="submit"> (html/form-submit, html/button-type).
Every field has a label; follow fe-a11y-forms for errors and groups (a11y/input-label).
Pick the type for the data: email, tel, url, search, date, number for quantities only (html/input-type).
Codes of digits use type="text" inputmode="numeric", never type="number" (html/no-number-for-codes).
Fields about the person carry a standard autocomplete token (a11y/autocomplete-valid).
Password fields say current-password or new-password; never autocomplete="off", never block paste (html/password-autocomplete).
Validation attributes match the type: pattern and maxlength on text-like types, min, max, step on numbers and dates (html/constraint-attr-type).
A required single select starts with <option value=""> (html/required-select-placeholder).
Validate on the server too; client checks are a convenience.
Never disable the submit button to signal invalid input; let submit run and show the errors.

Steps the agent follows

Find the project's form layer first (a Field component, React Hook Form, VeeValidate, Angular reactive forms, SvelteKit form actions) and fix it there.
For each field: label, name, id, type or inputmode, autocomplete, required and the constraint attributes its type supports.
Use native constraint validation for the rules (required, pattern, min); for your own wording add novalidate to the form and show messages with setCustomValidity or rendered text after checkValidity().
Style errors with :user-invalid (after interaction), not :invalid (which matches before the person typed).
Submit with new FormData(form); keep the form working without JavaScript where the framework allows (a real action, SvelteKit or Remix-style actions, React form actions).
Prevent double submits by ignoring a second submit while one is pending, and keep the values when the server returns errors.

How the agent checks the work

npx github:dawidolko/frontend-skills audit --changed reports wrong input types, number fields for codes, password fields without a token, ignored constraint attributes, required selects without a placeholder, unlabeled fields and buttons without a type.
By hand: fill the form on a phone (keyboard per field), with a password manager, with autofill, and submit it with Enter.

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

references/native-forms.md1472 tokens

SKILL.md on GitHub