skills.rest
Higashi-Kota
Higashi-KotaCOMMUNITY
Explore all skills by this author →
GitHub

theme-to-component-migration

Migrate hardcoded Tailwind styles and native HTML elements to Storybook-defined UI components in TypeScript/React projects.

Updated Sep 14, 2025
Search Tags:#design system#component library#Storybook#Tailwind CSS#code refactoring#theme tokens#UI migration
One-click install
npx skills add https://github.com/Higashi-Kota/react-tailwindcss-sandbox --skill theme-to-component-migration
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: theme-to-component-migration
Source: https://github.com/Higashi-Kota/react-tailwindcss-sandbox/tree/main/.claude/skills/theme-to-component-migration
Command: npx skills add https://github.com/Higashi-Kota/react-tailwindcss-sandbox --skill theme-to-component-migration

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires pnpm.

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.

Frequently Asked Questions about theme-to-component-migration

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

FAQPage Schema
How do I migrate hardcoded Tailwind classes and native HTML elements to a component library?▼

Migrating hardcoded styles to components involves analyzing your theme system and component library, identifying hardcoded Tailwind classes and native elements like `<button>` and `<input>`, then systematically replacing them with semantic theme tokens and UI components. This Skill automates that detection and replacement workflow while preserving behavior and validating via typechecking.

Can I automate replacing native HTML form elements with custom UI components?▼

Yes. This Skill automatically identifies native form elements (`<button>`, `<input>`, `<textarea>`, `<select>`) and replaces them with your library's UI components (Button, Input, Textarea, Select), ensuring consistent styling and behavior across your TypeScript/React codebase.

What's the best way to ensure Storybook stories use actual components instead of native HTML?▼

Storybook migration updates your stories to consume components from your internal library rather than native HTML elements, ensuring accurate component demonstration and consistent documentation. This Skill handles that migration as part of the overall refactoring workflow.

How do I maintain UI consistency when refactoring inline styles and Tailwind classes?▼

Consistency is maintained by replacing hardcoded styles with centralized theme tokens and reusable UI components. This Skill generates a prioritized migration plan, performs replacements systematically, and validates results through builds and typechecking to prevent regressions.

Does this work with projects already using Tailwind CSS and inline styles together?▼

Yes. This Skill handles TypeScript/React projects using Tailwind classes, inline styles, or both, identifying and migrating all patterns to theme tokens and components while preserving existing behavior and style consistency.

What are the limitations when migrating a large codebase with mixed styling approaches?▼

The workflow requires a defined theme system and component library to exist beforehand. Success depends on having clear mapping between hardcoded patterns and target components, and validating through your project's typechecking and build processes.

Related Skills

Explore More Software Engineering Skills→
daffy0208daffy0208
34

Design System Architect

Define design tokens, components, and governance for scalable design systems.

Community
Advanced
Ritik-Sharma1Ritik-Sharma1

ui-visual-validator

Validate UI components and pages for design system compliance and accessibility.

Community
Advanced
ProfPowellProfPowell
1

open-props

Import modular CSS custom properties for design systems.

Community
Basic
mgd34msumgd34msu
6

styling-system

Guide CSS architecture decisions for Tailwind, design tokens, and dark mode.

Community
Intermediate