theme-to-component-migration

What problem does it solve?

Hardcoded styles and native HTML elements lead to inconsistent UI, difficult maintenance, and a fragmented design system. This Skill eliminates manual refactoring by automating the migration to theme tokens and reusable UI components, ensuring a unified and maintainable codebase.

Core Features & Use Cases

• Hardcoded Style Detection: Automatically identifies hardcoded Tailwind classes, inline styles, and native HTML elements (e.g., <input>, <button>).
• Automated Replacement: Systematically replaces identified patterns with semantic theme tokens and Storybook-defined UI components (e.g., bg-blue-500 → bg-primary, <input> → <Input>).
• Storybook Migration: Ensures Storybook stories (*.stories.tsx) are updated to use actual UI components from the internal library, not native HTML, for accurate component demonstration.
• Use Case: Migrate an entire application's forms and layouts from legacy, hardcoded Tailwind classes and native HTML to a modern, theme-tokenized UI component library, ensuring consistent branding and improved maintainability.

Quick Start

Use the theme-to-component-migration skill to analyze the entire codebase, replace all hardcoded styles with theme tokens and UI components, add missing tokens, and validate builds.