Agent Skills

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

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.
Hero only. No header, nav, footer, badges, cookie bars. One full-bleed 1280×640 hero section: headline, optional subline/CTA, brand background.
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.
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.
Front-end quality bar. Build the markup per the frontend skill: real typography scale, brand tokens as CSS variables, no layout hacks.

Workflow

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.
Lay out hero.html (standalone file, fixed 1280×640 viewport): ```html <!doctype html>
- { margin:0 } body { width:1280px; height:640px; overflow:hidden } .hero { width:100%; height:100%; box-sizing:border-box; padding:40pt; display:flex; flex-direction:column; justify-content:center; gap:16pt; background:linear-gradient(90deg, var(–brand-a) 50%, var(–brand-b) 50%); }
</style></head>

…

</html> ``` Solid background preferred over transparency; hard color stops are fine, keep text contrast ≥ WCAG AA.
Render to PNG:
```
python3 scripts/render_social_preview.py hero.html --out og.png
```
Headless Chrome renders real web layout pixel-perfectly (webfonts included).
Verify: exactly 1280×640, < 1 MB, nothing clipped at the edges, text readable at thumbnail size. Re-render if any check fails.
Upload manually: Settings → Social preview → Edit → Upload (no API).

Requirements (GitHub)

File in root / docs/ / default branch; format PNG/JPG/GIF; < 1 MB; minimum ≥ 640×320, recommended 1280×640.
Transparency is supported but a solid background is recommended.
For GitHub Pages OG tags, see references/social-preview.md.

Anti-patterns

Drawing the preview with Pillow/composed SVG instead of typesetting HTML.
Screenshotting the live site (header/footer/badges leak into the shot).
Content touching the canvas edges (violates the 40pt crop-safe zone).
Oversized file (> 1 MB) or too small (< 640×320).
Overwriting an existing preview without explicit request.

Boundaries

Do not use to rewrite README content or repository metadata.

Evidence and completion gate

Run the documented command against the user’s actual input. Report the command, exit status, files changed or produced, and relevant stdout/stderr. Separate blocked or pre-existing failures from failures introduced by the current work. Do not call the result complete when the script was only described or when an artifact was not reopened and checked.

This site is open source. View this page on GitHub.