migrate-component

Name: migrate-component
Availability: InStock
Author: LumApps

Migrate React-only components to shared core, React, and Vue architecture.

26|9|Updated Jul 6, 2018

Search Tags:#react #design system #vue #code refactoring #frontend development #component migration

Ready to run

npx skills add https://github.com/lumapps/design-system --skill migrate-component

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: migrate-component
Source: https://github.com/lumapps/design-system/tree/main/.claude/skills/migrate-component
Command: npx skills add https://github.com/lumapps/design-system --skill migrate-component

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and scripts (resource) components.

What problem does it solve?

This Skill streamlines the process of updating older, React-only components to a modern, shared architecture that supports React, Vue, and core logic, ensuring consistency and maintainability across the design system.

Core Features & Use Cases

Cross-Framework Migration: Transforms components for use in React, Vue, and a framework-agnostic core.
Automated Workflow: Guides through discovery, UI extraction, stories migration, and testing.
Use Case: Migrating a legacy Button component from being React-specific to being usable across React, Vue, and the core LumX library, ensuring a consistent look and feel everywhere.

Quick Start

Use the migrate-component skill to begin migrating the Switch component.

Frequently Asked Questions about migrate-component

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

FAQPage Schema

How do I migrate React components to support Vue and a shared core architecture?▼

Migrating React components to a shared core architecture involves extracting UI logic into a framework-agnostic core, then adapting it for React and Vue. This Skill automates UI extraction, story creation, and test updates to ensure cross-framework compatibility.

What is the best way to standardize legacy components within a design system?▼

Standardizing legacy components within a design system requires migrating them to a shared architecture. This process transforms React-specific components into a unified core, ensuring consistent maintainability and cross-platform compatibility across frameworks like Vue.

How do I automate story creation and test updates during component migration?▼

You can automate story creation and test updates during component migration by using an automated workflow tool. This Skill guides you through the process, automatically generating the necessary stories and updating tests across multiple frameworks.

Does this component migration process support both React and Vue frameworks?▼

Yes, this component migration process supports both React and Vue frameworks. It transforms React-only components into a shared architecture that includes a framework-agnostic core, ensuring full cross-platform compatibility within your design system.

When do I need to refactor frontend components for a shared architecture?▼

You need to refactor frontend components for a shared architecture when legacy components are tightly coupled to a single framework like React. This refactoring enables code reuse across Vue and core libraries, ensuring long-term maintainability and consistency.

What are the limitations of manually migrating UI components across multiple frameworks?▼

Manually migrating UI components across multiple frameworks risks inconsistencies and missed test updates. Automating the extraction and story creation process ensures standardized cross-platform compatibility and reduces human error during the refactoring workflow.