skills.rest
yahsan2
yahsan2COMMUNITY
Explore all skills by this author →
Website𝕏@yahsan2GitHub

refactor-html

Refactor HTML and TSX files to use existing UI components and semantic DaisyUI colors.

Updated Dec 31, 2025
Search Tags:#react#tailwind css#refactor#ui components#daisyui#tsx
One-click install
npx skills add https://github.com/yahsan2/static-admin --skill refactor-html
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: refactor-html
Source: https://github.com/yahsan2/static-admin/tree/main/.claude/skills/refactor-html
Command: npx skills add https://github.com/yahsan2/static-admin --skill refactor-html

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the process of updating React/TSX codebases by ensuring consistency with project standards, improving maintainability, and enhancing user interface quality.

Core Features & Use Cases

  • Component Integration: Replaces raw HTML with pre-defined UI components from packages/ui/src/components/ui/.
  • Semantic Coloring: Migrates primitive Tailwind color classes to semantic DaisyUI color tokens for better theming.
  • Style Extraction: Identifies and suggests the extraction of repetitive styling patterns into reusable components.
  • Use Case: Refactor a legacy React page component that uses many raw div and button elements with custom Tailwind classes into a version that utilizes the project's Button and Alert components, applying semantic colors like text-error instead of text-red-500.

Quick Start

Refactor the provided React component to use existing UI components and semantic DaisyUI colors.

Frequently Asked Questions about refactor-html

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

FAQPage Schema
How do I refactor React components to use DaisyUI semantic color tokens instead of primitive Tailwind classes?▼

You can refactor React components by replacing primitive Tailwind color classes like text-red-500 with semantic DaisyUI color tokens such as text-error. This migration improves theming consistency and maintainability across your TSX files by standardizing the color palette.

What is the best way to replace raw HTML elements in TSX with existing UI components?▼

The best way to replace raw HTML elements in TSX is to substitute them with pre-defined UI components from your project library. This refactoring process updates legacy React pages by swapping custom div and button elements for standardized library equivalents like Button and Alert.

Can I extract repeated Tailwind styling patterns into reusable React components?▼

Yes, you can extract repeated Tailwind styling patterns into reusable React components. The refactoring process identifies repetitive styling structures in your TSX files and suggests extracting them into dedicated UI components to reduce code duplication and enhance maintainability.

Does this refactoring process work with both HTML and TSX files?▼

Yes, this refactoring process works with both HTML and TSX files, specifically targeting React and TSX page components. It modernizes these files by adopting existing UI components, integrating DaisyUI classes, and applying semantic color tokens for better UI quality.

When do I need to modernize React codebases with UI component integration?▼

You need to modernize React codebases with UI component integration when legacy page components rely heavily on raw HTML elements and custom Tailwind classes. Refactoring ensures consistency with project standards, improves maintainability, and enhances the overall user interface quality.

Related Skills

Explore More Software Engineering Skills→
AbdullahMalik17AbdullahMalik17
9

styling-with-shadcn

Set up shadcn/ui components, forms, and dark mode in Next.js projects.

Community
Intermediate
PrasadTelasulaPrasadTelasula

component-testing

Test React components with React Testing Library and Playwright for frontend correctness.

Community
Intermediate
Higashi-KotaHigashi-Kota

theme-to-component-migration

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

Community
Intermediate
viably-labsviably-labs

design-to-tailwind

Convert Figma, Sketch, and Penpot designs into semantic Tailwind HTML structures.

Official
Intermediate