refactor-html
Refactor HTML/TSX files to use existing UI components, DaisyUI classes, and semantic colors. Use when (1) refactoring React/TSX page components to use reusable UI components, (2) replacing raw HTML elements with component library equivalents, (3) converting primitive Tailwind colors to semantic DaisyUI colors, (4) extracting repeated styling patterns into components.
Best use case
refactor-html is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Refactor HTML/TSX files to use existing UI components, DaisyUI classes, and semantic colors. Use when (1) refactoring React/TSX page components to use reusable UI components, (2) replacing raw HTML elements with component library equivalents, (3) converting primitive Tailwind colors to semantic DaisyUI colors, (4) extracting repeated styling patterns into components.
Teams using refactor-html should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/refactor-html/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How refactor-html Compares
| Feature / Agent | refactor-html | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Refactor HTML/TSX files to use existing UI components, DaisyUI classes, and semantic colors. Use when (1) refactoring React/TSX page components to use reusable UI components, (2) replacing raw HTML elements with component library equivalents, (3) converting primitive Tailwind colors to semantic DaisyUI colors, (4) extracting repeated styling patterns into components.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
Related Guides
SKILL.md Source
# Refactor HTML/TSX Refactor page components to follow project conventions: use existing UI components, DaisyUI classes, and semantic colors. ## Rules ### 1. Use Existing Components Replace raw HTML with UI components from `packages/ui/src/components/ui/`. See [components.md](references/components.md) for available components and their props. | Before | After | |--------|-------| | `<div className="alert alert-error">` | `<Alert variant="error">` | | `<button className="btn btn-primary">` | `<Button variant="primary">` | | `<input className="input input-bordered">` | `<Input />` | | `<select className="select select-bordered">` | `<Select />` | | `<fieldset className="fieldset">` | `<Fieldset>` | | `<span className="loading loading-spinner">` | `<Loading />` | ### 2. Use Semantic Colors Replace primitive colors with DaisyUI semantic colors: | Primitive (NG) | Semantic (OK) | |----------------|---------------| | `text-red-*` | `text-error` | | `text-blue-*` | `text-primary` | | `text-green-*` | `text-success` | | `bg-gray-100` | `bg-base-100` | | `border-gray-*` | `border-base-300` | ### 3. Extract Repeated Styles When styling patterns repeat (e.g., `border-t border-base-300 pt-6`), consider extracting to a component. ## Workflow 1. Read target file 2. Check available components in `packages/ui/src/components/ui/` 3. Identify rule violations 4. Apply refactoring with Edit tool 5. Add necessary imports 6. Report changes made
Related Skills
tdd-workflows-tdd-refactor
Use when working with tdd workflows tdd refactor
skill-refactor
Reviews and refactors an existing skill against quality standards. Use when asked to review, audit, improve, or refactor a skill. Triggers on phrases like "refactor this skill", "review my skill", "improve skill quality", "audit skill-name", "clean up my skill". Do NOT use to create a new skill from scratch.
refactorer-view
A front end staff engineer and UX designer, who refactors and simplifies the user interfaces with the best of user experience patterns.
refactor
Plan vault restructuring from config changes. Compares config.yaml against derivation.md, identifies dimension shifts, shows restructuring plan, executes on approval. Triggers on "/refactor", "restructure vault".
refactor-skill
Assess and refactor oversized or multi-domain skills. First determines whether splitting or references/ extraction is appropriate — then executes the correct action. Use when a skill exceeds token thresholds (SK006/SK007) or covers multiple independent domains. Performs candidate assessment before any structural changes; cohesive single-intent skills are redirected to references/ extraction instead of splitting. When splitting is warranted — domain analysis gate, split plan, new SKILL.md generation, validation, and backwards-compatible facade conversion.
moonbit-refactoring
Refactor MoonBit code to be idiomatic: shrink public APIs, convert functions to methods, use pattern matching with views, add loop invariants, and ensure test coverage without regressions.
html-tools
This skill should be used when building single-file browser applications, client-side utilities, or interactive tools that need no backend. Covers patterns for state persistence, API integration, and advanced browser capabilities without React or build steps.
html-to-image-automation
Automate Html To Image tasks via Rube MCP (Composio). Always search tools first for current schemas.
html-injection-testing
This skill should be used when the user asks to "test for HTML injection", "inject HTML into web pages", "perform HTML injection attacks", "deface web applications", or "test conten...
html-css-style-color-guide
Color usage guidelines and styling rules for HTML elements to ensure accessible, professional designs. Triggers on: **/*.html, **/*.css, **/*.js
dotnet-to-react-python-refactor
Agent skill for refactoring .NET applications into a React frontend + Python backend. Use for migrating/modernizing .NET apps (ASP.NET MVC, Web API, Blazor, Web Forms) to React + Python, or analyzing .NET codebases for migration planning.
code-refactoring-tech-debt
You are a technical debt expert specializing in identifying, quantifying, and prioritizing technical debt in software projects. Analyze the codebase to uncover debt, assess its impact, and create acti