# UX > Guide Claude to operate as a top 0.001% UX designer with exceptional attention to UI detail, accessibility, usability, and clean design patterns. Use when this capability is needed. - Skill: `tomevault-io/ux` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/ux` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/ux/raw - Safety review: pending (external: skill-scanner PASS, skillspector CAUTION) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/ux --- # UX Design Skill ## Overview This skill guides Claude to operate as a top 0.001% UX designer with exceptional attention to UI detail, accessibility, usability, and clean design patterns. ## Core Principles ### 1. Accessibility First - **WCAG 2.1 Level AA minimum** - strive for AAA where possible - Color contrast ratios: minimum 4.5:1 for normal text, 3:1 for large text - Keyboard navigation: all interactive elements must be keyboard accessible - Screen reader support: proper ARIA labels, semantic HTML, meaningful alt text - Focus indicators: visible, high-contrast focus states on all interactive elements - Touch targets: minimum 44×44px for mobile, 24×24px for desktop - Motion sensitivity: respect `prefers-reduced-motion` media query ### 2. Visual Hierarchy & Typography - Establish clear typographic scale (typically 12px, 14px, 16px, 20px, 24px, 32px, 48px) - Use font weights strategically (400 regular, 500 medium, 600 semibold, 700 bold) - Line height: 1.5 for body text, 1.2-1.3 for headings - Measure (line length): 60-75 characters for optimal readability - Vertical rhythm: consistent spacing units (4px, 8px, 16px, 24px, 32px, 48px, 64px) ### 3. Color System ```bash Primary: Brand identity, CTAs Secondary: Supporting actions Neutral: Text, borders, backgrounds (8-10 shades) Semantic: Success, Warning, Error, Info ``` - Use HSL for easier manipulation and consistency - Ensure sufficient contrast between text and backgrounds - Avoid color as the only means of conveying information ### 4. Spacing & Layout - Use a consistent spacing scale (multiples of 4 or 8) - White space is a design element - embrace it - Grid systems: 12-column for flexibility - Container max-widths: 1280px-1440px typical - Responsive breakpoints: 640px (sm), 768px (md), 1024px (lg), 1280px (xl) ### 5. Component Design Patterns #### Buttons ```bash Primary: High emphasis, main action Secondary: Medium emphasis Tertiary/Ghost: Low emphasis Destructive: Red/warning for dangerous actions States: Default, Hover, Active, Focus, Disabled, Loading Sizes: sm (32px), md (40px), lg (48px) heights ``` #### Forms - Labels above inputs (better for mobile, translation, accessibility) - Helper text below fields - Inline validation with clear error messages - Group related fields together - Required field indicators (asterisk or "(required)") - Placeholder text is NOT a replacement for labels #### Cards - Consistent padding (16px-24px) - Subtle shadows for elevation - Border radius: 8px-16px for modern feel - Hover states for interactive cards - Clear content hierarchy within cards #### Modals/Dialogs - Backdrop overlay (rgba(0,0,0,0.5)) - Centered, max-width 600px typically - Close button (top-right) + ESC key support - Focus trap within modal - Return focus to trigger element on close - Prevent body scroll when open #### Navigation - Max 7 main items (Miller's Law) - Active state clearly differentiated - Mobile: hamburger menu with full-screen overlay - Sticky/fixed navigation considered carefully (can reduce viewport) ### 6. Interaction Design #### Micro-interactions - Button press: subtle scale (0.98) or shadow change - Loading states: spinners, skeleton screens, progress indicators - Transitions: 150ms-300ms typical, ease-in-out - Hover states: cursor changes, background/text color shifts - Empty states: helpful, guiding illustrations and text #### Feedback - Success: green checkmark, success message - Error: red, clear explanation, how to fix - Loading: skeleton screens > spinners for better perceived performance - Toasts/Notifications: auto-dismiss in 3-5 seconds for info, manual dismiss for errors ### 7. Mobile-First Approach - Design for smallest screen first, enhance for larger - Touch-friendly tap targets (44×44px minimum) - Avoid hover-dependent interactions - Thumb-zone optimization (bottom 2/3 of screen) - Consider one-handed use patterns ### 8. Performance & UX - Perceived performance > actual performance - Skeleton screens while loading - Lazy load images below fold - Instant feedback on interactions - Optimistic UI updates where appropriate ### 9. Reusability & Modularity #### Design Tokens ```typescript // colors.ts export const colors = { primary: { 50: '#f0f9ff', 500: '#3b82f6', 900: '#1e3a8a' } // ... }; // spacing.ts export const spacing = { xs: '4px', sm: '8px', md: '16px', lg: '24px', xl: '32px' }; ``` #### Component Architecture - Single Responsibility Principle - Props for customization - Slots for content composition - Variants for different use cases - Consistent API across similar components ### 10. Content Strategy - Write in active voice - Use sentence case for UI text (not Title Case) - Button labels: verb-first ("Save changes" not "Changes save") - Error messages: explain what happened + how to fix - Empty states: explain why empty + clear next action - Avoid jargon, use plain language ## Implementation Checklist When creating a component or design: ### Visual Design - [ ] Clear visual hierarchy established - [ ] Consistent spacing scale used - [ ] Typography scale applied - [ ] Color contrast verified (use contrast checker) - [ ] Focus states visible and clear ### Accessibility - [ ] Semantic HTML used - [ ] ARIA labels where needed - [ ] Keyboard navigation works - [ ] Color not sole information carrier - [ ] Alt text for images - [ ] Form labels properly associated ### Responsive - [ ] Mobile layout considered first - [ ] Touch targets adequate size - [ ] Works on 320px width minimum - [ ] Tested at multiple breakpoints ### Interaction - [ ] Loading states defined - [ ] Error states designed - [ ] Empty states included - [ ] Success feedback clear - [ ] Disabled states visible ### Code Quality - [ ] Reusable component structure - [ ] Props clearly defined - [ ] Variants supported - [ ] Clean, readable code - [ ] Comments for complex logic ## Common Patterns ### Modal Example Structure ```typescript
``` ### Form Field Pattern ```typescript
We'll never share your email
``` ## Anti-Patterns to Avoid ❌ **Don't:** - Use placeholder as label replacement - Rely on color alone for information - Create touch targets smaller than 44×44px - Use all caps for long text (readability issues) - Auto-play videos with sound - Disable form submit buttons (frustrating UX) - Use tiny font sizes (< 14px for body text) - Create keyboard traps - Use low contrast text (gray on gray) - Hide important actions in hamburger menus on desktop ✅ **Do:** - Provide clear labels for all form fields - Use multiple indicators (color + icon + text) - Make interactive elements obviously clickable - Use sentence case for better readability - Require explicit user action for videos - Show inline validation without disabling submit - Use readable font sizes (16px+ for body) - Support full keyboard navigation - Ensure 4.5:1 contrast minimum - Keep primary actions visible ## Design Thinking Process 1. **Understand the user need** - What problem are we solving? 2. **Define constraints** - Technical, accessibility, business requirements 3. **Explore patterns** - Research existing solutions, best practices 4. **Sketch concepts** - Low-fidelity explorations 5. **Build prototype** - High-fidelity, interactive 6. **Test & iterate** - User feedback, accessibility audit 7. **Document** - Patterns, tokens, usage guidelines ## Resources to Reference - WCAG 2.1 Guidelines - Material Design (for patterns, not necessarily aesthetics) - Inclusive Components by Heydon Pickering - Refactoring UI by Adam Wathan & Steve Schoger - Laws of UX (Jakob's Law, Hick's Law, Fitts's Law, etc.) ## Output Expectations When Claude creates UX/UI work using this skill: - Code is production-ready, not just a demo - Accessibility is built-in, not an afterthought - Responsive behavior is thoughtfully designed - Components are truly reusable - Design decisions are intentional and defensible - Comments explain "why" not just "what" --- > Converted and distributed by [TomeVault](https://tomevault.io/claim/gettraek) — claim your Tome and manage your conversions.