Agent skill

article-cover

Generate professional article cover images as SVG files. Use when user wants to create cover/banner images for blog posts, technical articles, or documentation. Creates visually appealing covers with titles, diagrams, and tech-themed graphics.

View SKILL.md on GitHub Repository

Stars 6

Forks 1

Install this agent skill to your Project

npx add-skill https://github.com/acking-you/myclaude-skills/tree/main/skills/article-cover

SKILL.md

Article Cover SVG Generation

Generate professional, visually striking article cover images in SVG format for technical blogs, documentation, and articles.

Critical Rules

ViewBox Standard: Use viewBox="0 0 1200 630" (social media friendly 1.91:1 ratio)
Text Readability (MUST follow):
- Main title: 44-48px, bold, high contrast
- Subtitle: 28-32px, white or light color
- Labels/tags: 14-16px
- Never use fonts smaller than 11px
Background Design:
- Always use gradient backgrounds (avoid flat solid colors)
- Dark tech themes: #0d1117 → #161b22 (GitHub dark style)
- Add subtle grid patterns or decorative elements for depth
Visual Hierarchy:
- Title area: bottom 1/3 of the image (y: 420-540)
- Diagram/illustration area: top 2/3 (y: 80-400)
- Tags/labels: bottom edge (y: 550-600)
Color Contrast: Ensure text is readable against backgrounds
- Light text on dark backgrounds
- Use gradients for emphasis (orange/yellow for tech, blue/cyan for data)

Design Patterns

Tech Article Cover (Comparison Layout)

Best for: Performance comparisons, version upgrades, before/after scenarios

┌─────────────────────────────────────────────────┐
│  [Logo]                           [Badge: 100x+]│
│                                                 │
│  ┌─────────┐    VS    ┌─────────┐    ┌────────┐│
│  │ Before  │  ────►   │ Middle  │ ►  │ After  ││
│  │  ❌     │          │   ⚠     │    │   ✓    ││
│  └─────────┘          └─────────┘    └────────┘│
│                                                 │
│         Main Title (Large, Gradient)            │
│           Subtitle (Medium, White)              │
│                                                 │
│    [Tag1]  [Tag2]  [Tag3]  [Tag4]  [Tag5]      │
└─────────────────────────────────────────────────┘

Tech Article Cover (Flow Layout)

Best for: Process explanations, architecture overviews

┌─────────────────────────────────────────────────┐
│  [Logo]                                         │
│                                                 │
│  [Input] ──► [Process Box] ──► [Output]         │
│     │            │                │             │
│     └────────────┴────────────────┘             │
│                                                 │
│         Main Title (Large, Gradient)            │
│           Subtitle (Medium, White)              │
│                                                 │
│    [Tag1]  [Tag2]  [Tag3]  [Tag4]              │
└─────────────────────────────────────────────────┘

Color System

Purpose	Background	Stroke/Text	Use Case
Negative/Before	`#1c2128`	`#dc3545`	Problems, old version
Warning/Transition	`#1c2128`	`#ffcc02`	Partial solution, v1
Positive/After	`#1c2128`	`#00f2fe`	Solution, new version
Success	`#22863a`	`#22863a`	Checkmarks, improvements
Accent	`#ff6b35` → `#ffcc02`	gradient	Titles, highlights

SVG Template

svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630">
  <defs>
    <!-- Background gradient -->
    <linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#0d1117"/>
      <stop offset="100%" style="stop-color:#161b22"/>
    </linearGradient>
    <!-- Title gradient (orange/yellow for tech) -->
    <linearGradient id="titleGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#ff6b35"/>
      <stop offset="100%" style="stop-color:#ffcc02"/>
    </linearGradient>
    <!-- Glow effect for emphasis -->
    <filter id="glow">
      <feGaussianBlur stdDeviation="2" result="coloredBlur"/>
      <feMerge>
        <feMergeNode in="coloredBlur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>

  <!-- Background -->
  <rect width="1200" height="630" fill="url(#bgGradient)"/>

  <!-- Top accent bar -->
  <rect x="0" y="0" width="1200" height="5" fill="url(#titleGradient)"/>

  <!-- Logo area (top-left) -->
  <g transform="translate(50, 30)">
    <!-- Logo elements here -->
  </g>

  <!-- Main illustration area (center) -->
  <g transform="translate(600, 220)">
    <!-- Diagram/comparison elements here -->
  </g>

  <!-- Main title -->
  <text x="600" y="450" fill="url(#titleGradient)"
        font-family="Arial, sans-serif" font-size="46"
        text-anchor="middle" font-weight="bold">
    Article Title Here
  </text>

  <!-- Subtitle -->
  <text x="600" y="510" fill="#fff"
        font-family="Arial, sans-serif" font-size="28"
        text-anchor="middle">
    Subtitle or Description
  </text>

  <!-- Bottom tags -->
  <g transform="translate(600, 580)">
    <!-- Tag pills here -->
  </g>
</svg>

Element Templates

Comparison Box (with status icon)

svg

<g transform="translate(X, Y)">
  <rect x="0" y="0" width="300" height="180" rx="10"
        fill="#1c2128" stroke="#COLOR" stroke-width="2"/>
  <text x="150" y="30" fill="#COLOR" font-size="17"
        text-anchor="middle" font-weight="bold">ICON Title</text>
  <!-- Content here -->
</g>

Status icons: ❌ (negative), ⚠ (warning), ✓ (positive)

Performance Badge

svg

<g transform="translate(X, Y)">
  <rect x="-60" y="-25" width="140" height="50" rx="25"
        fill="#00f2fe" opacity="0.15" stroke="#00f2fe" stroke-width="2"/>
  <text x="10" y="8" fill="#00f2fe" font-size="28"
        text-anchor="middle" font-weight="bold">100x+</text>
</g>

Tag Pill

svg

<rect x="X" y="-22" width="100" height="36" rx="18"
      fill="transparent" stroke="#COLOR" stroke-width="2"/>
<text x="X+50" y="4" fill="#COLOR" font-size="14"
      text-anchor="middle" font-weight="bold">TagName</text>

Arrow (with label)

svg

<g transform="translate(X, Y)">
  <path d="M 0 0 L 35 0" stroke="#COLOR" stroke-width="3" fill="none"/>
  <polygon points="35,0 25,-6 25,6" fill="#COLOR"/>
</g>

Data Bar (for showing proportions)

svg

<rect x="X" y="Y" width="WIDTH" height="12" rx="2"
      fill="#COLOR" opacity="0.8"/>

Workflow

Understand the article: What's the main topic? Is it a comparison, tutorial, or overview?
Choose layout pattern:
- Comparison → Use 2-3 column comparison layout
- Process/Flow → Use flow diagram layout
- Single concept → Use centered illustration
Extract key elements:
- Main title (keep concise, 10-15 Chinese chars or 5-8 English words)
- Subtitle (descriptive, can be longer)
- Key metrics (performance numbers, version info)
- Tags (3-5 relevant keywords)
Design the illustration:
- Use simple shapes (rectangles, arrows)
- Show the core concept visually
- Use color to differentiate states/versions
Generate SVG: Follow the template, ensure all text is readable

Output

Filename: {article-slug}-cover.svg
Location: Same directory as the article or assets/ folder
Tell user: Can be opened in browser, converted to PNG via Inkscape/browser screenshot

Tips

Chinese text: Use font-family="Arial, sans-serif" which has good CJK support
Emphasis: Use filter="url(#glow)" sparingly on key elements
Spacing: Keep 20-40px padding around text elements
Testing: Open SVG in browser to verify rendering before finalizing

Maintainer

acking-you Core maintainer

Source details

Full Name: acking-you/myclaude-skills
Branch: main
Path in repo: skills/article-cover

Featured Tools

Join Our Newsletter

Stay updated with the latest AI tools, news, and offers by subscribing to our weekly newsletter.

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

acking-you/myclaude-skills

github-wrapped

Generate a verifiable GitHub Wrapped year-in-review as a single-file HTML (raw gh API JSON saved, Python-built dataset embedded), with a Bilibili-style narrative, smooth transitions, and mobile-friendly paged mode. Requires gh CLI to be authenticated.

6 1

Explore

acking-you/myclaude-skills

codex-session-history

Search Codex local session history stored in SQLite and session_index.jsonl. Use this skill when the user wants to list, search, filter, or inspect locally saved Codex sessions by session id, provider, time range, preview text, thread name, or archived status.

6 1

Explore

acking-you/myclaude-skills

tech-impl-doc

Write precise technical implementation docs (developer or user) with clear structure, accurate flows, render-safe Mermaid diagrams, and audience-appropriate detail; avoid boilerplate; include a meaningful Code Index for developer docs.

6 1

Explore

acking-you/myclaude-skills

gemini-image

Generate images using AI when user wants to create pictures, draw, paint, or generate artwork. Supports text-to-image and image-to-image generation.

6 1

Explore

acking-you/myclaude-skills

excalidraw

Generate hand-drawn style diagrams (architecture, flowcharts, system design) as .excalidraw.json files. Use when user wants diagrams, mentions Excalidraw, or needs Mermaid-to-visual conversion.

6 1

Explore

acking-you/myclaude-skills

research

Structured web research with multi-source validation. Output reports with complete citation links. Focus on key results, verify information quality.

6 1

Explore

Didn't find tool you were looking for?

Search AI Tools

Install this agent skill to your Project

SKILL.md

Article Cover SVG Generation

Critical Rules

Design Patterns

Tech Article Cover (Comparison Layout)

Tech Article Cover (Flow Layout)

Color System

SVG Template

Element Templates

Comparison Box (with status icon)

Performance Badge

Tag Pill

Arrow (with label)

Data Bar (for showing proportions)

Workflow

Output

Tips

Recommended Agent Skills

github-wrapped

codex-session-history

tech-impl-doc

gemini-image

excalidraw

research