skills.rest
lumapps
lumappsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

migrate-component

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
One-click install
npx skills add https://github.com/lumapps/design-system --skill migrate-component
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
niiiusburoniiiusburo

extract

Extract reusable UI components and design tokens from a codebase.

Community
Advanced
flutterflutter
2.8k

flutter-add-widget-test

Write Flutter widget tests using the WidgetTester API to verify UI rendering and interactions.

Official
Intermediate
mgd34msumgd34msu
4

storybook

Develop, document, and test UI components in isolation with Storybook.

Community
Intermediate
eserlaneserlan
2

web-component-design

Standardize cross-framework UI component design across React, Vue, and Svelte.

Community
Advanced