Menu
Load and validate brand assets before any design work — logo, colors, typography, voice. Gates UI and marketing work behind confirmed brand context.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Convert PDF/EPUB library to Markdown and generate Obsidian MOC notes
Hook-based compaction suggestions at logical task boundaries
Context window management — track spend, decide when to compact, preserve state
Session-start orientation — loads context, surfaces learnings, confirms registry
Quality and semantic review — catches what automated tools miss
Planner → Architect → Critic deliberation loop — produces a formally validated ADR
| 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."}] |
Establish brand identity before writing any UI, marketing, or document code. No design work starts without confirmed brand context.
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.
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.
Check for brand_assets/ at the project root. If it does not exist:
If brand_assets/ exists, inventory what is present. Note what is missing (logo variants, brand guidelines doc).
From brand.md or equivalent guidelines document, extract:
| Token | Example | Notes |
|---|---|---|
| Primary color | #2563EB | With HSL equivalent |
| Secondary color | #EA580C | CTA / accent |
| Background | #F8FAFC | Light mode base |
| Foreground | #1E293B | Primary text |
| Primary font | Inter | With fallback stack |
| Secondary font | Playfair Display | Heading variant if separate |
| Logo path | brand_assets/logo.svg | Relative path |
| Brand voice | Professional, direct | 2-3 adjectives |
If a design-system/MASTER.md already exists (from a previous ui-ux-pro-max design system generation), read it — it may already contain the extracted tokens.
Present extracted context to the user in a summary table. Get explicit confirmation before proceeding to any design task. This prevents building on misread or outdated brand data.
Do not start writing UI code during the confirmation step.
After brand context is confirmed, the ui-ux-pro-max design system generator can be seeded with the brand personality and product type to produce a full design system recommendation:
python3 .claude/skills/ui/ui-ux-pro-max/scripts/search.py \
"[product type] [brand personality]" --design-system -p "[ProjectName]"
This produces a design-system/MASTER.md that becomes the session's design source of truth.
Do not invent colors or fonts when brand_assets/ is absent. Stop and ask.
Do not read only the logo file and skip the guidelines document. The logo file provides no color or font information.
Do not assume colors from the logo are the full palette. Logos often use a subset of the brand palette.
Do not proceed if the user says "just use something that looks good." That is a signal to run ui-ux-pro-max first and present options before building.