repo-social-preview

# Repo Social Preview — og:image as a typeset hero section The social preview is **a piece of web design, not a generated raster**. Lay out a clean hero section in HTML/CSS, render it with headless Chrome, upload the PNG. ## Hard rules 1. **Typeset HTML — never compose pixels.** No Pillow drawing, no self-made SVG shapes, no site screenshots. The deliverable is a standalone `hero.html`. Existing assets from the site (logo URL, brand fonts) may be referenced; do not draw new ones. 2. **Hero only.** No header, nav, footer, badges, cookie bars. One full-bleed 1280×640 hero section: headline, optional subline/CTA, brand background. 3. **40pt padding on all sides** (`padding: 40pt`). This is the GitHub crop-safe hint: essential text and logos must stay inside it — share previews crop edges. 4. **Site is the source of truth.** If the repo has a website with a hero section, re-typeset *that* hero: its headline, subline, palette, typeface. Do not invent a different design; do not embed an iframe or screenshot of it. 5. **Front-end quality bar.** Build the markup per the `frontend` skill: real typography scale, brand tokens as CSS variables, no layout hacks. ## Workflow 1. **Collect source material** - Website exists → fetch it, extract the hero: headline, subline, CTA text, colors, fonts, logo URL. - No website → build from README/description: repo name + one-line value prop. 2. **Lay out `hero.html`** (standalone file, fixed 1280×640 viewport)...