Agent skill · design visual · jeremylongshore
generate-social
Generates platform-sized, on-brand social templates as SVG from the active brand profile, with editable headline, subhead, and call-to-action zones. Vector output needs no account, key, or network. Use when a user asks for an Instagram post or story, an Open Graph or social card, a YouTube thumbnail, or a banner. Trigger with "make an Instagram post", "social card", or "/brand-make social".
Why this skill is useful
Generates SVG templates with specific branding and layout that the AI wouldn't reliably create on its own.
What it needs
Requires node installed locally. About 3k tokens when loaded. Last updated 2026-08-07. 2,604 stars on the source repository.
What this skill does
Generate Social Generates a platform-sized, on-brand social template as SVG from the active brand profile, with editable text zones the user can tweak afterward. Overview The generate-social skill turns a headline (and optional subhead and call-to-action) into a correctly sized social graphic that uses the brand's palette and fonts. Output is vector SVG, so it scales cleanly and needs no account, key, or network call. The generator (lib/social.mjs) lays out a brand band, a wrapped headline, an optional subhead, and an optional accent pill; the skill resolves the active profile, picks the platform, runs the generator, and saves the file. For a photographic background behind the template, the raster path lives in the generate-graphic skill. Prerequisites An active brand profile created with /brand-new (a brand/ directory, or brands/[slug]/). Read loads its color-system.json and typography.json. Node.js on the PATH — the generator runs as node lib/social.mjs. Write access to an output/ directory in the working repository. A headline string; subhead and call-to-action are optional parameters. Instructions 1. Run /brand-status to confirm the active brand; if none exists, tell the user to run /brand-new and stop. 2. Use Glob to locate the active brand directory, then Read and validate the profile with validateProfile. Stop with the offending field if validation fails. 3. Choose the platform preset — instagram-square (default), instagram-story, og-card, or youtube-thumb. Ask the user when unspecified. 4. Generate the template by running the node generator: 5. Write the result with the Write tool to output/[slug]-[platform].svg. 6. Hand the file to the visual-guardian subagent for a palette, contrast, and type pass; apply its fixes or surface its flags. 7. Report the saved path and point out the editable zones so the user can customize or adapt the copy: id="headline", id="subhead", and id="cta". …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills jeremylongshore/generate-social