brand-and-design-system

From Madden Frameworks

Use this skill whenever the operator is starting design / UI work AND a brand or design-system discipline floor is at risk — a new design surface without a brand bucket named, animation being added without earning its place, copy treated as polish instead of design, a new product / brand / persona / major feature being named or renamed, a non-locked font creeping in, a color drift away from a product's locked signature, generic Claude-default UI patterns being generated, or quarterly brand-coherence audit due. Triggers include "let's design", "new app", "new product", "new surface", "new feature", "spinning up", "starting work on [design or copy or page]" (new design surface — name the brand bucket); "let's animate", "add a transition", "smooth this in", "fade this", "let's make it bouncy", or any new `transition-*`, `animate-*`, `@keyframes`, framer-motion usage (animation-budget); "copy goes here", "we'll write the copy later", "fill in the text", "TODO: copy", placeholder strings like "Click here", "Submit", "Loading…", "Error", "No items" in production code (copy-as-design); "let's call it", "I want to name this", "let's rename", "what should we call", "the name should be" (new-name-tax for identity-bearing names); "let's try [font]", "switch to [font]", "[generic font] looks better here", non-locked `font-family` declarations, Tailwind `font-` classes mapping to non-locked typefaces (one-font-rule); "what about [color]", "let's try [color]", "make this [color]", "more [color]", "cooler", "warmer", "brighter", "darker", any hex that isn't the locked signature for the current product (signature-guard); generic UI without explicit token references, Inter / Roboto / system fonts in production, blue-purple gradients, generic SaaS welcome copy, heavy shadows or large radii (whose-aesthetic-is-this); "audit the brand", "brand coherence check", "do my products still look like one person made them", quarterly cadence first session in Jan/Apr/Jul/Oct (brand-coherence-audit). Also fires on pathPatterns matching `src/**/*.{tsx,jsx}`, `app/**/*.{tsx,jsx}`, `components/**/*.{tsx,jsx}`. Consult the skill's rules/ folder for the matching diagnostic. Hard interrupt for brand-bucket / new-name-tax / one-font-rule / signature-guard; soft teaching response for the rest. Do NOT use for brand-tier-neutral components (generic UI primitives in shared design tokens), `explore` mode sketches, components being edited where brand is already determined, copy / animation that's part of an explicit copy-pass / motion-experiment session, or work explicitly OUTSIDE the operator's brand portfolio (`${user_config.brand_portfolio}`).