plugin87/ux-ui-agent-skills

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.

What it solves

This project provides a comprehensive knowledge and instruction layer to transform AI agents (specifically Claude) into senior UX/UI design architects. It solves the problem of inconsistent, non-accessible, or "slop" AI-generated UI by providing structured design tokens, accessibility standards (WCAG 2.2), and a library of 138 design systems to ensure production-ready, token-driven outputs across any frontend framework.

How it works

The kit functions as a pure instruction and knowledge layer that integrates with Claude Code or Claude-powered IDEs via a CLAUDE.md file. It uses a Request Router to load specific rules and knowledge on demand. The system is built around three primary drivers:

  1. Knowledge Layers: A massive library of design tokens (DTCG format), component specs following Atomic Design, and a "taste" layer containing aesthetic archetypes.
  2. Runnable Skills: 17 invocable /skills (e.g., /brandkit, /a11y-audit, /design-code) that orchestrate complex design workflows.
  3. Objective Gates: A suite of Python and Node.js scripts that programmatically validate token validity, WCAG contrast ratios in light and dark modes, and accessibility requirements to ensure correctness.

Who it’s for

Frontend developers, product designers, and teams using AI agents to generate UI code who need professional-grade design systems, strict accessibility compliance, and framework-agnostic implementation.

Highlights

  • Framework Agnostic: Uses an Adapter Protocol to target any stack, including React, Next.js, SwiftUI, Vue, Svelte, and Flutter.
  • Accessibility First: Built-in WCAG 2.2 AA/AAA auditing and automated contrast validation scripts.
  • Design Token Architecture: Implements a 3-tier hierarchy (Primitive $\rightarrow$ Semantic $\rightarrow$ Component) using the DTCG standard.
  • Extensive Library: Includes 138 brand-grade design systems for visual direction and 50 detailed component specifications.
  • Adversarial Review: Features a /critique skill powered by a design-critic agent that renders work and argues for rejection based on senior design evidence.

Related

  • Project
    Owl-Listener/designer-skills

    A library of design skills and workflows written specifically for AI agents to enable professional-grade UX, UI, and design systems work within AI coding assistants.

  • Project
    s0xDk/refactoring-ui-skill

    A Claude Code skill that teaches the AI concrete, mechanical design rules from the book Refactoring UI to create professional-looking user interfaces.

  • Project
    Community-Access/accessibility-agents

    A community-driven project providing 79 specialized AI agents across multiple platforms to automate accessibility auditing and enforce WCAG AA standards in code and documents.

  • Project
    bergside/awesome-design-skills

    A curated registry of design system skill files that provide AI coding agents with specific UI rules, tokens, and accessibility constraints to ensure consistent, high-quality design implementation.

  • Project
    superdesigndev/superdesign-skill

    An AI product design agent skill that gives coding agents design judgment to create high-quality UI, presentations, and graphics instead of generic layouts.