| name | brand-context |
| description | Load and validate brand assets before any design work — logo, colors, typography, voice. Gates UI and marketing work behind confirmed brand context. |
| version | 0.1.0 |
| level | 1 |
| triggers | ["brand context","load brand","brand assets","set up brand","/brand-context"] |
| context_files | ["context/project.md"] |
| steps | [{"name":"Locate Assets","description":"Find or create brand_assets/ directory. Identify what is present — logo files, brand guidelines document, color definitions."},{"name":"Extract Core Tokens","description":"From whatever exists, extract the minimum required — primary color, secondary color, font family, logo file path. If guidelines doc exists, parse it fully."},{"name":"Confirm and Load","description":"Present extracted brand context to user. Confirm accuracy before proceeding. Document in active session context."}] |
Brand Context Skill
Establish brand identity before writing any UI, marketing, or document code. No design work starts without confirmed brand context.
What Claude Gets Wrong Without This Skill
Without brand context, Claude invents a color palette. It defaults to blues and purples (the AI slop palette), picks Inter because it is safe, and produces something that could belong to any company. The output is technically correct and visually generic. Fixing brand drift after implementation is expensive — colors are scattered across files, fonts are hardcoded, the logo is the wrong variant.
Brand context is not optional decoration. It is the foundation that every downstream design decision rests on.
The brand_assets/ Pattern
Every project using this skill should have a brand_assets/ directory at the project root containing:
brand_assets/
logo.svg (primary logo, SVG preferred)
logo-dark.svg (dark background variant, if available)
logo-mark.svg (icon/symbol only, if available)
brand.md (guidelines — colors, fonts, voice, usage rules)
If brand_assets/ does not exist, create it and prompt the user to populate it before continuing.
Reference it explicitly in CLAUDE.md so it is loaded every session:
## Brand
Brand assets are in brand_assets/. Always check this directory before writing any UI code.
Phase Gates
Locate Phase — hard gate
Check for brand_assets/ at the project root. If it does not exist:
- Create the directory
- Stop and ask the user to provide: logo file, primary color, secondary color, primary font
- Do not proceed to design work until at minimum a color and font are confirmed
If brand_assets/ exists, inventory what is present. Note what is missing (logo variants, brand guidelines doc).
Extract Phase
From brand.md or equivalent guidelines document, extract:
| Token | Example | Notes |
|---|
| Primary color | #2563EB | With HSL equivalent |
| Secondary color | #EA580C | CTA / accent |
| Background | #F8FAFC |
