What problem does it solve? Newly scaffolded frontend projects ship with the default shadcn neutral theme and no visual identity, and picking a cohesive palette, font pairing, and gradients by hand is slow and error-prone. This Skill runs a structured brand pass that interviews the user, previews six candidate palettes in the browser, and writes the result directly into the project's CSS. ## Core Features & Use Cases - Interactive palette picker: Generates 6 candidate palettes (3 curated from 30 recipes, 3 algorithmic in OKLCH) and renders them in a self-contained HTML preview with a contextual mini-UI matching the product category (wallet, swap, staking, NFT, dashboard, social). - WCAG AA enforcement: Every palette is contrast-verified against the full shadcn token set in both light and dark mode, with automatic lightness adjustment or regeneration on failure. - Full application pipeline: Writes shadcn CSS variables to app/globals.css (with backup), wires Google Fonts via next/font, optionally derives two brand gradients, and produces a brand.md artifact for future sessions. - Use Case: After scaffolding a Next.js + Tailwind + shadcn app, ask for a brand identity; the Skill interviews you about category and mood, opens a browser preview of 6 palettes rendered on your actual product UI, then applies your pick with typography and a brand.md reference file. ## Quick Start Ask the assistant to run the brand-design skill to pick brand colors and a theme for this project.
