chameleonlisted

Generate or retrofit HTML files to use the Chameleon theme contract — semantic CSS variables and Tailwind-shaped utility classes. Two modes: `generate` produces new themable HTML; `convert` retrofits existing files via dry-run color-to-role mapping. Triggers on: "make this themable", "chameleon-ify", "create a themable HTML", "apply the chameleon theme", "themable HTML artifact", "Chameleon", "html-chameleon".
churin1116/html-chameleon · ★ 2 · Web & Frontend · score 76

Install: claude install-skill churin1116/html-chameleon

# Chameleon Skill This skill helps Claude generate or retrofit HTML to use the [html-chameleon](https://github.com/churin1116/html-chameleon) theme contract. ## When to use Activate when the user asks to: - Create a themable HTML artifact / page / report - Add dark mode support to existing HTML - Refactor hardcoded colors out of an HTML file - Make any HTML "respond to a theme picker" ## Pair with `frontend-design` Chameleon enforces the *theming contract* — semantic variables, utility classes, no hex literals. It does **not** automatically produce a *distinctive* design. For anything the user wants to "look good" (reports, dashboards, landing pages, artifacts they'll share), invoke the `frontend-design` skill first for aesthetic direction (tone, typography, spatial composition, anti-AI-slop patterns), then translate every decision into Chameleon variables and classes. `prompts/generate.md` § Design quality distills the editorial-style patterns (eyebrow + `<hr>` + serif heading, mono captions, paper cards with no shadow, soft tints via `color-mix`) into a copy-pasteable reference implementation. Use it as the default starting point. ## Two modes ### Mode 1: `generate` — new HTML Default when the user is creating something new ("make me an HTML report", "create an artifact for X", "build a dashboard"). Always emit: ```html <!DOCTYPE html> <html data-theme="light" data-style="default"> <head> <meta name="chameleon" content="v1"> <link rel="stylesheet" href="http