From content-vault
Designs on-brand single graphics (LinkedIn portrait, square, banner, OG image) or multi-slide LinkedIn carousels. Branches templates, renders PNGs via headless Chrome, uploads to Drive, and logs in Notion.
How this skill is triggered — by the user, by Claude, or both
Slash command
/content-vault:graphics-designerThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
The on-brand graphics factory. HTML → PNG via headless Chrome, with
The on-brand graphics factory. HTML → PNG via headless Chrome, with
mandatory adherence to your brand spec. Produces single graphics or
multi-slide carousels. Logs every output in the Notion Content DB and
mirrors the file to Drive's 03 Marketing/60 Graphics/.
Read <YOUR_BRAND_DOC> if you have one — voice rules + skill
checklist + format-specifications table dictate dimensions, validators,
and the visual discipline that separates on-brand from AI-generated.
Trigger on:
/graphics-designerSkip for:
/launch-video (synthetic) or /video-use (footage edit)presentations/ build)/lead-magnet-creatorThe brief should include:
Outbound stack. / Live in 3 weeks.)If anything is missing, ask in one batch before drafting.
If you have existing templates in <YOUR_GRAPHICS_TEMPLATES_PATH>,
branch from the closest match. Otherwise start from a clean HTML
scaffold and apply your brand tokens (<YOUR_BRAND_TOKENS_PATH>).
Common template archetypes worth keeping in your library:
If the brief doesn't fit any of the above, branch from the most modular template you have, or from your live styleguide HTML page. Don't reinvent · compose.
cp <YOUR_GRAPHICS_TEMPLATES_PATH>/<closest-match>.html \
<YOUR_GRAPHICS_TEMPLATES_PATH>/<new-name>.html
Naming: <channel>-<topic>-<dateOrId>.html. Examples:
linkedin-outbound-stack-2026-05.htmllinkedin-carousel-icp-tactics-01.html (carousel slide 1)linkedin-carousel-icp-tactics-02.html (carousel slide 2)x-header-2026-05.htmlFor carousels: one HTML file per slide. Same dimensions (1080×1350 each). Numbered suffix.
Each existing template marks per-graphic edits in CONFIG blocks at the top of the file. Stay inside those blocks. Don't touch the design system styles · they're inherited from your tokens (mirrored inline).
Things you usually edit:
<title> (browser tab + future PNG metadata)Live · Webinar or /research slug)<em> for muted half)Things you almost never touch:
.brand, .kicker, .tick, .chip, .matrix).two-col, .three-col, etc.).brand (path:
<YOUR_LOGO_PATH>)cd graphics
./render.sh <new-name> <width> <height>
Defaults: 1080 1350 (LinkedIn portrait). For other formats, see the
Format specifications table in <YOUR_BRAND_DOC>.
The render script is a thin wrapper around headless Chrome:
# render.sh pattern
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
--headless --disable-gpu --no-sandbox \
--window-size=$WIDTH,$HEIGHT \
--screenshot=output/$NAME.png \
--default-background-color=00000000 \
"file://$PWD/templates/$NAME.html"
# then a second pass at 2× device-scale-factor for the @2x output
For carousels: render each slide with the same command:
./render.sh linkedin-carousel-icp-tactics-01 1080 1350
./render.sh linkedin-carousel-icp-tactics-02 1080 1350
# ... etc
Outputs land in graphics/output/:
<name>.png (1×, the deliverable)<name>@2x.png (retina · for high-density displays)Open the rendered PNG. Walk the skill checklist:
Copy checks:
— in any visible copyVisual checks:
5. Accent count · the one accent appears at most once
6. Font discipline · body in Helvetica Neue 400, mono only on labels
7. Wordmark slot · <YOUR_BRAND> wordmark + logo mark visible (header or footer)
8. Hero-headline pattern · two lines, second in muted via .hero em
9. Footer URL · <YOUR_DOMAIN> (or campaign URL)
10. Corner ticks · all four .tick squares present, 35px clear
11. Dimensions match the format spec exactly
If any check fails: fix the HTML, re-render, recheck. Don't ship a graphic that fails any of the 11.
# parent: 03 Marketing/60 Graphics
# folder id: <YOUR_DRIVE_GRAPHICS_FOLDER>
Use mcp__claude_ai_Google_Drive__create_file per output PNG. Title
pattern: <channel>-<topic>-<YYYY-MM-DD>.png (or @2x variant).
For carousels, upload all slides as separate files into a subfolder named after the carousel topic, so they stay grouped:
60 Graphics/
└── 2026-05 ICP tactics carousel/
├── slide-01.png
├── slide-02.png
└── ...
Capture each viewUrl from the Drive create response.
Create a row in the Content DB (<YOUR_NOTION_CONTENT_DB_ID>) via
mcp__claude_ai_Notion__notion-create-pages:
<topic> · LinkedIn (e.g. Outbound stack · LinkedIn)Scripting (awaiting human review) or Scheduled if
the user confirms it's readyImage for single graphic · Carousel / PDF for carouselLinkedIn (or whatever the brief specified)viewUrl(s). For carousels, paste
all slide URLs.Page body: include the brief, the headline, the kicker, the source
URL if invoked from /repurpose, and any notes for the human reviewer.
If invoked from /repurpose, the orchestrator may handle the row
creation · check the source context first to avoid duplication.
One-line summary plus links:
viewUrl(s)Suggest next: post on LinkedIn (manual · <YOUR_NAME> handles publishing),
or chain into /linkedin-copywriter for the post copy that will
accompany the graphic.
LinkedIn carousels are the highest-engagement format. Build them deliberately.
| Slide | Role | Content |
|---|---|---|
| 1 | Cover | Hero headline + kicker + accent. The hook. |
| 2 | The problem | One sentence + one supporting fact |
| 3 | The framework | Numbered list (3-5 items) |
| 4-6 | Each step | One slide per step · headline + 2-3 lines |
| 7 | CTA | "Save · share · follow <YOUR_NAME>" |
Adjust slide count for the topic. 5-12 slides is the sweet spot. Less than 5 is just a graphic; more than 12 loses people.
02 / 07) as mono.for i in 01 02 03 04 05 06 07; do
./render.sh <carousel-name>-$i 1080 1350
done
<YOUR_BRAND_TOKENS_PATH>, not in a one-off graphic./launch-video and web../render.sh and re-check the PNG. Trust the render, not your
expectation.graphics/public/speakers/ and graphics/public/webinar/. If you
don't have a real photo, use a <div class="photo placeholder">
with initials, not a generic image./linkedin-copywriter for the accompanying text.<YOUR_BRAND_DOC> · format spec table, voice rules,
skill checklist<YOUR_GRAPHICS_TEMPLATES_PATH>graphics/render.sh<YOUR_BRAND_TOKENS_PATH><YOUR_NOTION_CONTENT_DB_ID>60 Graphics: <YOUR_DRIVE_GRAPHICS_FOLDER>/linkedin-copywriter (post copy after graphic
ships), /repurpose (when graphic is a derivative of a master)npx claudepluginhub timscheuerai/content-vaultCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.