--- name: recreate-as-raw-html description: Recreate a component, screen, or pasted code from any codebase as a single self-contained raw HTML file (Tailwind Play CDN + web fonts) that faithfully reproduces its styling, colors, spacing, and fonts. Use when the user asks for a "raw HTML recreation", an "HTML version" of a component, "make an HTML copy of X", or references a component/screen by name (e.g. "Take the and give me raw HTML"). --- # Recreate as raw HTML Turn a component, screen, or pasted snippet into **one self-contained `.html` file** that opens standalone in a browser and reproduces the original's styling as faithfully as possible. **Method: static.** Read the source and resolve its design tokens by inspection — do NOT run the app, Storybook, or a browser. Fidelity comes from carefully tracing whatever styling system the codebase uses down to concrete values, then re-expressing them in Tailwind. This works for **any codebase**. The styling system varies (Tailwind, CSS/SCSS, CSS Modules, styled-components / Emotion, vanilla-extract, a design-system library like Radix/MUI/Chakra/Mantine/shadcn, or plain inline styles). Step 2 is about identifying which one is in play and following the chain to real pixel/color/font values. ## Output contract Produce a single HTML document: - Tailwind via the Play CDN: `` - Font ``s / `@import`s in `` for the fonts the source uses - Static markup only — no React/Vue/framework, no build step. Add JS only for trivial visual behavior if the user asks; otherwise omit it. - Save as `./.html` (or next to where the user is working) and hand back the path. ## Workflow ### Step 1 — Locate the source (use subagents to explore) **First, harvest what's already in the parent agent's entire available thread context — don't re-explore what the agent already knows.** Reusable context can come from anywhere in the thread, not only this skill: previous user requests, manual exploration, earlier subagent results, pasted code, open/referenced files, or prior implementation work. Build a concise in-memory resolved context brief for the target component source, imported SVGs/design-system rendering, theme tokens/colors, fonts, and image assets. Mark each concern **complete**, **partial**, or **missing**. Only count a concern as complete when the thread contains the concrete values it needs (verbatim `` markup, concrete hex, px/rem, font families/weights, real asset paths), ideally with source-file provenance. Reuse complete concerns directly without re-reading their files merely to verify them. For partial concerns, preserve the known values and investigate only the unresolved delta. Re-explore a complete concern only when there is evidence it became stale, such as relevant files being edited later in the thread. If everything needed is already in context, skip exploration entirely and go straight to Step 2 assembly. For whatever remains partial or missing, you MUST delegate the codebase exploration to `explore` subagents via the Task tool — do not read/grep the files yourself. Subagents do not inherit the parent agent's thread context, so include the relevant resolved context brief, exact known values, and citations in every prompt, and ask only for the unresolved delta. Launch them with the `composer-2.5-fast` model (fast, read-only), fanned out concurrently in a single batch, then do the HTML assembly yourself with what they return. Split the remaining work, e.g.: - One subagent finds the target component file(s) and lists its subcomponents / styled wrappers. - One subagent **follows the component's imports into design-system/workspace packages and `node_modules`** (monorepo sibling packages, `@scope/*` packages) and, for every imported UI symbol (icons, logos, illustrations, bespoke SVG components), opens its real source and returns the **exact `` markup / asset path** — not a description. For any third-party design-system primitive (segmented control, tabs, switch, select, etc.), also read the **library's component CSS/default rendering** and return the actual default/hover/selected part styles (track color, indicator background + shadow, label colors, per-`size` padding/height/radius). - One subagent identifies the styling system and locates the theme/token definitions (`tailwind.config`, `:root`/`globals.css` CSS vars, JS theme object, or the library's palette), resolving colors from the **theme source-of-truth file** (the palette/token definition) as concrete hex. - One subagent finds the font setup, prioritizing **local font files** (`public/fonts/`, `assets/fonts/`, `@font-face` `src: url(...)`, `next/font/local`, `.woff2`/`.woff`/`.ttf`/`.otf`) and then any `@import`/``/`font-family` declarations, returning the real file paths. - One subagent finds the **real image assets** (public/static image files, imported image sources) and returns their real paths, intrinsic width/height, and any hover/state variants. Instruct each subagent to return the concrete resolved values (hex colors, px/rem, font families, weights, radii, shadows, verbatim SVG markup, asset paths) and exact file/line citations — not summaries — so you can assemble the HTML without re-reading. - Named target (e.g. a component name, or "the pricing card", "the settings sidebar") → have a subagent find the component file(s) and everything that affects appearance (subcomponents, styled wrappers, imported CSS/theme files). - Pasted code → use it directly, but still resolve any tokens, classes, or theme imports it references (delegate that lookup to a subagent). ### Step 2 — Identify the styling system and resolve to concrete values (the fidelity core) First determine how this component is styled, then trace every style down to a real value (hex color, px/rem size, font family, weight, radius, shadow). Common systems: - **Tailwind classes** → keep them verbatim where the CDN supports them. Resolve custom classes from the project's `tailwind.config` (custom colors, spacing, fonts) into the concrete value and emit as an arbitrary value (`bg-[#...]`). - **Semantic / aliased utility classes** (`bg-primary`, `text-foreground`, `border-border`, `bg-muted`, `text-accent`, common in shadcn/Tailwind theme setups) are **not literal colors** — they resolve to CSS variables (`--primary`, `--foreground`, ...) defined in `globals.css`/`:root` or `tailwind.config`. Follow them to the real value; e.g. `border-border` is usually a light gray, `text-foreground` near-black — not the accent. - **Plain CSS / SCSS / CSS Modules** → read the stylesheet; translate each rule to Tailwind utilities, or drop it into an inline ``. **Always prefer the codebase's own local font files over a Google Fonts (or other web) substitute** — a substitute only approximates the real typeface. Order of preference: 1. **Local font files (preferred whenever they exist)** → check the project for bundled fonts (`public/fonts/`, `assets/fonts/`, `src/fonts/`, `@font-face` `src: url(...)` rules, `next/font/local` declarations, `.woff2`/`.woff`/`.ttf`/`.otf` files). If found, reference them with a `@font-face` block pointing at the file. Since the output must open standalone, resolve the path so the file loads: use an absolute path to the local file (e.g. `file:///.../public/fonts/Foo.woff2`) or the project's served URL, and only copy the files next to the HTML if the user asks. Note in a comment where the fonts came from. 2. **Google Fonts** → only if the font is a Google font and no local file exists: add the matching ``. 3. **Third-party (Typekit/Adobe, etc.)** `@import url(...)` → mirror the same `@import` or `` when there's no local copy. 4. **Closest web substitute** → last resort when the real font isn't available locally or via a known service; pick the nearest match and note the substitution. 5. **System/default UI font** → for a system stack, set an explicit `font-family` on the root so it doesn't fall back to Times. Put font `@import url()` first (above other CSS). Apply the correct `font-family`, weights, sizes, and line-heights on the root and headings. ### Step 4 — Assemble the single file ```html ``` - Icons/SVGs/logo: paste the **exact `` markup copied 1:1 from source** (see Step 2) — never a guessed or closest-glyph substitute. Inline SVG is already self-contained. - Raster images (PNG/JPG/WebP/GIF): **reference the real asset in `src`** rather than inlining it, at its intrinsic width/height, preserving state variants (e.g. hover swaps). Point `src` at the real image so it resolves when the HTML is opened from its saved location — prefer a **path relative to the HTML file** (e.g. `src="public/img/foo.png"` when the HTML sits at the project root), or the **original remote URL** if the source used one. Emoji/placeholder only as an absolute last resort when no asset exists. - If the source uses many custom colors, define them once as CSS vars in the inline `