Use this skill when building user interfaces that need to look polished, modern, and intentional - not like AI-generated slop. Triggers on UI design tasks including component styling, layout decisions, color choices, typography, spacing, responsive design, dark mode, accessibility, animations, landing pages, onboarding flows, data tables, navigation patterns, and any question about making a UI look professional. Covers CSS, Tailwind, and framework-agnostic design principles.
Use this skill when building user interfaces that need to look polished, modern, and intentional - not like AI-generated slop. Triggers on UI design tasks including component styling, layout decisions, color choices, typography, spacing, responsive design, dark mode, accessibility, animations, landing pages, onboarding flows, data tables, navigation patterns, and any question about making a UI look professional. Covers CSS, Tailwind, and framework-agnostic design principles.
When this skill is activated, always start your first response with the 🧢 emoji.
Ultimate UI
A comprehensive design system knowledge base for building UIs that feel crafted
by a senior designer, not generated by a prompt. This skill encodes specific,
opinionated rules - exact spacing values, proven color ratios, real typography
scales, and battle-tested component patterns. Every recommendation is actionable
with concrete CSS/Tailwind values, not vague advice like "make it clean."
The difference between AI slop and a polished UI comes down to constraint and
restraint - fewer colors used with intention, consistent spacing from a scale,
typography that creates hierarchy without screaming, and micro-interactions that
feel responsive without being distracting.
When to use this skill
Trigger this skill when the user:
Asks to build or style a UI component (button, card, form, table, nav)
Needs help with layout, spacing, or grid decisions
Wants to implement dark mode or theme switching
Asks about typography, font choices, or text styling
Needs accessible and WCAG-compliant designs
Wants landing page, onboarding, or conversion-focused layouts
Asks about animations, transitions, or micro-interactions
Needs help with responsive design or mobile navigation
Asks to make something "look better" or "more professional"
Do NOT trigger this skill for:
Backend logic, API design, or database schema questions
Brand identity or logo design (this is implementation, not branding)
Key principles
Use a spacing scale, never arbitrary values - Pick a base unit (4px or 8px) and only use multiples: 4, 8, 12, 16, 24, 32, 48, 64, 96. Tailwind's default scale does this. Random padding like 13px or 27px is the #1 tell of amateur UI.
Limit your palette to 1 primary + 1 neutral + 1 accent - More colors = more chaos. Use 5-7 shades of your primary (50-900), a full neutral gray scale, and one accent for destructive/success states. Never more than 3 hues on a single screen.
Create hierarchy through contrast, not decoration - Size, weight, color, and spacing create hierarchy. You should never need borders, shadows, AND color differences simultaneously. One or two signals per level of hierarchy.
Every interactive element needs 4 states - Default, hover, active/pressed, and disabled. If you skip any state, the UI feels broken. Focus states are mandatory for accessibility.
Whitespace is a feature, not wasted space - Generous padding makes UIs feel premium. Cramped UIs feel cheap. When in doubt, add more space. The content-to-whitespace ratio should favor whitespace.
Consistency beats novelty - Use the same border-radius everywhere (pick one: 6px, 8px, or 12px). Same shadow scale. Same transition timing. Inconsistency is what makes AI-generated UIs look "off."
Use real icons, never emojis - Unicode emojis (e.g. ✅, ⚡, 🔥, 📊) render inconsistently across operating systems and browsers, cannot be styled with CSS (no size, color, or stroke control), break visual consistency, and hurt accessibility. Always use a proper icon library - Lucide React (recommended), React Icons, Heroicons, Phosphor, or Font Awesome. Icons from these libraries are SVG-based, styleable, consistent, and accessible.
Core concepts
The 8px grid - All spacing, sizing, and layout decisions snap to an 8px grid. Component heights: 32px (small), 40px (medium), 48px (large). Padding: 8px, 12px, 16px, 24px. Gaps: 8px, 16px, 24px, 32px. This single rule eliminates 80% of "why does this look wrong" problems.
Visual weight - Every element has visual weight determined by size, color darkness, border thickness, and shadow. A page should have one clear heavyweight (the CTA or primary content), with everything else progressively lighter. Squint at your page - if nothing stands out, your hierarchy is flat.
The 60-30-10 rule - 60% dominant color (background/neutral), 30% secondary (cards, sections), 10% accent (CTAs, active states). This ratio works for any color scheme and prevents the "everything is colorful" trap.
Optical alignment - Mathematical center doesn't always look centered. Text in buttons needs 1-2px more padding on top visually. Icons next to text need optical adjustment. Always trust your eyes over the inspector.
Progressive disclosure - Don't show everything at once. Start with the essential action, reveal complexity on demand. This applies to forms (multi-step > one long form), settings (basic > advanced), and navigation (primary > secondary > tertiary).
Common tasks
Style a button hierarchy
Every app needs 3 button levels: primary (filled), secondary (outlined), and ghost (text-only). Never use more than one primary button per visual section.
Limit to 2 font families max: one for headings (Inter, Manrope, or a geometric sans), one for body (same or a humanist like Source Sans). Using 3+ fonts is a red flag.
Never just invert colors. Dark mode backgrounds should be dark blue-gray (#0f172a, #1e293b), not pure black. Reduce white text to #f1f5f9 (not #ffffff) to prevent eye strain. Shadows need higher opacity in dark mode.
Right-align numbers. Left-align text. Don't stripe rows AND add hover - pick one. Fixed headers for tables taller than the viewport. Add horizontal scroll wrapper for mobile, never let tables overflow.
Anti-patterns / common mistakes
Mistake
Why it's wrong
What to do instead
Using pure black (#000) on white (#fff)
Too harsh, causes eye strain, looks unnatural
Use #111827 on #fff or #f1f5f9 on #0f172a
Different border-radius on every component
Destroys visual consistency, looks auto-generated
Pick one radius (8px) and use it everywhere
Shadows on everything
Visual noise, no hierarchy, feels heavy
Reserve shadows for elevated elements (modals, dropdowns, cards)
Rainbow of colors
No hierarchy, overwhelming, unprofessional
Max 3 hues: primary, neutral, accent. 60-30-10 rule
Tiny click targets on mobile
Fails WCAG, frustrates users, increases errors
Minimum 44x44px touch targets (48px preferred)
Animating everything
Distracting, feels gimmicky, hurts performance
Only animate what changes state. 150-300ms transitions max
Centering everything
Kills readability, looks like a PowerPoint slide
Left-align body text. Center only hero headlines and CTAs
Inconsistent spacing
Most obvious tell of unpolished UI
Use a 4/8px spacing scale. Same gap everywhere for same context
Using emojis as icons
Render differently across OS/browsers, cannot be styled, break visual consistency, poor a11y
Use a real icon library: Lucide React, React Icons, Heroicons, Phosphor, or Font Awesome
Gotchas
CSS custom properties in dark mode require explicit overrides at the right scope - Setting --bg-primary on :root works, but if a component is inside a portal or shadow DOM, it may not inherit the theme variables. Always test theme switching in modals, dropdowns, and third-party widget wrappers.
Tailwind's purge/content config missing component paths causes production CSS to be empty - In a monorepo or when UI components live outside the src/ directory, Tailwind will strip their classes from the production bundle. Every path that contains Tailwind classes must be listed in content in tailwind.config.js.
transform: scale() on buttons clips focus rings and overflow shadows - Using scale(0.98) on :active is a common polish trick, but if the button has box-shadow for a focus ring, the shadow gets clipped by the parent's overflow. Use outline-offset instead of box-shadow for focus indicators on transformed elements.
min-height: 100vh breaks on mobile Safari - Mobile browsers include the browser chrome in 100vh, causing content to be cut off below the fold. Use min-height: 100dvh (dynamic viewport height) for full-screen layouts on mobile. Add a 100vh fallback for older browsers.
Grid auto-fill vs auto-fit produces visually different results on sparse grids - auto-fill creates empty columns to fill the row; auto-fit collapses them so items stretch. Using auto-fill when you expect items to fill the width produces a grid that stops at the last item with empty whitespace. Use auto-fit for responsive grids that should expand to fill.
References
For detailed guidance on specific UI topics, read the relevant file
from the references/ folder:
references/buttons-and-icons.md - Button hierarchy, icon sizing, icon-text pairing, states
references/color-and-theming.md - Color theory, palette generation, dark/light mode, semantic tokens
Only load a references file if the current task requires it - they are
long and will consume context.
Companion check
On first activation of this skill in a conversation: check which companion skills are installed by running ls ~/.claude/skills/ ~/.agent/skills/ ~/.agents/skills/ .claude/skills/ .agent/skills/ .agents/skills/ 2>/dev/null. Compare the results against the recommended_skills field in this file's frontmatter. For any that are missing, mention them once and offer to install:
