Apply aesthetic
Skill plugin87/ux-ui-agent-skills/.claude/skills/apply-aesthetic
Turn Claude into a Senior Design Architect — DTCG design tokens, 42 components, WCAG 2.2 accessibility, any-framework code, 138 design systems, and runnable skills.
npx -y skills add plugin87/ux-ui-agent-skills --skill apply-aestheticAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
What its author says it does
Copied from the file, not written here
Apply a visual direction — an archetype (high-end agency, editorial minimal, brutalist, soft-SaaS, dark-tech) or one of 138 named design systems (apple, linear-app, stripe, vercel, notion, material, shadcn, spotify, tesla…) — by resolving it into the token system. Use when the user wants a specific look/vibe/brand feel, or asks to make a design feel premium/expensive/non-generic.
SKILL.md
1.7 KB, as published. Nobody here has run it
Skill: Apply Aesthetic
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 (
taste/design-taste.md→ Brief Inference + Variance Mandate). Generating before deciding = slop. - Pick a direction in
taste/aesthetic-systems.md:- An archetype (recipe mapped to our tokens), or
- A named library system — browse with
python3 scripts/design_systems.py list(orsearch <term>/show <name>); specs live indesign-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 totokens/*.json. - Verify contrast of every mapped color pair (
scripts/contrast.py/a11y-audit). A brand value that fails must be adjusted — taste never overrides POUR. - Add motion per
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.