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}`).
How this skill is triggered — by the user, by Claude, or both
Slash command
/madden-frameworks-skills:brand-and-design-systemThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Eight rules covering UI / brand discipline.
Eight rules covering UI / brand discipline.
| Pattern | Trigger | Rule |
|---|---|---|
| Animation added without earning its place | "let's animate" / transition-* / animate-* / @keyframes / framer-motion | animation-budget |
| New design surface without brand named | "let's design" / "new app" / "new product" / "spinning up" | brand-bucket |
| Quarterly audit across shipped products | "audit the brand" / quarterly cadence first session in Jan/Apr/Jul/Oct | brand-coherence-audit |
| Placeholder copy or copy-as-afterthought | "Lorem ipsum" / "TODO copy" / "Click here" / "Submit" / generic labels | copy-as-design |
| Identity-bearing name being locked before validation | "let's call it" / "let's rename" / "what should we call" | new-name-tax |
| Non-locked font drifting into production | "let's try [font]" / non-locked font-family / Tailwind font-* mapping off-brand | one-font-rule |
| Color drift from locked product signature | "what about [color]" / "cooler" / "warmer" / off-signature hex | signature-guard |
| Generic Claude-default UI vs your locked system | Inter / Roboto / gradient cards / heavy shadows / "Welcome to your new dashboard" | whose-aesthetic-is-this |
Match the UI moment to the rule. Apply. Yield.
explore (sketches)npx claudepluginhub kvmadden/madden-frameworks-skills-plugin --plugin madden-frameworks-skillsProvides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.