Claude Marketplaces
SkillsMCP serversMarketplacesDigestTools
Submit

This week in Claude

Every Monday: Claude Code, Agent SDK, MCP, and the Anthropic platform moves worth your time.

Skills by category
Frontend DevelopmentBackend & APIsTesting & QASecurityDevOps & CI/CDGit & Pull RequestsDocumentationCode Review & QualityAI & Agent BuildingSkill Development
MCP servers by category
Sales & MarketingWeb & Browser AutomationDatabasesAI & LLM ToolsCloud & InfrastructureCommunication & MessagingDeveloper ToolsDesign & CreativeDocuments & KnowledgeSearch & Web Crawling
Marketplaces by category
AI Agents & OrchestrationLLM IntegrationDevelopment ToolsFrontend & UIBackend & APIsDatabasesTesting & Code QualityDevOps & CloudSecurity & ComplianceGit & Version Control
Claude Marketplaces

An independent directory of skills, plugins and MCP servers for Claude Code. Not affiliated with Anthropic.

Browse

  • Skills
  • MCP servers
  • Marketplaces
  • Weekly digest
  • Skill index
  • MCP index
  • Marketplace index

Site

  • About
  • Tools
  • Submit
  • Feedback
  • Privacy
  • llms.txt
  • Plugins reference

Maker

  • Snug
  • Agent Caffeine
  • knobs
  • Wax
  • Vectoys
  • mertduzgun.com
Crafted at
Skills/Frontend Development
plugin87 avatar

Apply Aesthetic

plugin87/ux-ui-agent-skills

When someone asks you to make their interface feel like Linear or Stripe or just "more premium," this resolves those aesthetics into actual design tokens without guessing. You pick from five archetypes (brutalist, soft-SaaS, dark-tech, etc.) or 138 named design systems, and it maps the colors, typography, spacing, shadows, and motion into your token system while enforcing contrast checks at every step. The brief inference requirement up front is smart: it forces you to name the mood and audience before generating anything, which keeps the output from drifting into generic territory. It's opinionated about accessibility. You can't apply a brand aesthetic that fails WCAG, which is the right call but means you'll sometimes need to adjust aspirational references to meet contrast ratios.

installs
533
GitHub stars
3K
last updated
Jun 11, 2026
View on GitHubSave

Install

$ npx -y skills add plugin87/ux-ui-agent-skills --skill apply-aesthetic --agent claude-code

Installs into .claude/skills of the current project.

Files

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.

SKILL.md on GitHub

Sponsors

SnugThe clipboard manager you and your agent can use, safelyAgent CaffeineClose your lid, come back to finished workWaxBlock anything with supervision, without erasing your iPhoneOpen StepsSponsoredFree and open-source skills that make AI coding agents easier to understand, verify, and control.

Details

Repository
github.com/plugin87/ux-ui-agent-skills
Categories
Frontend Development, AI & Agent Building, Marketing & SEO, Cloud & Infrastructure, Design & UI/UX, Office & Documents, Finance & Trading
First seen
Jun 11, 2026

More from plugin87/ux-ui-agent-skills

All 17
  • Design Code529
  • Design Component526
  • Ux Writing521
  • Design Qa520
  • Brandkit514
  • Migrate Design System492
  • Performance490
  • Prototype488
  • Token Build484
  • Figma Integration482
  • Governance478
  • Image To Code723
  • Design Review598
  • A11y Audit554
  • Design Tokens542
  • Redesign539

Recommended

More Frontend Development
1plugin87 avatardesign-qaplugin87/ux-ui-agent-skillsSet up or run design QA gates — token + hardcoded-value lint, automated a11y (axe), contrast, visual regression across variants/states/themes/RTL, and the manua520installs
2plugin87 avatarperformanceplugin87/ux-ui-agent-skillsOptimize UI performance against Core Web Vitals — LCP, INP, CLS — with loading/code-split strategy, layout-shift prevention, and animation performance rules. Us490installs
3plugin87 avatarfigma-integrationplugin87/ux-ui-agent-skillsKeep Figma and code in sync — map the 3-tier DTCG tokens to Figma Variables (collections + modes), sync in either direction, use the Figma MCP when connected, a482installs
4plugin87 avatargovernanceplugin87/ux-ui-agent-skillsGovern how the design system evolves — SemVer for tokens/components, the contribution workflow, deprecation policy, and change communication. Use when the user 478installs
5syncfusion avatarsyncfusion-blazor-chartssyncfusion/blazor-ui-components-skillsImplement Syncfusion Blazor Chart (SfChart) component for comprehensive data visualization. Use this when creating line charts, bar/column charts, area charts, 394installs
6syncfusion avatarsyncfusion-blazor-popupssyncfusion/blazor-ui-components-skillsImplement modal and modeless dialogs using Syncfusion Blazor Dialog component. Use this skill when creating dialogs, popup windows, modal confirmations, custom 394installs