Savoir-faire et organisation

Visual posts

propost-visual-posts

Quand l’utiliser

Designs on-brand images as self-contained SVG and attaches them to ProPost posts with attach_image, including quote cards, stat cards, cover slides and carousel-style multi-image posts. Use whenever someone asks to "make an image for this post", "design a quote card", "turn this into a carousel", "add a cover slide", "make a graphic with our brand colours", "Instagram or Pinterest needs an image", or when a post on a network that requires an image (Instagram, TikTok photo, Pinterest) has none, even if they don't say SVG.

Télécharger le .zip Voir le SKILL.md

Les skills fonctionnent avec le connecteur ProPost, disponible avec Pro et Premium. Configurer le connecteur

Designs a clean, readable graphic in the person's brand colours as SVG, attaches it to the right post (or several posts) and checks the post is ready. Works for personal and company brands.

Before you start

get_account: time zone, autonomy. Attaching images works at every level; scheduling still needs schedule.
list_channels: the networks involved, max_length, which require an image (image_required otherwise), and needs_reconnect.
The post itself: get_post (or list_posts with status: "draft") so the graphic repeats the post's hook instead of inventing a different one.
Brand inputs. Ask once, only for what is missing: primary colour, an accent, a dark and a light neutral (hex values), the name or handle to put on the card. No logo files: you cannot embed outside images (see limits). If they have no palette, offer one default (deep blue #0B1F3A, accent #F5B83D, paper #F7F4EC, ink #10151C) and say it is a stand-in.

Workflow

Pick the format from the job (sizes below) and write the exact text that goes on the image. Short. Pull it from the post, never add facts.
Build the SVG from references/svg-templates.md: copy the closest template, change colours, text and lines. Always set width, height and a matching viewBox.
Attach: attach_image with post_id and image_svg. It replaces the post's images; pass add: true to append (carousel). apply_to_linked defaults to true, so linked copies on other channels get the same image; set it to false only if the person wants one channel to differ.
Carousel-style posts: make 3 to 9 slides at the same size, one idea per slide, then call attach_image once per slide, the first without add (so it replaces old images) and the rest with add: true, in reading order. Slide 1 is the cover, the last is a call to action. Check the response image_count equals the plan, and use remove_image with position to drop one slide if you got it wrong.
Respect the network's image cap (below). If the post is linked to channels that allow fewer images, say which ones will show only the first N, or use apply_to_linked: false and attach a single cover there.
Check: check_post, fix what it reports, then tell the person to look at the result in ProPost. You cannot see the rendered image, so keep the layout simple and conservative.

Sizes per network

Use	Size (width x height)
LinkedIn feed image, link-style card	1200x627
LinkedIn / Instagram portrait, carousel slide	1080x1350 (4:5, takes the most feed space)
Square, safe everywhere (Facebook, X, Threads, Bluesky, Mastodon, Telegram)	1080x1080
Pinterest pin	1000x1500 (2:3)
Google Business post photo	1200x900 (4:3)
TikTok photo post	1080x1920 (9:16), keep text inside the middle 1080x1400

Image caps per post: LinkedIn 9, Facebook / Instagram / Telegram 10, X / Bluesky / Mastodon 4, Threads / Pinterest / Google Business 1. YouTube takes no images.

Design guidance

One message per image. A quote card carries one sentence; a stat card one number and one line of context.
Type: use font-family="Inter, sans-serif" only. ProPost renders with Inter in weights 400, 600 and 800, so use only those. Headline 64 to 96 px on a 1080 canvas, supporting text 30 to 40 px, never below 28 px (phones shrink everything). Left-align multi-line text.
Wrap by hand. SVG does not wrap text. Break lines yourself with one <tspan x="..." dy="1.2em"> per line, about 22 to 26 characters per line at 80 px on a 1080 canvas, 34 to 40 at 48 px. Count characters; long words overflow the edge and get clipped.
Margins: 80 px on all sides on 1080 canvases (60 px on 1200x627). Keep Instagram portrait text out of the bottom 120 px.
Contrast: light text on dark or dark on light, nothing in between. A safe pair has a big difference in lightness (white on #0B1F3A, not grey on blue). One accent colour, used for one thing.
Hierarchy: big claim, small source line, a thin accent bar or rule. Skip decorative clutter, shadows and filters; simple shapes render reliably.
Text on the image repeats, not replaces, the post. The caption still carries the full thought for people who can't see the image (alt-text habit: put the key sentence in the post text too).
Slide copy example (carousel on onboarding): cover "We cut onboarding from 9 days to 2" / 2 "The old process: 14 hand-offs" / 3 "What we removed" / 4 "What we automated" / 5 "Try this on Monday". Use only numbers the person gave you.

What SVG is accepted

attach_image refuses (invalid_image) anything that is not one <svg> document: no <!DOCTYPE> or entities, no <script>, foreignObject, iframe, object, embed, no on...= attributes, no @import. Every href and url(...) must be #id inside the file or a data:image/png|jpeg|webp|gif;base64 image. No external fonts, images or links. Maximum 300,000 characters. Gradients, rects, circles, paths, text and tspan are fine.

Guardrails

Do not put people's photos, client logos or other third-party marks in an image without the person confirming they have the right to.
No invented statistics, testimonials or names on cards. Use [add number] in the post and ask, rather than rendering a made-up figure.
Do not ship placeholder text in an image: you cannot edit pixels later, so confirm the words before attaching, or attach and re-attach after approval.
Images are not alt text; do not stuff keywords into the card.
Never publish_now as part of this skill without an explicit yes.

If something fails

invalid_image: remove the flagged feature (external link, DOCTYPE, script) and resend; check the file starts with <svg and ends with </svg>.
image_too_large: simplify the SVG (under 300,000 characters) or drop embedded raster data.
already_published: published posts cannot get new images; create a new draft instead.
post_not_found: re-read ids with list_posts.
image_required (from check_post or scheduling): attach an image first.
too_long, autonomy_limit, rate_limited: see ../CONVENTIONS.md.

Fichiers de référence

SVG templatesreferences/svg-templates.md

Every template is self-contained (no external links, fonts, scripts or DOCTYPE), uses only Inter at weights 400, 600 and 800, and has width, height and a matching viewBox. Replace the colours, the text and the line breaks. One <tspan> per line; keep within the character counts in SKILL.md. Paste the whole thing as image_svg.

Palette used below (swap for the brand): background #0B1F3A, accent #F5B83D, light text #FFFFFF, muted text #B8C4D6, paper #F7F4EC, ink #10151C.

1. Quote card, 1080x1080

Up to about 4 lines of 24 characters at 72 px. Longer quotes: shrink to 60 px and 28 characters per line, or make it a carousel.

<svg xmlns="http://www.w3.org/2000/svg" width="1080" height="1080" viewBox="0 0 1080 1080">
  <defs>
    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#0B1F3A"/>
      <stop offset="1" stop-color="#16345F"/>
    </linearGradient>
  </defs>
  <rect width="1080" height="1080" fill="url(#bg)"/>
  <rect x="80" y="120" width="96" height="10" rx="5" fill="#F5B83D"/>
  <text x="80" y="330" font-family="Inter, sans-serif" font-weight="800" font-size="72" fill="#FFFFFF">
    <tspan x="80" dy="0">Consistency beats</tspan>
    <tspan x="80" dy="1.25em">intensity. Post the</tspan>
    <tspan x="80" dy="1.25em">boring Tuesday</tspan>
    <tspan x="80" dy="1.25em">update anyway.</tspan>
  </text>
  <text x="80" y="930" font-family="Inter, sans-serif" font-weight="600" font-size="36" fill="#F5B83D">Alex Rivera</text>
  <text x="80" y="982" font-family="Inter, sans-serif" font-weight="400" font-size="30" fill="#B8C4D6">Founder, Northwind Studio</text>
</svg>

2. Stat card, 1080x1350 (portrait)

One number, one sentence of context, a source or date line. Use only figures the person supplied; leave [number] out of the image until confirmed.

<svg xmlns="http://www.w3.org/2000/svg" width="1080" height="1350" viewBox="0 0 1080 1350">
  <rect width="1080" height="1350" fill="#F7F4EC"/>
  <rect x="0" y="0" width="1080" height="24" fill="#0B1F3A"/>
  <text x="80" y="200" font-family="Inter, sans-serif" font-weight="600" font-size="34" fill="#0B1F3A" letter-spacing="2">ONBOARDING TIME</text>
  <text x="70" y="620" font-family="Inter, sans-serif" font-weight="800" font-size="360" fill="#0B1F3A">9 to 2</text>
  <rect x="80" y="680" width="140" height="12" rx="6" fill="#F5B83D"/>
  <text x="80" y="800" font-family="Inter, sans-serif" font-weight="600" font-size="58" fill="#10151C">
    <tspan x="80" dy="0">days from signup to</tspan>
    <tspan x="80" dy="1.3em">first live campaign,</tspan>
    <tspan x="80" dy="1.3em">after we cut hand-offs.</tspan>
  </text>
  <text x="80" y="1210" font-family="Inter, sans-serif" font-weight="400" font-size="30" fill="#4A5563">Our own data, Q3 2026</text>
  <text x="80" y="1260" font-family="Inter, sans-serif" font-weight="600" font-size="30" fill="#0B1F3A">Northwind Studio</text>
</svg>

3. Carousel pair, 1080x1350: cover slide and content slide

Same size and palette for every slide. Attach the cover first (no add), then each content slide with add: true.

Cover:

<svg xmlns="http://www.w3.org/2000/svg" width="1080" height="1350" viewBox="0 0 1080 1350">
  <defs>
    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#0B1F3A"/>
      <stop offset="1" stop-color="#16345F"/>
    </linearGradient>
  </defs>
  <rect width="1080" height="1350" fill="url(#bg)"/>
  <circle cx="930" cy="190" r="260" fill="#F5B83D" fill-opacity="0.14"/>
  <text x="80" y="150" font-family="Inter, sans-serif" font-weight="600" font-size="32" fill="#F5B83D" letter-spacing="3">5 STEPS</text>
  <text x="80" y="520" font-family="Inter, sans-serif" font-weight="800" font-size="96" fill="#FFFFFF">
    <tspan x="80" dy="0">How we cut</tspan>
    <tspan x="80" dy="1.2em">onboarding from</tspan>
    <tspan x="80" dy="1.2em">9 days to 2</tspan>
  </text>
  <rect x="80" y="960" width="120" height="10" rx="5" fill="#F5B83D"/>
  <text x="80" y="1050" font-family="Inter, sans-serif" font-weight="400" font-size="40" fill="#B8C4D6">Swipe for the checklist</text>
  <text x="80" y="1220" font-family="Inter, sans-serif" font-weight="600" font-size="32" fill="#FFFFFF">Northwind Studio</text>
</svg>

Content slide (change the step number, title and two lines of body):

<svg xmlns="http://www.w3.org/2000/svg" width="1080" height="1350" viewBox="0 0 1080 1350">
  <rect width="1080" height="1350" fill="#F7F4EC"/>
  <text x="80" y="300" font-family="Inter, sans-serif" font-weight="800" font-size="200" fill="#F5B83D">2</text>
  <text x="80" y="520" font-family="Inter, sans-serif" font-weight="800" font-size="76" fill="#0B1F3A">
    <tspan x="80" dy="0">Remove the</tspan>
    <tspan x="80" dy="1.2em">approval loop</tspan>
  </text>
  <text x="80" y="800" font-family="Inter, sans-serif" font-weight="400" font-size="44" fill="#10151C">
    <tspan x="80" dy="0">One owner signs off.</tspan>
    <tspan x="80" dy="1.4em">Everyone else is told,</tspan>
    <tspan x="80" dy="1.4em">not asked.</tspan>
  </text>
  <rect x="80" y="1210" width="920" height="4" fill="#0B1F3A" fill-opacity="0.15"/>
  <text x="80" y="1270" font-family="Inter, sans-serif" font-weight="600" font-size="30" fill="#0B1F3A">Northwind Studio</text>
  <text x="1000" y="1270" text-anchor="end" font-family="Inter, sans-serif" font-weight="400" font-size="30" fill="#4A5563">2 / 5</text>
</svg>

4. Wide banner for LinkedIn link-style posts, 1200x627

A headline and a one-line subtitle on a split background. Keep text inside the left 700 px so crops stay safe.

<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="627" viewBox="0 0 1200 627">
  <rect width="1200" height="627" fill="#0B1F3A"/>
  <rect x="820" y="0" width="380" height="627" fill="#16345F"/>
  <circle cx="1010" cy="313" r="120" fill="none" stroke="#F5B83D" stroke-width="14"/>
  <circle cx="1010" cy="313" r="48" fill="#F5B83D"/>
  <rect x="60" y="90" width="80" height="8" rx="4" fill="#F5B83D"/>
  <text x="60" y="230" font-family="Inter, sans-serif" font-weight="800" font-size="66" fill="#FFFFFF">
    <tspan x="60" dy="0">The 2026 hiring</tspan>
    <tspan x="60" dy="1.2em">playbook</tspan>
  </text>
  <text x="60" y="440" font-family="Inter, sans-serif" font-weight="400" font-size="34" fill="#B8C4D6">
    <tspan x="60" dy="0">What worked for a team</tspan>
    <tspan x="60" dy="1.4em">of twelve</tspan>
  </text>
  <text x="60" y="560" font-family="Inter, sans-serif" font-weight="600" font-size="28" fill="#F5B83D">Northwind Studio</text>
</svg>

Adapting a template

Different size: change width, height, viewBox together and scale every x, y and font size by the same ratio. Re-wrap lines for the new width.
Light brand: swap background and text colours between templates 1 and 2.
Never add <image href="https://...">, @import, <style> with url(...) to files, or a DOCTYPE: they are refused.

Comment ajouter un skill

Claude (web et bureau) : téléchargez le skill en .zip, puis ajoutez-le dans Réglages, Capacités, Skills.
Claude Code : décompressez-le dans ~/.claude/skills/ (ou le dossier .claude/skills/ de votre projet).
Autres assistants : ouvrez le SKILL.md et collez-le dans les instructions personnalisées ou les connaissances du projet.

Les skills sont rédigés en anglais. Votre assistant vous répondra et écrira vos posts dans votre langue.