migrate-frontend-forms

Migrate legacy JSON and FormModel forms to TanStack React forms.

2|1|Updated Mar 18, 2026
One-click install
npx skills add https://github.com/noma4i/sentry-selfhosted --skill migrate-frontend-forms-noma4i
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: migrate-frontend-forms
Source: https://github.com/noma4i/sentry-selfhosted/tree/main/source/sentry/.agents/skills/migrate-frontend-forms
Command: npx skills add https://github.com/noma4i/sentry-selfhosted --skill migrate-frontend-forms-noma4i

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive guide to migrating legacy JSON and FormModel forms to the modern TanStack-based form system, simplifying upgrades and maintaining functional consistency.

Core Features & Use Cases

  • Form Migration Guide: Offers step-by-step instructions for converting form configurations and components to newer standards.
  • Code Examples: Includes detailed JSX snippets for handling confirm prompts, error mapping, and saving messages within the new form infrastructure.
  • Use Case: Enables developers to efficiently update internal dashboards by transforming existing form codebases to support better performance, searchability, and maintainability.

Quick Start

Apply the migration instructions to convert your existing JSON form into a modern React form with proper error handling and search indexing.

Frequently Asked Questions about migrate-frontend-forms

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

FAQPage Schema
How do I migrate legacy JSON forms to TanStack React components?

Migrate legacy JSON forms to TanStack React components by following step-by-step configuration instructions, transforming schemas and updating components to support better performance and maintainability.

What is the best way to handle error mapping when upgrading to a TanStack form system?

Handle error mapping when upgrading to a TanStack form system by utilizing provided JSX code examples that guide you through mapping legacy errors to the new infrastructure and configuring confirm prompts.

How do I make my migrated React forms searchable in internal dashboards?

Make migrated React forms searchable in internal dashboards by wrapping them with FormSearch wrappers, which ensure searchability and functional consistency within the new TanStack-based form system.

Can I use this TanStack form migration approach for complex internal administrative interfaces?

You can use this TanStack form migration approach for complex internal administrative interfaces, as it specifically handles nullable values, explicit save actions, and maintains functional consistency during upgrades.

How do I handle nullable values and explicit save actions in TanStack forms?

Handle nullable values and explicit save actions in TanStack forms by applying the migration guide's configuration rules, ensuring proper data capture and explicit submission triggers within the React infrastructure.