repo-cover
Design a GitHub social-preview card (og:image, 1280x640) for a repository. Use when the user asks for a social preview, repo cover, og image, link card, opengraph image, or README hero. Five editorial moods (editorial, poster, blueprint, gallery, terminal), CJK-first typography, one self-contained HTML file, deterministic checks, crisp PNG export. No image model needed.
The English summary is being prepared. Showing the original description.
Run score Not tested
See how to installFiles included (37)
- SKILL.md4.4 KB
- .npmignore35 B
- assets/examples/banner-repo-cover.html1.6 KB
- assets/examples/banner-repo-cover.png24.2 KB
- assets/examples/blueprint-macos-harness.html3.0 KB
- assets/examples/blueprint-macos-harness.png54.0 KB
- assets/examples/editorial-chinese.html2.3 KB
- assets/examples/editorial-chinese.png50.1 KB
- assets/examples/editorial-deepseek-harness.html8.1 KB
- assets/examples/editorial-deepseek-harness.png60.9 KB
- assets/examples/editorial-japanese.html2.3 KB
- assets/examples/editorial-japanese.png46.5 KB
- assets/examples/editorial-korean.html2.4 KB
- assets/examples/editorial-korean.png47.3 KB
- assets/examples/editorial-red-handed.html2.3 KB
- assets/examples/editorial-red-handed.png40.9 KB
- assets/examples/editorial-repo-cover.html2.4 KB
- assets/examples/editorial-repo-cover.png57.7 KB
- assets/examples/gallery-cumora.html1.8 KB
- assets/examples/gallery-cumora.png34.5 KB
- assets/examples/poster-archify.html2.0 KB
- assets/examples/poster-archify.png44.0 KB
- assets/examples/poster-openlogi.html2.0 KB
- assets/examples/poster-openlogi.png47.2 KB
- assets/examples/terminal-freeze.html2.2 KB
- assets/examples/terminal-freeze.png33.7 KB
- references/avatar.md754 B
- references/banner.md1.2 KB
- references/brand-accent.md1.1 KB
- references/cjk.md1.3 KB
- references/export.md1.5 KB
- references/mood-blueprint.md2.0 KB
- references/mood-editorial.md2.1 KB
- references/mood-gallery.md1.4 KB
- references/mood-poster.md1.6 KB
- references/mood-terminal.md1.4 KB
- scripts/check_card.py4.2 KB
SKILL.md (original)
Review the instructions the agent will receive before you install.
repo-cover
You design one 1280x640 social-preview card as a single self-contained HTML file. You write the HTML yourself. There is no image model and no build step. Quality comes from following the numbers below exactly.
Workflow
- Gather facts. Gather the owner, name, description,
primary language, license (use the
spdx_id). Prefergh api repos/<owner>/<name>or the local checkout. Never invent a star count or license. - Rewrite the description. The card line is not the GitHub description verbatim. Compress it to one or two sentences, max 110 characters with a 60-character maximum for CJK, concrete nouns, and no marketing adjectives. Show the user your line before rendering if they are present; in a non-interactive run, proceed and include the line in your report.
- Pick a mood. Default
editorial. Offer the other four only if the user asks for options. Read exactly ONE mood reference and ONE example from this list.references/mood-editorial.md+assets/examples/editorial-red-handed.htmlreferences/mood-poster.md+assets/examples/poster-archify.htmlreferences/mood-blueprint.md+assets/examples/blueprint-macos-harness.htmlreferences/mood-gallery.md+assets/examples/gallery-cumora.htmlreferences/mood-terminal.md+assets/examples/terminal-freeze.htmlDo not read renderer-free files "for context". Two files, then write. For a README hero banner instead of a card, readreferences/banner.md(1280x320, editorial language).
- Write
<repo>-cover.html. Copy the example's skeleton, replace content, apply the mood's rules. If the description or repo name contains CJK text, also readreferences/cjk.mdfirst. - Check. Run
python3 scripts/check_card.py <file>. Fix every FAIL, re-run, stop after two repair rounds and report remaining failures honestly. - Export. Follow
references/export.mdfor the PNG and where to upload it (GitHub Settings → Social preview). If the user wants the card to update itself, point them to the bundled GitHub Action.
Hard rules (all moods)
- Canvas exactly 1280x640. Margins are 88px, or 96px for blueprint.
- Follow the mood reference's numbers exactly. When you invent a coordinate the reference does not give, snap it to a 4px grid.
- ONE accent color per card, used only in the places the mood reference
names. The default is the repo's primary-language color, darkened until it
passes 4.5:1 contrast against the background (
check_card.pyverifies). For a docs repo with no primary language, use a brand color the user names, or slate#46627Fin one-shot runs. For brand colors readreferences/brand-accent.md. - Fonts only from Google Fonts. Use Fraunces, IBM Plex Mono, or Noto Sans KR/JP/SC. Real fallback stacks always.
- Title size follows name length. Use <=9 chars 132px, <=14 108px, <=20 92px, <=26 74px, longer 64px and allow two lines broken at a hyphen.
- Keep the description to 2 lines. Do not allow mid-word hyphen breaks. Wrap compound
words in
white-space:nowrapspans. - Star counts are OFF by default. They go stale and embarrass small repos. Only include when the user explicitly asks; then format with thousands separators.
- The meta row shows what exists, either language or license. If both are missing, the single item is the repo URL without protocol.
- Owner avatar is optional. If used, inline it as a base64 data URI
(
references/avatar.md) so the file stays self-contained. - Never use box-shadow, drop-shadow, glassmorphism, gradients except the blueprint grid lines), emoji, more than 2 typefaces + 1 mono, dark background with neon cyan glow, centered Inter on a purple gradient.
What this is not
- Not a screenshot beautifier, not a logo generator, not a slide tool.
- The card is a static file. Freshness comes from re-rendering (the bundled Action), not from live data.
- If the user wants diagrams, recommend a diagram skill instead.
Reviews
No reviews yet. Tell others what you thought.
Comments
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.