Use this skill when:

Designing new user interfaces or components
Reviewing existing UI/UX for improvements
Implementing accessibility features
Creating forms, navigation, or interactive elements
Advising on mobile-first design
Writing UI copy and microcopy
Planning user research activities
Building or maintaining design systems
Designing collaborative/multiplayer features (real-time editing, presence)
Building canvas-based or whiteboard applications
Implementing sharing, permissions, or version control UX
Designing AI-powered interfaces (chat, copilots, agents, generative UI)
Evaluating designs for dark patterns and ethical compliance
Creating onboarding flows, activation funnels, and first-run experiences
Designing notification systems and attention management
Building dashboards, data visualizations, and analytics interfaces
Implementing search interfaces with autocomplete and filtering
Applying emotional design principles and building user trust
Internationalizing/localizing UI or adding right-to-left (RTL) language support
Designing voice, multimodal, or cross-device input experiences

Core Design Philosophy

User-Centered Design

Understand users first - Research before designing
Reduce cognitive load - Keep interfaces simple and intuitive
Provide feedback - Every action should have a visible response
Maintain consistency - Follow established patterns users expect
Design for accessibility - Include all users from the start

Calm & Clarity Over Complexity (2026)

Cognitive clarity over sensory richness - Calm, legible interfaces beat busy, flashy ones. Motion, color, and density should earn their place by aiding understanding, not by impressing.
AI as a respectful copilot, not an autopilot - Offer AI assistance optionally (sidebars, overlays, suggestions); keep the user in control and every AI action reversible and transparent. See references/14-ai-ux-patterns.md.
Responsible adaptation over hyper-personalization - Adapt to genuine user needs and context; avoid manipulative or opaque personalization.
Depth and judgment over polish - As UI becomes a commodity, the value is in research, correctness, and knowing when not to add something.

The UX Hierarchy of Needs

Functional - Does it work?
Reliable - Is it dependable?
Usable - Is it easy to use?
Convenient - Is it frictionless?
Pleasurable - Is it delightful?

Quick Reference Checklist

Before Designing

Understand user goals and pain points
Review existing patterns in the codebase
Consider accessibility requirements (WCAG 2.2 AA)
Define success metrics

Visual Design

Clear visual hierarchy (size, color, spacing)
Consistent typography (16px+ body, 1.3-1.6x heading scale)
Sufficient color contrast (4.5:1 for text)
Adequate whitespace and breathing room

Interaction Design

Touch targets minimum 44×44px (iOS) / 48×48dp (Android)
Important actions in thumb-friendly zones (bottom/center on mobile)
Clear feedback for all interactions (< 100ms response)
Smooth animations (300-500ms duration)
Support prefers-reduced-motion

Forms

Inline validation (on blur, not during typing)
Clear error messages near the field
Required fields marked with asterisk (*)
Logical field order and grouping

Navigation

Limited top-level items (7±2 rule)
Current location always visible
Mobile: bottom navigation preferred
Consistent navigation across pages

Accessibility

Collaborative Features

Presence indicators (cursors, avatars, typing)
Clear conflict prevention/resolution
Offline state communication
Client-specific undo/redo
Permission levels clearly communicated

Canvas/Spatial Apps

Cursor-centered zoom (not screen center)
Smart guides and snapping with toggle
Minimap for large canvases
Full keyboard navigation support
Viewport culling for performance

AI Interfaces

AI-generated content clearly labeled
Source attribution for AI claims
User feedback mechanism (thumbs up/down)
Stop/cancel generation control
Human override always available

Onboarding

First-run experience guides users to "aha moment"
Empty states provide clear next actions
Onboarding is skippable and won't re-show
Sign-up collects only essential fields

Notifications

Notification severity matches visual treatment
Push permission requested in context (not on first visit)
Users can control notification preferences per channel
Toasts auto-dismiss (4-8s) with action button option

Ethical Design

Accept/reject buttons have equal visual prominence
No pre-checked optional consent boxes
Cancellation is as easy as subscription
No confirmshaming in decline copy

Internationalization

RTL-ready (logical CSS properties, layout verified in dir="rtl")
Tolerant of ~30-40% text expansion (no fixed-width labels/buttons)
No text baked into images; all strings externalized
Locale-aware date/number/currency formatting (Intl); ICU plurals
Language switcher uses endonyms, not flags

Decision Trees

Modal vs. Side Panel vs. Full Page

What is the user doing?
├── Quick confirmation or simple input (1-3 fields)?
│   └── → Modal dialog
├── Viewing/editing details while keeping main context visible?
│   ├── Content is narrow (form, properties, chat)?
│   │   └── → Side panel
│   └── Content needs significant width?
│       └── → Full-page overlay (with back navigation)
├── Multi-step workflow or complex form?
│   ├── Steps are short (2-3 fields each)?
│   │   └── → Modal with stepper
│   └── Steps are long or need reference to other content?
│       └── → Full page with stepper
└── Creating a new complex entity (document, project)?
    └── → Full page (dedicated creation flow)

Notification Type Selection

What needs the user's attention?
├── Immediate action required?
│   ├── Blocking (must resolve before continuing)?
│   │   └── → Modal dialog (confirmation, error recovery)
│   └── Non-blocking but urgent?
│       └── → Banner (top of page, persistent until dismissed)
├── Feedback on a completed action?
│   ├── Success or low-importance info?
│   │   └── → Toast (auto-dismiss 4-8s)
│   └── Warning or error?
│       └── → Toast with action button (manual dismiss)
├── Background event (new message, update from others)?
│   ├── User is in the same context?
│   │   └── → Badge + subtle inline indicator
│   └── User is elsewhere in the app?
│       └── → Badge on nav item + optional push notification
└── System status (maintenance, connectivity)?
    └── → Persistent banner (top or bottom of viewport)

Detailed Documentation

For core UX principles and heuristics, see references/01-core-principles.md
For Laws of UX quick reference, see references/02-laws-of-ux.md
For WCAG 2.2 accessibility compliance, see references/03-accessibility.md
For visual design patterns, see references/04-visual-design.md
For information architecture, see references/05-information-architecture.md
For interaction design patterns, see references/06-interaction-design.md
For form and input design, see references/07-forms-and-inputs.md
For mobile UX best practices, see references/08-mobile-ux.md
For UX writing and microcopy, see references/09-ux-writing.md
For user research methods, see references/10-user-research.md
For design system creation, see references/11-design-systems.md
For collaborative presence, live cursors, and awareness indicators, see references/12a-presence-awareness.md
For conflict resolution, sync, sharing, and offline UX, see references/12b-conflict-resolution-sync.md
For canvas navigation, zoom, pan, and object manipulation, see references/13a-canvas-navigation.md
For canvas elements, layers, performance, and whiteboard patterns, see references/13b-canvas-objects-performance.md
For AI and LLM interface design (chat, copilots, agents), see references/14-ai-ux-patterns.md
For ethical design and dark pattern avoidance, see references/15-ethical-design.md
For onboarding flows and user activation, see references/16-onboarding.md
For notification systems and attention management, see references/17-notifications.md
For data visualization and dashboard design, see references/18-data-visualization.md
For search interface design and autocomplete, see references/19-search-ux.md
For emotional design and trust-building patterns, see references/20-emotional-design.md
For data tables, sortable lists, pagination, and bulk actions, see references/21-data-tables.md
For loading states, skeleton screens, optimistic updates, and perceived performance, see references/22-performance-ux.md
For internationalization, localization, and RTL design, see references/23-internationalization.md
For voice, multimodal, and cross-device input patterns, see references/24-voice-and-multimodal.md

Key Numbers to Remember

Layout & Typography

Metric	Value	Context
Touch target	44-48px	Minimum tappable area
Body text	16px+	Minimum readable size
Line height	1.2-1.45	Optimal readability
Line length	50-75 chars	Ideal for reading
Contrast ratio	4.5:1	WCAG AA for normal text
Contrast ratio	3:1	WCAG AA for large text
Working memory	7±2 items	Miller's Law
Text expansion	~30-40%	Translation growth (DE/FI/RU)

Interaction & Animation

Metric	Value	Context
Animation	300-500ms	Natural feeling duration
Touch feedback	< 100ms	Perceived instant response
Form abandonment	81%	Users who start but don't finish
Canvas zoom range	10%-4000%	Typical design tool range
Smart guide snap	2-8px	Distance before snapping
Canvas render	60fps	Target during pan/zoom

Collaboration

Metric	Value	Context
Cursor update rate	50-100ms	Smooth live cursor movement
Cursor label max	12 chars	Truncate longer usernames
Avatar stack	3-5 visible	Use "+N" for overflow

AI Interfaces

Metric	Value	Context
AI first token	< 1s	Perceived responsiveness
AI streaming	30-80 tok/s	Natural reading pace
Copilot accept rate	25-35%	Suggestion usefulness

Engagement Metrics

Metric	Value	Context
Onboarding completion	> 65%	Checklist finish rate
Time to first value	< 5 min	Sign-up to activation
Toast duration	4-8s	Auto-dismiss timing
Search success	> 70%	Users finding results
NPS	> 50	User sentiment

Anti-Patterns to Avoid

Dark patterns - Deceptive UI that tricks users → see 15-ethical-design.md
Infinite scroll without context - No sense of progress → see 21-data-tables.md
Hidden navigation - Hamburger menus on desktop → see 05-information-architecture.md
Autoplaying media - Unexpected sound/video → see 03-accessibility.md
Disabled buttons without explanation - Confusing blocked states → see 06-interaction-design.md
Walls of text - No visual hierarchy or chunking → see 04-visual-design.md
Color-only feedback - Excludes colorblind users → see 03-accessibility.md
Tiny touch targets - Frustrating on mobile → see 08-mobile-ux.md
No loading states - Users think system is broken → see 22-performance-ux.md
Popup/modal overuse - Interrupts user flow → see 06-interaction-design.md
No presence indicators - Users don't know who else is working → see 12a-presence-awareness.md
Silent sync failures - Data loss without warning → see 12b-conflict-resolution-sync.md
Cursor overload - Too many live cursors create visual noise → see 12a-presence-awareness.md
Screen-center zoom - Disorienting; zoom at cursor instead → see 13a-canvas-navigation.md
No offline indication - Users think they're connected when not → see 12b-conflict-resolution-sync.md
Hidden AI - Users should always know when interacting with AI → see 14-ai-ux-patterns.md
Over-automation - AI changes applied without user awareness or consent → see 14-ai-ux-patterns.md
No AI undo - AI-applied changes must be reversible → see 14-ai-ux-patterns.md
Confirmshaming - Guilt-laden language on decline buttons → see 15-ethical-design.md
Asymmetric consent - Big "Accept" button, tiny "Reject" link → see 15-ethical-design.md
Mandatory lengthy tours - Forcing users through 10+ onboarding steps → see 16-onboarding.md
Notification carpet bombing - Every event as a push notification → see 17-notifications.md
Permission on first visit - Asking for push permission before user sees value → see 17-notifications.md
Hardcoded/untranslatable strings - Text baked into code/images, fixed-width containers, LTR-only layout → see 23-internationalization.md
Voice-only flows / hidden mic - No fallback modality, no recognition feedback, buried voice entry → see 24-voice-and-multimodal.md

Sources

This skill synthesizes best practices from:

Laws of UX - Jon Yablonski
Nielsen Norman Group - Usability research
WCAG 2.2 - Accessibility guidelines
Material Design - Google's design system
Human Interface Guidelines - Apple
Interaction Design Foundation
Liveblocks - Real-time collaboration patterns
Figma Engineering Blog - Multiplayer & canvas
Ably - Collaborative UX
Google PAIR Guidebook - AI design patterns
Microsoft HAX Toolkit - Human-AI interaction
Deceptive Design - Dark pattern catalog
EU Digital Services Act - Platform regulation
EU Accessibility Act - EN 301 549 / WCAG 2.1 AA mandate
W3C Internationalization (i18n) Activity - i18n/l10n standards
Baymard Institute - E-commerce UX research
Edward Tufte - Data visualization
ColorBrewer - Colorblind-safe palettes
The A11y Project - Accessibility community resource
web.dev - Core Web Vitals and performance UX
Smashing Magazine - Practical UX/UI patterns

ux-designer

UX Designer Skill

When to Apply This Skill