loaditout.ai
SkillsPacksTrendingLeaderboardAPI DocsBlogSubmitRequestsCompareAgentsXPrivacyDisclaimer
{}loaditout.ai
Skills & MCPPacksBlog

ux-ui-agent-skills

MCP Tool

sterlingpathological200/ux-ui-agent-skills

Transform Claude into a UX/UI agent for design tokens, accessible components, and production-ready React, Next.js, and SwiftUI output

Install

$ npx loaditout add sterlingpathological200/ux-ui-agent-skills

Platform-specific configuration:

.claude/settings.json
{
  "mcpServers": {
    "ux-ui-agent-skills": {
      "command": "npx",
      "args": [
        "-y",
        "ux-ui-agent-skills"
      ]
    }
  }
}

Add the config above to .claude/settings.json under the mcpServers key.

About

๐Ÿง  ux-ui-agent-skills - Build Better UI With Clear Rules

[](https://github.com/sterlingpathological200/ux-ui-agent-skills)

๐ŸŽฏ What This Is

UX/UI Agent Skills is a starter kit for design work with Claude. It helps turn plain prompts into clear design output, token sets, and usable component plans.

Use it to guide design work for web apps, mobile apps, and design systems. It gives Claude a stronger design role, with a focus on layout, color, type, spacing, accessibility, and build-ready output.

๐ŸชŸ Windows Download and Setup

Use this link to visit the project page and download the files you need:

Visit the project page

1. Open the project page

Click the link above in your browser.

2. Get the files

On the page, look for the green Code button and choose Download ZIP.

3. Unzip the folder

After the download finishes, open the ZIP file and extract it to a folder like:

Documents\ux-ui-agent-skills

4. Open the files

Open the folder and review the markdown files, skill instructions, and token samples.

5. Use it in your project

Copy the files you need into your own project or follow the setup steps in your Claude workflow.

๐Ÿงฉ What It Does

This project helps Claude work like a senior design architect. It supports:

  • Design token output in a DTCG-style format
  • Clear component plans from simple parts to full page templates
  • Accessible UI choices with WCAG 2.2 AA and AAA in mind
  • Production-ready code patterns for React, Tailwind v4, Next.js 15, and SwiftUI 6
  • Structured guidance for consistent design across a product
๐ŸŽจ Main Features
Design Token Generation

Creates token sets for:

  • Colors
  • Typography
  • Spacing
  • Shadows
  • Borders
  • Breakpoints

It uses a three-layer setup:

  • Primitive tokens
  • Semantic tokens
  • Component tokens

This makes it eas

Tags

ai-agentsai-assisted-codingai-coding-assistantai-skillai-skillsai-toolsclaude-codecode-reviewdeveloper-toolsdevopsgemini-cligithub-copilotllmmcpmulti-agentopencodetestinguiuiux-designux

Reviews

Loading reviews...

Quality Signals

0
Installs
Last updated16 days ago
Security: AREADME

Safety

Risk Levelmedium
Data Access
read
Network Accessnone

Details

Sourcegithub-crawl
Last commit3/30/2026
View on GitHubโ†’

Embed Badge

[![Loaditout](https://loaditout.ai/api/badge/sterlingpathological200/ux-ui-agent-skills)](https://loaditout.ai/skills/sterlingpathological200/ux-ui-agent-skills)