SkillsAdd

plugin87/ux-ui-agent-skills

apply-aesthetic

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.

First seen Jun 6, 2026

Installation

$ npx skills add plugin87/ux-ui-agent-skills --skill apply-aesthetic
View on skills.sh ↗ GitHub repository ↗

Summary

  • 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.

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

agent-browser Shared topics
vercel-labs/agent-browser

Browser automation CLI for AI agents. Use when the user needs to interact with websites, includ…

810.4K installs
vercel-react-best-practices Shared topics
vercel-labs/agent-skills 697.8K installs
web-design-guidelines Shared topics
vercel-labs/agent-skills

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "chec…

617.3K installs
microsoft-foundry Shared topics
microsoft/azure-skills

Build, deploy, evaluate, optimize, fine-tune, and manage Microsoft Foundry agents, models, and …

576.5K installs
azure-hosted-copilot-sdk Shared topics
microsoft/azure-skills 440.4K installs
azure-enterprise-infra-planner Shared topics
microsoft/azure-skills

Architect and provision enterprise Azure infrastructure from workload descriptions. For cloud a…

402.8K installs

Also in this package

Other skills from plugin87/ux-ui-agent-skills · top by installs.

npx skills add plugin87/ux-ui-agent-skills
image-to-code 375 design-review 273 a11y-audit 242 redesign 236 design-tokens 232 design-code 229 ux-writing 225 brandkit 224 design-qa 218 design-component 217

Browse all from plugin87/ux-ui-agent-skills

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Repository health

Stars 902
License MIT License
Default branch main
Open issues 1
Status Active

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 1,786 B
  • docs SUMMARY.md 411 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 226 installs

SKILL.md

Skill: Apply Aesthetic

Choose and apply a design direction without breaking accessibility.

Steps

  1. 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.
  2. 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 (or search <term> / show <name>); specs live in design-systems/library/<name>/DESIGN.md.

  1. Apply the Library Contract (in aesthetic-systems.md): re-point semantic. tokens to the chosen system's color roles; map typography/spacing/radius/shadow/motion to tokens/.json.
  2. Verify contrast of every mapped color pair (scripts/contrast.py / a11y-audit). A brand value that fails must be adjusted — taste never overrides POUR.
  3. Add motion per taste/motion-choreography.md; run the pre-flight aesthetic check in design-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.