TanStack Form v1 - type-safe forms with Zod/Yup/Valibot validation, async validation, arrays, nested fields, React 19 Server Actions
From fuse-reactnpx claudepluginhub fusengine/agents --plugin fuse-reactThis skill uses the workspace's default tool permissions.
references/arrays-nested.mdreferences/async-validation.mdreferences/devtools.mdreferences/linked-fields.mdreferences/listeners.mdreferences/react-native.mdreferences/reactivity.mdreferences/reset-api.mdreferences/server-actions.mdreferences/shadcn-integration.mdreferences/ssr-hydration.mdreferences/standard-schema.mdreferences/tanstack-form-basics.mdreferences/templates/basic-form.mdreferences/templates/conditional-fields.mdreferences/templates/devtools-form.mdreferences/templates/dynamic-fields.mdreferences/templates/file-upload-form.mdreferences/templates/form-composition.mdreferences/templates/linked-fields-form.mdProvides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Builds 3-5 year financial models for startups with cohort revenue projections, cost structures, cash flow, headcount plans, burn rate, runway, and scenario analysis.
Before ANY implementation, use TeamCreate to spawn 3 agents:
After implementation, run fuse-ai-pilot:sniper for validation.
ALWAYS apply SOLID principles from solid-react skill.
→ See ../solid-react/SKILL.md for complete rules
Key Rules:
modules/[feature]/src/interfaces/| Hook | Purpose | Guide |
|---|---|---|
useForm() | Initialize form with validation | references/tanstack-form-basics.md |
useField() | Subscribe to individual field | references/tanstack-form-basics.md |
form.Field | Render prop component for fields | references/tanstack-form-basics.md |
form.Subscribe | Watch form state changes | references/tanstack-form-basics.md |
→ See references/tanstack-form-basics.md for detailed usage
| Library | Adapter | Bundle Size |
|---|---|---|
| Zod | zodValidator() | ~12KB |
| Yup | yupValidator() | ~40KB |
| Valibot | valibotValidator() | ~6KB |
→ See references/zod-validation.md for Zod patterns
→ See references/yup-valibot.md for alternatives
Server-side checks with debouncing and loading states.
→ See references/async-validation.md
Integration with useActionState and progressive enhancement.
→ See references/server-actions.md
Dynamic field arrays and dot notation for nested objects.
→ See references/arrays-nested.md
Full type inference from Zod schemas and defaultValues.
→ See references/typescript.md
Field wrapper components with shadcn styling.
→ See references/shadcn-integration.md
onMount, onChange, onBlur, onSubmit with debouncing.
→ See references/listeners.md
Cross-field validation and dependent dropdowns.
→ See references/linked-fields.md
useStore selectors and granular subscriptions.
→ See references/reactivity.md
Form and field reset with custom values.
→ See references/reset-api.md
TanStack Start integration and server state merge.
→ See references/ssr-hydration.md
Debug form state with @tanstack/react-form-devtools.
→ See references/devtools.md
Mobile-specific patterns with TextInput.
→ See references/react-native.md
ArkType and Effect Schema support.
→ See references/standard-schema.md
| Template | Use Case |
|---|---|
templates/basic-form.md | Login/signup with Zod |
templates/multi-step-form.md | Wizard with step validation |
templates/dynamic-fields.md | Add/remove field arrays |
templates/file-upload-form.md | File input with preview |
templates/server-action-form.md | React 19 Server Actions |
templates/optimistic-form.md | useOptimistic integration |
templates/nested-form.md | Dot notation nested fields |
templates/search-form.md | Debounced search |
templates/conditional-fields.md | Show/hide based on values |
templates/form-composition.md | Reusable field components |
templates/listeners-form.md | Side effects & auto-save |
templates/linked-fields-form.md | Cross-field validation |
templates/reactivity-form.md | Performance optimization |
templates/reset-form.md | Form/field reset patterns |
templates/ssr-form.md | SSR & hydration |
templates/devtools-form.md | Devtools integration |
templates/react-native-form.md | React Native forms |
field.state.meta.errorsaddress.street)mode="array" with pushValue/removeValuez.infer<typeof schema>useState for form state → use useForm()onChangeAsyncDebounceMsonChange → use field.handleChangez.infer<typeof schema>