playbooks

home / skills / phrazzld / claude-config / brand-pipeline

brand-pipeline skill

/skills/brand-pipeline

This skill orchestrates the brand-init, brand-compile, and brand-assets steps to deliver a full brand system from zero to deployment.

npx playbooks add skill phrazzld/claude-config --skill brand-pipeline

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
2.1 KB
---
name: brand-pipeline
description: |
  Master orchestrator: brand-init → brand-compile → brand-assets.
  One command to go from zero to full brand system.
argument-hint: "[project-name]"
effort: high
---

# /brand-pipeline

Full brand system setup in one command.

## What This Does

Orchestrates the complete brand-as-code pipeline:
1. Create `brand.yaml` (if missing)
2. Compile to CSS/Tailwind/TypeScript tokens
3. Generate visual assets (OG cards, social images)

## Process

### Step 1: Brand Identity

Check for existing brand files:
- `brand.yaml` exists → skip to Step 2
- `brand-profile.yaml` exists → offer migration via `brand-kit migrate`
- Neither exists → run `/brand-init` interactively

### Step 2: Compile Tokens

```bash
node ~/Development/brand-kit/dist/src/cli.js compile --out ./src/styles
```

Verify output:
- `tokens.css` — CSS custom properties
- `theme.css` — Tailwind 4 @theme
- `tokens.ts` — TypeScript export

### Step 3: Integrate

Check project setup and wire tokens:
- If Tailwind project: verify `@import "./theme.css"` in CSS entry
- If TypeScript: verify tokens.ts is importable
- Run typecheck: `pnpm typecheck` or `npx tsc --noEmit`

### Step 4: Generate Assets

Determine needed assets from project context:
- Always: `og-default`
- If blog exists: `og-blog` + `blog-header`
- If launching: `launch-hero` + `social-announce`
- If changelog: `og-changelog`

```bash
node ~/Development/brand-kit/dist/src/cli.js render og-default \
  --title "[Brand Name]" --subtitle "[Tagline]" --out ./public/og.png
```

### Step 5: Summary

Report what was created:
- brand.yaml location
- Token output files
- Generated assets
- Integration status

## Flags

- `--skip-init` — Skip brand-init, require existing brand.yaml
- `--skip-assets` — Only compile tokens, skip asset generation
- `--out <dir>` — Override token output directory

## Related Skills

- `/brand-init` — Interactive brand discovery
- `/brand-compile` — Token compilation
- `/brand-assets` — Asset generation
- `/launch-assets` — Full launch package (uses brand-pipeline internally)

Overview

This skill is a master orchestrator that runs a complete brand-as-code pipeline in one command. It bootstraps a brand identity, compiles design tokens to CSS/Tailwind/TypeScript, and generates visual assets like OG images and social banners. It reports integration status and output locations at the end.

How this skill works

It inspects the project for existing brand files and either reuses, migrates, or launches an interactive brand init. Then it compiles tokens into tokens.css, theme.css (Tailwind 4), and tokens.ts, and verifies integration with Tailwind/TypeScript tooling. Finally it determines needed visual assets from the project context and renders them to the chosen output directory, summarizing results.

When to use it

  • Starting a new product or repo and you need a full brand system quickly
  • Onboarding brand assets and tokens into an existing Tailwind or TypeScript project
  • Before a launch to generate announcement and hero visuals alongside tokens
  • When migrating from an older brand profile to a modern brand.yaml + tokens
  • As a CI step to ensure tokens and assets are generated and committed

Best practices

  • Run without --skip-init for first-time setup so brand.yaml is created interactively
  • Use --out to set a consistent repository tokens directory (e.g., ./src/styles)
  • Run a typecheck (pnpm typecheck or npx tsc --noEmit) and verify @import "./theme.css" in your CSS entry when using Tailwind
  • Use --skip-assets in CI when only token compilation is required and assets are handled elsewhere
  • Review the summary output to confirm file locations before committing changes

Example use cases

  • New repo: run the pipeline to create brand.yaml, compile tokens, and generate default OG images in public/
  • Existing Tailwind site: compile tokens, ensure theme.css is imported, and generate blog-specific OG images if a blog is detected
  • Product launch: generate launch-hero and social-announce assets while compiling tokens for the new release theme
  • Migration: detect brand-profile.yaml, run migration via brand-kit migrate, then compile tokens and assets
  • CI job: run with --skip-init and --out to compile tokens and fail the build if tokens.ts is not importable

FAQ

What if brand.yaml already exists?

The pipeline will skip init and proceed to compile tokens and generate assets. Use --skip-init to enforce that behavior.

Can I skip asset generation?

Yes. Use --skip-assets to compile tokens only and skip rendering images.