Software UI UX Design

Software UI/UX Design Skill — Quick Reference

Use this skill when the primary focus is designing intuitive, accessible, and user-centered interfaces. For research planning/synthesis, use software-ux-research.

Dec 2025 Baselines (Core)

• Accessibility baseline: WCAG 2.2 Level AA (W3C Recommendation, 12 Dec 2024) https://www.w3.org/TR/WCAG22/
• EU shipping note: European Accessibility Act applies to covered products/services after 28 Jun 2025 (Directive (EU) 2019/882) https://eur-lex.europa.eu/legal-content/EN/TXT/?uri=CELEX:32019L0882
• Web performance UX baseline: Core Web Vitals stable set is LCP (≤2.5s), INP (≤200ms), CLS (≤0.1) https://web.dev/vitals/
• Design system interoperability: Prefer token-first foundations aligned to Design Tokens Community Group Technical Reports 2025.10 https://tr.designtokens.org/
• Platform constraints: Use Apple HIG and Material 3 as primary sources: https://developer.apple.com/design/human-interface-guidelines/ and https://m3.material.io/

When to Use This Skill

Invoke when users ask for:

• UI/UX design patterns and best practices
• Usability evaluation and improvement recommendations
• Accessibility compliance (WCAG, ARIA)
• Design system setup and component patterns
• User-centered design methodologies
• Information architecture and navigation design
• Mobile-first and responsive design patterns
• Form design and input validation UX
• Pattern selection based on user pain points (from software-ux-research analysis)
• UI fixes for feedback-identified issues (navigation, onboarding, performance, forms)

Operating Mode (Core)

If inputs are missing, ask for: users + top tasks, platforms (web/iOS/Android/desktop), IA depth, accessibility target, performance constraints, and any evidence (screenshots, URLs, analytics, tickets, prior research).

Default outputs (pick what the user asked for):

• UX review checklist → prioritized issues → recommendations + acceptance criteria
• Flow + state spec (happy path + edge/error/empty/loading/offline/degraded) with acceptance criteria
• Design system delta spec (tokens + components + states) with governance-ready contribution plan

Core Interaction Design

Interaction Checklist (Do / Avoid / Acceptance Criteria)

Decision Tree: UI/UX Design Approach

Design challenge: [Feature Type]
    ├─ Need to decide what to build? → Use software-ux-research first
    ├─ Improving an existing UI?
    │   ├─ Usability issues? → Heuristic review (resources/nielsen-heuristics.md)
    │   ├─ Accessibility gaps? → WCAG 2.2 audit (resources/wcag-accessibility.md)
    │   └─ Inconsistency? → Design system alignment (resources/design-systems.md)
    ├─ Building a new flow?
    │   ├─ Define states → loading/empty/error/offline/degraded
    │   ├─ Define recovery → retry/cancel/undo/support
    │   └─ Define telemetry → success, error, time, abandonment
    └─ Platform constraints?
        ├─ Web → semantics + focus + reflow
        ├─ iOS → system navigation + Dynamic Type
        ├─ Android → Material patterns + back/edge-to-edge
        └─ Desktop → shortcuts + selection models

Information Architecture (Scalable Products)

IA Checklist

• Identify primary user roles and their top tasks (by frequency and criticality).
• Define content types (nouns) and actions (verbs); avoid mixing.
• Choose navigation model: global (app-level) vs local (within a section).
• Ensure findability at scale: search, filters, sort, saved views.
• Label in user language; include short helper text where needed.
• Plan permissions/visibility states: “no access”, “request access”, “limited view”.

Common IA Anti-Patterns

Platform Constraints & Anti-Patterns

Web (Browser-Based)

Browser-Specific Gotchas:

• Safari: datetime-local input limited; custom date picker needed
• Firefox: :focus-visible support differs; test across browsers
• Chrome: autocomplete behavior inconsistent with custom forms

iOS / iPadOS (Apple HIG)

Android (Material Design 3)

Android-Specific:

• Test on Samsung One UI (modified Material)
• Handle varying display densities (mdpi to xxxhdpi)
• Support both gesture and 3-button navigation

Desktop (Windows/macOS/Linux)

State-Heavy UI Patterns

State Matrix: Required States for All Interactive Views

Loading State Decision Tree

Data fetch initiated
    ├─ Fast → pressed/disabled state only
    ├─ Noticeable → inline placeholder
    └─ Long-running → progress + cancel + background option

Empty State Checklist

• Illustration/icon relevant to context (not generic)
• Clear headline explaining the state
• Supporting text with next steps
• Primary CTA to resolve empty state
• Avoid "No data found" without guidance

Error State Severity Levels

Long-Running Operations

Pattern: Operations >10 Seconds

For uploads, exports, batch processing, and migrations:

Implementation Checklist

• Show progress percentage or step count if determinable
• Allow cancel at any point without data loss
• Support backgrounding (user can navigate away)
• Provide completion notification (in-app and/or push)
• Handle interruptions gracefully (network drop, browser close)
• Show operation history with status and retry option
• For uploads: show per-file progress, allow skip/retry individual

Performance UX & Latency Budgets

Perceived Speed Thresholds

Use human response-time thresholds to decide when to show feedback and when to switch to progress indicators (NN/g) https://www.nngroup.com/articles/response-times-3-important-limits/

Core Web Vitals (User-Centric Performance)

Core Web Vitals stable set and thresholds (including INP replacing FID as the interaction metric) https://web.dev/vitals/

Perceived Performance Techniques

Anti-Patterns

Accessibility & Motion Safety (WCAG 2.2 AA)

WCAG 2.2 Changes That Impact Product UI

Reduced Motion Support

prefers-reduced-motion is defined in Media Queries Level 5 https://www.w3.org/TR/mediaqueries-5/#prefers-reduced-motion

/* Always provide reduced motion path */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Motion Safety Checklist

• All animations respect prefers-reduced-motion
• No content flashes >3 times per second (WCAG 2.3.1)
• Parallax effects have static alternative
• Auto-playing carousels can be paused
• No pure-motion conveyed information (add text labels)
• Avoid large-area color transitions (can trigger vestibular issues)

Focus Management Requirements

Keyboard Navigation Patterns

Design Tokens (Dec 2025)

Design Tokens Community Group Format

Standardized token format for design system interoperability (Design Tokens Technical Reports 2025.10) https://tr.designtokens.org/

{
  "color": {
    "primary": {
      "$value": "#0066cc",
      "$type": "color",
      "$description": "Primary brand color"
    },
    "primary-hover": {
      "$value": "{color.primary}",
      "$type": "color",
      "$extensions": {
        "mode": {
          "dark": "#3399ff"
        }
      }
    }
  },
  "spacing": {
    "sm": {
      "$value": "8px",
      "$type": "dimension"
    }
  }
}

Token Architecture

Governance & Contribution Model

Hybrid Input Handling

Modern users switch between mouse, touch, keyboard, trackpad, and stylus—often within a single session.

Input Detection & Adaptation

Pointer and hover capabilities are defined in Media Queries Level 4 https://www.w3.org/TR/mediaqueries-4/#mf-interaction

// Detect primary input modality
const supportsHover = window.matchMedia('(hover: hover)').matches;
const supportsTouch = 'ontouchstart' in window;
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

// Respond to input changes
window.matchMedia('(pointer: coarse)').addEventListener('change', (e) => {
  // User switched to touch device or changed mode
  updateInteractionStyle(e.matches ? 'touch' : 'pointer');
});

Input-Aware Design Matrix

Hybrid Input Checklist

• All interactions work with keyboard alone
• Touch targets meet WCAG 2.5.8 minimum and aim larger where feasible
• Hover states have touch-accessible alternative
• Drag-and-drop has non-drag alternative (WCAG 2.5.7) https://www.w3.org/TR/WCAG22/#dragging-movements
• No hover-only information (provide tap/focus alternative)
• Stylus/pen input treated as pointer (supports hover)
• Test with actual touch devices, not just emulation

Optional: AI/Automation UX

Scope Note: This section applies ONLY to products with AI/ML features (chatbots, recommendations, generative AI, automation). Skip if building traditional software.

Transparency Principles

User Control Patterns

Trust Calibration

• Show confidence scores where meaningful (not arbitrary percentages)
• Use appropriate hedging language ("likely", "suggests", "might")
• Distinguish facts from inferences
• Provide "Why this recommendation?" explanations
• Allow feedback on AI quality (thumbs up/down, ratings)

Anti-Patterns to Avoid

Navigation

Resources (Best Practices & Guides)

• resources/frontend-aesthetics-2025.md — Distinctive visual systems (typography, color, spacing, motion) with implementation notes
• resources/design-systems.md — Comprehensive design system implementation guide (foundations, components, patterns)
• resources/component-library-comparison.md — 2025 UI library comparison (MUI, shadcn/ui, Ant Design, Chakra UI, Radix UI, React Aria, Mantine, Headless UI)
• resources/modern-ux-patterns-2024.md — Modern UX patterns (skeleton screens, optimistic UI, progressive disclosure, micro-interactions)
• resources/nielsen-heuristics.md — Heuristic evaluation guide with practical examples
• resources/wcag-accessibility.md — WCAG 2.2 success criteria and implementation guide
• data/sources.json — Curated external references (accessibility, platform guidelines, tokens, performance, design systems)

UI Pattern Inspiration (External)

For real-world UI patterns and competitive research:

• Mobbin — 300k+ mobile/web screenshots, searchable by flow type, screen type, UI element (recommended for pattern research)
• Page Flows — User flow recordings from top apps
• Refero Design — Web design references by page type

Templates by Category

Component Libraries (Implementation Guides):

• templates/component-libraries/template-shadcn-ui.md — shadcn/ui with Radix UI + Tailwind CSS (copy-paste components, full ownership)
• templates/component-libraries/template-mui-material-ui.md — Material-UI (Google Material Design, enterprise-grade, 95k+ stars)

Interaction Patterns (Micro-interactions & Animations):

• templates/interaction-patterns/template-micro-interactions.md — 2024 micro-interaction patterns (buttons, forms, loading states, toasts, drag-and-drop)

Design & Planning:

• templates/design-brief.md — Single-source design brief (goals, IA, accessibility, experimentation)
• templates/ux-review-checklist.md — Heuristic + accessibility review checklist
• Shared checklist: ../software-clean-code-standard/templates/checklists/ux-design-review-checklist.md — Product-agnostic UX design review checklist (core + optional AI)

Related Skills (Cross-Functional)

• ../software-ux-research/SKILL.md — Research sibling: Use FIRST for feedback analysis, pain point extraction, competitive analysis → feeds pattern selection here
• ../software-frontend/SKILL.md — Frontend implementation (Next.js 16, React, TypeScript, Tailwind CSS, shadcn/ui)
• ../software-mobile/SKILL.md — Mobile UX patterns (iOS Swift, Android Kotlin, platform conventions)
• ../product-management/SKILL.md — Product strategy, user research, positioning
• ../qa-testing-strategy/SKILL.md — UI/E2E testing, visual regression, accessibility automation
• ../software-architecture-design/SKILL.md — System design patterns and architecture principles
• ../software-backend/SKILL.md — API design for optimal UX (REST, GraphQL, real-time)

Operational Playbooks

• resources/operational-playbook.md — Design themes, accessibility heuristics, mobile-first guidance, and decision frameworks