# Linkedin Article Thumbnail

> >

- **Type:** Skill
- **Install:** `agentstack add skill-lmiadowicz-claude-skills-linkedin-article-thumbnail`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [lmiadowicz](https://agentstack.voostack.com/s/lmiadowicz)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [lmiadowicz](https://github.com/lmiadowicz)
- **Source:** https://github.com/lmiadowicz/claude-skills/tree/main/linkedin-article-thumbnail

## Install

```sh
agentstack add skill-lmiadowicz-claude-skills-linkedin-article-thumbnail
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

Generate clean, editorial-style SVG graphics for articles, LinkedIn, and in-text diagrams.
Supports four output modes: article thumbnail, LinkedIn background banner, LinkedIn post graphic,
and in-text diagram. Output raw SVG wrapped in a fenced code block — no prose inside the SVG.
After rendering, ask the user if they want to adjust the tagline, layout, or accent color.

User input: $ARGUMENTS

**Flags (all optional):**
- `--type thumbnail|linkedin-bg|linkedin-post|diagram` — output mode (default: auto-detect from content)
- `--accent ` — override accent color (default: `#FFE033`)
- `--pattern A|B|C|D` — force a layout pattern (default: auto-pick)

**Auto-detect rules (when --type is omitted):**
- Mentions "background", "banner", "tło", "banner LinkedIn" → `linkedin-bg`
- Mentions "post", "grafika do posta", "square", "post graphic" → `linkedin-post`
- Mentions "diagram", "flow", "schemat", "process", "steps", arrows → `diagram`
- Everything else → `thumbnail`

The aesthetic is: **editorial magazine meets developer tooling**. Think Bloomberg Businessweek covers, not stock photo libraries.

Core rules:
- White background always (`#ffffff`)
- Black (`#111`) for all type and line elements
- One accent color only — default **yellow `#FFE033`** unless overridden
- Flat, zero gradients, zero shadows
- Two typefaces max: `Georgia, serif` for display/hero text; `sans-serif` for labels and UI; `monospace` for code/terminal
- Generous whitespace — never crowded
- Bottom tagline in small caps / letter-spacing — short and punchy (≤5 words, ALL CAPS)
- No rotated text, no emoji
- Every SVG: `role="img"` with `` and `` on root element
- All text stays within the safe area — never overflows the canvas
- SVG `` never wraps — keep all labels short enough for one line

## Thumbnail (article cover)
```
viewBox: 0 0 680 400
Safe area: x=60–620, y=40–385
Bottom rule: 
Tagline: font-size="10", y=396, letter-spacing="1"
```

## LinkedIn Background Banner
```
viewBox: 0 0 1584 396
Safe area: x=80–1504, y=30–370
Bottom rule: 
Note: left ~300px may be obscured by profile photo on desktop — keep primary content x>340
Tagline: font-size="11", y=389, letter-spacing="2"
```

## LinkedIn Post Graphic
```
viewBox: 0 0 1200 628
Safe area: x=80–1120, y=50–580
Bottom rule: 
Tagline: font-size="12", y=612, letter-spacing="2"
```

## In-text Diagram
```
viewBox: 0 0 720 auto  (height varies — set to fit content, minimum 200)
Safe area: x=40–680
No bottom tagline unless user requests one
Use clean flow arrows, boxes, and labels only
```

Use these patterns for Thumbnail and LinkedIn Post. LinkedIn Background uses a dedicated layout. Diagrams use their own rules.

### Pattern A — Split Column (default for contrast / before-vs-after / two concepts)
- Left column: concept A with label + icon/UI mockup
- Right column: concept B with label + icon/UI mockup
- Vertical dashed divider in center
- Hero text + subtitle top-left
- Yellow accent bar left of hero text (14px wide rect)
- Bottom rule + tagline

### Pattern B — Hero Statement (opinion pieces / single strong idea)
- Giant serif text filling 60–70% of canvas (core idea or acronym)
- Supporting subtitle in small tracked sans
- Yellow used as underline, highlight rect, or left bar accent
- Minimal supporting element bottom-right (small diagram, number, or icon)
- Bottom rule + tagline

### Pattern C — Data / Stat Callout (research-backed / numbers-heavy)
- Large number or stat as hero (serif, very large)
- Yellow highlight rect behind or under the number
- Brief context label
- Supporting secondary stat or visual bottom half
- Bottom rule + tagline

### Pattern D — Terminal / Code (technical / API / developer articles)
- Dark terminal block (`#111` bg) as dominant element
- Yellow monospace text for key lines
- Gray (`#888`) for secondary lines
- White background surrounding terminal
- Hero label above or beside terminal

### LinkedIn Background Layout
- Full-width horizontal composition
- Left ~340px: simple geometric accent element (large yellow rect, circle, or minimal mark)
- Center x=380–900: name / role / tagline in large serif + tracked sans
- Right x=960–1480: 2–3 short bullet points or key phrases (sans-serif, small, tracked)
- Bottom rule at y=375 + tagline
- Keep it airy — this is a banner, not a poster

### Yellow accent bar (left of hero text)
```svg

```

### Hero text (large serif)
```svg
WORD
```

### Section label (small tracked caps)
```svg
LABEL
```

### Horizontal rule
```svg

```

### Browser window mockup (human/UI side)
```svg

```

### Terminal mockup (agent/code side)
```svg

→ key line here
secondary line
```

### Status icon — success
```svg

```

### Status icon — failure
```svg

```

### Content placeholder lines (inside mockups)
```svg

```

### Vertical dashed divider
```svg

```

### Flow arrow (for diagrams)
```svg

  
    
  

```

### Process box (for diagrams)
```svg

Step label
```

### Decision diamond (for diagrams)
```svg

Yes/No?
```

### Highlight rect (accent behind text)
```svg

Key phrase
```

### LinkedIn banner name block (center zone)
```svg
Full Name
ROLE · COMPANY
```

### LinkedIn banner bullet list (right zone)
```svg
→ Bullet one
→ Bullet two
→ Bullet three
```

In-text diagrams follow the same style DNA but focus on clarity over aesthetics:

**Allowed diagram types:**
- Linear flow (A → B → C → D)
- Branching flow / decision tree
- Before/after comparison (two parallel columns)
- Layered stack (boxes stacked vertically showing system layers)
- Loop / cycle (circular or semi-circular with arrows)
- Matrix / 2x2 grid (quadrant chart)

**Rules:**
- All boxes same height (44px), width varies by label length (minimum 100px)
- Consistent row spacing: 80px between rows of boxes
- Arrows: `stroke="#111"`, `stroke-width="1.5"`, arrowhead marker
- Labels inside boxes: `font-size="12"`, `text-anchor="middle"`, centered vertically
- Section headers above groups: `font-size="11"`, `letter-spacing="2"`, `fill="#888"`
- Yellow accent: use it on one key box, one arrow, or one label — not everywhere
- Fit content: calculate viewBox height dynamically based on number of rows
- No decorative elements — every element must convey information
- Add a short title at top: `font-size="14"`, `font-weight="700"`, `fill="#111"`

**Height formula:**
```
height = 60 (top padding) + (rows * 80) + 60 (bottom padding)
Minimum: 200
```

## Step 1: Parse Arguments and Detect Mode

Extract from `$ARGUMENTS`:
- **Type:** from `--type` flag, or auto-detect (thumbnail / linkedin-bg / linkedin-post / diagram)
- **Accent:** from `--accent` flag (default: `#FFE033`)
- **Pattern:** from `--pattern` flag (default: auto-pick in Step 3)
- **Content:** everything that isn't a flag — the article/post text or concept description

## Step 2: Read the Content

If the user provided article or post text, read it. Identify:
- The **core tension or single idea** (usually in first 2–3 paragraphs or the headline)
- **Key terms** (2–5 words max) for the hero text
- **Tagline candidate** (≤5 words, punchy, captures the thesis)
- Any **stats or numbers** that are central to the argument
- Whether it is **technical** (code/API/developer) or **conceptual/strategic**

For diagrams: identify the **steps, nodes, or relationships** the user wants visualized.

## Step 3: Pick Layout Pattern (skip for linkedin-bg and diagram)

| Content type | Pattern |
|---|---|
| Contrast / before-vs-after / two concepts | A — Split Column |
| Single bold opinion / manifesto | B — Hero Statement |
| Stats or research-led | C — Data Callout |
| Technical / developer / API | D — Terminal |

For `linkedin-bg`: use the LinkedIn Background Layout from layout_patterns.
For `diagram`: use diagram_rules.

## Step 4: Compose the SVG

Use the correct canvas from canvas_specs. Build the SVG using reusable_elements as building blocks. Follow these constraints:
- Keep all text short — no SVG text element should be wider than the safe area
- Use only the accent color in 1–2 places
- Whitespace is intentional — resist the urge to fill empty space
- Bottom rule + tagline on all types except plain diagrams
- Include `` and `` for accessibility

## Step 5: Output SVG in chat

Output the SVG inside a fenced code block so the user can preview it:

```svg

  ...

```

One short line before the block (e.g., "Pattern A thumbnail — accent `#FFE033`").

## Step 6: Export PNG to Obsidian vault

Save the SVG to a temp file and convert it to PNG, then move the PNG to the Obsidian blog-assets folder.

**Output path resolution (in order of precedence):**
1. `--output ` flag (if provided)
2. `$OBSIDIAN_VAULT/blog-assets/` environment variable
3. `./blog-assets/` (current directory fallback)

**Filename convention:** `--.png`
- `slug` = first 4 words of the title/tagline, lowercased, hyphens (e.g., `ai-breaks-ux-flows`)
- `type` = `thumbnail` | `linkedin-bg` | `linkedin-post` | `diagram`
- `YYYY-MM-DD` = today's date

**Export steps:**

```bash
# 1. Resolve and ensure output dir exists
if [[ -n "${OUTPUT_FLAG}" ]]; then
  BLOG_ASSETS="${OUTPUT_FLAG}"
elif [[ -n "${OBSIDIAN_VAULT}" ]]; then
  BLOG_ASSETS="${OBSIDIAN_VAULT}/blog-assets"
else
  BLOG_ASSETS="$(pwd)/blog-assets"
fi
mkdir -p "${BLOG_ASSETS}"

# 2. Write SVG to temp file
TMPSVG=$(mktemp /tmp/editorial-XXXXXX.svg)
cat > "${TMPSVG}" 
SVGEOF

# 3. Convert SVG → PNG
# Try rsvg-convert first (best quality), fall back to qlmanage (macOS built-in)
OUTPUT_PNG="${BLOG_ASSETS}/.png"

if command -v rsvg-convert &>/dev/null; then
  rsvg-convert -w 1360 "${TMPSVG}" -o "${OUTPUT_PNG}"
elif command -v inkscape &>/dev/null; then
  inkscape --export-type=png --export-width=1360 --export-filename="${OUTPUT_PNG}" "${TMPSVG}"
else
  echo "Installing rsvg-convert via brew..."
  brew install librsvg
  rsvg-convert -w 1360 "${TMPSVG}" -o "${OUTPUT_PNG}"
fi

rm -f "${TMPSVG}"
```

**Export widths by type:**
| Type | PNG width |
|---|---|
| thumbnail | 1360px |
| linkedin-bg | 3168px (2x for retina) |
| linkedin-post | 1200px |
| diagram | 1440px |

**Use the Write tool** to write the SVG to the temp file (more reliable than heredoc for complex SVGs).

After export, confirm to user:
```
Saved: 
```

## Step 7: Follow-up

After the export confirmation, ask one short question:
> Want to adjust the tagline, swap to a different pattern, or change the accent color?

- Don't put too much text inside the SVG — sparse is better
- Don't use more than one accent color
- Don't use gradients or shadows
- Don't make the tagline more than 5 words
- Don't crowd elements — whitespace is the design
- SVG `` never wraps — keep all text short enough for one line
- Always verify `x + textLength` stays within the safe area right boundary
- For LinkedIn Background: don't put important content in x=0–340 (hidden by profile photo)
- For diagrams: don't mix diagram types in one graphic — pick one layout and commit to it
- Don't add decorative elements that carry no meaning

## Example invocations

```
/editorial-thumbnail Here's my article about how AI agents break traditional UX flows...
/editorial-thumbnail --type linkedin-bg Jane Smith · Product Lead · AI Builder
/editorial-thumbnail --type linkedin-post --accent #0077B5 Key insight from my latest article on agentic UX
/editorial-thumbnail --type diagram Show a flow: User Input → Agent Router → Tool Call → Result → User
/editorial-thumbnail --pattern C --accent #FF4040 73% of AI demos fail in production
```

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [lmiadowicz](https://github.com/lmiadowicz)
- **Source:** [lmiadowicz/claude-skills](https://github.com/lmiadowicz/claude-skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-lmiadowicz-claude-skills-linkedin-article-thumbnail
- Seller: https://agentstack.voostack.com/s/lmiadowicz
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.