skills.rest
getsentry
getsentryOFFICIAL
Explore all skills by this author →
Website𝕏@sentryGitHub

migrate-frontend-forms

Migrate frontend forms from JsonForm/FormModel to TanStack with code examples.

44.5k|4.8k|Updated Aug 30, 2010
Search Tags:#refactoring#frontend#tanstack#migration#developer experience#forms
One-click install
npx skills add https://github.com/getsentry/sentry --skill migrate-frontend-forms
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: migrate-frontend-forms
Source: https://github.com/getsentry/sentry/tree/main/.claude/skills/migrate-frontend-forms
Command: npx skills add https://github.com/getsentry/sentry --skill migrate-frontend-forms

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the migration of legacy form systems to a modern, robust TanStack-based framework, reducing technical debt and improving developer experience.

Core Features & Use Cases

  • Feature Mapping: Provides a clear, one-to-one mapping of old form system features to their new TanStack equivalents.
  • Code Examples: Illustrates the transformation of common form patterns with side-by-side old and new code snippets.
  • Use Case: A developer needs to refactor a complex form component that uses JsonForm and FormModel. This Skill provides the exact guidance and code patterns to convert it to the new useScrapsForm or AutoSaveField system.

Quick Start

Use the migrate-frontend-forms skill to convert a form field with showHelpInTooltip: true to the new system.

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 frontend forms from JsonForm to TanStack?▼

Migrating frontend forms from JsonForm to TanStack involves mapping legacy features to new equivalents like useScrapsForm, using side-by-side code examples for patterns like confirm, help text, and save behavior.

What is the best way to refactor FormModel components for a TanStack migration?▼

Refactoring FormModel components for a TanStack migration is streamlined by converting to AutoSaveField systems, utilizing provided code patterns to transform common form logic including data retrieval and error handling.

How does form error handling work when upgrading to TanStack from legacy systems?▼

Form error handling when upgrading to TanStack works by mapping legacy error states to the new framework's validation structure, ensuring robust data management while modernizing UI form components.

Can I convert tooltip-specific form fields like showHelpInTooltip to the new TanStack system?▼

Yes, you can convert tooltip-specific form fields like showHelpInTooltip to the new TanStack system by following the Skill's mapping guidance to transition help text features directly to modern equivalents.

Does this TanStack form migration guide support disabled states and save behavior?▼

Yes, this TanStack form migration guide supports disabled states and save behavior by detailing feature mappings and providing explicit code examples to replicate these UI patterns in the new framework.

Related Skills

Explore More Software Engineering Skills→
Harigithub11Harigithub11

migrate-frontend-forms

Convert legacy JsonForm/FormModel configurations into TanStack-based forms with useScrapsForm or AutoSaveForm.

Community
Intermediate
machenjiemachenjie
4

frontend-testing

Define frontend tests for user-visible behavior across roles and UI states.

Community
Advanced
ollieb89ollieb89

frontend-dev-guidelines

Enforce React and TypeScript frontend standards with TanStack Query, Router, and MUI v7.

Community
Intermediate
Ayub-KhanAyub-Khan

state-management

Organize client, server, and URL state with patterns for React, Vue, and Svelte.

Community
Advanced