/brand-compile

Compile brand tokens from brand.yaml into consumable formats.

What This Does

Reads brand.yaml from project root and produces:

• tokens.css — CSS custom properties (:root

• .dark )

• theme.css — Tailwind 4 @theme inline with OKLCH values

• tokens.ts — TypeScript const export for Satori templates and Remotion

Process

• Locate brand.yaml in the current project root

• If no brand.yaml exists, check for brand-profile.yaml

• design-tokens.json and offer to migrate: node ~/Development/brand-kit/dist/src/cli.js migrate --profile brand-profile.yaml --tokens design-tokens.json --out brand.yaml

• Validate the schema: node ~/Development/brand-kit/dist/src/cli.js validate brand.yaml

• Compile tokens: node ~/Development/brand-kit/dist/src/cli.js compile --out ./src/styles

• Verify Tailwind @theme import exists in the project's CSS entry point (e.g., globals.css )

• Run typecheck if TypeScript project: pnpm typecheck or npx tsc --noEmit

Output

Default output directory: ./brand-output/

Override with --out ./src/styles to place tokens where your project expects them.

brand-output/ tokens.css # CSS custom properties theme.css # Tailwind 4 @theme inline tokens.ts # TypeScript const export

Format Selection

• --format css — Only CSS custom properties

• --format tailwind — Only Tailwind 4 theme

• --format ts — Only TypeScript tokens

• --format all — All three (default)

Integration

After compiling, import in your project:

Tailwind 4 (recommended):

/* globals.css */ @import "tailwindcss"; @import "./theme.css";

Plain CSS:

@import "./tokens.css";

TypeScript (Satori/Remotion):

import { brand } from "./tokens.js";

Related Skills

• /brand-init — Create brand.yaml from scratch

• /brand-assets — Generate OG cards and social images

• /og-card — Legacy OG card generation (superseded by brand-assets)