plugin87/ux-ui-agent-skills

Turn Claude into a senior design architect: DTCG tokens, 52 components, WCAG 2.2 AA-AAA, 138 design systems, any-framework code, and 50 objective gates that fail the build instead of faking success.

What it solves

AI agents often produce "slop"—UI that looks generic, lacks focal points, uses hardcoded values, and fails basic accessibility standards. This project provides a structured knowledge layer and a set of objective verification tools to turn LLMs (specifically Claude) into senior design architects capable of producing production-ready, accessible, and token-driven UX/UI designs across any framework.

How it works

It functions as a pure instruction and knowledge layer rather than a runtime library. It uses a combination of:

  • Structured Instructions: CLAUDE.md and rule files that define a "design doctrine" for the agent.
  • Design Tokens: A 3-tier architecture (Primitive $\rightarrow$ Semantic $\rightarrow$ Component) using the DTCG format.
  • Objective Gates: 52 automated checks (34 of which use a real browser via Playwright) to verify WCAG 2.2 contrast, target size, responsive overflow, and "slop" detection.
  • Runnable Skills: A library of 25 skills and slash commands (e.g., /brandkit, /critique, /gate) that the agent can invoke to perform specific design tasks or audits.
  • Framework Adapters: A protocol that allows the agent to target any stack, from React and Tailwind to SwiftUI and Flutter.

Who it’s for

Developers and designers using AI coding agents (such as Claude Code, Cursor, Codex, or Aider) who need high-fidelity, accessible UI components and full-scale screens that adhere to professional design system standards without manual hand-off.

Highlights

  • Anti-Slop Doctrine: Specifically detects and rejects common AI-generated UI patterns like generic gradients and inconsistent radii.
  • Comprehensive A11y: Built-in auditing for WCAG 2.2 AA/AAA standards, including focus-traps and reduced-motion policies.
  • Massive Knowledge Base: Includes 138 brand-grade design systems and 52 component specifications.
  • Multi-Agent Workflow: Includes a design-critic agent that argues for the rejection of work based on non-measurable UX findings.
  • Framework Agnostic: Supports any frontend framework via a flexible adapter protocol.

Related

  • Project
    educlopez/ui-craft

    A design engineering system for AI coding agents that provides professional design rules and verification tools to ensure AI-generated UIs are production-grade.

  • Project
    Community-Access/accessibility-agents

    A set of agent skills and tools that enforce WCAG 2.2 AA accessibility standards for AI coding agents across multiple platforms.

  • Project
    Neeeophytee/finding-unknowns-skills

    A collection of 14 installable skills for AI coding agents that help developers identify requirements gaps and technical unknowns before implementation.

  • Project
    MengTo/Skills

    A curated library of procedural playbooks and prompts that turn complex design and coding workflows into reusable skills for AI agents to ensure consistent, high-quality output.

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