promo

Orchestrates production of promotional assets including hero images, store screenshots, and demo GIFs.

Updated Sep 14, 2026
One-click install
npx skills add https://github.com/Suge8/skills --skill promo-suge8
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: promo
Source: https://github.com/Suge8/skills/tree/main/creative/promo
Command: npx skills add https://github.com/Suge8/skills --skill promo-suge8

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Launching a project requires a full set of promotional materials—hero images, OG cards, store screenshots, README visuals, and demo GIFs/videos—each with exact platform dimensions and quality standards, which is tedious to produce consistently by hand. ## Core Features & Use Cases - Gap-Driven Asset Planning: Audits the project type (web, browser extension, desktop app, CLI/TUI) and existing materials, then presents a checklist of missing assets for the user to pick from. - Screenshot Composition Pipeline: Captures raw screenshots via Playwright, screencapture, or freeze, then composites them with backgrounds and copy in HTML canvases rendered at exact platform sizes (GitHub social preview 1280×640, Chrome Web Store 1280×800, Product Hunt 1270×760, etc.). - Motion Asset Recording: Produces demo GIFs and videos using VHS tape scripts for CLI tools, Playwright recordVideo for web, and ffmpeg post-processing (palette-based GIF conversion, trimming, speed adjustment). - Use Case: You just finished a browser extension and need a Chrome Web Store listing. The skill captures real-data screenshots, composites them onto branded backgrounds at 1280×800, and records a Playwright-driven demo video, saving everything to design/promo/. ## Quick Start Use the promo skill to create a GitHub social preview image and a README demo GIF for my project.

Frequently Asked Questions about promo

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a demo GIF for a CLI tool?▼

Write a VHS .tape script describing the terminal session with Type, Enter, and Sleep commands, then run vhs demo.tape to render a GIF or MP4. Give Sleep enough time for real command output by timing an actual run first.

How to take high-quality screenshots for Chrome Web Store listing?▼

Capture raw screenshots with Playwright launchPersistentContext at 2x deviceScaleFactor, then composite them in an HTML canvas at exactly 1280×800 with rounded corners, shadows, and headline text. Render the canvas with headless Chrome for the final image.

What size should a GitHub social preview image be?▼

GitHub social preview images must be exactly 1280×640 pixels and are uploaded in repository Settings. OG/Twitter cards use 1200×630, and README hero images should be exported at 2400×1260 for 2x sharpness.

How do I convert MP4 to high-quality GIF with ffmpeg?▼

Use the two-pass palette method: first run ffmpeg with palettegen to build a color palette, then run again with paletteuse combining the video and palette. This produces far better quality than direct conversion at 12 fps and 960px width.

Can Playwright record videos of browser extension demos?▼

Yes, use launchPersistentContext with recordVideo enabled and load the extension via CDP, since Chrome 137+ removed --load-extension. Host permissions must be re-granted each launch using developerPrivate APIs because session-level installs reset optional permissions.

Why do AI-generated promotional images look artificial?▼

Generic prompts produce cluttered, oversaturated results. Write prompts as briefs specifying purpose, single-focal composition with negative space, brand-derived colors, and a negative list banning text, watermarks, neon, and glossy 3D looks.