apply-aesthetic
Skill: Apply Aesthetic
In this project,
shadcn-ui-designis the authority for building/editing UI. Follow its rules: semantic Tailwind tokens (bg-primary,text-muted-foreground,border-border) — never hardcoded colors or raw Tailwind palette (bg-blue-600); add primitives vianpx shadcn@latest add …(don't forkcomponents/ui/*); keep the blue-primary light+dark theme. Use this skill as guidance only — any output must conform toshadcn-ui-design. Token source of truth:.claude/skills/_ux-ui-shared/tokens/*.json→ compiled toapp/globals.css.
Choose and apply a design direction without breaking accessibility.
Steps
- Brief Inference first (mandatory) — before any tokens, name it: industry/domain, audience & tone, the one mood adjective the result must earn, motion depth, and the layout-family sequence (
.claude/skills/_ux-ui-shared/taste/design-taste.md→ Brief Inference + Variance Mandate). Generating before deciding = slop. - Pick a direction in
.claude/skills/_ux-ui-shared/taste/aesthetic-systems.md:- An archetype (recipe mapped to our tokens), or
- A named library system — browse with
python3 .claude/skills/_ux-ui-shared/scripts/design_systems.py list(orsearch <term>/show <name>); specs live in.claude/skills/_ux-ui-shared/design-systems/library/<name>/DESIGN.md.
- Apply the Library Contract (in
aesthetic-systems.md): re-pointsemantic.*tokens to the chosen system's color roles; map typography/spacing/radius/shadow/motion to.claude/skills/_ux-ui-shared/tokens/*.json. - Verify contrast of every mapped color pair (
.claude/skills/_ux-ui-shared/scripts/contrast.py/a11y-audit). A brand value that fails must be adjusted — taste never overrides POUR. - Add motion per
.claude/skills/_ux-ui-shared/taste/motion-choreography.md; run the pre-flight aesthetic check indesign-taste.md.
Output
Updated/overridden semantic tokens + notes on type/space/motion, then render via design-code. Confirm the result passes both the aesthetic check and accessibility.