/social-media-kit

name: social-media-kit
description: Produce and attach native media (video teaser, GIF, card images) for every social post to maximize reach and interaction. Use whenever you post to X, LinkedIn, Reddit, or prepare HN/IndieHackers handoffs, and whenever a social-publishing step runs. A text-only social post is a draft, not a post.

Social media kit

Every social post carries a video, GIF, or image. Native media is the largest reach lever the feed algorithms give you. This skill defines the kit of assets, the visual rules that keep a campaign from looking templated, and the browser mechanics for attaching media on each platform.

Configuration

Set these once. Scripts read them from environment variables, so nothing personal is hardcoded.

| Setting | Env var | Default | |---|---|---| | Signature shown bottom-right on cards | `BRAND_URL` | `yourblog.example` | | Output folder for cards | `CARD_OUT_DIR` | `.` | | Screenshot for the runner card | `CARD_SCREENSHOT` | unset (card skipped) | | Quote card attribution | `QUOTE_ATTRIBUTION` | `Your Name · your role` | | Pass / fail dot colors | `CARD_ACCENT_PASS`, `CARD_ACCENT_FAIL` | `3DD68C`, `F2555A` | | Banner accent color | `BANNER_ACCENT` | `e13f5e` (coral, configurable) | | Fonts | `HEADLINE_FONT`, `MONO_FONT` | macOS Helvetica Neue and Menlo, DejaVu on Linux |

Your handles, avatar and brand colors belong in your own config or prompt, never in this skill.

Requirements

• Python 3 with Pillow (`pip install pillow`)
• ffmpeg, for teaser cuts and clips
• A browser automation tool that can drive your logged-in Chrome over CDP (for example the `browser-harness` skill, if you have it)

The kit contract

Before posting, produce a kit folder (`<scratchpad>/social-kit-<slug>/`) with whichever of these the source material supports, in priority order:

| Asset | Spec | Best for | |---|---|---| | `teaser-16x9.mp4` | 30-60s cut of a master video, hook in the first 3s, H.264/AAC, captions burned in (feeds autoplay muted) | X thread root, LinkedIn | | `teaser-1x1.mp4` | Same cut, 1080x1080 center-crop or pad | Mobile feeds | | `hero-card.png` | 1600x900 card with a padded screenshot or lane art | X, LinkedIn, Reddit image | | `terminal.gif` | Animated terminal replay, 15MB or less (X GIF cap), 2-6 frames or a reveal sequence | X, Reddit | | `quote-card.png` | 1600x900 dark card with one strong line | Follow-up posts, LinkedIn comment |

Reuse before creating. If your blog pipeline already produces per-post assets (OG gif, screenshots, a deep-dive mp4), a 30-60s ffmpeg cut of an existing master video beats a new render.

Style variety across a campaign

One visual language repeated on every asset reads as AI-generated. Rules:

• Never render every asset in a campaign in the same style. Rotate: lane-art card, terminal replica (see the `terminal-replica` skill), ASCII or OG gif, bare quote card, raw screenshot or recording.
• Match style to audience. Developer forums get terminal replicas or raw screenshots, because authentic beats polished. LinkedIn and X heroes get designed cards.
• PIL gotcha for terminal renders: Menlo lacks the TUI glyphs for the record dot, the elbow and the spinner. Draw them as vector shapes (filled circle, elbow lines), never ship tofu boxes.

House card style

Cards follow a dark thin-line art language, inspired by linear.app/now. The renderer is `scripts/linearcard.py`. The accent colors and signature are configurable.

• Canvas 1600x900 (render at 2x, LANCZOS downscale). Background `#0A0B0D`, flat. No gradients, no glow, no dot grids.
• Art is thin-line lane fields: horizontal 1.5px `#43464C` strokes flowing left to right, dots `#9A9DA2` at start points, arrowheads at ends, lines breaking around thin circle nodes. Dashed lanes mean failures. The only accents are tiny green (pass) and red (fail) dots.
• Type: a bold sans for the big headline (white, 2-3 short lines, top-left). Mono for the eyebrow and data chips. Never set the headline in mono, and never bury the message in a caption.
• Real numbers in a chip row ("7 passed · 4 failed"), not decoration.
• Signature bottom-right: your URL in bold mono plus a cursor block. Nothing else.
• Screenshots sit on the art field with a 1px `#303338` border and 20px rounded corners. Never full-bleed. Keep a headline beside them.
• Anything terminal-looking follows the `terminal-replica` skill.

BRAND_URL="myblog.dev" CARD_OUT_DIR=./kit python3 .claude/skills/social-media-kit/scripts/linearcard.py

The three cards in the script are examples. Edit the copy and numbers for your post.

Content type to visual treatment

Pick the treatment by what the post is, not by one default recipe.

| Post is about | Reach for | Why | |---|---|---| | A flagship or launch idea | `linearcard.py` art field, but invent one concrete metaphor object for this post first (a shape that puns the idea) | A bespoke metaphor is more scroll-stopping than the same background every time | | "Watch it actually run" proof (a real terminal session, an agent run) | `cardrender.py` screenshot or clip without the padded card frame, raw footage | A card frame reads as marketing polish. Raw footage reads as "this is happening" | | A tool or stack story with numbers | `linearcard.py` standard recipe with a mono data-chip row | The data chips carry the story | | A long essay excerpt or killer quote | `quote-card.png`, and drop the lane art entirely: pure type on the dark field | Background linework competes with a typographic excerpt |

Thread media placement

In any multi-message thread (X thread, LinkedIn post plus comments, Reddit post plus comments), media goes on the first message only, preferably a gif or video. Later messages stay text-only unless an illustration adds information (a chart under discussion, a before/after). Decorating every reply with a card reads as botting and dilutes the root asset.

Production recipes

Teaser cut from a master video

# pick the str