/brand-kit-playground — Visual Brand Workbench

Your brand lives in markdown files. This skill renders it as a living, interactive HTML page the user opens in their browser — palette swatches, type specimens, logo lockups, and a real social card preview that updates as they tweak tokens. When they're happy, they copy the structured JSON and you write it back to brand/creative-kit.md.

This is the visual approval step in the /cmo flow. /visual-style writes the brand identity. This skill shows it.

On Activation

1. Read brand/creative-kit.md — extract the Colors, Typography, and Visual Brand Style sections.
   • If the file is template/empty: warn the user. "Your creative kit is empty — the playground will use placeholder values. Run /visual-style first for a real preview, or continue and I'll use defaults you can tweak."
   • If it has real content: proceed. Parse colors (hex values), fonts (family names), border radius, shadows, gradients.
2. Read brand/voice-profile.md — extract tone adjectives, vocabulary preferences, headline style.
3. Read brand/positioning.md — extract the primary positioning angle for the social card headline.
4. Read brand/audience.md if it exists — extract audience description for the voice snapshot panel.
5. If no brand files exist at all: proceed with sensible defaults. The playground works at L0. Show placeholder brand with a note: "These are defaults. Fill in your brand files and re-run for a real preview."