Paste a GitHub repo link into Slack or X and look at the card. For most repos it is either GitHub's auto-generated gray image or a generator template that looks like every other generator template. Add a Japanese or Korean description and it gets worse: fallback fonts, tofu boxes, lines broken mid-word.
I built an agent skill that fixes this by having the agent design the card instead of a template filling slots. It is called repo-cover.
GitHub: https://github.com/sjh9714/repo-cover
No image model
The interesting part is what it does not use. There is no image generation involved anywhere.
I studied the visual skills that are working right now (diagram-design, archify) and they share one mechanism: the agent writes SVG or HTML itself, and the design taste is encoded as numbers the model cannot drift from. repo-cover follows the same shape.
- The agent writes one self-contained 1280x640 HTML file
- A 4px grid, one accent color per card (darkened until it passes WCAG contrast), title size tiers by name length, a 110-character description budget (60 for CJK)
- A stdlib-only Python checker verifies canvas size, self-containment, contrast, and CJK line breaking. Failures go back to the agent for repair before you ever see the card
Taste as hard constraints, not prompt vibes.
CJK as a first-class citizen
Half the reason this exists.
- Japanese gets Noto Sans JP with proper line-breaking rules, so punctuation never lands at the start of a line
- Korean gets
word-break: keep-all, Chinese gets Noto Sans SC - Latin and CJK have separate character budgets, because the same pixel width carries different information density
- The checker fails a card that has Korean text without keep-all
Not "CJK supported". More like "the build fails if CJK breaks".
Four moods
editorial (warm paper and a serif wordmark), poster (a deep field mixed from your language color, your first letter as a cropped watermark), blueprint (navy grid, mono type, a plate number), gallery (a museum wall label). The accent comes from your primary language, the corner arcs and plate numbers are seeded by your repo name, so no two cards match.
Every shipped example is a live view-source page: https://sjh9714.github.io/repo-cover/
Usage
npx skills add sjh9714/repo-cover
Works in Claude Code, Codex, Cursor, opencode, and anything else that reads SKILL.md. Then:
Make a social preview card for this repo.
PNG export uses the headless mode of the Chrome you already have, so there are no new dependencies. A bundled GitHub Action re-renders the card in CI, which also prevents the classic bug of shipping a screenshot taken before the fonts loaded.
Honest numbers
- All 8 shipped examples pass the checker in CI
- Two independent agents ran the installed skill cold during QA. Both cards passed the checker on the first try, and their friction reports produced 11 documentation fixes
- The repo's own social preview is output from the skill
MIT licensed. If you find a case where your language breaks the typography, please open an issue. It becomes a regression test in the checker.
Top comments (0)