use-brand

name	use-brand
description	Consume a finished brand kit (brand/<id>/ — design.md + brand.json + editorial/ + voice/ + assets/, made by /make-brand) and turn it into ANY on-brand deliverable - a website / landing page, social & OG cards, a slide deck (HTML + PDF + PPTX), a PDF (auto brand-guidelines or any document), marketing copy in the brand voice, dev handoff (CSS variables / Tailwind theme / W3C design-tokens.json), or a video brief handed to /make-video. Self-contained - every generator reads the kit's vendored assets + bundled templates in $SKILL_DIR/assets/. Deliverables are render-safe - inline fonts/logos/backgrounds, no network at open, deterministic Chrome bakes. Trigger - /use-brand <kit> "<what you want>".
allowed-tools	["Bash","Read","Grep","Glob","Write","Edit","AskUserQuestion","WebSearch","WebFetch"]
triggers	["use my brand","apply my brand","on-brand landing page","brand website","brand deck","brand guidelines pdf","social card","og image","brand tokens","brand voice copy","/use-brand"]

/use-brand — turn a brand kit into any deliverable

The back end of the pipeline: brand → anything. Given a finished kit under brand/<id>/ (produced by /make-brand) and a request, this skill renders the deliverable in the brand's own palette, type, logos, backgrounds, signature devices, and voice — a website, a deck, a PDF, social/OG cards, marketing copy, dev tokens, or a video brief. The kit is the single source of truth; nothing here re-decides the brand.

$SKILL_DIR = this skill's directory. Deterministic work runs through bundled scripts in $SKILL_DIR/scripts/; the template library lives in $SKILL_DIR/assets/ (web · social · deck · pdf · copy + the shared _brand.mjs loader and _bake.mjs rasteriser). The skill is self-contained — it reads the kit's vendored assets and its own bundled templates, never the network at render, never a reference kit.

Inputs

1. A kit — brand/<id>/ (or a path to its brand.json, or just the <id>). If the request names none and exactly one kit exists under brand/, use it; otherwise ask which.
2. A request — plain language describing the deliverable ("a landing page", "an investor deck", "a brand guidelines PDF", "an OG image for the launch", "tokens for my Next.js app", "a launch tweet thread", "a 30s promo video"). You route it to one or more surfaces (below).

Phase 0 — Preflight (before any creative spend)

node "$SKILL_DIR/scripts/doctor.mjs"          # general; add --bake to require Chrome + playwright-core

• FAIL aborts. playwright-core + pptxgenjs are this skill's only deps — install once with npm i -D playwright-core pptxgenjs in $SKILL_DIR (playwright drives your installed Google Chrome, no browser download). They are needed only for bakes (PNG/PDF/PPTX); tokens, copy, video-brief, and all .html outputs work with zero deps.
• Decide the output root: default out/<id>/ at the project root (per-surface subfolders below). Refuse to clobber a non-empty target without confirming.

Phase 1 — Load the kit (the contract)

node "$SKILL_DIR/scripts/load-kit.mjs" --kit brand/<id>   # writes brand/<id>/brandContext.json + prints a summary

brandContext.json is the normalized contract every generator reads — palette (bg/bg2/panel/fg/dim + accent roles + gradient/accentMode), fonts (families + vendored woff2 + fonts.css), logos, stickers, backgrounds, mockups, voice lock, editorial files, signature devices. Read its summary; the warnings tell you what the kit lacks (e.g. no fonts → system fallback) so you can set expectations. If the kit has no brand.json/brand.spec.json, the loader best-effort reconstructs from design.md + the asset folders and says so — sanity-check the palette before rendering.

Phase 2 — Route the request → surface(s)

If the user wants…	Surface	Generator
a website / landing page / hero / docs page	web	web.mjs
a social post / OG image / Twitter card / story	social	social.mjs
a slide deck / pitch / investor deck	deck	deck.mjs
a brand-guidelines PDF, or any document → PDF	pdf	pdf.mjs
taglines / launch post / thread / ad / email / landing copy	copy	copy.mjs
CSS variables / Tailwind theme / design tokens for a codebase	tokens	tokens.mjs
a video / promo / TikTok / Reel / explainer	video	video-brief.mjs → /make-video

One request can fan out to several (a launch = landing + OG card + tweet thread). Ask only when genuinely ambiguous (which surface, which platform/size, which background) — use the office-hours decision-brief discipline below; otherwise pick the sensible default, state it, and proceed.

Phase 3 — Generate (per surface)

Every generator takes --kit brand/<id> and --out <dir>; baking surfaces also take --bake. After running, open/verify the output (see Phase 4). Standard runs:

S="$SKILL_DIR/scripts"; K="brand/<id>"

# WEB — self-contained .html (+ fullpage PNG with --bake)
node "$S/web.mjs"    --kit "$K" --kind landing|hero|page --out out/<id>/web \
                     --headline "…" --subhead "…" --cta "…" --eyebrow "…" [--bake]

# SOCIAL — exact-size card → PNG
node "$S/social.mjs" --kit "$K" --size og|square|story|twitter|<WxH> \
                     --title "…" --subtitle "…" --kicker "…" --badge "…" [--bg bg-<name>] --bake

# DECK — HTML deck (+ PDF/PPTX). Edit the sample outline, then rerun with --in.
node "$S/deck.mjs"   --kit "$K" [--in out/<id>/deck/outline.json] --out out/<id>/deck [--pdf] [--pptx]

# PDF — auto brand-guidelines, or wrap a doc
node "$S/pdf.mjs"    --kit "$K" --kind guidelines --out out/<id>
node "$S/pdf.mjs"    --kit "$K" --kind doc --in path/to/doc.md --title "…" --out out/<id>

# TOKENS — tokens.css + Tailwind theme/config + tokens.json (+ fonts copy)
node "$S/tokens.mjs" --kit "$K" --out out/<id>/tokens

# COPY — scaffold a voice-locked message, then AUTHOR it (creative, below)
node "$S/copy.mjs"   --kit "$K" --kind taglines|launch-post|tweet-thread|landing-copy|ad-variations|email \
                     --topic "…" --out out/<id>/copy

# VIDEO — assemble a /make-video brief from the kit, then hand off
node "$S/video-brief.mjs" --kit "$K" --platform tiktok|reels|shorts|youtube|square \
                     --story "…" --duration 30 --out out/<id>/video/brief.json

The creative parts (yours to author — scripts scaffold, you supply taste):

• web / social headlines & body — write real, specific copy in the brand voice; never ship lorem. Deploy a signature device or the punctuation signature where it lands naturally.
• deck outline — when --in is omitted, deck.mjs writes outline.sample.json; rewrite it into the real narrative (cover → sections → content/quote → closing), then rerun with --in.
• copy — copy.mjs copies a scaffold and injects the brand + the paths of the editorial voice files to read. Read editorial/03-VOICE-STORYTELLING.md + 00-EDITORIAL-LINE.md + 04-LLM-PLAYBOOK.md + voice/voice.lock.json, fill the {{SLOT}} markers in the brand voice, then run the scaffold's VALIDATE checklist (on-voice · no AI-slop / no banned words · claims true · length fits channel · signature used).
• video — video-brief.mjs wires style.design_md (the brand's visual source of truth) + brand.json + the voice lock + editorial into a brief, then prints /make-video <brief>. Hand off; /make-video adopts design.md verbatim and editorial/ for motion + voice.

Phase 4 — Verify + report

• Render-check every visual deliverable (open the .html, or the baked PNG/PDF, via /browse or playwright): fonts load (no system fallback), it reads as the same identity as the brand board, color comes only from the kit's palette, the logo is crisp, the background sits behind content. Fix what you see.
• Determinism for bakes: re-bake and confirm byte-stability; grep generated HTML for no Math.random / Date.now / infinite gradient animation.
• Report: the kit used, each deliverable + its path, the surfaces you chose, and the next hop (e.g. for video, the exact /make-video command; for tokens, which file to import).

Render-safety contract (every generated asset obeys)

• Self-contained by default — fonts inlined as data-URI woff2 (faceCSS(ctx,{mode:'inline'})), logo inlined as SVG (logoSvg), background inlined as data-URI PNG (bgUri). The opened file needs no network. (Use --link/copied assets only for a multi-file site where bundle size matters.)
• Theme purely from variables — :root{ rootVars(ctx) } then var(--bg/--fg/--acc/--panel/--line/--grad) + font-family:var(--fd|--fm|--fh). No hardcoded hex or font name → any kit themes the same template.
• Motion (if any): transform/opacity only, finite, no Math.random/Date.now. Deliverables are screenshot/print targets — static-first.
• Bakes are CPU raster (--disable-gpu, sRGB), fonts awaited, animations frozen → repeatable.

Asking questions (office-hours discipline — self-contained)

When you must ask, use AskUserQuestion and frame each as a decision brief: a short title; 1–3 plain sentences on what's being decided; one option marked (recommended) with a one-line reason; 2–4 options each with a real upside + downside. If AskUserQuestion is unavailable, render the same brief as prose ("reply with a letter") and STOP. Never silently auto-decide a creative call (which surface, platform/size, voice direction).

How a generator reads the kit (for authoring/extending)

All scripts import the shared loader + helpers from $SKILL_DIR/assets/_brand.mjs (resolveKit, rootVars, faceCSS, fontsCss, logoSvg, pickLogo, dataUri, bgUri, abs, copyInto, slug, parseArgs) and the rasteriser from _bake.mjs (screenshot, pdf). brandContext paths are kit-relative; ctx.dir is absolute; read kit files via abs(ctx, rel). A new surface = a new scripts/<surface>.mjs + (optionally) assets/<surface>/*.tmpl.html with {{TOKEN}} markers — nothing else to wire.

File map (a /use-brand run)

out/<id>/
  web/      landing|hero|page.html (+ .png with --bake)
  social/   <id>-<size>.html (+ <id>-<size>.png with --bake)
  deck/     deck.html · outline.json (or outline.sample.json) (+ deck.pdf / deck.pptx)
  copy/     <kind>.md   (scaffold → you author in voice)
  tokens/   tokens.css · theme.css · tailwind.config.cjs · tokens.json · fonts/ · README.md
  video/    brief.json  (→ /make-video)
  brand-guidelines.pdf  (+ guidelines.html)         # pdf --kind guidelines
brand/<id>/brandContext.json                          # normalized contract (load-kit)