Markup Detox
Clean up bloated div soup into proper semantic HTML
Figma-to-code plugins, page builders, and AI code generators produce deeply nested div soup with inline styles and zero semantic meaning. This recipe takes bloated HTML and refactors it into clean, semantic, accessible markup.
PROMPT
Create a skill called "Markup Detox". When I give you HTML (pasted, as a file, or from a URL), refactor it into clean, semantic HTML5. Replace meaningless divs with proper elements: nav, main, article, section, aside, header, footer, figure, figcaption. Fix heading hierarchy to be sequential. Add ARIA landmarks and attributes where needed. Reduce nesting depth dramatically. Extract inline styles into a clean stylesheet. Apply a consistent CSS class naming convention (let me choose: BEM, utility classes, or custom). The refactored HTML must produce visually identical output to the original. Generate a before/after report: DOM depth, total elements, semantic element count, accessibility score improvement, and file size change. Preserve all functionality (event handlers, form behavior, links).
How It Works
Paste in (or point to) messy HTML — from Figma exports, page builder
output, AI-generated code, or legacy projects — and your Claw refactors
it into clean semantic HTML5. Proper elements (nav, main, article, section,
aside, figure), minimal nesting, ARIA attributes where needed, and your
choice of CSS class naming convention.
What You Get
- Semantic HTML5 elements replacing meaningless divs
- Proper heading hierarchy (h1 → h2 → h3)
- ARIA landmarks and attributes where needed
- Dramatically reduced nesting depth
- CSS class naming in your preferred convention (BEM, utility, custom)
- Inline styles extracted to a clean stylesheet
- Preserved visual output — it should look identical after refactoring
- A before/after comparison: DOM depth, element count, accessibility score
Setup Steps
- Paste messy HTML or point to a file/URL
- Choose a CSS naming convention (default: BEM)
- Your Claw refactors the markup
- Review the before/after comparison
- Replace the original markup
Tips
- The visual output is preserved — only the code quality changes
- Run an accessibility audit before and after to see the improvement
- Particularly useful for cleaning up WordPress page builder output (Elementor, Divi)
- Pair with Component Kickstart for new components and Markup Detox for cleaning existing ones
- The before/after metrics make a compelling case for clean code if you need to justify the time