Skip to content
All skillsContent

Workflow skill

Promo Image Generator

draft, under review5 phases4 bundled files

Show the whole app inside a laptop, not a cropped panel, because the reader has never heard of your product. One template for the whole carousel, real data redacted in CSS, and the set reviewed on a contact sheet where drift is actually visible.

Install
/plugin marketplace add Selwynuy/selwynuy
/plugin install selwyn-handbook@selwyn-handbook
# then run: /selwyn-handbook:promo-image-generator

Or read it as SKILL.md.

When it activates

Use this skill when making a launch graphic, a social carousel, an OG image, or any promo that shows the product.

The workflow

  1. Rules

    Read the promo rulebook before writing any HTML: why whole screens beat crops for a cold audience, the arc a carousel needs, what may never appear in a screenshot, the resolution calculation that decides how big the mockup can be, and why a hero section's watermark constants are wrong on a square.

    branding-overviewdesign-tokens

  2. Ground

    Establish what is actually live and what a stranger can actually do, from the product's own copy, pricing config, feature flags, and signup path. A CTA that does not match the real door wastes the whole post, so write the findings down before any headline is drafted.

    writing-without-ai-slop

  3. Shoot and scrub

    Capture at 2x, then check every shot: no third-party names, no account identifiers, no figures you would not publish, no trial banners, no negative totals, no empty tables, no scrollbars. Redact with CSS overlays (mask, blur, replace) and say on the slide what was blurred.

  4. Compose

    Copy the carousel template and edit the tokens, the brand mark paths, and the slides. One template emits every slide, because a sequence seen back to back turns any drift in type scale or pill placement into sloppiness. Each screenshot slide carries one pill restating its claim at a size a phone can read.

    design-tokens

  5. Render and review

    Render at 2x, then build a contact sheet and judge the set rather than the files: drift first, then slide 1 with the others covered, then whether a pill is sitting on something the slide needed, then the headlines in order. Ship a plaintext caption alongside the images.

    writing-without-ai-slopworking-with-me

What ships in the bundle

  • scriptscripts/render-slides.mjsCross-platform renderer: finds an installed Chrome, Edge, or Chromium and screenshots each HTML slide at its declared canvas and scale, reporting real pixel dimensions. Zero dependencies.
  • scriptscripts/contact-sheet.mjsTiles rendered slides into one review image at deliberately small tiles, because a slide that fails at 420px fails in a feed and drift between slides is invisible one file at a time.
  • templatetemplates/carousel.mjsThe slide generator: brand tokens, the corner-bleeding watermark, laptop and browser mockups, the claim pill, checks, CTA, and CSS redaction in mask, blur, and replace modes.
  • referencereferences/promo-design.mdThe promo rulebook: the cold-audience rule, the carousel arc, matching the CTA to the product's real door, what may appear in a screenshot and how to redact it, resolution maths, canvas sizes and platform crop behaviour, the vertical budget, the watermark on a square, and a troubleshooting table.

2 run, the rest load on demand.