mcpField
A
apply-aesthetic

apply-aesthetic

github.com/plugin87Design & UI3.0k544 installsUpdated 1d ago
Repository

About apply-aesthetic

A design skill for choosing and applying a visual direction while preserving accessibility. It guides token mapping, contrast checks, motion, and aesthetic review.

Key features

  1. 01Infer design brief and mood
  2. 02Choose an archetype or library system
  3. 03Map semantic and design tokens
  4. 04Check color contrast and accessibility
  5. 05Apply motion and aesthetic checks

Use cases

  1. 01Set a visual direction for a product interface
  2. 02Adapt tokens to a selected design system
  3. 03Review color choices for accessible contrast

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/plugin87/ux-ui-agent-skills --skill apply-aesthetic

After installing, type/apply-aestheticin Claude Code to confirm it loaded.

Details

From the project README

Skill: Apply Aesthetic

Step 0: is the kit here? This skill reads files from the kit. Check once: ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING On KIT_MISSING only the skill folders were installed, which is what npx skills add does. Say so plainly, point the user at npx ux-ui-agent-skills init or the plugin install, and stop. Do not guess the contents of a file you could not open.

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 (${CLAUDE_SKILL_DIR}/../../../taste/design-taste.md → Brief Inference + Variance Mandate). Generating before deciding = slop.
  2. Pick a direction in ${CLAUDE_SKILL_DIR}/../../../taste/aesthetic-systems.md:
    • An archetype (recipe mapped to our tokens), or
    • A named library system: browse with python3 ${CLAUDE_SKILL_DIR}/../../../scripts/design_systems.py list (or search <term> / show <name>). Then run node ${CLAUDE_SKILL_DIR}/../../../scripts/library.mjs get <name> and read the DESIGN.md at the path it prints. An npm install carries the index and no spec, so this is what fetches it (checked against the sha256 the kit ships); where the spec is already on disk it fetches nothing. If it prints refused, say the spec could not be fetched and pick from an archetype instead; never write a spec from memory.
  3. 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 ${CLAUDE_SKILL_DIR}/../../../tokens/*.json.
  4. Verify contrast of every mapped color pair (${CLAUDE_SKILL_DIR}/../../../scripts/contrast.py / a11y-audit). A brand value that fails must be adjusted. Taste never overrides POUR.
  5. Add motion per ${CLAUDE_SKILL_DIR}/../../../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.

Comments

Markdown supported