skills.rest
fodurrr
fodurrrCOMMUNITY
Explore all skills by this author →
GitHub

migrate-component-styles

Parse Tailwind classes from Nuxt UI components and map colors to Phoenix HEEx theme tokens.

Updated Aug 27, 2026
Search Tags:#automation#theming#tailwind#phoenix#migrate#nuxt-ui#heex
One-click install
npx skills add https://github.com/fodurrr/xTweak --skill migrate-component-styles
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: migrate-component-styles
Source: https://github.com/fodurrr/xTweak/tree/main/.claude/skills/nuxt-ui-port/migrate-component-styles
Command: npx skills add https://github.com/fodurrr/xTweak --skill migrate-component-styles

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Automates the migration of Tailwind classes from Nuxt UI components to Phoenix HEEx templates, while mapping hardcoded colors to theme tokens to ensure consistent theming.

Core Features & Use Cases

  • Parse Tailwind classes from Nuxt UI examples and extract color/size/spacing tokens.
  • Detect hardcoded colors and map them to theme tokens for consistent theming across components.
  • Generate Phoenix Component helper templates (color_classes, size_classes) and ready-to-use HEEx templates.
  • Validate theme compliance with automated checks and CI-friendly reports for ported components.
  • Use Case: Port a Button or Chip from Nuxt UI into a Phoenix app with theme-aligned visuals.

Quick Start

Invoke the migration on a Nuxt UI component to generate theme-compliant HEEx templates and helper functions.

Frequently Asked Questions about migrate-component-styles

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

FAQPage Schema
How do I migrate Nuxt UI components to Phoenix HEEx templates?▼

Parsing Tailwind classes from Nuxt UI components extracts color, size, and spacing tokens, then maps hardcoded colors to theme tokens. This ensures consistent theming when porting components into Phoenix HEEx templates.

How do I map hardcoded Tailwind colors to theme tokens when porting components?▼

Mapping hardcoded Tailwind colors to theme tokens involves detecting specific color classes and auto-mapping them to your Phoenix app's theme variables. This generates Elixir helper functions like color_classes and size_classes for consistent styling.

Can I validate theme compliance for ported Phoenix HEEx components?▼

Yes, you can validate theme compliance for ported Phoenix HEEx components. The migration process generates CI-friendly reports and runs automated checks to ensure ported Button, Chip, and Badge components align with your defined theme tokens.

Does this migration process require manual Tailwind class extraction from Nuxt UI?▼

No, manual Tailwind class extraction from Nuxt UI is not required. The process automatically parses Tailwind classes from Nuxt UI examples, extracts the relevant tokens, and applies auto-mapping to generate Phoenix component helper templates directly.

What is the best way to automate Nuxt UI Tailwind migrations for Phoenix?▼

The best way to automate Nuxt UI Tailwind migrations for Phoenix is using an automated parsing tool that extracts color and spacing tokens, applies theme auto-mapping, and outputs HEEx templates with CI-friendly validation reports.

Related Skills

Explore More Software Engineering Skills→
JBonfimJBonfim

tailwindcss

Standardizes Tailwind CSS v4 styling using semantic tokens and tailwind-variants components.

Community
Intermediate
j-morgan6j-morgan6
149

code-quality

Detect duplication, ABC complexity, and unused private functions in Elixir projects.

Community
Intermediate
TheBushidoCollectiveTheBushidoCollective
187

phoenix-views-templates

Render Phoenix HEEx templates and views into HTML content.

Official
Intermediate
holger1411holger1411
70

tailwind

Replace hardcoded colors and inline styles with Tailwind v4 semantic tokens.

Community
Advanced