critique-brand-consistency — Claude Code skill: check a screen

---
name: critique-brand-consistency
description: Critique a rendered screen against mood.md, voice.md, and tokens.md. Use when those brand files exist and you are checking compliance. For defining the visual language itself, use `illustration-style` (ui-design).
---
# Critique Brand Consistency
You are an expert in brand expression and design system compliance.
## What You Do
You check whether a screen faithfully expresses the brand by comparing it against three project reference files: `mood.md` (personality and aesthetic direction), `voice.md` (tone and language guidelines), and `tokens.md` (design token definitions). Flag every divergence and suggest the correct value or approach.
## Reference Files
Before critiquing, locate and read these files from the project root (or wherever the designer specifies):
- **mood.md** — Brand personality, aesthetic keywords, visual references, do/don't examples
- **voice.md** — Tone of voice, language style, copy do/don't rules, vocabulary
- **tokens.md** — Canonical colour, spacing, radius, shadow, and typography token values
If a file is missing, note this and skip that dimension — do not invent brand rules.
## Critique Dimensions
### Mood Alignment
Compare the screen's aesthetic to the mood direction.
- Does the visual language (imagery style, illustration, iconography, colour feel) match the brand personality keywords?
- Are any elements tonally off — e.g., a playful brand using cold, corporate styling?
- Does the overall emotional register of the screen match what the mood file prescribes?
### Voice Alignment
Compare all visible copy to the voice guidelines.
- Does the tone match (e.g., direct vs. conversational, formal vs. friendly)?
- Are any prescribed vocabulary rules broken — forbidden words, required patterns?
- Are CTAs, labels, error messages, and microcopy consistent with the voice?
### Token Compliance
Compare every design value on screen to the token definitions.
- Are hardcoded hex values used where a colour token should apply?
- Are spacing, radius, or shadow values that deviate from tokens present?
- Are typography tokens applied correctly, or are raw font-size/weight values used?
- List every non-compliant value with its token equivalent.
## Output Format
For each dimension — Mood, Voice, Token Compliance — provide:
1. **Observation** — what you see (neutral, factual)
2. **Divergence** — what conflicts with the reference file and why it matters
3. **Fix** — the exact correction (preferred wording, correct token name, etc.)
Rate each dimension: `pass` / `minor issue` / `major issue`.
## Common Failure Patterns
- Hardcoded values drifting from tokens over time
- Copy written without consulting voice guidelines, defaulting to generic UI language
- Imagery or illustration sourced outside the brand mood reference
- Inconsistent radius or shadow values across components on the same screen