Guide · Agent skill
How to use the Form Validation Accessibility Checker agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The form-validation skill is a set of instructions that teaches an AI agent to review web form code, such as templates, rendered HTML and shared components, for accessibility problems in how validation is presented. This guide explains what the skill makes the agent check, how to install it, how to ask for a review in plain language, and where its limits are. You do not need prior experience with agent skills to follow it.
Form Validation Accessibility Checkerthedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the ZIP. Download the form-validation skill ZIP from this page.
- 2Unzip into a skills folder. Unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder for one project.
- 3Or upload it in the Claude apps. In the Claude apps, open Settings, go to Capabilities, then Skills, and upload the skill.
- 4Point the agent at your markup. Share templates, rendered HTML or component files that contain form code.
- 5Ask for a validation review. Describe what to check, such as error linking, aria-invalid, required state or fieldset use.
- 6Verify the findings. Confirm each flagged element and test the form with real assistive technology before release.
What the form-validation skill makes the agent do
The skill focuses on one rule: validate forms accessibly. When it is active, the agent looks at form markup and checks that error messages are linked to their fields, that invalid and required states are exposed in the markup rather than only through color, and that grouped choices use fieldset and legend.
It also validates the final browser-facing markup rather than only the source framework code. It tells the agent not to flag a React form as defective just because it lacks method or action attributes when JavaScript handles submission. This avoids false alarms on client-handled forms.
- Error messages linked to fields with aria-describedby
- Invalid state exposed with aria-invalid
- Required fields marked with required or aria-required
- Inline error messages placed near the field
- Grouped choices wrapped in fieldset with legend
- No flags for missing method or action on React forms that handle submission in JavaScript
Install the form-validation skill
Download the ZIP file for this skill from this page. Then choose one of the two install options below depending on where you want it to be available.
For a personal install across your projects, unzip the download into ~/.claude/skills/. To limit it to one project, unzip it into that project's .claude/skills/ folder. The skill files are SKILL.md and references/rule.md.
If you use the Claude apps instead, open Settings, go to Capabilities, then Skills, and upload the skill there.
- Personal: ~/.claude/skills/
- Single project: .claude/skills/ inside the project
- Claude apps: Settings → Capabilities → Skills → upload
Trigger the skill with natural requests
You do not need a special command. The skill's description tells the agent when to use it: when reviewing templates, rendered HTML, or shared components related to validating forms accessibly. Describe what you want reviewed and mention forms, validation, or accessibility.
Name the files or components when you can. The more specific the request, the more exact the review will be, since the skill asks the agent to flag the exact elements, attributes and routes that break the rule.
- Review the signup form template in src/views/signup.html for accessible validation.
- Check this rendered checkout HTML: are the error messages linked to their inputs?
- Audit our shared FormField component for aria-invalid and required state.
- Look at the contact form and tell me if the radio group uses fieldset and legend.
- Review our React login form, but don't flag missing method or action since onSubmit handles it.
Example of markup the skill checks for
The reference file contains a complete example of a field that follows the pattern. The input points to a help text and an error message with aria-describedby, sets aria-invalid, and is marked required. The error message uses role alert and starts hidden.
Use the example as a reference point when reading the agent's findings. It shows what a correct pattern looks like in HTML.
<form novalidate>
<div class="form-field">
<label for="email">Email address</label>
<input type="email" id="email" name="email" aria-describedby="email-help email-error" aria-invalid="false" required />
<span id="email-help" class="form-field__help">We'll never share your email</span>
<span id="email-error" class="form-field__error" role="alert" hidden>Please enter a valid email address</span>
</div>
<button type="submit">Subscribe</button>
</form>What the skill needs and what it does not do
The skill lists no requirements. It does not run scripts and it does not use the network. Its guidance is contained in its text files, so it reviews code you provide to the agent and does not reach out to other services.
The skill has a narrow scope. It is not a visual design critique, not a full WCAG compliance audit, and not a tool for native mobile apps or non-web forms. Its findings do not replace testing with real assistive technology such as screen readers.
- Requires: nothing listed
- Runs scripts: no
- Uses network: no
- Out of scope: visual design, layout and branding; full WCAG audits; non-web and native mobile forms
Tips for getting useful results
Give the agent the rendered HTML when you can, not only the framework source. The skill is designed to check the final browser-facing markup, so output from a server or a built page gives the most accurate findings.
If you review a client-handled React form, say so. The skill already avoids flagging missing method or action in that case, but stating the setup helps the agent focus on the real issues. Treat the findings as a review to verify, not as a final accessibility sign-off.
- Paste or point to rendered HTML, not only framework source
- Say whether the form is browser-posted or handled by JavaScript
- Ask for exact elements and attributes in the findings
- Check the findings with a screen reader before release
What people use it for
- Reviewing a signup or checkout form template before release
- Auditing a shared form component library for linked error messages and required state
- Checking a contact form's radio or checkbox groups for fieldset and legend
- Reviewing a React login form without false alarms about missing method or action
Frequently asked questions
How do I install the form-validation agent skill?
Download the ZIP from this page and unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. You can also upload it in the Claude apps under Settings, then Capabilities, then Skills.
Does the form-validation skill require anything else to run?
The skill lists no requirements. It does not run scripts and does not use the network, so it works from the text files it contains.
Is the form-validation skill free to use?
The skill is released under the MIT licence. This page does not list prices, so check the licence file included with the source for the terms.
Will this skill check full WCAG compliance?
No. It covers one narrow rule about validation markup. It cannot replace a full accessibility audit or testing with real assistive technology such as screen readers.
Why does the skill not flag my React form for missing method or action?
When JavaScript handles submission through onSubmit, the browser does not post the form, so missing method and action attributes are not accessibility defects. The skill is designed to avoid reporting them in that case.
Can the skill review visual design or colors in my forms?
No. Visual design critique is out of scope. The skill checks markup semantics, such as whether errors are linked to fields and whether state is exposed in the markup rather than only by color.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you are a front-end developer or reviewer who wants an agent to check form templates, rendered HTML or component libraries for linked error messages, exposed invalid and required states, and grouped fieldsets. Pick a different tool if you need a full WCAG audit, visual design review, or testing for native mobile apps, since this skill covers one narrow markup rule and needs real assistive technology testing to back it up.
Download the skill