Does it support asynchronous validation?

Yes, it identifies Formik's async test functions and provides the necessary structure for TanStack Form's asynchronous validation approach.

Can it handle conditional field validation?

Absolutely. It documents conditional logic during the pre-migration phase and implements it using Zod's refinement patterns to ensure data integrity.

What specific hooks does this skill implement?

It primarily transitions code to the custom useAppForm hook while utilizing TanStack's useStore and field listeners for reactive side-effects.

Does this skill handle complex Yup schemas?

Yes, it maps Yup strings, numbers, arrays, and objects to their Zod equivalents, including using .refine() for custom logic and regex matches.

Formik to TanStack Form Migrator

Name: Formik to TanStack Form Migrator
Author: getlago

bygetlago

•

147

•

开发者工具

Migrates React forms from Formik to TanStack Form using Zod validation and project-specific hooks.

This skill streamlines the transition from Formik to TanStack Form within React applications, specifically optimized for modern codebase conventions like the Lago frontend. It performs a deep pre-migration analysis of existing Formik components, mapping legacy Yup schemas to Zod equivalents and refactoring complex validation logic—including cross-field, conditional, and asynchronous rules. By automating the conversion to the custom useAppForm hook and implementing reusable patterns like NameAndCodeGroup, it ensures a consistent, type-safe, and high-performance form architecture.

主要功能

01Automatic refactoring from useFormik to the custom useAppForm hook

02Support for complex cross-field and conditional validation logic using Zod refinements

03Deep validation analysis mapping Yup schemas to Zod equivalents

04Implementation of reusable field patterns and specialized UI groups

05147 GitHub stars

06Detailed pre-migration planning including validation mapping tables

使用场景

01Standardizing form implementation patterns across large React codebases

02Modernizing legacy Formik components to the TanStack Form ecosystem

03Converting Yup validation schemas to Zod for improved TypeScript integration

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add getlago/lago-front migrate-formik-to-tanstack

For use in Claude.ai and ChatGPT

Download Skill