Guide · Agent skill
How to use the Single Label Form Field Check agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The form-field-multiple-labels skill is a review guide for AI agents that checks web forms for inputs tied to more than one label element. It is written for front-end developers, designers and QA staff who want a second pair of eyes on form markup. After this guide you will know how to install the skill, ask for a review in plain language, and read the agent's suggested fixes.
Single Label Form Field Checkthedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the ZIP. Get the form-field-multiple-labels skill ZIP from this page.
- 2Unzip the skill. Extract the archive so the skill folder contains SKILL.md and references/rule.md.
- 3Place it in the skills folder. Move the folder to ~/.claude/skills/ for personal use, or to .claude/skills/ in a project.
- 4Or upload it in the apps. In the Claude apps, go to Settings → Capabilities → Skills and upload the skill.
- 5Ask for a review. Describe the form or component and ask the agent to check for inputs with multiple labels.
- 6Apply and verify. Review the suggested single-label or aria-labelledby fix, apply it, and test with browser accessibility tools or assistive technology.
What the skill makes the agent do
Agent skills are instruction packages that an AI agent loads when a task matches their description. This one covers a single accessibility rule: each form input should be associated with exactly one label element. The source describes the rule as a checklist-style review guide, not a tool that edits files on its own.
When reviewing HTML or components, the agent searches for form inputs that have more than one label. It then suggests either merging the text into a single label or using aria-labelledby to reference several pieces of text. The skill explains that this helps screen reader and voice control users hear a clear, non-redundant name for the field.
- Searches for inputs associated with more than one label element
- Suggests consolidating labels or using aria-labelledby
- Explains the benefit for assistive technology users
- Points out which elements and states to verify with browser accessibility tools or assistive tech
Install the skill from the ZIP download
Download the ZIP for the form-field-multiple-labels skill from this page, then unzip it. For a personal setup, place the unzipped skill folder in ~/.claude/skills/. To limit it to one project, place it in that project's .claude/skills/ folder instead.
If you use the Claude apps rather than a folder on your computer, you can upload the skill under Settings → Capabilities → Skills.
- Personal install: ~/.claude/skills/
- Project install: .claude/skills/ inside your project
- Claude apps: Settings → Capabilities → Skills, then upload
Trigger the skill with natural requests
You do not need a special command. The skill's description says it applies when reviewing rendered HTML, interactive components, or design-system patterns related to this rule, so ask for that kind of review in ordinary language. Name the file or component so the agent knows what to inspect.
Good requests name the markup and the goal, for example checking a sign-up form before release for labelling problems.
- Review this signup form HTML for inputs with more than one label
- Check the checkout components in this project for form fields with duplicate labels
- Look at our design system's text field and tell me if it could confuse screen reader users
Example review and what to expect
The source includes a bad example where one input, with id username, is labelled by two label elements, one reading Username and another reading Required. The agent should flag this and suggest one label, or a single label that combines the text, or aria-labelledby pointing to the separate text pieces.
The source also shows a good pattern for a phone number field: two span elements with ids are referenced from aria-labelledby on the input, so the label reads as Phone Number with the hint (Include area code).
- Flag the input and the two label elements involved
- Propose a single label or aria-labelledby fix
- Recommend checking the result with browser accessibility tooling or assistive technology
<label for="username">Username</label>
<label for="username">Required</label>
<input id="username" type="text">Safety notes: scripts and network
According to the listing, this skill runs no scripts and uses no network access. It lists no requirements. The skill files are SKILL.md and references/rule.md, so you can open and read both before installing.
Because the skill is a written review guide, the agent's findings are only as reliable as the markup it is given. Treat its suggestions as a starting point and confirm changes in a browser.
- Runs scripts: no
- Uses network: no
- Requires: nothing listed
- Files: SKILL.md and references/rule.md
Tips for better results
Give the agent the rendered HTML or the component source, not only a description. The rule concerns the final markup, so rendered output is most useful when components build labels dynamically.
Keep the scope narrow. The skill covers only this one rule, so ask it to review other accessibility concerns separately or with other tools.
- Paste rendered HTML when components generate labels
- Review one form or component at a time
- Verify fixes with browser accessibility tooling or a screen reader
What people use it for
- Reviewing a sign-up or checkout form for duplicate label elements before release
- Checking a design-system text field for labelling patterns that confuse screen readers
- Teaching a team the basics of accessible form labelling using the bad and good examples
- Adding a clear hint to a phone number field with aria-labelledby
Frequently asked questions
Is the form-field-multiple-labels skill free?
The skill is listed under the MIT licence on this directory page. The source does not mention prices, so check the licence file in the download for the exact terms.
What do I need to use this skill?
The listing says it requires nothing in particular. It runs no scripts and uses no network, so you mainly need an agent environment that supports skills and the HTML you want reviewed.
Where do I install the skill?
Unzip it into ~/.claude/skills/ for personal use or into a project's .claude/skills/ folder. In the Claude apps, you can upload it under Settings → Capabilities → Skills.
Will the skill fix my form automatically?
No. It is a checklist-style review guide and does not change files on its own. It suggests consolidating labels or using aria-labelledby, and you apply the changes.
Does this skill check full WCAG compliance?
No. It covers only one narrow rule about single labels per form field. The agent may miss other accessibility issues, so use a full audit for complete coverage.
What is the difference between this and other accessibility tools?
This skill is a rule-specific review guide for an AI agent. Automated audit tools and manual screen reader testing cover broader ground, so the two approaches complement each other.
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
This skill suits front-end developers, designers and QA staff who want an AI agent to spot one common labelling problem in form markup. It is a narrow, read-only review guide that runs no scripts and uses no network, so it is low risk to try. Teams needing full accessibility audits, or sites without forms, should choose a broader audit tool or skip it.
Download the skill