본문으로 건너뛰기
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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

연동 도구GitHub

실행 점수 미검증

설치 방법 보기

포함된 파일(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.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

이 스킬의 문제 신고