skills.rest
gabriellst
gabriellstCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

form

Create validated React forms with TanStack Form, SDK Zod schemas, and Maskito input masks.

4|Updated Jul 30, 2026
Search Tags:#react#zod validation#tanstack form#form wizard#dialog form#maskito#sdk mutation
One-click install
npx skills add https://github.com/gabriellst/codm --skill form-gabriellst
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: form
Source: https://github.com/gabriellst/codm/tree/main/.claude/skills/form
Command: npx skills add https://github.com/gabriellst/codm --skill form-gabriellst

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/react-form, @tanstack/react-query, zod, zustand, @maskito/react.

What problem does it solve? Building forms that stay synchronized with backend contracts is error-prone: developers hand-roll validation rules that drift from the API, misuse form state, and repeat the same dialog and wizard boilerplate. This Skill enforces a single pattern where the SDK's Zod schema is the source of truth for validation and TanStack Form owns all field state. ## Core Features & Use Cases - SDK-schema validation: Forms validate against the same Zod schema the controller declares, with safeParse guards in onSubmit and reactive submit buttons via form.Subscribe. - Three form types: Single forms, multi-step wizards (Zustand navigation store, step schema extraction, progressive save), and self-contained dialog forms opened via useDialogStore. - Field pattern library: Maskito masked inputs, enum-driven Select/Combobox, CurrencyInput, array fields, and a registry of bad practices (bp-01 through bp-19) to avoid. - Use Case: Add a create-patient dialog that validates against the SDK mutation schema, masks CPF and phone inputs, submits through the SDK mutation hook, and invalidates the relevant query keys on success. ## Quick Start Ask the agent to create a form for a specific SDK mutation in the React app, for example: create a dialog form for the createItem mutation with name and email fields.

Frequently Asked Questions about form

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a validated form with TanStack Form and Zod?▼

Call useForm with defaultValues typed as DeepPartial of the SDK mutation request and pass the SDK Zod schema to validators.onChange. In onSubmit, run schema.safeParse on the form value and call the SDK mutation hook with the parsed data.

How do I build a multi-step wizard form in React?▼

Use a parent useForm holding accumulated data, a Zustand store for step navigation, and step components that each own a useForm with a sub-schema extracted from the complete mutation schema. Step handlers merge data, advance the index, and optionally save progress to the server.

Should form validation schemas be defined locally or imported from the SDK?▼

Always import the mutation request schema from the SDK package so frontend validation matches the backend contract exactly. Extend it with .and() only for local-only fields like terms checkboxes; never redefine rules the SDK already declares.

How do I add input masks for phone or CPF fields in TanStack Form?▼

Attach useMaskito with mask options imported from the shared masks library to the Input ref, use defaultValue with onInput, and store unmasked digits when the backend expects clean values. Never define mask options or unmask helpers inline.

When should a form not use this TanStack Form pattern?▼

Read-only displays, filter bars driven by URL search params, and simple toggles without API submission do not need a form. Use a plain component, route search params, or local state instead.

Why should dialog forms avoid open and onOpenChange props?▼

Dialogs are opened through useDialogStore.show() and closed with hide(), which unmounts the dialog and clears form state automatically. Passing open/onOpenChange props duplicates lifecycle control and leaves stale form state behind.

Related Skills

Explore More Software Engineering Skills→
VibeStackCodesVibeStackCodes

react-hook-form-zod

Combine React Hook Form v7 with Zod v4 for shared client/server validation.

Official
Advanced
lety-ailety-ai

fe-service-hook

Generate TanStack Query hooks for ApiSDK data fetching and mutations.

Official
Intermediate
Impertio-StudioImpertio-Studio

shadcn-syntax-field

Validate shadcn ui Field primitive accessibility and validation wiring.

Official
Advanced
zuzu59zuzu59

optimizer

Prescribe Zustand, TanStack Form, Router URL state, and Convex data access patterns.

Community
Advanced