---

name: software-ui-ux-design description: Use when designing UI interfaces, conducting accessibility audits (WCAG 2.2), building design systems, or improving user flows. Covers platform guidelines (iOS/Android/Web/Desktop), state patterns, CRO, demographic-inclusive design, and AI design tools.

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.

---

Jan 2026 Baselines (Core)

• Accessibility baseline: WCAG 2.2 Level AA (W3C Recommendation, 12 Dec 2024) https://www.w3.org/TR/WCAG22/
• US regulatory note: ADA Title II requires WCAG 2.1 AA for state/local government sites by 24 April 2026 https://www.ada.gov/resources/web-guidance/
• 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/
• Sustainable design baseline: W3C Web Sustainability Guidelines (WSG) 1.0 — 93 guidelines for sustainable digital design (W3C Note, April 2026) https://www.w3.org/TR/web-sustainability-guidelines/
• 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
• 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)
• Demographic-specific design (seniors, children, cultural, neurodiversity)
• UI generation from scratch (wireframes to handoff)
• Conversion rate optimization (CRO audits, A/B testing)
• AI-assisted design workflows (Figma AI, v0, Midjourney)

When NOT to Use This Skill

• User research planning/synthesis → Use software-ux-research first
• Frontend code implementation → Use software-frontend
• Mobile platform-specific development → Use software-mobile
• Product strategy/roadmap decisions → Use product-management
• Visual/graphic design → This skill focuses on interaction design, not brand identity

---

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

UX Impact Metrics

Quick ROI benchmarks:

• 1 usability fix preventing 40hr rework = $6,000
• 0.5% conversion lift on 100k visitors × $50 LTV = $25,000/mo
• Task success rate = (Completed / Attempted) × 100

Core Interaction Design

Interaction Checklist (Do / Avoid / Acceptance Criteria)

Decision Tree: UI/UX Design Approach

CopyDesign challenge: [Feature Type]
    ├─ Need to decide what to build? → Use software-ux-research first
    ├─ Improving an existing UI?
    │   ├─ Usability issues? → Heuristic review (references/nielsen-heuristics.md)
    │   ├─ Accessibility gaps? → WCAG 2.2 audit (references/wcag-accessibility.md)
    │   ├─ Inconsistency? → Design system alignment (references/design-systems.md)
    │   └─ Conversion issues? → CRO audit (references/cro-framework.md)
    ├─ Building a new UI from scratch?
    │   ├─ Full workflow → references/ui-generation-workflows.md
    │   ├─ Use AI tools? → references/ai-design-tools-2025.md
    │   └─ Spec template → assets/ui-generation/full-ui-spec.md
    ├─ Building a new flow?
    │   ├─ Define states → loading/empty/error/offline/degraded
    │   ├─ Define recovery → retry/cancel/undo/support
    │   └─ Define telemetry → success, error, time, abandonment
    ├─ Designing for specific demographics?
    │   ├─ Age groups (seniors, children, teens) → references/demographic-inclusive-design.md
    │   ├─ Cultural/regional (RTL, Asia, MENA) → references/cultural-design-patterns.md
    │   └─ Neurodiversity (ADHD, autism, dyslexia) → references/neurodiversity-design.md
    └─ 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 gotchas: Safari datetime-local limited; Firefox :focus-visible differs; Chrome autocomplete inconsistent.

iOS / iPadOS (Apple HIG)

Android (Material Design 3)

Android notes: Test Samsung One UI, handle mdpi-xxxhdpi, support gesture + 3-button nav.

Desktop (Windows/macOS/Linux)

---

State-Heavy UI Patterns

State Matrix: Required States for All Interactive Views

Loading State Decision Tree

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

Empty states: Context-relevant illustration + headline + next steps + CTA. Never "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

Copy/* 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/

Copy{
  "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

Copy// 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

---

AI/Automation UX (Optional)

For products with AI/ML features (chatbots, recommendations, generative AI), see references/ai-automation-ux.md — covers transparency, user control patterns, trust calibration, and anti-patterns.

---

Navigation

References

Templates

UI Pattern Inspiration

• Mobbin — 300k+ mobile/web screenshots
• Page Flows — User flow recordings
• Refero Design — Web design references

Related Skills

• software-ux-research — Research (use FIRST)
• software-frontend — Implementation
• software-mobile — Mobile patterns
• product-management — Strategy
• qa-testing-strategy — Testing

---

Trend Awareness Protocol

WebSearch required for: "best design system for...", "what component library...", "latest UI/UX trends", "current best practices for..."

Search: "UI UX design trends 2026", "design system best practices 2026", "WCAG updates 2026"

Report: Current landscape → Emerging trends → Deprecated patterns → Recommendation

---

Operational Playbooks

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