← ClaudeAtlas

tanstack-form-compositionlisted

Migrate a React @tanstack/react-form codebase from the prop-drilled `useForm` + erased-form-type pattern to the official `createFormHook` composition API (`useAppForm` / `withForm` / `field.X`). Use when a project threads a `form` object (often cast to an `any`-erased type like `ReactFormExtendedApi<any,...>`) through field-wrapper components that take `form`+`name` props, and you want typed field names/values, no casts, and reusable bound field components. Triggers: "migrate forms to createFormHook", "adopt useAppForm/withForm", "remove AnyReactForm cast", "type-safe tanstack form fields".
suxrobGM/jobpilot · ★ 18 · API & Backend · score 81
Install: claude install-skill suxrobGM/jobpilot
# TanStack Form → composition API migration Convert a React project using `@tanstack/react-form` from **raw `useForm` + prop-drilled field wrappers + an `any`-erased form type** to the **`createFormHook` composition API**. The payoff: typed field names/values, deletion of the erased form type and every `as unknown as <ErasedForm>` cast, and bound field components consumed as `field.TextField` instead of `<FieldWrapper form={form} name=… />`. This is for the **React** adapter. Solid/Vue/Angular have the same API shape with different hook names — the concepts below port directly. ## When this applies The codebase has most of these symptoms: - An erased form type alias, e.g. `type AnyForm = ReactFormExtendedApi<any,any,…>` (12 `any` generics), used as a prop type and reached via `form as unknown as AnyForm`. - Field components that accept `form` + `name` props and internally render `<form.Field name={name}>…</form.Field>`. - Shared "section" components that receive the whole `form` as a prop and are reused across multiple parent forms (e.g. a settings form and an onboarding wizard). - Helper functions that take the `form` and call `getFieldValue`/`setFieldValue`. If the project does **not** yet use `@tanstack/react-form`, stop — this skill migrates an existing TanStack Form codebase; it does not introduce the library. ## Method Work in four phases. Do recon fully before editing; build the shared infra once; then migrate call sites; then delete the erased type and v