critique-brand-consistency
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).
Works with
--- 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). license: MIT --- # 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
More General & Other skills
find-skills
vercel-labs/skills
Helps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skill should be used when the user is looking for functionality that might exist as an installable skill.
grill-me
mattpocock/skills
A relentless interview to sharpen a plan or design.
grill-with-docs
mattpocock/skills
A relentless interview to sharpen a plan or design, which also creates docs (ADR's and glossary) as we go.

