| 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
- 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.
- 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"
- 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>
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>"
node "$S/web.mjs" --kit "$K" --kind landing|hero|page --out out/<id>/web \
--headline "…" --subhead "…" --cta "…" --eyebrow "…" [--bake]
node "$S/social.mjs" --kit "$K" --size og|square|story|twitter|<WxH> \
--title "…" --subtitle "…" --kicker "…" --badge "…" [--bg bg-<name>] --bake
node "$S/deck.mjs" --kit "$K" [--in out/<id>/deck/outline.json] --out out/<id>/deck [--pdf] [--pptx]
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>
node "$S/tokens.mjs" --kit "$K" --out out/<id>/tokens
node "$S/copy.mjs" --kit "$K" --kind taglines|launch-post|tweet-thread|landing-copy|ad-variations|email \
--topic "…" --out out/<id>/copy
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)
