linkedin-gif-post-skill

A Claude Code skill for anyone who shares research, checklists, guides or playbooks on LinkedIn and gets little back. It reads the resource and your website, then designs an animated graphic for that resource: its own concept, layout and motion, previewing what the resource contains in your colors and fonts. It is not a template with your words swapped in. It renders the graphic locally with HyperFrames, checks it against LinkedIn's limits, and rewrites the caption so the first two lines say what the reader gets.

It comes out of a real production: a frame-by-frame study of eight high-performing lead-magnet posts and 192 posts by their authors, then a week of posts made, measured and remade. Every rule in it exists because a version without it did worse.

[!IMPORTANT] Alpha. The skill and the scripts work end to end on macOS, and the gates pass on every graphic above. Each graphic is composed for its resource from a blank frame, with the method in compose.md. Two templates ship as worked examples: blank and research_bento. The Roadmap says what is next.

Installation

1. Get the skill

git clone https://github.com/josueh04/linkedin-gif-post-skill.git
cp -R linkedin-gif-post-skill/skills/linkedin-gif-post ~/.claude/skills/
pip install pillow numpy

To keep the skill inside one project, copy it into that project's .claude/skills/ instead.

2. Ask for a post

In Claude Code:

Make a LinkedIn GIF post for this research: https://your-site.com/research/your-piece
Our site is https://your-site.com

The skill:

• reads the resource;
• extracts your brand into brand.json and shows it to you;
• builds the animation and shows you a contact sheet before it renders;
• renders and gates the GIF;
• writes the caption.

You get graphic.gif, graphic-frame.png and caption.md in posts/<slug>/.

3. Or run it by hand

cd ~/.claude/skills/linkedin-gif-post
python3 scripts/brand_extract.py https://your-site.com --out posts/my-post
python3 scripts/new_animation.py --out posts/my-post --brand posts/my-post/brand.json
# edit posts/my-post/animation/index.html: header, cards, CTA
python3 scripts/snapshot_sheet.py posts/my-post/animation
python3 scripts/render_gif.py posts/my-post/animation
python3 scripts/gif_gate.py posts/my-post/graphic.gif

Why This Skill Exists

#1: The Image Repeats the Caption

The Problem. Most resource posts use a static text card or a stock photo, which gives the scroll no reason to stop and the reader no preview of the resource.

The Fix. The GIF shows the resource itself as a working system. A method appears as a line of stations, the checklist is scanned row by row, and the data is called out pair by pair. The cards are dense on purpose: dense enough to read as a lot of value, too detailed to absorb in the feed.

#2: The First Two Lines Waste the Preview

The Problem. LinkedIn shows about 210 characters before "...see more". Captions spend them on context, a quote chain or a thesis, and the offer shows up in paragraph three.

The Fix. copy.md puts the reader's stake in line 1, one number per line with its meaning, and a numbered list that mirrors the GIF's cards. Lead-magnet captions with a numbered list drew 1.53x their author's usual comments.

#3: Animation That Looks Cheap or Breaks LinkedIn's Limits

The Problem. A screen recording turned into a GIF can be 10 MB and over LinkedIn's 250-frame limit. It can open on a blank frame and cut visibly at the loop.

The Fix. Compositions are HTML with a GSAP timeline, rendered deterministically. gif_gate.py blocks a GIF unless it passes all eight gates: frames, bytes, size, the loop flag, fps, a seamless loop, enough motion, and a solid CTA band. When a GIF runs heavy, weight_map.py shows which area costs the bytes.

#4: Off-Brand Graphics

The Problem. Templates come in someone else's colors and fonts, and a near-copy of a competitor's post reads as a copy.

The Fix. brand_extract.py reads your site's CSS variables, palette, fonts and wordmark, and downloads the fonts (OFL) so renders stay local. Every color and font in the template is a token. analyze_reference.py measures a post you admire, so you can borrow the principle, not the layout.

#5: Every Post Looks the Same

The Problem. A template tool gives every post the same layout with new words, and after the second post the feed sees the same picture again.

The Fix. compose.md is the method for designing from scratch:

• name the resource's shape (a process, a checklist, a transformation, a comparison...);
• write a one-sentence concept;
• sketch the zones;
• plan the beats with a library of seek-safe motion patterns;
• build on a blank frame that carries only the brand, the header and the CTA.

When a composition works, save_template.py keeps it for the next resource of the same shape.

What's Inside

• SKILL.md: the workflow, from reading the resource to checking the live post, and the rules with their reasons.
• Scripts
  • brand_extract.py: colors, fonts and logo from a website, into brand.json.
  • new_animation.py: copies a template into a post folder and applies the brand tokens.
  • snapshot_sheet.py: ten moments of the loop on one sheet, to review before rendering.
  • render_gif.py: renders with HyperFrames and encodes the GIF. If the file is too heavy, it steps down colors, dithering, fps and width.
  • gif_gate.py: the eight release gates.
  • weight_map.py: where a GIF spends its bytes.
  • analyze_reference.py: stats, a frame sheet and a motion heat map of any public LinkedIn post.
  • save_template.py: keeps a composition that worked as a template, with a README to fill in.
• Templates:
  • blank: the frame only (brand tokens, header slots, the CTA band, an empty timeline), and the starting point for every original composition.
  • research_bento: a worked example for a checklist-plus-data research post.
• References: compose (read it first), design, copy, HyperFrames notes, evidence.

What You Need to Provide

[!NOTE] Everything renders on your machine. The scripts turn off HyperFrames' anonymous telemetry (DO_NOT_TRACK=1) and unset GEMINI_API_KEY, so no frames leave the machine. brand_extract.py fetches only the site you give it and the Fontsource CDN. Claude reads the resource you share, so it is sent to the model as context.

Roadmap

License

MIT. The bundled fonts are under the SIL Open Font License 1.1 (licenses). It is built on HyperFrames by HeyGen (Apache-2.0) and GSAP, which run at render time and are not bundled. The logos in the gallery belong to their owners and appear only as examples of output.