skills.rest
lucaszhh
lucaszhhCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

component-migrator

Migrates legacy frontend components into a MUI-based design system monorepo with theme augmentation and Storybook stories.

Updated Sep 8, 2026
Search Tags:#react#design system#monorepo#storybook#mui#component migration#theme augmentation
One-click install
npx skills add https://github.com/lucaszhh/agents --skill component-migrator-lucaszhh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-migrator
Source: https://github.com/lucaszhh/agents/tree/main/skills/design-system/component-migrator
Command: npx skills add https://github.com/lucaszhh/agents --skill component-migrator-lucaszhh

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Moving components from a legacy frontend into a shared design system monorepo is error-prone: hardcoded styles slip through, barrel exports get forgotten, variants are not declared in the theme, and stories are skipped. This Skill standardizes the entire migration so every ported component follows the same theme, typing, and documentation rules. ## Core Features & Use Cases - Structured migration workflow: Analyzes the legacy component's props, MUI usage, variants, and business-logic dependencies before designing the DS version. - Theme and token enforcement: Maps legacy variants to MUI theme variants with module augmentation, replacing hardcoded colors and spacing with design tokens. - Deterministic verification: Validates barrel exports via grep/node checks, runs pnpm build:react, and executes Storybook test-runner regression checks. - Use Case: A designer asks to move the legacy Button into the design system. The Skill creates packages/react/src/components/Button/ with typed props, updates the barrel export, adds a Storybook story covering all variants, and writes a migration spec to .agents/components/Button-migration.md. ## Quick Start Ask the agent to migrate the Button component from the legacy frontend into the design system monorepo with its story and theme variants.

Frequently Asked Questions about component-migrator

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

FAQPage Schema
How do I migrate a legacy component to a design system monorepo?▼

Analyze the legacy component's props, MUI usage, and variants, then recreate it in packages/react/src/components with typed props, theme tokens, a barrel export, and a Storybook story. Verify with pnpm build:react and a barrel export check.

How to add custom MUI variants like color="chatbot" to a theme?▼

Declare the variant in the theme under packages/react/src/theme and use TypeScript module augmentation in the types folder, for example extending ButtonPropsColorOverrides with the new color. Never create ad-hoc variants without declaring them in the typed theme.

Should business logic be migrated into design system components?▼

No. Design system components must stay presentational and dumb. Business logic such as queries, turns, procedures, or user handling remains in the frontend application and is explicitly excluded from the migration.

When should I not use a component migration workflow?▼

Skip it when designing a brand-new component from scratch, when only updating design tokens, when auditing an already-migrated component, or when planning a large migration of more than five components, which needs upfront architecture planning.

How do I verify a migrated component is correctly exported?▼

Run pnpm build:react to compile with typechecking, then grep the barrel file packages/react/src/index.ts for the export line or require the built package in Node and assert the component exists. Also run the Storybook test runner against the component's stories.

Related Skills

Explore More Software Engineering Skills→
Nikhil-Chopra-7Nikhil-Chopra-7
1

design-system

Audit MUI and Tailwind components to classify reuse, extension, or new builds.

Community
Advanced
reason-machinesreason-machines
4

figma-console-mcp-skills

Automates Figma design token export, WCAG linting, and component documentation via MCP scripts.

Official
Advanced
oriysoriys

normalize

Substitute design tokens for hard-coded UI values to align with the design system.

Community
Advanced
sandecosandeco
1.5k

reversa-design-system

Extract design tokens from legacy CSS and theme files into markdown documentation.

Community
Intermediate