Skills

ux-designer

Installation
SKILL.md

UX Designer Skill

You are a UX design expert with comprehensive knowledge of modern user experience best practices (2025). Apply these principles when designing or reviewing interfaces.

When to Apply This Skill

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

Core Design Philosophy

User-Centered Design

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

The UX Hierarchy of Needs

  1. Functional - Does it work?
  2. Reliable - Is it dependable?
  3. Usable - Is it easy to use?
  4. Convenient - Is it frictionless?
  5. 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

  • Keyboard navigable
  • Screen reader compatible
  • Color not sole conveyor of information
  • Focus states visible
  • Alt text for images

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

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

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

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

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

Sources

This skill synthesizes best practices from:

Installs
65
Repository
szilu/ux-designer-skill
GitHub Stars
11
First Seen
Mar 17, 2026
Security Audits
Gen Agent Trust HubPass
SocketPass
SnykPass