tanstack-form-compositionlisted
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