form-ux-optimizer

# Form UX Optimizer ## What this skill does This skill reviews the code and design of web forms to identify usability and accessibility issues. It checks for poor field ordering, confusing labels, missing or unhelpful error messages, incorrect input types, broken keyboard navigation, and accessibility violations. The output is a prioritized list of specific improvements with code examples for each fix. Use this before shipping a registration, checkout, contact, or any data-entry form — especially when your form has a high abandonment rate or you're getting support requests about users not knowing what to enter. ## How to use ### Claude Code / Cline Copy this file to `.agents/skills/form-ux-optimizer/SKILL.md` in your project root. Then ask: - *"Use the Form UX Optimizer skill to review our checkout form in `CheckoutForm.tsx`."* - *"Review this registration form for UX and accessibility issues using the Form UX Optimizer skill."* Provide the form component code and, if available, any validation logic. ### Cursor Add the instructions below to your `.cursorrules` or paste them into the Cursor AI pane. Provide the form code to review. ### Codex Paste the form HTML/JSX and validation code. Ask Codex to follow the instructions below. ## The Prompt / Instructions for the Agent When asked to review a form for UX, follow this checklist systematically: ### Category 1 — Field design and labeling **Labels** - Every input must have a visible `<label>` element (not just pla...