本文へ移動
cccskills
無料GitHub で公開

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.

インストール方法を見る

含まれるファイル(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(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

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

  1. Gather facts. Gather the owner, name, description, primary language, license (use the spdx_id). Prefer gh api repos/<owner>/<name> or the local checkout. Never invent a star count or license.
  2. 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.
  3. 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.html
    • references/mood-poster.md + assets/examples/poster-archify.html
    • references/mood-blueprint.md + assets/examples/blueprint-macos-harness.html
    • references/mood-gallery.md + assets/examples/gallery-cumora.html
    • references/mood-terminal.md + assets/examples/terminal-freeze.html Do not read renderer-free files "for context". Two files, then write. For a README hero banner instead of a card, read references/banner.md (1280x320, editorial language).
  4. 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 read references/cjk.md first.
  5. Check. Run python3 scripts/check_card.py <file>. Fix every FAIL, re-run, stop after two repair rounds and report remaining failures honestly.
  6. Export. Follow references/export.md for 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.py verifies). For a docs repo with no primary language, use a brand color the user names, or slate #46627F in one-shot runs. For brand colors read references/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:nowrap spans.
  • 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.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

このスキルの問題を報告する