Why does the skill include mandatory validation checkpoints?

Checkpoints ensure that UI logic, Storybook stories, and unit tests are verified at every stage of the migration to prevent regressions and maintain design system integrity.

Can this skill handle components with sub-components?

Yes, it automatically discovers component families (e.g., Table, TableRow, TableCell) and determines the correct migration order based on their internal dependencies.

What is the primary purpose of the migrate-component skill?

It automates moving UI logic from React-specific implementations into a framework-agnostic core package while creating compatible wrappers for both React and Vue.

What happens if a component already exists in the core package?

The skill performs a discovery phase that checks for existing core implementations and asks the developer whether to reuse, skip, or modify existing files before proceeding.

Is this skill compatible with any React project?

No, this skill is specifically tailored for the LumApps Design System (LumX) repository and its unique core/React/Vue tripartite architecture.

LumX Component Architecture Migrator

Name: LumX Component Architecture Migrator
Author: lumapps

bylumapps

•

Design Tools

Migrates React-only components to a shared, framework-agnostic core architecture supporting both React and Vue within the LumX Design System.

The LumX Component Migrator is a specialized tool designed to automate the transition of LumApps Design System components from a React-exclusive implementation to a unified architecture. It extracts framework-agnostic UI logic into a shared core package and generates lightweight, high-performance wrappers for both React and Vue. The skill manages the complexities of component families, analyzes internal and external dependencies, and enforces a rigorous phase-based workflow with mandatory validation checkpoints to ensure consistency, quality, and full test coverage across the entire design system.

Key Features

01Automatic generation of thin React and Vue component wrappers

02Automated discovery of component families and sub-component dependencies

03Mandatory validation checkpoints for UI implementation, stories, and testing

04Framework-agnostic UI logic extraction for the LumX core package

05Strategic dependency analysis and migration ordering for complex components

0625 GitHub stars

Use Cases

01Refactoring legacy React-only components to support cross-framework LumX implementations

02Accelerating the migration of complex component families like Tables and Grids

03Centralizing design system logic to reduce maintenance across React and Vue platforms

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add lumapps/design-system migrate-component

For use in Claude.ai and ChatGPT

Download Skill