formcraft

A Claude skill that generates and audits web forms with expert-level UX, accessibility, and modern interaction patterns — built for developers who can code but don't have deep UI/UX training.

Why

Forms are where products lose people. Bad label alignment, validation that fires while you're still typing, error messages that don't say what's wrong, missing autocomplete attributes, a <select> with 200 countries in it — none of this is exotic knowledge, but most developers were never taught it and don't have time to read a 300-page book on it before shipping a signup flow.

formcraft packages that knowledge — grounded in Luke Wroblewski's Web Form Design research plus modern and AI-era UX patterns — into a skill that generates production-ready forms and reviews existing ones, explaining why along the way so the decisions stick.

Install

npx skills add fauverism/formcraft

Or without installing, generate a one-off prompt:

npx skills use fauverism/formcraft | claude

See the skills CLI docs for more install options (global vs. project scope, targeting specific agents, etc).

What it does

Generate mode — describe the form you need ("a checkout form for a SaaS subscription", "user registration with email verification") and get back semantic, accessible, production-ready markup with inline annotations explaining the non-obvious decisions.

Audit mode — point it at an existing form and get a severity-ranked list of UX and accessibility issues, from missing <label for> associations to validation firing on every keystroke.

Both modes are always available in the same flow — it adapts based on whether there's existing form markup in context.

Depth dial

• Quick — opinionated defaults, minimal commentary, for prototypes and internal tools.
• Guided (default) — asks a few clarifying questions, explains decisions inline, teaches as it builds.
• Deep — full design consultation with rationale, accessibility checklist, and tradeoff analysis. For public-facing, high-stakes forms (checkout, onboarding).

Output

• Semantic HTML-first markup with proper <label>, <fieldset>, <legend>, ARIA attributes
• CSS matching whatever your project already uses (Tailwind, CSS Modules, or custom properties as a portable fallback) — auto-detected, not assumed
• Behavioral notes for validation, error handling, and submission states you implement in your own framework
• Audit notes ranked Critical → Low when reviewing existing forms

What's inside

• SKILL.md — the core decision framework: content strategy, label alignment, input types, validation timing, error handling, accessibility
• references/core-patterns.md — the full pattern library grounded in eye-tracking research and form design fundamentals
• references/modern-patterns.md — 12 modern/AI pattern categories: mobile-first layout, AI-assisted completion, conversational UI, voice input, adaptive forms, confidence indicators on AI-filled fields, save & resume, dark mode, and more

Who this is for

Backend engineers, platform developers, full-stack generalists — anyone who needs to ship a form that works well for the people filling it out, but doesn't have a design background to draw on. If you already have strong UX instincts, you probably don't need this. If you've ever shipped a form and had no idea whether top-aligned or left-aligned labels were the right call, this is for you.

License

Apache 2.0 — see LICENSE.