About tanstack-form
TanStack Form is a guidance skill for building type-safe forms with TanStack Form. It routes tasks to framework-specific references and emphasizes checking installed package versions and matching guidance.
Key features
- 01Guidance for fields and validation
- 02Form composition and submission patterns
- 03SSR and devtools topics
- 04Framework-specific adapter routing
- 05Version-matched documentation guidance
- 06Headless core behavior guidance
Use cases
- 01Implement validation in a React form
- 02Choose guidance for a detected framework adapter
- 03Check form submission patterns
- 04Align examples with installed package versions
Install
Copy the command and run it in a terminal.
npx skills add https:/ / github.com/ lukasa1993/ tanstack-skills-extracted --skill tanstack-formAfter installing, type/tanstack-formin Claude Code to confirm it loaded.
Bundled files
References and scripts installed along with SKILL.md.
.tanstack-product-skill.jsonLICENSEagents/openai.yamllicenses/a405ee70c632bb938acb7ac5f210e814409b3760ea9d2329d8ed8ffcfd11a0e7.txtreferences/foundations.mdframework-angular.mdframework-lit.mdframework-preact-advanced.mdframework-preact.mdframework-react-advanced.mdframework-react.mdframework-solid.mdframework-svelte.mdframework-vue.mdreferences/doc-assets/assets/react_form_composability.svgreferences/examples/react-validation.tsxreferences/guides/form-docs-community-resources-md-a3070668.mdform-docs-comparison-md-0737b564.mdform-docs-framework-angular-guides-arrays-md-0b0d36e6.mdform-docs-framework-angular-guides-basic-concepts-md-23e082ea.mdform-docs-framework-angular-guides-dynamic-validation-md-86a4132d.mdform-docs-framework-angular-guides-form-composition-md-87447c33.mdform-docs-framework-angular-guides-form-groups-md-4edf82c8.mdform-docs-framework-angular-guides-listeners-md-85d37563.mdform-docs-framework-angular-guides-submission-handling-md-100620c8.mdform-docs-framework-angular-guides-validation-md-50a0451b--asynchronous-functional-validation.mdform-docs-framework-angular-guides-validation-md-50a0451b--displaying-errors.mdform-docs-framework-angular-guides-validation-md-50a0451b--overview.mdform-docs-framework-angular-guides-validation-md-50a0451b--preventing-invalid-forms-from-being-submitted.mdform-docs-framework-angular-guides-validation-md-50a0451b--validation-at-field-level-vs-at-form-level.mdDetails
From the project READMETanStack Form
Type-safe form guidance for fields, validation, composition, submission, SSR, devtools, and framework adapters.
Workflow
- Inspect installed TanStack packages and exact versions.
- Read the foundation reference and the adapter reference for the detected framework.
- Topic references are indexes. Choose one guide or section for the task; follow its prerequisite links only when needed.
- Prefer installed package types and version-matched source guidance over memory.
- Preserve headless/core behavior when translating examples to a framework adapter.
Task routing
- Foundations — Overview, installation, philosophy, TypeScript, and comparison.
- React adapter — React quick start, fields, state, validation, submission, and reactivity.
- React advanced patterns — Advanced React composition, validation, SSR, and form architecture.
- Preact adapter — Preact quick start, fields, state, validation, submission, and reactivity.
- Preact advanced patterns — Advanced Preact composition, validation, debugging, focus, and UI integration.
- Vue adapter — Vue-specific setup and behavior.
- Angular adapter — Angular-specific setup and behavior.
- Solid adapter — Solid-specific setup and behavior.
- Lit adapter — Lit-specific setup and behavior.
- Svelte adapter — Svelte-specific setup and behavior.
Common tasks
Framework routing
- Angular — detect
@tanstack/angular-form. Read Angular adapter. - Lit — detect
@tanstack/lit-form. Read Lit adapter. - Preact — detect
@tanstack/preact-form. Read Preact adapter. - React — detect
@tanstack/react-form. Read React adapter. - Solid — detect
@tanstack/solid-form. Read Solid adapter. - Svelte — detect
@tanstack/svelte-form. Read Svelte adapter. - Vue — detect
@tanstack/vue-form. Read Vue adapter.
Product boundaries
Use these separate product skills when the task crosses their boundary: tanstack-start, tanstack-devtools.
Source status
Official documentation from TanStack/form, matched to these verified release inputs: @tanstack/[email protected], @tanstack/[email protected], @tanstack/[email protected], @tanstack/[email protected], @tanstack/[email protected], @tanstack/[email protected], @tanstack/[email protected], @tanstack/[email protected].
See source provenance for exact upstream inputs and deduplication records.