World-class UI/UX design intelligence for coding agents. A deep, progressive-disclosure knowledge base (principles, foundations, components, motion, accessibility, page patterns, and a modern implementation stack) packaged as a Claude Code skill, plus reviewer/designer/implementer subagents and slash commands. Drop it into any project to give the agent the taste and rigor of teams like Linear, Stripe, and Vercel.
Uses power tools
Uses Bash, Write, or Edit tools
Generate a complete, opinionated design system (tokens + primitives) for a project from a short brief — colors, type, spacing, radius, shadows, motion, wired for Tailwind v4 + shadcn.
Design and build a screen, flow, or component end-to-end using the UI/UX Design Pro knowledge base and the modern recommended stack.
Audit a UI (file, component, screenshot, or live page) against the UI/UX Design Pro checklist and return prioritized, specific findings.
Rigorously audits an existing UI (code, screenshot, or live page) against the UI/UX Design Pro knowledge base and returns prioritized, specific findings. Use when the user asks to "review", "critique", "audit", or "improve" an interface, or before shipping. Defaults to finding concrete issues — vague praise is a failure.
Builds production-quality, accessible UI code from a design or brief using the recommended modern stack (React + TypeScript + Tailwind v4 + shadcn/ui + Radix + Motion). Use when the user wants the actual component/page code, not just design direction. Produces clean, typed, accessible, state-complete components.
Designs a screen, flow, or component from a brief — establishing hierarchy, layout, tokens, states, and motion before (or instead of) writing code. Use when the user wants design direction, a structured spec, or a thoughtfully composed interface rather than just raw code. Pairs with the frontend-implementer agent for the build.
Based on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
npx claudepluginhub ca-who-codes/ultimate.uiux.design.skills --plugin ui-ux-design-proDrop it into any project and your agent designs like a senior product engineer — the taste of Linear, Stripe & Vercel, the rigor of WCAG, and a modern build stack, all on demand.
Works with Claude Code, Cursor, Windsurf, Copilot, and any agent that reads AGENTS.md.
Most AI-generated UI looks the same: three accent colors, gradients everywhere, everything centered, only the happy path, no focus states. The model has plenty of raw knowledge but no operating procedure and no taste calibration.
UI/UX Design Pro fixes that. It's a progressive-disclosure knowledge base — ~25 dense, agent-optimized reference files covering principles, visual foundations, components, motion, accessibility, page patterns, and a modern implementation stack — wired together so an agent reads only what each task needs, designs through a repeatable loop, and self-reviews against a 100+ point checklist before declaring done.
It ships two ways at once:
ui-ux-pro skill that auto-activates on UI/UX requests, plus /ui-build, /ui-review, /design-system commands and ui-designer / frontend-implementer / design-reviewer subagents.AGENTS.md + CLAUDE.md + knowledge/ that any agent (or human) can read directly. No lock-in.| Typical AI UI | With UI/UX Design Pro |
|---|---|
| Generic, cluttered, "AI-looking" | Restrained, hierarchical, crafted |
| Forgets loading/empty/error states | Every view handles all 5 states |
| Random spacing, failing contrast | 8pt grid, WCAG-checked contrast |
<div> soup, no keyboard support | Semantic HTML, focus rings, ARIA |
| Decorative animation | Motion that communicates state |
| Dumps everything into context | Loads only what the task needs |
Install straight from this repo's built-in marketplace — no clone needed:
/plugin marketplace add ca-who-codes/ultimate.UIUX.design.skills
/plugin install ui-ux-design-pro@ultimate-uiux-design-skills
Then just ask, or use the commands:
Design a pricing page for a B2B SaaS
/ui-build a settings form with profile, security, and notifications
/ui-review src/components/Dashboard.tsx
/design-system fintech, trustworthy, modern, brand #4F46E5
The ui-ux-pro skill activates automatically whenever a request involves interface work. Prefer a local copy? git clone https://github.com/ca-who-codes/ultimate.UIUX.design.skills.git and add the folder via /plugin marketplace add ./ultimate.UIUX.design.skills.
Drop this repo (or just AGENTS.md + knowledge/) into your project root. Most modern agents auto-read AGENTS.md. That's it — the agent now follows the design loop and pulls from knowledge/ on demand.
Point any model at knowledge/INDEX.md and let it route from there. Humans can read it too — it's a genuinely good UI/UX handbook.
knowledge/
├── INDEX.md ← start here: map + routing table
├── 01-principles/ Laws of UX, heuristics, Gestalt + a decision framework
├── 02-foundations/ color · typography · layout/spacing · design tokens
├── 03-components/ components · forms · navigation · data display
├── 04-interaction/ motion · microinteractions · states & feedback
├── 05-quality/ accessibility · responsive · performance · review checklist
├── 06-patterns/ landing · dashboards · auth/onboarding · pricing/ecommerce
└── 07-implementation/ tech stack · recipes (copy-paste code) · ecosystem
Plus plugin wiring: skills/ui-ux-pro/SKILL.md, agents/*, commands/*, .claude-plugin/plugin.json.
Every knowledge file is opinionated and specific — real values (16px body, 4.5:1 contrast, cubic-bezier(0.4,0,0.2,1)), do/don't tables, and an Agent checklist at the end. No vibes-only advice.
The spine that runs through every file:
transform/opacity, 150–300ms, ease-out, with prefers-reduced-motion.Comprehensive skill pack with 66 specialized skills for full-stack developers: 12 language experts (Python, TypeScript, Go, Rust, C++, Swift, Kotlin, C#, PHP, Java, SQL, JavaScript), 10 backend frameworks, 6 frontend/mobile, plus infrastructure, DevOps, security, and testing. Features progressive disclosure architecture for 50% faster loading.
JeffallanComprehensive feature development workflow with specialized agents for codebase exploration, architecture design, and quality review
anthropicsUI/UX design intelligence. 67 styles, 161 palettes, 57 font pairings, 25 charts, 15 stacks (React, Next.js, Vue, Svelte, Astro, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, Nuxt, Jetpack Compose). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.
nextlevelbuilderMarketing skills for AI agents — conversion optimization, copywriting, SEO, paid ads, ad creative, and growth
ca-who-codesAccess thousands of AI prompts and skills directly in your AI coding assistant. Search prompts, discover skills, save your own, and improve prompts with AI.
fUpstash Context7 MCP server for up-to-date documentation lookup. Pull version-specific documentation and code examples directly from source repositories into your LLM context.
upstashComplete developer toolkit for Claude Code
rohitg00Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claim'%20stop-opacity%3D'0.16'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'rgb(200%2C90%2C60)'%20stop-opacity%3D'0.03'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D'320'%20height%3D'200'%20fill%3D'url(%23g)'%2F%3E%3Ccircle%20cx%3D'250'%20cy%3D'56'%20r%3D'92'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.06'%2F%3E%3Ccircle%20cx%3D'64'%20cy%3D'172'%20r%3D'58'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.05'%2F%3E%3C%2Fsvg%3E)