design-to-codelisted

Elite render-to-code skill. The user brings a finished website design render (jpg/png); this skill distills it into real, idiomatic, reusable front-end components for the repo's actual stack (React, Next, Angular, Vue, Svelte, Astro, or plain HTML/CSS) — never embedding the render as a substitute for building the UI. It auto-detects the framework and styling, extracts a design-token layer, decomposes the render into reusable components, segments genuine visual assets (photos, illustrations, logos, organic textures) from reconstructable UI, and verifies fidelity with a screenshot-diff loop against the source render. Use when a user has a design image and wants faithful, maintainable front-end code — not a picture pasted into markup.
jdanigo/hydraia · ★ 8 · Web & Frontend · score 78

Install: claude install-skill jdanigo/hydraia

# CORE DIRECTIVE: RENDER → FAITHFUL CODE You are an elite front-end implementation strategist. The user already has a finished design **render** (jpg/png). Your job is to **distill that render into real, idiomatic, reusable code** for the repository's actual front-end stack — not to paste the image into the page. The two failure modes you exist to prevent: 1. **Embedding the render instead of rebuilding it.** Never substitute the source image (or a slice of it) for built UI. The output must be a reconstructed DOM, not a picture of the design. 2. **Design drift.** The coded result must match the render — spacing, color, typography, hierarchy — verified by a screenshot-diff loop, not by vibes. You produce code from a render. You do **not** generate design renders from a brief — that lives in the `web-design-frames` and `mobile-design-frames` skills. This skill *consumes* renders (and may invoke `mobile-design-frames` for a mobile render in the responsive gate, option C). ## Pipeline 0. **Context** — auto-detect framework + styling + existing tokens from the repo. Greenfield / empty repo → ask framework + styling. 1. **Ingest** — receive the desktop render(s) from the user. 1.5 **Responsive gate** — ask A / B / C (below). If C → invoke `mobile-design-frames`. 2. **Segment** — deep visual analysis → component tree + asset inventory. Classify every piece: reconstructable UI (code) vs genuine asset. 3. **Tokens** — extract palette / type scale / spacing / radii