Skip to main content
Glama

Missing Piece batch: a Claude skill for the SVGator MCP

A Claude Code skill that turns a short conversation into a batch of animated social posts, one per item, made from the Missing Piece SVGator templates. Missing Piece is a 4×5 sliding-block puzzle whose last piece is the news: an open role, a launch or an event. The skill gives every post its own move sequence, planned from the post's content and checked for collisions before any keyframe is sent.

It works with the three Missing Piece looks: dot-print, type-window and mark-system.

How it runs

  1. You tell Claude your brand and what you're posting, in your own words. For example: "We're Ridgeback, a coffee roaster in Hood River. Cream paper, forest green, roast orange. Anton for headlines, Space Mono for small print. This month we're hiring a head roaster, launching a washed single origin from Huila, and holding an open day on Saturday 25 October."

  2. Claude finds your copy of the template in your SVGator account (see below), asks once for anything missing (a colour, a logo, a call to action), and writes the job file itself. You see a plain list of the posts and confirm it; you never edit YAML.

  3. pipeline/plan.py checks the job before any call is made: fonts against Google Fonts' own catalogue, every line of copy against its slot using the font's real glyph widths, and the colour roles against the template's. Copy that doesn't fit is refused with the measured reason, and the other posts still go ahead. It then picks a move sequence per post, proves it (sampled every 5 ms with the real easing curves, no tile may overlap a neighbour), and writes the exact SVGator MCP calls for each post.

  4. Claude runs those calls through the SVGator MCP: a brand base project once (colours, logo, photo, tempo), then per post a duplicate_project, its text and keyframe edits with edit_part, and the exports (an MP4 and an animated SVG).

  5. pipeline/verify_export.py checks that every keyframe channel and every line of copy that was sent is in the exported SVG. pipeline/verify_images.py checks that a logo sent as a data URI arrived byte for byte.

The step-by-step instructions Claude follows are in SKILL.md.

Related MCP server: cutgent

Requirements

  • An SVGator account with the SVGator MCP connected. In Claude Code: claude mcp add --transport http -s user svgator https://mcp.svgator.com/mcp, then /mcp to sign in.

  • The Pro plan for video export. The skill checks plan.access_level from list_projects (2 or higher).

  • Python 3 with fontTools and PyYAML: pip install -r requirements.txt. The first run downloads Google's font catalogue and the TTFs it measures, so it needs network access once; they are cached in .cache/.

  • Optional: Pillow and ffmpeg/ffprobe, only for the QA sheets (check.py, compare.py, ab.py). Without them those scripts print "skipped" and the videos are unaffected.

Install

Clone the repo into your personal skills folder, under the skill's name:

git clone <this repo's URL> ~/.claude/skills/missing-piece-batch
pip install -r ~/.claude/skills/missing-piece-batch/requirements.txt

If ~/.claude/skills/ didn't exist before, run /reload-skills in Claude Code. Then start Claude Code in any folder and describe your posts, or type /missing-piece-batch. Job files go in jobs/ and run outputs in runs/<job>/, both in the folder you're working in.

Getting the template into your account

The skill only edits duplicates of a template that is already in your SVGator account. It never uses a project id from this repo. It finds the template with list_projects, searching "Missing Piece" and each look's name, and then confirms the match by the template's loop length (dot-print 9800 ms, the other two 11000 ms) and by checking that every element id the plan edits is there. A copy renamed so that its title has neither "Missing Piece" nor the look's name won't be found.

If no copy is found, Claude stops and asks you to add one. Open the public template, duplicate it into your account, and come back:

Each template's profile (pipeline/templates/<name>.json) holds what the planner needs: the element ids it edits and the values they hold, the text slots and their limits, the colour roles, the post-type switch, the loop length and the motion parameters. Its reference block records the build the profile was read from, in the author's account; it is documentation and the code never reads it.

A real run: Ridgeback on dot-print (15 Oct 2026)

The conversation above, run on the dot-print template with the Pro plan. Claude wrote the job (examples/ridgeback-dot-print.yaml; during the run it lived at jobs/ridgeback-dot-print.yaml). Everything below comes from the files in runs/ridgeback-dot-print/: the plan report (report.md), the call manifests (*.calls.json, plan.json), one log line per MCP call (log.jsonl) and the summary built from it (timings.md).

74 MCP calls by Claude, from 16:44:10 to 16:54:39 UTC (10 min 29 s). One call failed: a duplicate_project returned a 502 and was retried.

Step

Calls

What they were

setup

5

list_projects, get_project, get_skeleton, list_folders, create_folder

brand base

11

duplicate_project, 9 edit_part (3 inks, logo, photo, photo tone, tempo, the hidden note's font and weight), a static export_project to check the logo

head-roaster (hiring)

18

2 duplicate_project (the 502 and its retry), 15 edit_part, animated SVG export_project

huila-launch (launch)

20

duplicate_project, 18 edit_part (adds the post-type switch and the news label), animated SVG export_project

open-day (event)

20

the same as the launch

Each post's edits went in as one parallel batch after its duplicate_project. verify_export.py found every keyframe channel and every line of copy in all three animated exports, and the logo was byte-exact in the static export.

Each post got a different scrambled board (from plan.json):

Post

Scramble

Pieces that move

Deepest tile overlap

head-roaster

block-b↑ block-c↑ cta↑ detail→ detail→

4 of 5

0 px

huila-launch

block-c↑ block-b→ block-c← block-b↑ cta↑

3 of 5

0 px

open-day

block-b↑ block-b→ block-c← block-c↑ cta↑ detail→

4 of 5

0 px

Video renders. The author's account was rendering other templates at the same time, and SVGator allows 3 pending renders per account, so the three video exports went through a shared queue run by a separate process. Those export_project (video) and get_render calls are logged as marks, not counted in the 74, and file paths in those log notes refer to the author's working folder. The renders started at 17:20:30, 17:36:28 and 17:41:36 UTC and finished at 17:36:28, 17:55:24 and 18:00:46. Each video is 1080×1350, 30 fps, 7.87 s (236 frames). The MP4s and exports aren't in this repo. seams.md has the first-frame-versus-last-frame difference of each MP4.

Files

SKILL.md                 the instructions Claude follows
pipeline/plan.py         job in, report and call manifests out
pipeline/motion.py       move search, timing, collision proof (board.py: the board geometry)
pipeline/fonts.py        Google Fonts catalogue check, glyph widths, wrapping
pipeline/profiles.py     loads pipeline/templates/<name>.json
pipeline/log.py          one log line per MCP call; timings.md
pipeline/verify_export.py, verify_images.py   checks on what came back (no Pillow needed)
pipeline/check.py, compare.py, ab.py          optional QA sheets (Pillow + ffmpeg)
examples/                the Ridgeback job from the run above; a one-post job for type-window
tests/                   tests and their fixtures (stored keyframe channels, refusal jobs, a mark-system job)
runs/ridgeback-dot-print/   the run above

Tests

python3 tests/test_motion.py     # rebuilds each template's own move sequence and matches the stored channels key for key
python3 tests/test_plan.py       # refusals, distinct boards per batch, reproducible plans, per-template switches
python3 tests/test_no_pillow.py  # plans a job with Pillow blocked

Limits

  • Claude is the transport. The SVGator MCP signs in per session, so the scripts can't call it themselves. They write the calls and Claude makes them one by one: 17 to 22 per post, plus render polls.

  • Video renders queue. At most 3 renders can be pending per SVGator account. A fourth video export is refused with a 422 and starts nothing until one finishes.

  • Images through a tool call stay small. A logo sent as a data URI must stay under about 4.5 KB (a 9.4 KB one once arrived with one wrong character and a "success" response). Photos go in as https links, or later with Replace image in the SVGator editor. An https photo stays a link in every export, so it depends on that host.

  • String values go in bare. An image href or a fontFamily sent with JSON quotes around it is stored with the quotes. SKILL.md tells Claude this.

  • The board is small. Each template has 32 legal scramble-and-solve pairs at its own tempo (8 under the calm personality). A batch of more than 32 posts for one brand repeats boards; the planner says so.

  • Only the puzzle moves are planned. The news piece's exit and return, the lock beat and each template's own effects belong to the template and are never edited.

  • Fonts are Google Fonts only, checked against the current catalogue. Legacy names that Google's CSS API still answers but SVGator doesn't load (e.g. "Big Shoulders Display") stop the job.

  • mark-system's headline keeps the template's 92 px size, because its first baseline moves with the size.

  • The photo URL in examples/ridgeback-dot-print.yaml is the one the run used (rawpixel image 6039161, public domain / CC0). Use your own image.

Licence

MIT. See LICENSE.

Related MCP Connectors

Related MCP Servers