# 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".

- Skill: `thedixitjain/generate-social` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add thedixitjain/generate-social`
- Raw SKILL.md: https://api.skillmd.com/api/skills/thedixitjain/generate-social/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Marketing & Growth
- Author: thedixitjain (https://skillmd.com/u/thedixitjain)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/thedixitjain/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:

   ```js
   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',
   });
   ```

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"`.

## Output

One SVG file under `output/`, named for the slug and platform:

```text
output/northwind-instagram-square.svg
```

- Sized to the chosen platform (for example 1080×1080 for `instagram-square`).
- Text sits in editable zones — `id="headline"`, `id="subhead"`, `id="cta"` — that wrap automatically.
- All copy is HTML-escaped before it enters the markup; colors come from the palette only. No raster is produced.

## Error Handling

| Condition | Behavior |
|-----------|----------|
| No active brand profile | Stop and direct the user to `/brand-new`. |
| Profile fails `validateProfile` | Report the offending field and stop. |
| Headline missing | Ask the user for the headline before generating. |
| Unknown platform requested | List the four supported presets and ask the user to pick one. |
| Headline too long for the canvas | The generator wraps text; verify the result and shorten copy if the guardian flags overflow. |

To troubleshoot a clipped layout, verify the copy length against `references/platform-sizes.md`, then re-run and re-check with the guardian.

## Examples

**Example — launch announcement post**

> /brand-make an instagram post announcing our Series A

Builds a 1080×1080 square with the brand band, a wrapped headline, and an accent call-to-action, saved as `output/northwind-instagram-square.svg`.

**Example — link card**

> /brand-make an og card for the blog post

Generates a 1200×630 Open Graph card sized for link previews and hands it to the guardian.

**Example — story cover**

> /brand-make an instagram story

Produces a 1080×1920 story, insetting text clear of the platform's top and bottom safe zones.

## Resources

- `references/platform-sizes.md` — every preset size, safe zones, the layout the generator produces, and how to add a preset.
- Sibling skills: generate-logo for marks, and generate-graphic for photographic backgrounds — route between them with the `/brand-make` command.
- [Open Graph protocol](https://ogp.me/) — the metadata standard `og-card` targets.
- [Agent Skills documentation](https://code.claude.com/docs/en/skills) — how skills are authored and invoked.

---

**Source:** [`jeremylongshore/claude-code-plugins-plus-skills`](https://github.com/jeremylongshore/claude-code-plugins-plus-skills) → `plugins/design/brand-forge/skills/generate-social/SKILL.md`