software-ui-ux-design

$27

Decision Tree

Design challenge:

    ├─ What to build? → Use software-ux-research first

    ├─ Improving existing UI?

    │   ├─ Usability issues → Heuristic review

    │   ├─ Accessibility gaps → WCAG 2.2 audit

    │   ├─ Inconsistency → Design system alignment

    │   └─ Conversion issues → CRO audit

    ├─ Building new UI?

    │   └─ references/ui-generation-workflows.md

    ├─ Non-technical users / simplification?

    │   └─ references/simplification-patterns.md

    ├─ Specific demographics?

    │   └─ references/demographic-inclusive-design.md

    └─ Platform constraints?

        ├─ Web → semantics + focus + reflow

        ├─ iOS → system nav + Dynamic Type

        └─ Android → Material + edge-to-edge

Interaction Checklist

Goal

Do

Avoid

Clarity

One primary action per view

Competing CTAs

Affordances

Native controls, strong signifiers

Clickable divs, hover-only

Feedback

Immediate visual response

Silent taps

Error prevention

Constrain inputs, show examples

Submit-then-fail

Error recovery

Specific message + next step

"Something went wrong"

Consistency

Reuse patterns and terms

Same term, different meanings

State Matrix

State

Treatment

When

Loading

Placeholder matching layout

Data fetching

Empty

Message + CTA

Zero items

Error

Alert + retry action

Request fails

Offline

Banner + cached indicator

No network

Degraded

Warning + limited functionality

Partial failure

Platform Constraints

Web

• Semantic HTML first (no "div soup")

• ARIA only when needed

• Manage focus on SPA navigation

• Reflow at 320 CSS px (WCAG 1.4.10)

• Target size ≥24px (WCAG 2.5.8)

iOS

• System navigation (tab bar, nav bar)

• Dynamic Type support

• Dark mode + system materials

• Handle Safe Areas

Android

• Material 3 components

• Dynamic Color (Material You)

• Edge-to-edge content

• Handle predictive back

WCAG 2.2 Key Changes

Requirement

Implementation

Focus not obscured

Keep focus visible with sticky UI

Focus appearance

Clear visible indicator

Dragging movements

Non-drag alternatives

Target size

≥24×24 CSS px

Redundant entry

Don't re-request known info

Accessible auth

Avoid cognitive tests

Reduced Motion

@media (prefers-reduced-motion: reduce) {

  *, *::before, *::after {

    animation-duration: 0.01ms !important;

    transition-duration: 0.01ms !important;

  }

}

Design Tokens

{

  "color": {

    "primary": {

      "$value": "#0066cc",

      "$type": "color"

    }

  },

  "spacing": {

    "sm": {

      "$value": "8px",

      "$type": "dimension"

    }

  }

}

Layer

Examples

Purpose

Primitive

blue-500, 16px

Raw values

Semantic

color-primary

Intent-based

Component

button-bg

Component-specific

Resources

Resource

Purpose

references/implementation-research-workflow.md

Research before building

references/design-systems.md

Design system patterns

references/component-library-comparison.md

shadcn, MUI, Radix

references/nielsen-heuristics.md

Heuristic evaluation

references/wcag-accessibility.md

WCAG compliance

references/demographic-inclusive-design.md

Age-specific UX

references/neurodiversity-design.md

ADHD, autism, dyslexia

references/ui-generation-workflows.md

UI from scratch

references/ai-design-tools-2025.md

Figma AI, v0

references/cro-framework.md

Conversion optimization

references/mobile-ux-patterns.md

Mobile UX: thumb zone, navigation, gestures, platform patterns

references/form-design-patterns.md

Form UX: layout, validation, multi-step, accessibility

references/dark-mode-theming.md

Dark mode & multi-theme: tokens, CSS, platform implementation

references/ai-automation-ux.md

AI/automation UX: chatbots, agents, progressive disclosure

references/cultural-design-patterns.md

Cross-cultural design: RTL, CJK, color semiotics, locale UX

references/frontend-aesthetics-2025.md

Visual design trends 2025: glassmorphism, variable fonts, 3D

references/simplification-patterns.md

Interface simplification for non-technical users, digital literacy spectrum

references/modern-ux-patterns-2025.md

Modern UX patterns: command palettes, skeleton states, dark mode, 2026 trends

references/data-visualization-ux.md

Data viz: chart selection, dashboards, accessible charts

references/typography-systems.md

Type scales, font pairing, variable fonts, design tokens

references/performance-ux-vitals.md

Core Web Vitals UX, perceived performance, loading patterns

references/prototype-to-production.md

Prototype-to-production alignment, dashboard QA, design-to-ship checks

references/operational-playbook.md

Decision frameworks

Templates

Template

Purpose

assets/design-brief.md

Design brief

assets/ux-review-checklist.md

UX review

assets/ui-generation/full-ui-spec.md

UI spec

assets/audits/cro-audit-template.md

CRO audit

assets/accessibility/template-wcag-testing.md

WCAG testing

assets/audits/simplification-audit-template.md

Simplification audit

assets/design-systems/template-design-system.md

Design system setup

assets/component-libraries/template-shadcn-ui.md

shadcn/ui integration

assets/component-libraries/template-mui-material-ui.md

MUI / Material UI

assets/interaction-patterns/template-micro-interactions.md

Micro-interactions

Pattern Inspiration

• Mobbin — 300k+ screenshots

• Page Flows — User flow recordings

• Refero Design — Web design references

Related Skills

Skill

Purpose

software-ux-research

Research (use first)

software-frontend

Implementation

software-mobile

Mobile patterns

product-management

Product strategy

Fact-Checking

• Use web search/web fetch to verify current external facts, versions, pricing, deadlines, regulations, or platform behavior before final answers.

• Prefer primary sources; report source links and dates for volatile information.

• If web access is unavailable, state the limitation and mark guidance as unverified.