← ClaudeAtlas

repo-visualslisted

Create hero visuals — animated GIF, static PNG, or animated SVG — for GitHub repositories. Runs a structured discovery conversation (scan repo → recommend format → propose creative scenarios → agree on a brief), then designs bespoke HTML/SVG, previews it in the browser, and exports. Use when the user asks for a README hero, repo banner, README image, GitHub header, social preview card, repo demo GIF, hero image, OG image, project screenshot, repository showcase, or any "image at the top of the README".
livlign/claude-skills · ★ 18 · Code & Development · score 76
Install: claude install-skill livlign/claude-skills
# repo-visuals Turn a repo (GitHub URL, local folder, or free-text brief) into a hero visual that a viewer sees at the top of the README and instantly understands *what this project does and why it's interesting*. The hero may be an **animated GIF**, a **static PNG**, or an **animated SVG** — the skill recommends one based on the repo's identity, the user picks. The skill's quality comes from the **discovery dialog**, not from templates. Every hero is bespoke. ## Phases 1. **Discovery** — pick operating mode (Auto / Semi-auto / Manual, §1.1a), scan the repo, summarize findings, recommend a format (animated vs static), ask about vibe/audience/hero moment, propose 2–3 scenarios, converge on a brief. Then **Gate A — brief vs README** (§1.8): narrow repo-context check on the brief before any pixels exist. The mode controls *how many* of these the user answers vs. Claude decides silently — it does not skip any of the craft checks. 2. **Build** — write HTML/CSS/JS for the chosen scenario. For static, design one decisive frame; for animated, a loop. No storyboard step. Then **Gate B — rendered HTML vs README** (§2.6): sample keyframes from the HTML, check what's on screen against the repo's own positioning, allow 1 auto-iteration if it fails. Both gates are deliberately narrow — only repo-context fidelity, not aesthetics or craft. 3. **Preview & iterate** — open the HTML in the user's default browser, iterate in text until the user says ship. 4. **Export** — animated GIF → Puppe