ux-inputs-and-forms

ux-inputs-and-forms is a skill for Claude Code from Uxcel-Lab/product-skills. It costs 95 tokens per session (2,733 once invoked), scanned A, original, MIT.

A guide for designing or reviewing forms and fields where people enter information. It covers which fields to ask for, how to label and arrange them, and how to show validation errors.

In plain words
What is it for?
Use it for sign-up forms, checkout pages, surveys, settings screens, and other interfaces that collect user input. It can help decide field types, layout, validation, optional fields, and whether to split a form into steps.
Why use it?
It helps prevent forms from asking for unnecessary information, hiding labels, or showing all errors only after submission. It also helps make long or complex forms easier to complete.

Skill for Claude Code

Written for Claude Code: shipped in a Claude Code plugin.

Part of the uxcel plugin — 58 skills shipped together

Good fit Use it for sign-up forms, checkout pages, surveys, settings screens, and other interfaces that collect user input. It can help decide field types, layout, validation, optional fields, and whether to split a form into steps.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/uxcel-lab/product-skills/inputs-and-forms
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add Uxcel-Lab/product-skills --skill inputs-and-forms
Clone the repo
git clone --depth 1 https://github.com/Uxcel-Lab/product-skills

Made for: Claude Code.

Or install uxcel, the plugin that ships this one along with the rest of its 58 skills.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for ux-inputs-and-forms

README.md
[![agentmods](https://agentmods.dev/badge/skills/uxcel-lab/product-skills/inputs-and-forms/github.svg)](https://agentmods.dev/skills/uxcel-lab/product-skills/inputs-and-forms)
Your own site
<a href="https://agentmods.dev/skills/uxcel-lab/product-skills/inputs-and-forms"><img src="https://agentmods.dev/badge/skills/uxcel-lab/product-skills/inputs-and-forms/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for ux-inputs-and-forms

Your own site · 80×15
<a href="https://agentmods.dev/skills/uxcel-lab/product-skills/inputs-and-forms"><img src="https://agentmods.dev/badge/skills/uxcel-lab/product-skills/inputs-and-forms.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 95 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 2,733 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00095 $0.02733
Opus 5 $0.00048 $0.01367
Sonnet 5 $0.00019 $0.00547
Haiku 4.5 $0.00010 $0.00273

Measured 9d ago against content hash 41f9809733b6, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-09, from the pricing page.

Security

Grade A, and why

ux-inputs-and-forms scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 9d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

ux/components/inputs-and-forms/SKILL.md · 134 lines

How it starts

The opening of the file, as written. The whole thing — 134 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Inputs & Forms Skill

How this skill behaves (read first)

This is a generative skill. The default failure modes: over-asking (every field that might be useful, all required), mislabeling (placeholders as labels, jargon, unmarked optionals), and validating late (errors dumped in a modal at submit). The fix is not "apply every form pattern" — helper text, tooltips, progress bars, and multi-step splitting everywhere produce a bloated form. So this skill gates:

  1. Establish context — what the form collects, why each field is needed, platform, and length.
  2. Apply the always-true core — minimal fields, scannable single-column layout, persistent labels, the right input type per field, inline validation.
  3. Surface the context-dependent decisions (multi-step, floating labels, helper text, pickers, smart defaults) with trade-offs.

Then it hands off to ux-heuristics-audit, ux-accessibility-audit, ux-aesthetics-audit, ux-microcopy-audit, and ux-dark-patterns-audit for validation.


Step 0 — Establish context before designing

Ask if not known; state the assumption if proceeding without an answer:

  • What does each field buy? For every field, name who uses the data and for what. A field with no answer gets cut — the single highest-leverage form decision.
  • Platform — mobile demands contextual keypads, ≥38px touch areas, a submit button that stays in sight while scrolling, one-handed reachability.
  • Length & stakes — a 3-field newsletter signup and a multi-page checkout need different structure (steps, progress, error summaries).
  • Sensitivity — phone numbers, payment, IDs: users ask "why do you need this?" — plan the justification (helper text) and expect dark-patterns scrutiny on anything beyond task needs.

The always-apply core (correct for almost every case)

Ask less

  • Remove every field the task doesn't require. Shorter forms complete more; the system shouldn't ask for what it can detect or already knows (autofill known data, support browser autocomplete, auto-detect country/locale).
  • Mark required and optional fields — asterisk (before the label in LTR; not pale gray) for required, "(optional)" in the label for optional.
    • ❌ Ten required fields, no explanation ✅ Five fields, one marked "(optional)", helper text on the sensitive one

Read the full file on GitHub · 134 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 9d ago First seen · 134 lines · 95 tokens per session scan A 41f9809733b6

Subscribe to this mod's changes

ux-inputs-and-forms is a skill published in the GitHub repository Uxcel-Lab/product-skills (10 stars, last pushed 2mo ago), licensed MIT. It adds 95 tokens to every session and 2,733 once invoked, about $0.0005 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Related

Other skills, from other repositories

pm-brand-motion

A guided process for defining a brand's motion style and making a logo animation demonstration.

konglong87/superPM · 77 tokens

pm-proto

A product-prototyping workflow for planning how an application should work and what its screens should contain. It connects product requirements to interface layouts and interactions.

konglong87/superPM · 55 tokens

diagram-design

Create branded architecture, IT current-state, flowchart, sequence, state machine, ER/data model, timeline, swimlane, quadrant, radar/spider, polar chart (polar/radial lollipop), loop/flywheel, nested, tree, org chart, layer stack, Venn, pyramid/funnel, treemap, bar, line, Gantt and scatter charts, high-level…

aiskillstore/marketplace · 188 tokens

design-mobile-apps

Use when the user wants to design a mobile app or UI screens, when they mention their Sleek (sleek.design) projects, or when implementing Sleek designs in code (HTML, React Native, SwiftUI).

aiskillstore/marketplace · 49 tokens

dengguang-zhaoming-bikeng-zhinan

A Chinese-language knowledge guide about home lighting, including ceiling lights, light strips, color temperature, color rendering, and room zoning.

aiskillstore/marketplace · 99 tokens

appllama-app-design-skill

Build native-feeling, benchmark-quality mobile app screens (Expo / React Native). Use when designing or implementing any mobile UI — screens, flows, onboarding, paywalls, tab bars, sheets, settings, empty states — or when polishing motion, navigation, typography, dark mode, or perceived performance. Enforces Apple HIG…

aiskillstore/marketplace · 184 tokens