migrate-formik-to-tanstack

Migrate React forms from Formik to TanStack Form with validation and component updates.

163|128|Updated Feb 28, 2022
One-click install
npx skills add https://github.com/getlago/lago-front --skill migrate-formik-to-tanstack
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: migrate-formik-to-tanstack
Source: https://github.com/getlago/lago-front/tree/main/.claude/skills/migrate-formik-to-tanstack
Command: npx skills add https://github.com/getlago/lago-front --skill migrate-formik-to-tanstack

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Migrate a React form from Formik to TanStack Form following project conventions, enabling a consistent, future-proof form architecture across the codebase.

Core Features & Use Cases

  • Step-by-step migration guidance for both simple and complex forms, including updating imports, replacing useFormik with useAppForm, and adopting the AppField pattern.
  • Comprehensive migration plan covering validation, cross-field rules, and conditional logic, mapped from Yup/Formik to Zod/TanStack Form.
  • Patterns for sub-components using the withForm HOC and end-to-end workflow from analysis to verification.

Quick Start

Provide the path to the Formik form you want to migrate and the skill will generate a TanStack Form equivalent ready for integration.

Frequently Asked Questions about migrate-formik-to-tanstack

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

FAQPage Schema
How do I migrate a React form from Formik to TanStack Form?

To migrate Formik to TanStack Form, you update imports, replace useFormik with useAppForm, adopt the AppField pattern, and map validation logic to Zod schemas for a future-proof form architecture.

What is the best way to handle Yup validation migration when moving to TanStack Form?

The best way to handle Yup validation migration is to map existing validation rules, cross-field constraints, and conditional logic directly to Zod schemas, ensuring TanStack Form maintains identical validation behavior.

Can I migrate complex multi-component Formik forms to TanStack Form?

Yes, you can migrate complex multi-component Formik forms by using the withForm HOC pattern to integrate sub-components, ensuring the entire form architecture transitions cohesively to TanStack Form.

Does migrating from Formik to TanStack Form require switching to Zod for validation?

Migrating from Formik to TanStack Form uses Zod to generate validation schemas, replacing Yup to handle cross-field rules and conditional logic within the new TanStack Form architecture.

What patterns should I use for testing and error handling after migrating Formik to TanStack Form?

After migrating Formik to TanStack Form, you apply provided testing and error handling patterns to verify the end-to-end workflow, ensuring the refactored form logic functions correctly across all components.