UI Skills: 181 Design Skills for AI That Actually Look Professional

You've probably seen it: you ask AI to write a frontend page, the code runs, the features work, but the result has a telltale "AI aesthetic" — purple gradients everywhere, glow effects, inconsistent spacing, identical layouts. The problem isn't that AI isn't smart enough; it's missing professional design constraints.

1. What Is UI Skills

UI Skills is an AI Agent skill collection for design engineers, making AI automatically follow professional design standards when writing frontend code.

• GitHub: ⭐ 5.2k Stars · 224 Forks
• Author: ibelick (founder of Interface Office)
• Version: v0.2.3
• Skills: 181 (community multi-author)
• Compatible Agents: Claude Code, Cursor, OpenClaw, Codex, GitHub Copilot
• License: MIT

The key difference from MarketingSkills: MarketingSkills solves "AI doesn't understand marketing methodology"; UI Skills solves "AI writes ugly interfaces." UI Skills also has a unique CLI routing tool and a polished website — agents can choose the most appropriate Skill on demand.

2. Core Philosophy: Anti-AI-Aesthetics

The core design philosophy in one sentence: prevent UI slop.

What is "UI slop"? You've definitely seen these traits:

• Purple gradients and rainbow colors everywhere
• Glow effects as primary visual affordances
• Random spacing, no consistent spacing scale
• Animation overkill — everything moves
• Ignoring accessibility standards
• Broken mobile layouts

UI Skills eliminates these through strong constraint rules. Take the core baseline-ui skill:

Design constraints:

❌ NEVER use gradients unless explicitly requested
❌ NEVER use purple or multicolor gradients
❌ NEVER use glow effects as primary affordances
✅ SHOULD use Tailwind CSS default shadow scale
✅ SHOULD limit accent color usage to one per view

Animation constraints:

❌ NEVER add animation unless explicitly requested
❌ NEVER animate layout properties (width, height, margin, padding)
✅ MUST animate only compositor props (transform, opacity)
✅ SHOULD respect prefers-reduced-motion
❌ NEVER exceed 200ms for interaction feedback

Component constraints:

✅ MUST use accessible component primitives (Base UI / Radix / React Aria)
✅ MUST add aria-label to icon-only buttons
❌ NEVER rebuild keyboard or focus behavior by hand
❌ NEVER use h-screen, use h-dvh

These aren't vague design suggestions — they're precise, code-level constraints.

3. CLI Tool: Interactive Skill Routing

UI Skills uniquely provides a CLI tool letting AI Agents interactively select the most appropriate skill:

# Start interactive routing — AI picks the best Skill automatically
npx ui-skills start
 
# Browse all categories
npx ui-skills categories
 
# List skills by category
npx ui-skills list --category motion
 
# Get detailed content of a specific skill
npx ui-skills get baseline-ui

Routing mechanism (ui-skills-root):

When you say "fix the animation on this dialog," the Agent:

1. Recognizes this is a UI-related task
2. Identifies the category → Motion
3. Picks the narrowest relevant Skill in Motion
4. Loads only that Skill and starts working

Selection rules are deliberately restrained:

• Prefer 1 Skill
• Only pick 2 when two perspectives are genuinely needed
• Maximum 3 for broad reviews
• Never exceed 3

This "minimum load" strategy avoids context bloat while keeping the Agent focused on the most relevant expertise.

4. 8 Topic Categories

181 Skills organized by Topic:

① Accessibility

WCAG compliance audits, ARIA fixes, color contrast checks, keyboard navigation

② Motion

Animation performance optimization, transition modes, micro-interactions, page transitions, GSAP/Lottie integration

③ Systems

Component library specs, Token management, theming systems, shadcn/ui workflows

④ Visual

Color theory (OKLCH), typography, spacing, shadows, border-radius, visual hierarchy

⑤ Interaction

Gesture-driven UI, drag interactions, spring animations, conversational feedback

⑥ Performance

Render optimization, animation frame rates, Core Web Vitals, bundle size

⑦ Craft

Design detail polish — hover states, optical alignment, image strokes, micro-interactions

⑧ Taste

Layout diversity, typographic discipline, visual consistency, "less is more" restraint

5. 5 Core Skills in Detail

1. ui-skills-root (Smart Router)

Role: Entry point for all UI tasks, routing to the most appropriate sub-Skill by topic, stack, and intent.

Why it matters: Loading all 181 Skills into context is impractical. ui-skills-root ensures only the 1~3 most relevant Skills load, balancing precision with token efficiency.

2. baseline-ui (Quick Cleanup)

Role: Rapidly fixes spacing, hierarchy, typography, and small-layout problems in AI-generated code. A "de-slop" pass.

Tech stack contract: Tailwind CSS + motion/react (Framer Motion) + cn utility

Core constraints cover 7 dimensions:

• Components: Must use accessible primitives, no manual keyboard/focus implementation
• Interaction: Destructive actions must use AlertDialog, loading must use skeleton screens
• Animation: Only transform and opacity animate; feedback under 200ms
• Typography: Titles use text-balance, body text uses text-pretty, data uses tabular-nums
• Layout: Fixed z-index scale, square elements use size-*
• Performance: No animating large-area blur/backdrop-filter
• Design: No gradients (unless explicitly requested), no glow effects

3. improve-ui (Interface Audit)

Role: Audits existing product interfaces, identifying verifiable UI problems based on design evidence, outputting an actionable improvement plan.

Unique feature: Only audits and plans, never modifies source code. Improvement plans are written to the design-plans/ directory for another Agent to execute.

Audit process (5 steps):

1. Select interface: Trace rendering path from routes to layouts to components to tokens
2. Rebuild local system: Check DESIGN.md, Token definitions, component specs
3. Prove findings: Each issue must satisfy all three — Contract (design rule violated), Runtime (confirmed at runtime), Correction (clear fix exists)
4. Verify findings: Attempt to falsify each candidate issue; discard unsupported ones
5. Report: Ranked by confidence and impact, max 3 output

This rigorous evidence-driven approach ensures credible audit results.

4. frontend-design (by Anthropic)

Role: Creates unique, production-grade frontend interfaces, avoiding generic AI aesthetics.

Author: anthropics (Anthropic official team)

Positioning: Not "cleanup" or "audit" — creates design-conscious frontend code from scratch. Suited for new pages, new components, new projects. baseline-ui is the constraint layer (what not to do), frontend-design is the creative layer (how to do it well). They can be stacked.

5. better-ui (Detail Polish)

Role: Interface detail polish — hover states, shadows, border-radius, micro-interactions, enter/exit animations, optical alignment, image strokes.

Author: jakubkrehel

Focus: Not major layout changes or component refactoring — taking an interface from "works" to "polished." Focused on details easily overlooked yet significantly affecting the experience.

6. Installation and Usage

Method 1: CLI Router (Recommended)

Have the AI Agent run the CLI first to auto-select the best Skill:

# Start interactive routing
npx ui-skills start
 
# Browse categories
npx ui-skills categories
 
# List skills under a category
npx ui-skills list --category motion
 
# Get details of a specific skill
npx ui-skills get baseline-ui

Method 2: Install to Project

# Install ui-skills-root (router entry)
npx skills add https://github.com/ibelick/ui-skills --skill ui-skills-root
 
# Install baseline-ui
npx skills add https://github.com/ibelick/ui-skills --skill baseline-ui
 
# Install improve-ui
npx skills add https://github.com/ibelick/ui-skills --skill improve-ui

Method 3: Install Community Skills

The UI Skills platform hosts 181 Skills from multiple authors:

# Install anthropics/frontend-design
npx skills add https://github.com/anthropics/frontend-design
 
# Install jakubkrehel/better-ui
npx skills add https://github.com/jakubkrehel/better-ui

Method 4: Browse on Website

Visit https://www.ui-skills.com/skills to filter by Topic, find the right Skill, then install.

7. Usage Examples

Example 1: Quick Cleanup of AI-Generated Page

You: This page was generated by AI and looks a bit messy, help me clean it up.

AI: (auto-loads baseline-ui) → Check if spacing uses Tailwind default scale → Check for unauthorized gradients and glow effects → Check if animations only use transform/opacity → Check if icon-only buttons have aria-label → Output violations and fix code

Example 2: Audit Existing Product Interface

You: Help me audit the UI issues on this Dashboard page.

AI: (auto-loads improve-ui) → Trace rendering path: routes → layouts → components → tokens → Validate via Contract + Runtime + Correction triple verification → Output Top 3 issues + improvement plan to design-plans/ → Another Agent executes the fixes

Example 3: Create High-Quality Interface from Scratch

You: Help me create a pricing page with real design sense.

AI: (auto-loads frontend-design) → Not templating — designing based on product context → Following anti-generic-AI-aesthetics principles → Outputting production-grade code with responsiveness and accessibility

Example 4: Fix Animation Performance

You: This page scrolls a bit laggy.

AI: (auto-loads fixing-motion-performance) → Check if layout properties are being animated → Check for large-area blur/backdrop-filter → Check will-change usage → Output performance issues and fix suggestions

8. Community Ecosystem

UI Skills is not a solo project — it's a multi-author collaborative skill platform.

Notable contributors:

• anthropics (Anthropic official): frontend-design, canvas-design
• shadcn (shadcn/ui author): improve, shadcn
• emilkowalski (design engineering KOL): emil-design-eng, improve-animations, apple-design
• addyosmani (Google Chrome team): frontend-ui-engineering, web-quality-audit
• antfu (Vue/Nuxt core team): web-design-guidelines, Vue ecosystem series
• nextlevelbuilder: ui-ux-pro-max (50+ styles, 97 color palettes)

The 181 Skills cover the complete design engineering chain — from frontend frameworks (React, Vue, Nuxt, React Native, SwiftUI) to 3D visualization (Three.js series, 11 Skills) to animation (GSAP, Lottie, CSS animation) to accessibility audits.

9. Agent Skills Ecosystem Trends

UI Skills and MarketingSkills represent a larger trend: Agent Skills as the standard capability layer for AI coding is rapidly taking shape.

Common patterns:

• Both based on Markdown-format Skill files
• Both compatible with Agent Skills spec (agentskills.io)
• Both support major AI Agents (Claude Code, Cursor, etc.)
• Both installed via npx skills add

Differentiated positioning:

For developers: If you're building products, MarketingSkills helps with "how to sell," UI Skills helps with "how to look good." They don't conflict — install both.

Summary

AI coding ability is strong, but there's still a massive design engineering gap between "code that runs" and "interfaces that look good." UI Skills fills that gap with 181 professional skills, evolving AI from "writes code" to "writes code with design standards."

If you're using Claude Code or Cursor for frontend development, UI Skills is the most worthwhile design skill library to install right now.

Related Links

• Project: https://github.com/ibelick/ui-skills
• Website: https://www.ui-skills.com
• Skills browser: https://www.ui-skills.com/skills
• Agent Skills spec: https://agentskills.io