generate-social

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:

   import { loadProfile } from '../../lib/brand.mjs';
   import { buildSocial } from '../../lib/social.mjs';
   const profile = loadProfile(activeDir);
   const { svg, platform } = buildSocial(profile, {
     platform: 'instagram-square',
     headline: 'We just raised our Series A',
     subhead: 'Building the future of logistics',
     cta: 'Read the story',
   });