Skip to content
Get packs

Semantic Input Types Checker

Audits HTML form inputs for correct type and autocomplete attributes for mobile and autofill

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

What it does

Once installed, the agent reviews HTML forms, templates and shared components and checks whether each input uses the most appropriate type (such as email, tel, number, date) and a matching autocomplete value. It can also suggest or apply fixes and explain how each input type behaves on mobile keyboards. It works from a rule about using semantic input types rather than generic text fields.

Great for

  • Front-end developers reviewing forms before release
  • Teams auditing templates or shared form components for mobile usability
  • Anyone learning why input types and autocomplete matter

Skip it if

  • Non-HTML projects or apps with no web forms, since the checks do not apply
  • Accessibility or legal compliance sign-off, because the skill only covers input types and autocomplete and is not a full audit; it also states a 40% speed-up figure without a cited source in the files

Try asking

  • “Audit all the input fields in this signup form and tell me which type or autocomplete attributes to change.”
  • “Review our shared React form components for inputs that should be type=email or type=tel.”
  • “Explain what keyboard a phone shows for type=number versus inputmode=numeric.”
  • “Fix the input types in this checkout HTML and add autofill-friendly autocomplete values.”
Step-by-step guide: how to use Semantic Input Types 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.

    input-types.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip input-types.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip input-types.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

  • Point the agent at the rendered HTML output, not only framework source, since the skill is designed to validate final browser markup.
  • Ask for exact element and attribute references so fixes can be applied and tested on a real phone.

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.