Skip to content
Get packs

Form Label Checker

Reviews HTML forms to ensure every input has a proper, accessible label.

Source Download skill
Repository
thedaviddias/Front-End-Checklist
Stars
74,632
Licence
MIT
Files
2 files

What it does

When installed, the agent reviews web page markup and interactive components to check that every form field (input, select, textarea) is properly labelled, so screen readers can announce what each field is for. It flags placeholder-only fields, groups of checkboxes or radio buttons missing a fieldset and legend, and suggests concrete fixes such as adding a label with matching for and id attributes. It works from a checklist-style rule and a reference document rather than running any tooling itself.

Great for

  • Front-end developers reviewing forms before release
  • Designers checking that form patterns in a design system are accessible
  • Teams doing accessibility audits of existing web pages

Skip it if

  • Projects that need automated testing or proof of WCAG compliance, since the skill gives guidance and review, not certified results
  • Non-web form tools where HTML labelling does not apply

Try asking

  • “Review this signup form HTML and tell me which inputs are missing proper labels.”
  • “Check my checkout component for placeholder-only fields and fix them.”
  • “Are the radio buttons in this survey grouped with a fieldset and legend?”
Step-by-step guide: how to use Form Label CheckerInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the MIT licence and an attribution note.

    form-labels.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip form-labels.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip form-labels.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Paste the rendered HTML or the component code, not just a description, so the review can point to exact elements.
  • Ask the agent to also explain how to verify fixes with browser accessibility tools or a screen reader.
  • Read references/rule.md for framework-specific examples if you use React, Vue or similar.

What's inside

  • references/rule.md
  • SKILL.md

Redistributed unmodified from thedaviddias/Front-End-Checklist under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.