Inputs & Forms: AI Skill for UX Design

Inputs & Forms is an AI skill that builds forms people finish: minimal fields, one column, labels outside inputs, and kind inline validation. Extras like multi-step splitting stay gated behind trade-offs.

npx skills add Uxcel-Lab/product-skills --skill ux-inputs-and-forms

Copied

What this skill does

Helps an AI assistant build forms that people finish instead of forms that over-ask, mislabel, and validate late.

Cuts every field the task doesn't require and marks required and optional ones.
Lays fields out in one column with logical groups.
Keeps labels above inputs and always visible, never placeholder-only.
Picks the input type from the data: radio buttons under five options, masks where format matters.
Validates on blur with specific, polite messages at the erroneous field.
Labels the submit button with the action, not "Submit".
Shows loading, success, and failure states after submission.
Gates multi-step splitting, floating labels, and helper text as choices with trade-offs.

When to use it

Use it when you need an AI assistant to:

design a signup, checkout, or survey form;
cut a form down to the fields that matter;
pick the right input type per field;
design validation and error states;
write clearer labels, helper text, and error messages;
adapt a form for mobile;
review an existing form for completion blockers.

Decisions this skill helps you make

Decision	Options
Multi-step splitting	Single page until grouping stops working, steps from three stages
Floating labels	Static labels above inputs, floating as a space-saving variant
Helper text	Only where users predictably hesitate, one line maximum
Auto-suggest	For any option list users would have to scroll
Smart defaults	Prefill facts, never decisions
Full-name field	One name field unless the data model needs two
Error summary	Inline always, a top summary added for long forms
Verification	Risk-based and accessible, never block paste