skill: skills v1.2.0 adds illustrate-post and a README per skill
I released v1.2.0 of my skills. It ships two new skills: illustrate-post, which turns a post's images into a plan, hand-drawn SVG diagrams, image-model variants in a few styles and one gallery to pick from, and avp-mvd-alvr-stutter-resolver, which fixes Vision Pro stutter when Mac Virtual Display and ALVR run together. Every skill folder now also has a short README for people: what the skill does, why it exists, when to use it and what it needs.
Plan first. The agent reads the post and proposes the images with me: what each one shows, where it goes, and whether it is an exact diagram or a mood or hero image. Nothing is generated before I approve the list.
Two kinds of producer. Claude hand-draws the diagrams as SVG, where labels and numbers have to be right, each with a dark twin. An image model renders every concept in 3 or 4 clearly different style families, so each family is a consistent set.
One gallery. Every variant lands in one local HTML page, side by side. I pick per image and mix styles freely; when I like a composition but want a change, the agent edits that image instead of starting over.
Only the picks land. The chosen images go into the post, narrower than the text and centred, with SVG diagrams swapping to their dark twins with the site theme.
The Vision Pro post ended up with three of Claude's diagrams, two Midnight Blueprint illustrations and one Paper Circuit floor plan, picked out of a gallery of more than twenty images.
description: Illustrate a blog post or doc with image variants from several models, shown side by side in one HTML gallery for the user to pick from. Use when the user asks for images, illustrations, diagrams or a hero image for a post or doc, or wants image options to choose from.
---
Several producers each make a **variant** of every **concept** (one image slot in the post); the user picks per concept from one gallery, mixing producers and styles freely. Nothing enters the repo until they pick.
1.**Plan.** Read the post and propose the concepts: what each image shows, where it goes, and whether it is a diagram (exact labels, numbers, real data) or a mood or hero image, and whether it carries text. Name who makes what. Done: the user approved the list; nothing is generated before that.
2.**Produce, in parallel,** into a gitignored folder: `.temp/<topic>-images/<variant>/NN-<concept>.<ext>`. Check `.gitignore` covers it.
-**Diagrams: hand-drawn SVG by Claude.** Self-contained, with its own background card, plus `<title>` and `<desc>`. Make a dark twin, `NN-<concept>-dark.svg`: remap the palette, keep the meaning of each colour readable. Render both to PNG (`rsvg-convert`), look at them, fix overlaps and clipped text, repeat. CSS `text { fill }` beats a `fill=` attribute, so colour single elements with `style="fill:..."`.
-**Every concept: an image model** (Codex's image tool, or another agent's; without one, hand this to an agent that has it). Ask for 3 or 4 clearly different style families, each applied to every concept so a family is a coherent set; leave the rest of the art direction open. Save each family's prompts in `<variant>/prompts.json`.
- Generated images: no logos or trademarks, generic devices, no personal details. Text follows the plan, concept by concept. Models garble it, so ask for short, explicit wording, verify every word and number, and regenerate anything garbled.
Done: every producer delivered its files.
3.**Gallery.** Copy [gallery.html](gallery.html) into the folder and fill its `concepts` and `variants` lists. Serve it with `python3 -m http.server <spare port> --bind 127.0.0.1`. To browse from another device, offer the user's private network (e.g. `tailscale serve`) and ask first. Done: the URL loads and every image shows.
4.**Review and pick.** Each producer lists its own weak spots. Send the user the gallery link with those notes. When they like an image's composition but want a change, edit that image (an image edit with it as the reference) rather than generating a new one. Done: the user picked one image per concept.
5.**Land the picks.** Copy only the chosen images into the repo (check whether it keeps images in Git LFS) and wire them into the post:
- Show images narrower than the text column and centred, around 560px, a hero around 640px. A hero can close the post too.
- An SVG with a dark twin goes in as two `<img>`, one per theme, swapped by one shared CSS rule keyed on the site's theme selector or `prefers-color-scheme`.
- Image pipelines may rasterise SVGs (JPEG with black corners); route SVGs around the transform.
Build, then look at the post in both themes and commit. Ask before pushing. Done: the build passes, both themes look right, and only the picks are committed.
I added avp-mvd-alvr-stutter-resolver to my skills in 197e34a, turning what I wrote up in Vision Pro MVD / ALVR Best Practices - No More Stuttering! into something an agent can run. It audits and fixes Apple Vision Pro stutter for Mac Virtual Display and ALVR: AWDL channel hopping, the router's channel and width, the wired path, subnets and GPU encoder contention. The fix is verified twice: the AWDL schedule now stays on a single channel, and ALVR no longer stutters.
My own agent skills moved out of my dotfiles into skills, and v1.0.0 is the first release. You can now install them without my setup: as a Claude Code plugin, a Codex plugin, or with npx skills add TheClooneyCollection/skills. The release also adds a release skill, which cut this release, and a CI check that keeps the skills, the plugin manifests and the README in step.