social-previewlisted

Generate a GitHub social preview image (1280×640 PNG) for the current repo. Builds a throwaway social-preview.html styled after the project's own look (webapp theme colors, fonts, layout) with a minimal tagline from the README, screenshots it with headless Chrome, and iterates with the user until approved. Use when the user asks for a social preview, OG image, open-graph image, or repo card image.
y-a-v-a/skills · ★ 0 · Web & Frontend · score 67

Install: claude install-skill y-a-v-a/skills

# Social preview generator Produce `social-preview.png` (exactly 1280×640) in the repo root, ready for manual upload at GitHub → repo **Settings → General → Social preview**. There is no API for that upload — always end by reminding the user to do it by hand. ## 1. Gather material - Read `README.md` (and `package.json` description or similar) to learn what the project is. Distill a **very short tagline** — one line, roughly ≤ 60 characters. The project name comes from the repo/package name unless the README uses a nicer display name. - Detect whether this is a webapp: look for `public/`, `index.html`, stylesheets, framework configs, templates. If so, read its CSS/HTML for **theme colors, fonts, and layout idioms** and echo that visual language in the card. - Only render the real app for reference if it costs nothing: a static `index.html` you can open directly, or a dev server that is already running. Never install dependencies or start builds just for this skill. - Not a webapp (CLI, library)? Fall back to a tasteful typographic card derived from the README's tone and any logo/badge assets in the repo. - **Byline name**: ask the user which name to credit via an **AskUserQuestion** tool call. Offer `git config user.name` as the recommended first option, plus a "No byline" option; the user can type any other name via "Other". Ask once, here — never re-ask during the iteration loop. ## 2. Write the throwaway HTML Write `social-preview.html` in the **s