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.
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).
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.
Describe a component, get production-ready accessible HTML/CSS/JS back
Contact forms, nav menus, card layouts, hero sections, pricing tables — designers rebuild these from scratch every project. This recipe generates production-ready, accessible components with your project's design tokens already applied.
Modern designs in, battle-tested table-layout HTML email out
HTML email development is universally the most hated task in web design. Outlook uses Word's rendering engine. Gmail strips your style tags. This recipe converts your design into bulletproof table-based email HTML that works everywhere — including dark mode.
From "I need help" to a complete request kit
The accommodations process can feel overwhelming — unclear forms, vague documentation requirements, and the stress of self-advocacy. This skill maps your barriers to specific accommodations, builds a document checklist, and drafts the outreach emails so you can focus on school, not paperwork.
Write alt text fast, correctly, and consistently
Generates accurate alt text for images and carousels across any platform that supports it (Instagram, X, LinkedIn, Pinterest, Facebook). Improves accessibility, boosts search discoverability, and reduces creator friction with a reusable style guide.