Social post previews

Whenever you write a social post, show it as it will look. Don't ask first, and don't wait for an answer: show the preview and carry on with the work. It's for social posts only, so skip it for a blog post or an article.

Fill the template

posts.html sits next to this guide, in the folder named by this skill's root. Copy it to your working folder and replace only the JSON in the posts-data block at the top. Keep the rest, including the licence notice at the top of the file.

{
  "account": { "name": "Juniper Coffee", "handle": "junipercoffee", "subtitle": "Roasters in Leeds", "avatar": "avatar.png" },
  "posts": [{
    "title": "Autumn launch",
    "when": "Draft",
    "text": "Text for every platform that has none of its own.",
    "media": [{ "src": "photo.jpg", "alt": "A bag of coffee" }],
    "platforms": {
      "instagram": { "text": "Its own caption.", "media": [] },
      "x": {}
    }
  }]
}

• platforms decides which previews show: instagram, linkedin, x, threads, facebook, tiktok, reels, shorts. Each can have its own text, media and when; anything left out comes from the post. Write each platform's text for that platform.
• A plan of several posts is several entries in posts; they stack on one page.
• With no avatar the card shows initials. No media and empty text still draw properly.
• media items: an image { "src", "alt" }, a video { "video", "poster", "duration" } (seconds), or a slide (below). Add width and height when a file's size can't be read, so its shape can be checked.

Show it

Pick by what the post has:

Call show_html with title and the path, or the html. To change a preview, call it again with the page's app_id. When the person shares it, publish_page publishes the same folder; only do that when they ask.

Carousels without images

You can make a carousel with no image tool: write the slides. layout slides take care of the design, and set the shape with "slideShape": "4:5" (the default) or "1:1" on the post.

"brand": { "background": "#2b1d16", "text": "#fbf3e6", "accent": "#e8a15b" },
"media": [
  { "layout": "cover", "kicker": "New on Friday", "title": "Three things to know", "note": "Swipe to read" },
  { "layout": "points", "title": "What's in the bag", "points": ["Plum", "Cocoa", "Smoke"] },
  { "layout": "quote", "quote": "Like the first cold morning.", "by": "Priya, head roaster" },
  { "html": "<p class=\"slide-kicker\">Your own</p><h3 class=\"slide-title\">Any HTML you like</h3>" }
]

Write a good carousel like this: one idea per slide, a cover that promises something specific, 5 to 10 slides, about 20 words a slide, and a last slide that says what to do next. In your own html slides size text in cqw (a percentage of the slide's width), so it fits at every size.

These slides show in the preview only. To post them for real, the person needs them as images, or as a PDF for LinkedIn: say so plainly. This skill can't export them.

What each platform wants

From each platform's own docs. The cards note these quietly; nothing is ever blocked.

When Postiz is connected, its integrationSchema is the authority for that channel's rules; follow it where it differs. The preview is a close likeness, not a pixel match: say so if the person asks.