Frontend Skills
English

Podstawy

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-formskażdego projektu webowego9 regułładowane zawsze: 87 tokenów; przy użyciu: 954 tokeny; w referencjach na żądanie: 1472 tokeny.

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-forms dla: Claude Code

  • .claude/skills/fe-forms/SKILL.mdskill
  • .claude/skills/fe-forms/references/native-forms.mdskill
  • .claude/rules/fe-forms.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-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>`.
Prawdziwy plik

Gdzie trafia fe-forms dla: OpenAI Codex

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

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

Gdzie trafia fe-forms dla: GitHub Copilot

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

Gdzie trafia fe-forms dla: Gemini CLI

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

  • .agents/skills/fe-forms/SKILL.mdskill
  • .agents/skills/fe-forms/references/native-forms.mdskill
  • .agents/rules/fe-forms.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-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>`.
Prawdziwy plik

Gdzie trafia fe-forms dla: Devin / Windsurf

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

Gdzie trafia fe-forms dla: OpenCode

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

  • .claude/skills/fe-forms/SKILL.mdskill
  • .claude/skills/fe-forms/references/native-forms.mdskill
  • .clinerules/fe-forms.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-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>`.
Prawdziwy plik

Gdzie trafia fe-forms dla: Zed

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

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

  • .kiro/skills/fe-forms/SKILL.mdskill
  • .kiro/skills/fe-forms/references/native-forms.mdskill
  • .kiro/steering/fe-forms.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-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>`.
Prawdziwy plik

Gdzie trafia fe-forms dla: Augment

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

  • .trae/skills/fe-forms/SKILL.mdskill
  • .trae/skills/fe-forms/references/native-forms.mdskill
  • .trae/rules/fe-forms.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-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>`.
Prawdziwy plik

Gdzie trafia fe-forms dla: Continue

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

Gdzie trafia fe-forms dla: Amazon Q Developer

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

Gdzie trafia fe-forms dla: Aider

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

  • why does this form not validate

A żeby sprawdzić i poprawić pracę:

  • Użyj skilla fe-forms na tym pliku.
  • Uruchom audyt front-endu na moich zmianach i popraw wszystko, co poważne.
  • Wyjaśnij html/input-type i popraw to tutaj.

Reguły, których uczy

  • html/input-type

    An input for an email address, phone number or URL uses type email, tel or url, not text.

    drobnastatyczne

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

    umiarkowanastatyczne

  • html/password-autocomplete

    Password fields say current-password (sign-in) or new-password (sign-up, change) in autocomplete, and never use autocomplete off.

    umiarkowanastatyczne

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

    umiarkowanastatyczne

  • html/required-select-placeholder

    A required single-choice select starts with an empty placeholder option (value=""), so the required check can fail.

    umiarkowanastatyczne

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

    umiarkowanaręczne

  • a11y/input-label

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

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

    poważnastatyczneWCAG 1.3.5

  • html/button-type

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

    drobnastatyczne

Skrót reguł

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

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

Kroki, które wykonuje agent

  1. Find the project's form layer first (a Field component, React Hook Form, VeeValidate, Angular reactive forms, SvelteKit form actions) and fix it there.
  2. For each field: label, name, id, type or inputmode, autocomplete, required and the constraint attributes its type supports.
  3. 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().
  4. Style errors with :user-invalid (after interaction), not :invalid (which matches before the person typed).
  5. 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).
  6. Prevent double submits by ignoring a second submit while one is pending, and keep the values when the server returns errors.

Jak agent sprawdza swoją pracę

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

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