Form builder
Guardrails, skills, loops, hooks & review agents for database + website builders on Claude Code (Next.js + Supabase).
npx -y skills add m-binimran/dev-pack --skill form-builderAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 2 stars2 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
Build accessible, validated forms with React Hook Form + Zod + shadcn Form, wired to a Next.js server action. Use when adding any form (contact, signup, checkout, settings).
SKILL.md
1.5 KB, as published. Nobody here has run it
form-builder
One source of truth for validation (Zod), shared by client and server. Accessible by construction.
Process
- Define the Zod schema once. It validates on the client AND in the server action — no drift.
- React Hook Form + shadcn
Form:useForm({ resolver: zodResolver(schema) }). UseFormField,FormLabel,FormControl,FormMessageso each input is labelled and errors are associated + announced. - Server action does the real validation: re-parse with the same schema in the action; never trust the client.
- States: disabled while submitting, visible loading, success + error feedback (
aria-livefor errors). - Honeypot / basic spam guard on public forms; rate-limit the action.
Accessibility
- Every field has a real
<label>. Errors are text (not color-only) and linked viaaria-describedby. - Submit reachable by keyboard; focus moves to the first error on failed submit.
Output
- The schema, the form component, and the server action — with the shared schema referenced in both.
- Note what validation runs client-side vs. server-side.
Guardrails
- No validation that exists only on the client.
- Don't put secrets/keys in the form component (client code — the
secret-scanhook will block it).