How to use the Semantic Input Types Checker agent skill

What the input-types skill makes the agent do

The skill is built around one rule: use semantic input type attributes rather than a generic text field for every input. When you ask the agent to review templates, rendered HTML or shared components, it checks whether each input uses the most appropriate type and a matching autocomplete value.

The source describes three effects of choosing the right type. Mobile users get the right keyboard, browsers can validate the value, and autofill can identify fields for name, address and payment data. The skill also tells the agent to validate the final browser-facing markup, not only the source framework code.

• Checks each input element for an appropriate type attribute (for example email, tel, number, date)
• Checks for matching autocomplete values so autofill works correctly
• Can suggest or apply fixes to input types and autocomplete attributes
• Explains what each input type does on mobile keyboards

Install the input-types skill

Download the ZIP for the skill from the directory page. The skill is a folder containing SKILL.md and references/rule.md. Unzip it into one of the locations below, depending on whether you want it for all your projects or just one.

You can also upload the skill in the Claude apps. Open Settings, go to Capabilities, then Skills, and add the skill from there.

• Personal use across projects: unzip into ~/.claude/skills/
• Single project: unzip into the project's .claude/skills/ folder
• Claude apps: Settings → Capabilities → Skills, then upload the skill

Trigger the skill with natural requests

The skill describes when it applies: reviewing templates, rendered HTML or shared components that involve input type attributes. You do not need special syntax. Ask in plain language and name the file or component you want checked.

Good requests name the markup and the goal. The skill's own check and fix wording suggests requests like these.

• Audit all input elements in this HTML file and check their type and autocomplete values.
• Review the signup form template and flag any input that should use a semantic type.
• Update the input type attributes in this shared form component and add autocomplete attributes.
• Explain what each input type does on mobile keyboards for this login form.

Examples of what the agent reports

The reference file lists the input types the skill relies on. A plain text field gives a QWERTY keyboard on mobile. type=email adds the @ key, type=tel shows a numeric dialpad, and type=url adds keys such as / and .com. type=number shows a numeric keypad, and type=date or time renders native pickers.

The skill's quick reference also notes that inputmode=numeric suits fields that look like numbers but are not, such as a card or reference code. Expect the agent to point to the exact element and attribute and suggest a replacement.

• Replace <input type="text"> for an email field with <input type="email">
• Replace a phone field's text type with type="tel" and add autocomplete="tel"
• Use inputmode="numeric" on a code field that should not behave as a number

What the skill needs and how it runs

The source lists no requirements. It does not run scripts and does not use the network, so the skill works from the instructions and reference file alone. Because it is an instruction file, its results depend on the agent reading your markup carefully.

• Requires: nothing listed in the source
• Runs scripts: no
• Uses network: no

Safety notes and limits

Because the skill runs no scripts and makes no network calls, it cannot change anything outside the files and markup you give it. Still, review any changes the agent applies before you commit them.

The skill covers only input types and autocomplete. It is not a full accessibility or legal compliance audit. The overview also states that semantic types can make form completion 40% faster for returning users, but the source files do not cite a study for that figure, so treat it as unverified.

• Review every suggested or applied change before release
• Do not use this skill as accessibility or legal sign-off
• Treat the 40% figure as unsourced

Tips for better results

Give the agent the rendered HTML where you can. The skill asks for the final browser-facing markup, so templates that generate inputs at runtime may need their output checked too. For shared components, ask the agent to flag each place the component is used.

Use the skill as a learning aid as well. Asking the agent to explain each input type helps teams understand why the attribute matters.

• Paste or point to the rendered HTML, not only the framework source
• For shared components, ask for every affected element and route
• Ask for explanations if your team is new to input types and autocomplete