compound-components-migration

Migrate admin pages to compound components or TabbedForm patterns.

1.7k|421|Updated Apr 23, 2024
One-click install
npx skills add https://github.com/mercurjs/mercur --skill compound-components-migration-mercurjs
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: compound-components-migration
Source: https://github.com/mercurjs/mercur/tree/main/.claude/skills/compound-components-migration-review
Command: npx skills add https://github.com/mercurjs/mercur --skill compound-components-migration-mercurjs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill assists developers in planning, implementing, and reviewing complex admin page migrations to ensure behavioral consistency and prevent regressions throughout the process.

Core Features & Use Cases

  • Migration Planning: Guides through identifying migration types such as list, detail, or tabbed form.
  • Implementation Support: Provides step-by-step instructions to preserve runtime behavior, manage async dependencies, and update API patterns.
  • Review Assistance: Offers comprehensive regression checks and validation points to ensure no critical behaviors are broken.
  • Use Case: Use this Skill when refactoring a large admin interface to adopt compound components without introducing bugs or UX regressions.

Quick Start

Use the compound components migration skill to assist with updating detail pages to support nested routes and dynamic tabs.

Frequently Asked Questions about compound-components-migration

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

FAQPage Schema
How do I migrate React admin pages to compound components without regressions?

Migrating React admin pages to compound components without regressions requires step-by-step guidance covering nested routes, context provisioning, and dynamic visibility. You must enforce behavior consistency through comprehensive regression checks and validation points to ensure no critical runtime behaviors are broken.

What is the best way to update detail pages to support nested routes and dynamic tabs?

Updating detail pages to support nested routes and dynamic tabs involves planning the migration type and following implementation support to preserve runtime behavior. Managing async dependencies and updating API patterns ensures the refactored admin interface adopts the new components without introducing UX regressions.

How does TabbedForm pattern migration work for complex admin interfaces?

TabbedForm pattern migration works by guiding developers through identifying the migration type, preserving runtime behavior, and managing async dependencies. It enforces strict safety and quality standards to prevent regressions when refactoring large admin interfaces to adopt the new compound component patterns.

Can I use this migration approach for list, detail, and tabbed form pages?

Yes, you can use this migration approach for list, detail, and tabbed form pages. The process guides you through identifying the specific migration type and provides implementation support to update API patterns and manage async dependencies, ensuring behavioral consistency across all admin page variations.

Why does refactoring to compound components break dynamic visibility in admin pages?

Refactoring to compound components breaks dynamic visibility when context provisioning and nested routes are not carefully preserved during the migration. Resolving this requires step-by-step implementation support and comprehensive regression checks to validate that the original runtime behaviors remain intact.