From ef4a32d3954552419f5128dc37f348bb3e976b99 Mon Sep 17 00:00:00 2001
From: Zhongwei Li <lizhongwei.nkcs@gmail.com>
Date: Sun, 30 Nov 2025 08:59:35 +0800
Subject: [PATCH] Initial commit

---
 .claude-plugin/plugin.json                    |   12 +
 README.md                                     |    3 +
 plugin.lock.json                              |   85 +
 skills/using-ux-designer/SKILL.md             |  341 +++
 .../accessibility-and-inclusive-design.md     | 1376 ++++++++++++
 .../desktop-software-design.md                | 1902 ++++++++++++++++
 skills/using-ux-designer/game-ui-design.md    | 1858 +++++++++++++++
 .../information-architecture.md               |  834 +++++++
 .../interaction-design-patterns.md            | 1132 ++++++++++
 .../mobile-design-patterns.md                 | 1641 ++++++++++++++
 .../user-research-and-validation.md           | 1386 ++++++++++++
 skills/using-ux-designer/ux-fundamentals.md   |  608 +++++
 .../visual-design-foundations.md              |  996 ++++++++
 .../web-application-design.md                 | 1993 +++++++++++++++++
 14 files changed, 14167 insertions(+)
 create mode 100644 .claude-plugin/plugin.json
 create mode 100644 README.md
 create mode 100644 plugin.lock.json
 create mode 100644 skills/using-ux-designer/SKILL.md
 create mode 100644 skills/using-ux-designer/accessibility-and-inclusive-design.md
 create mode 100644 skills/using-ux-designer/desktop-software-design.md
 create mode 100644 skills/using-ux-designer/game-ui-design.md
 create mode 100644 skills/using-ux-designer/information-architecture.md
 create mode 100644 skills/using-ux-designer/interaction-design-patterns.md
 create mode 100644 skills/using-ux-designer/mobile-design-patterns.md
 create mode 100644 skills/using-ux-designer/user-research-and-validation.md
 create mode 100644 skills/using-ux-designer/ux-fundamentals.md
 create mode 100644 skills/using-ux-designer/visual-design-foundations.md
 create mode 100644 skills/using-ux-designer/web-application-design.md

diff --git a/.claude-plugin/plugin.json b/.claude-plugin/plugin.json
new file mode 100644
index 0000000..3a1f6e9
--- /dev/null
+++ b/.claude-plugin/plugin.json
@@ -0,0 +1,12 @@
+{
+  "name": "lyra-ux-designer",
+  "description": "UX design fundamentals - visual design, accessibility, interaction patterns - 11 skills",
+  "version": "1.0.1",
+  "author": {
+    "name": "tachyon-beep",
+    "url": "https://github.com/tachyon-beep"
+  },
+  "skills": [
+    "./skills"
+  ]
+}
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..e9c7b43
--- /dev/null
+++ b/README.md
@@ -0,0 +1,3 @@
+# lyra-ux-designer
+
+UX design fundamentals - visual design, accessibility, interaction patterns - 11 skills
diff --git a/plugin.lock.json b/plugin.lock.json
new file mode 100644
index 0000000..3ccf150
--- /dev/null
+++ b/plugin.lock.json
@@ -0,0 +1,85 @@
+{
+  "$schema": "internal://schemas/plugin.lock.v1.json",
+  "pluginId": "gh:tachyon-beep/skillpacks:plugins/lyra-ux-designer",
+  "normalized": {
+    "repo": null,
+    "ref": "refs/tags/v20251128.0",
+    "commit": "b8f5b60c3b184a210dce1574dcff207fb68f8adc",
+    "treeHash": "85c4a0c06a6c0b0ea875e57fcb9667a52e044c9518252755dacbce0c9b686e9b",
+    "generatedAt": "2025-11-28T10:28:32.369317Z",
+    "toolVersion": "publish_plugins.py@0.2.0"
+  },
+  "origin": {
+    "remote": "git@github.com:zhongweili/42plugin-data.git",
+    "branch": "master",
+    "commit": "aa1497ed0949fd50e99e70d6324a29c5b34f9390",
+    "repoRoot": "/Users/zhongweili/projects/openmind/42plugin-data"
+  },
+  "manifest": {
+    "name": "lyra-ux-designer",
+    "description": "UX design fundamentals - visual design, accessibility, interaction patterns - 11 skills",
+    "version": "1.0.1"
+  },
+  "content": {
+    "files": [
+      {
+        "path": "README.md",
+        "sha256": "7ee357366d18b980e86a5c7c11501a5b1d98803788a4c8fbca6b0c27f25b4b5d"
+      },
+      {
+        "path": ".claude-plugin/plugin.json",
+        "sha256": "99ced887936a53e793c67f70728cb2fdf1351ed06067a333737b52d8315511f6"
+      },
+      {
+        "path": "skills/using-ux-designer/information-architecture.md",
+        "sha256": "834266231d8748208559147003a1752261e9e040d7d3228c9e404cfe61777e25"
+      },
+      {
+        "path": "skills/using-ux-designer/game-ui-design.md",
+        "sha256": "9b24838ae50416f79e40ffabbac01449bc9dd83739cd7224e940b36f82e855c2"
+      },
+      {
+        "path": "skills/using-ux-designer/interaction-design-patterns.md",
+        "sha256": "e507147ea03e4fce333e87ef39892efbeb56fc693255b03c84a8fc14697999d8"
+      },
+      {
+        "path": "skills/using-ux-designer/web-application-design.md",
+        "sha256": "20b9e44171e2d4f120651792e2ad15abf131ac876de31046063b9f1a1a5c9d7e"
+      },
+      {
+        "path": "skills/using-ux-designer/accessibility-and-inclusive-design.md",
+        "sha256": "26a9b740cf2665155e471bad3cb7357c31788c6cc9c3e52631d0d0ed5d9cf67f"
+      },
+      {
+        "path": "skills/using-ux-designer/desktop-software-design.md",
+        "sha256": "f6dbcf12fd03a6c0992d4bc95b8454183300c028ba152ca3a941b9effbfedde9"
+      },
+      {
+        "path": "skills/using-ux-designer/user-research-and-validation.md",
+        "sha256": "78c79d28e106c15f0b8c9259f80dc5f8499249aabab7bbb5943ee76d10963a16"
+      },
+      {
+        "path": "skills/using-ux-designer/SKILL.md",
+        "sha256": "0998e1b4fd5abd164fc6350e5a07f170c077e4cf7a24d4f9d5a2461c8382b7ac"
+      },
+      {
+        "path": "skills/using-ux-designer/ux-fundamentals.md",
+        "sha256": "186cb7d7d24eb90ac56189793571767e17b2c9a1d1b18e94e2031ce110e8fedc"
+      },
+      {
+        "path": "skills/using-ux-designer/mobile-design-patterns.md",
+        "sha256": "1b11b0f25e4217ae203ad8805988eab07607cd2e1301b723c7a7163c0e80d5f8"
+      },
+      {
+        "path": "skills/using-ux-designer/visual-design-foundations.md",
+        "sha256": "4680a22d38ff7f71c44ee50496ff32162e0bf0fbce033935f3428226687d6678"
+      }
+    ],
+    "dirSha256": "85c4a0c06a6c0b0ea875e57fcb9667a52e044c9518252755dacbce0c9b686e9b"
+  },
+  "security": {
+    "scannedAt": null,
+    "scannerVersion": null,
+    "flags": []
+  }
+}
\ No newline at end of file
diff --git a/skills/using-ux-designer/SKILL.md b/skills/using-ux-designer/SKILL.md
new file mode 100644
index 0000000..5502034
--- /dev/null
+++ b/skills/using-ux-designer/SKILL.md
@@ -0,0 +1,341 @@
+---
+name: using-ux-designer
+description: Route to the right UX skill based on your task and platform context
+mode: true
+---
+
+# Using UX Designer
+
+## Overview
+
+This meta-skill routes you to the right UX design skills based on your situation. Load this skill when you need UX expertise but aren't sure which specific skill to use.
+
+**Core Principle**: Different UX tasks require different skills. Match your situation to the appropriate skill, load only what you need.
+
+## When to Use
+
+Load this skill when:
+- Starting any UX/UI design task
+- User mentions: "design", "UX", "UI", "interface", "user experience", "layout", "navigation"
+- You need to critique or review a design
+- You need to create a new interface or feature
+- User asks about UX principles or concepts
+
+**Don't use for**: Backend logic, database design, pure technical implementation without UX implications
+
+---
+
+## Routing by Situation
+
+### Learning & Explanation
+
+**Symptoms**: "What is...", "Explain...", "Teach me about...", "How does X work in UX?"
+
+**Route to**: [ux-fundamentals.md](ux-fundamentals.md)
+
+**Examples**:
+- "What is information architecture?" → [ux-fundamentals.md](ux-fundamentals.md)
+- "Explain visual hierarchy" → [ux-fundamentals.md](ux-fundamentals.md)
+- "How do I think about accessibility?" → [ux-fundamentals.md](ux-fundamentals.md)
+
+---
+
+### Design Critique & Review
+
+**Symptoms**: "Review this design", "Critique this interface", "Is this usable?", "Does this follow best practices?"
+
+**Route to**: Relevant competency skills based on critique focus
+
+**General Review** (no specific focus):
+- [visual-design-foundations.md](visual-design-foundations.md) (visual hierarchy, color, typography)
+- [information-architecture.md](information-architecture.md) (content organization, navigation)
+- [accessibility-and-inclusive-design.md](accessibility-and-inclusive-design.md) (WCAG, inclusive design)
+
+**Specific Focus**:
+- Visual issues (color, contrast, hierarchy) → [visual-design-foundations.md](visual-design-foundations.md)
+- Navigation/findability issues → [information-architecture.md](information-architecture.md)
+- Interaction feedback, touch targets → [interaction-design-patterns.md](interaction-design-patterns.md)
+- Accessibility concerns → [accessibility-and-inclusive-design.md](accessibility-and-inclusive-design.md)
+
+**Add platform extension** if design is platform-specific:
+- Mobile app → Add [mobile-design-patterns.md](mobile-design-patterns.md)
+- Web dashboard → Add [web-application-design.md](web-application-design.md)
+- Desktop software → Add [desktop-software-design.md](desktop-software-design.md)
+- Game interface → Add [game-ui-design.md](game-ui-design.md)
+
+---
+
+### New Interface Design
+
+**Symptoms**: "Design a...", "Create interface for...", "Build a [feature] screen"
+
+**Route to**: Competency skills + platform extension
+
+**Standard Web/Mobile Feature**:
+1. [visual-design-foundations.md](visual-design-foundations.md) (layout, hierarchy, color)
+2. [interaction-design-patterns.md](interaction-design-patterns.md) (buttons, feedback, states)
+3. Platform-specific:
+   - Mobile → [mobile-design-patterns.md](mobile-design-patterns.md)
+   - Web app → [web-application-design.md](web-application-design.md)
+
+**Complex Navigation/IA**:
+1. [information-architecture.md](information-architecture.md) (content structure, nav systems)
+2. [visual-design-foundations.md](visual-design-foundations.md) (visual hierarchy)
+3. Platform extension as needed
+
+**Research Phase** (early discovery):
+1. [user-research-and-validation.md](user-research-and-validation.md) (understand users first)
+2. Then return to design skills once research complete
+
+---
+
+### Specific UX Domains
+
+#### Visual Design Issues
+
+**Symptoms**: "Colors don't work", "Typography feels off", "Hierarchy unclear", "Layout cramped"
+
+**Route to**: [visual-design-foundations.md](visual-design-foundations.md)
+
+**Add**: [accessibility-and-inclusive-design.md](accessibility-and-inclusive-design.md) if contrast/readability concerns
+
+---
+
+#### Navigation & Findability
+
+**Symptoms**: "Users can't find features", "Navigation confusing", "Menu structure", "Content organization"
+
+**Route to**: [information-architecture.md](information-architecture.md)
+
+**Add**: Platform extension for platform-specific nav patterns
+
+---
+
+#### Interaction & Feedback
+
+**Symptoms**: "Button states unclear", "No loading feedback", "Micro-interactions", "Touch targets too small"
+
+**Route to**: [interaction-design-patterns.md](interaction-design-patterns.md)
+
+**Add**: Platform extension for platform-specific interaction conventions
+
+---
+
+#### Accessibility & Inclusion
+
+**Symptoms**: "WCAG compliance", "Accessibility audit", "Colorblind-safe", "Keyboard navigation", "Screen reader"
+
+**Route to**: [accessibility-and-inclusive-design.md](accessibility-and-inclusive-design.md)
+
+**Note**: This skill should be referenced by all other design decisions (accessibility is universal)
+
+---
+
+#### User Research & Validation
+
+**Symptoms**: "Understand users", "User interviews", "Usability testing", "Mental models", "Journey mapping"
+
+**Route to**: [user-research-and-validation.md](user-research-and-validation.md)
+
+**Add**: Other skills once research informs design direction
+
+---
+
+## Platform-Specific Routing
+
+### Mobile (iOS/Android)
+
+**Symptoms**: "Mobile app", "iOS", "Android", "Touch interface", "Phone", "Tablet"
+
+**Route to**:
+- Core competency skills (visual, IA, interaction) as needed
+- **Always add**: [mobile-design-patterns.md](mobile-design-patterns.md)
+
+**Mobile-Specific Concerns**:
+- Touch targets (44x44pt iOS, 48x48dp Android)
+- Gestures (swipe, pinch, long-press)
+- Platform conventions (iOS HIG vs Material Design)
+- One-handed use, thumb zones
+
+---
+
+### Web Applications
+
+**Symptoms**: "Web app", "Dashboard", "SaaS", "Data visualization", "Admin panel", "Responsive design"
+
+**Route to**:
+- Core competency skills as needed
+- **Always add**: [web-application-design.md](web-application-design.md)
+
+**Web-Specific Concerns**:
+- Responsive breakpoints
+- Complex data display (tables, charts)
+- Keyboard shortcuts, power-user workflows
+- Multi-tasking (tabs, split views)
+
+---
+
+### Desktop Software
+
+**Symptoms**: "Desktop app", "Electron", "Native application", "Multi-window", "Keyboard shortcuts"
+
+**Route to**:
+- Core competency skills as needed
+- **Always add**: [desktop-software-design.md](desktop-software-design.md)
+
+**Desktop-Specific Concerns**:
+- Window management (multi-window, panels)
+- Keyboard-first workflows
+- Workspace customization
+- Power-user features (preferences, scripting)
+
+---
+
+### Game UI
+
+**Symptoms**: "Game", "HUD", "Menu system", "Game interface", "In-game UI", "Player experience"
+
+**Route to**:
+- Core competency skills as needed
+- **Always add**: [game-ui-design.md](game-ui-design.md)
+
+**Game-Specific Concerns**:
+- Visibility vs immersion (diegetic UI)
+- Controller/gamepad navigation
+- Readability during action
+- Performance impact (frame rate)
+
+---
+
+## Multi-Skill Scenarios
+
+### Complete Feature Design (Mobile Login)
+
+**Load in order**:
+1. [visual-design-foundations.md](visual-design-foundations.md) (layout, button hierarchy)
+2. [interaction-design-patterns.md](interaction-design-patterns.md) (form feedback, button states)
+3. [accessibility-and-inclusive-design.md](accessibility-and-inclusive-design.md) (form labels, contrast)
+4. [mobile-design-patterns.md](mobile-design-patterns.md) (touch targets, platform conventions)
+
+---
+
+### Dashboard Redesign (Web)
+
+**Load in order**:
+1. [information-architecture.md](information-architecture.md) (organize data, navigation)
+2. [visual-design-foundations.md](visual-design-foundations.md) (hierarchy, chart design)
+3. [web-application-design.md](web-application-design.md) (responsive, data display patterns)
+4. [accessibility-and-inclusive-design.md](accessibility-and-inclusive-design.md) (data table accessibility)
+
+---
+
+### Game HUD Evaluation
+
+**Load in order**:
+1. [visual-design-foundations.md](visual-design-foundations.md) (readability, contrast)
+2. [game-ui-design.md](game-ui-design.md) (immersion, performance, input method)
+3. [accessibility-and-inclusive-design.md](accessibility-and-inclusive-design.md) (colorblind-safe indicators)
+
+---
+
+## Cross-Faction Integration
+
+### Lyra + Muna (Technical Writer)
+
+**When designing documentation UX**:
+- `lyra/ux-designer/information-architecture` (organize docs)
+- `muna/technical-writer/documentation-structure` (content structure)
+- `muna/technical-writer/clarity-and-style` (microcopy, UI text)
+
+**Example**: "Design documentation site navigation" → Load IA + documentation-structure
+
+---
+
+### Lyra + Ordis (Security Architect)
+
+**When designing secure interfaces**:
+- `lyra/ux-designer/visual-design-foundations` (secure feedback, error states)
+- `ordis/security-architect/threat-modeling` (authentication UX threats)
+
+**Example**: "Design login with MFA" → Load interaction-patterns + threat-modeling
+
+---
+
+## Decision Tree
+
+```
+User Request
+    |
+    ├─ "What is...?" / "Explain..." → ux-fundamentals
+    |
+    ├─ "Review this design"
+    |   ├─ General → visual-design + IA + accessibility
+    |   └─ Specific concern → Relevant competency skill
+    |       └─ Add platform extension if platform-specific
+    |
+    ├─ "Design a [feature]"
+    |   ├─ Research phase? → user-research-and-validation first
+    |   └─ Design phase
+    |       ├─ Identify competencies needed (visual, IA, interaction)
+    |       ├─ Detect platform (mobile, web, desktop, game)
+    |       └─ Load competency + platform extension
+    |
+    └─ Specific domain
+        ├─ Visual → visual-design-foundations
+        ├─ Navigation → information-architecture
+        ├─ Interaction → interaction-design-patterns
+        ├─ Accessibility → accessibility-and-inclusive-design
+        └─ Research → user-research-and-validation
+```
+
+---
+
+## Common Patterns
+
+### Pattern 1: "I need general UX advice"
+**Load**: [ux-fundamentals.md](ux-fundamentals.md) (teaches principles)
+
+### Pattern 2: "Critique my [platform] design"
+**Load**: visual-design + IA + accessibility + [platform-extension]
+
+### Pattern 3: "Design [feature] for [platform]"
+**Load**: Relevant competencies + [platform-extension]
+
+### Pattern 4: "Is this accessible?"
+**Load**: [accessibility-and-inclusive-design.md](accessibility-and-inclusive-design.md) (primary)
+**Reference**: visual-design (contrast), interaction-design (keyboard nav)
+
+### Pattern 5: "How do users navigate this?"
+**Load**: [information-architecture.md](information-architecture.md) (primary)
+**Add**: user-research-and-validation (if testing/validation needed)
+
+---
+
+## Benefits of Routing
+
+**Focused expertise**: Load only what's needed for the task
+**Clear boundaries**: Each skill has distinct responsibility
+**Composable**: Combine skills for complex scenarios
+**Efficient**: Avoid loading all 11 skills at once
+**Explicit**: User sees which skills are active
+
+---
+
+## UX Designer Specialist Skills Catalog
+
+After routing, load the appropriate specialist skill for detailed guidance:
+
+1. [ux-fundamentals.md](ux-fundamentals.md) - Core UX principles, teaching foundational concepts, design thinking
+2. [visual-design-foundations.md](visual-design-foundations.md) - Color theory, typography, visual hierarchy, layout, contrast
+3. [information-architecture.md](information-architecture.md) - Navigation systems, content organization, findability, menu structure
+4. [interaction-design-patterns.md](interaction-design-patterns.md) - Button states, feedback patterns, micro-interactions, touch targets
+5. [accessibility-and-inclusive-design.md](accessibility-and-inclusive-design.md) - WCAG compliance, inclusive design, colorblind-safe, screen readers, keyboard navigation
+6. [user-research-and-validation.md](user-research-and-validation.md) - User interviews, usability testing, mental models, journey mapping, research methods
+7. [mobile-design-patterns.md](mobile-design-patterns.md) - iOS/Android patterns, touch gestures, platform conventions, thumb zones
+8. [web-application-design.md](web-application-design.md) - Responsive design, dashboards, data visualization, SaaS patterns, keyboard shortcuts
+9. [desktop-software-design.md](desktop-software-design.md) - Multi-window management, keyboard-first workflows, power-user features, workspace customization
+10. [game-ui-design.md](game-ui-design.md) - HUD design, diegetic UI, controller navigation, immersion vs visibility
+
+**Cross-faction**:
+- `muna/technical-writer/*` - Documentation UX and microcopy
+- `ordis/security-architect/*` - Security-aware interface design
diff --git a/skills/using-ux-designer/accessibility-and-inclusive-design.md b/skills/using-ux-designer/accessibility-and-inclusive-design.md
new file mode 100644
index 0000000..d874277
--- /dev/null
+++ b/skills/using-ux-designer/accessibility-and-inclusive-design.md
@@ -0,0 +1,1376 @@
+
+# Accessibility and Inclusive Design
+
+## Overview
+
+This skill provides a systematic framework for creating universally accessible interfaces that work for everyone, regardless of ability, situation, or context.
+
+**Core Principle**: Accessibility constraints make design BETTER for everyone, not just users with disabilities. High contrast helps in sunlight. Large touch targets help when distracted. Clear language helps when stressed.
+
+**Framework**: The Universal Access Model - 6 dimensions ensuring comprehensive accessibility coverage.
+
+## When to Use
+
+Load this skill when:
+- User mentions "accessibility", "WCAG", "inclusive design", "screen reader"
+- Designing or critiquing any interface (accessibility is universal)
+- User asks about contrast ratios, colorblind-safe design, keyboard navigation
+- Compliance required (legal, ethical, best practices)
+- Evaluating existing designs for accessibility issues
+
+**Don't use for**: Pure visual aesthetics (use visual-design-foundations first, then verify with this skill)
+
+**Critical Note**: This skill should be referenced by ALL other Lyra skills. Accessibility is not optional or separate - it's integrated into every design decision.
+
+
+## The Universal Access Model
+
+A systematic 6-dimension framework for evaluating and ensuring universal access:
+
+1. **Visual Accessibility** - Contrast, zooming, color-independent information
+2. **Motor Accessibility** - Touch targets, keyboard navigation, no precision required
+3. **Cognitive Accessibility** - Clear language, reduced mental load, forgiving
+4. **Screen Reader Compatibility** - Semantic structure, labels, logical order
+5. **Temporal Accessibility** - No timeouts, pauseable content, user-paced
+6. **Situational Accessibility** - Works in varied contexts (noise, sunlight, one-handed)
+
+Each dimension has specific WCAG criteria, testing methods, and patterns.
+
+
+### Dimension 1: VISUAL ACCESSIBILITY
+
+**Purpose**: Users with vision differences (low vision, colorblindness, blindness) can access content
+
+#### Evaluation Questions
+
+**Contrast:**
+- Does text meet 4.5:1 contrast ratio (WCAG AA)?
+- Does large text (18pt+) meet 3:1 ratio?
+- Do UI components meet 3:1 contrast against backgrounds?
+- Is contrast even higher for critical actions (7:1 for AAA)?
+
+**Zoom & Resize:**
+- Can users zoom to 200% without horizontal scrolling?
+- Does text remain readable when zoomed?
+- Do layouts reflow gracefully at high zoom levels?
+- Are font sizes relative (em, rem) not fixed (px)?
+
+**Color Independence:**
+- Is information conveyed with more than color alone?
+- Can colorblind users distinguish states (red/green)?
+- Are links distinguishable without relying on color?
+- Do charts/graphs use patterns in addition to color?
+
+**Readability:**
+- Is body text at least 16px on mobile, 14px on desktop?
+- Is line height comfortable (1.5x for body text)?
+- Is line length appropriate (45-75 characters)?
+- Are fonts clear and legible (avoid decorative for body)?
+
+#### WCAG 2.1 AA Requirements
+
+**1.4.3 Contrast (Minimum) - Level AA:**
+- Normal text: 4.5:1 minimum
+- Large text (18pt/14pt bold+): 3:1 minimum
+- UI components and graphics: 3:1 minimum
+
+**1.4.4 Resize Text - Level AA:**
+- Text can be resized up to 200% without loss of content or functionality
+
+**1.4.11 Non-text Contrast - Level AA:**
+- UI components and graphical objects: 3:1 minimum against adjacent colors
+
+**1.4.1 Use of Color - Level A:**
+- Color is not the only visual means of conveying information
+
+#### Patterns (Good)
+
+**High Contrast Text:**
+```
+Body text: #000000 on #FFFFFF (21:1) ✓
+Links: #0066CC on #FFFFFF (8.6:1) ✓
+Large headings: #333333 on #FFFFFF (12.6:1) ✓
+```
+
+**Color + Icon/Text Indicators:**
+```
+Error: Red background + "X" icon + "Error" text
+Success: Green background + checkmark icon + "Success" text
+Warning: Yellow background + "!" icon + "Warning" text
+(Colorblind users see icon/text, not just color)
+```
+
+**Link Differentiation:**
+```
+Links: Blue (#0066CC) + underline (always visible)
+Or: Different font weight + underline on hover
+Not: Just color change (insufficient for colorblind)
+```
+
+**Zoom-Friendly Layouts:**
+```
+Relative units: font-size: 1rem (16px base)
+Viewport units: max-width: 90vw
+Flexible grids: display: flex with wrap
+Not: Fixed pixel widths everywhere
+```
+
+#### Anti-Patterns (Problematic)
+
+**Low Contrast:**
+```
+Light gray on white: #999999 on #FFFFFF (2.8:1) ✗
+Fails WCAG AA (needs 4.5:1)
+```
+
+**Color as Sole Indicator:**
+```
+"Red items are errors, green items are valid"
+Colorblind users can't distinguish ✗
+Add icons/text to each state ✓
+```
+
+**Fixed Font Sizes:**
+```
+font-size: 12px; (user can't resize)
+Use: font-size: 0.75rem; (scales with user preference)
+```
+
+**Tiny Text:**
+```
+Body text at 12px on mobile (too small) ✗
+Minimum 16px on mobile, 14px on desktop ✓
+```
+
+**Insufficient Line Height:**
+```
+line-height: 1.0; (cramped, hard to read) ✗
+line-height: 1.5; (comfortable spacing) ✓
+```
+
+#### Testing Methods
+
+**Contrast Tools:**
+- WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
+- Stark plugin (Figma/Sketch): Real-time contrast checking
+- Chrome DevTools: Built-in contrast ratio in color picker
+- Accessible Colors: Suggests accessible alternatives
+
+**Colorblindness Simulation:**
+- Stark (Figma): Protanopia, Deuteranopia, Tritanopia filters
+- Colorblinding Chrome extension
+- Sim Daltonism (macOS): System-wide colorblind filters
+- Test with Protanopia (red-blind) and Deuteranopia (green-blind) at minimum
+
+**Zoom Testing:**
+- Browser zoom to 200% (Cmd/Ctrl + Plus)
+- Check for horizontal scrolling (bad)
+- Check for overlapping content (bad)
+- Check for cut-off text (bad)
+
+**Visual Testing Checklist:**
+- [ ] All text meets 4.5:1 contrast (WebAIM)
+- [ ] UI components meet 3:1 contrast
+- [ ] Links distinguishable without color
+- [ ] Zoom to 200% works without horizontal scroll
+- [ ] Colorblind simulation passes (Stark)
+- [ ] Body text minimum 16px mobile, 14px desktop
+
+
+### Dimension 2: MOTOR ACCESSIBILITY
+
+**Purpose**: Users with motor control differences (tremors, limited dexterity, paralysis) can interact
+
+#### Evaluation Questions
+
+**Touch Targets:**
+- Are all interactive elements at least 44x44px (iOS) or 48x48dp (Android)?
+- Is spacing adequate between tap targets (8px minimum)?
+- Can users with tremors hit targets reliably?
+- Are critical actions away from screen edges (accidental activation)?
+
+**Keyboard Navigation:**
+- Can users navigate entire interface with keyboard only?
+- Is tab order logical (top-to-bottom, left-to-right)?
+- Are focus indicators visible (2px outline minimum)?
+- Can users activate all functions via keyboard?
+- Are keyboard shortcuts provided for common actions?
+
+**No Precision Required:**
+- Can users interact without fine motor control?
+- Are drag-and-drop operations optional (alternative method)?
+- Are hover-only interactions avoided?
+- Can users pause/cancel actions (no irreversible quick gestures)?
+
+#### WCAG 2.1 AA Requirements
+
+**2.1.1 Keyboard - Level A:**
+- All functionality available via keyboard interface
+
+**2.1.2 No Keyboard Trap - Level A:**
+- Focus can move away from component using keyboard alone
+
+**2.4.7 Focus Visible - Level AA:**
+- Keyboard focus indicator is visible
+
+**2.5.5 Target Size - Level AAA (Best Practice):**
+- Touch targets at least 44x44 CSS pixels (iOS guideline, WCAG AAA)
+
+#### Patterns (Good)
+
+**Large Touch Targets:**
+```
+Buttons: min-height: 48px, min-width: 48px
+Icons: 44x44px clickable area (icon may be smaller, hit area large)
+Form inputs: height: 48px
+List items: min-height: 56dp (Android Material)
+```
+
+**Adequate Spacing:**
+```
+Margin between buttons: 8px minimum
+Padding inside buttons: 12px vertical, 24px horizontal
+Space between form fields: 16px minimum
+```
+
+**Visible Focus Indicators:**
+```
+button:focus {
+  outline: 2px solid #0066CC;
+  outline-offset: 2px;
+}
+
+Do not: outline: none; (removes accessibility) ✗
+```
+
+**Keyboard Shortcuts:**
+```
+Common actions:
+- Tab: Next element
+- Shift+Tab: Previous element
+- Enter/Space: Activate button/link
+- Esc: Close modal/dismiss
+- Arrow keys: Navigate menus/lists
+
+Custom shortcuts:
+- Cmd/Ctrl+S: Save
+- Cmd/Ctrl+Z: Undo
+- /: Focus search (common web pattern)
+```
+
+**Skip Links:**
+```
+<a href="#main-content" class="skip-link">
+  Skip to main content
+</a>
+
+Allows keyboard users to skip repetitive navigation
+```
+
+#### Anti-Patterns (Problematic)
+
+**Tiny Touch Targets:**
+```
+Buttons: 30x30px (too small, frustrating) ✗
+Minimum 44x44px (iOS), 48x48dp (Android) ✓
+```
+
+**Crowded Tap Targets:**
+```
+Buttons with 2px spacing (accidental taps) ✗
+Minimum 8px spacing between interactive elements ✓
+```
+
+**No Focus Indicator:**
+```
+*:focus { outline: none; } ✗
+Keyboard users can't see where they are
+Keep default or enhance: outline: 2px solid blue; ✓
+```
+
+**Hover-Only Interactions:**
+```
+Dropdown menu appears only on hover (keyboard inaccessible) ✗
+Add keyboard trigger: click or Enter key ✓
+```
+
+**Illogical Tab Order:**
+```
+HTML order: Header → Sidebar → Content
+Visual order: Header → Content → Sidebar
+Tab order follows HTML (confusing) ✗
+Reorder HTML or use tabindex carefully ✓
+```
+
+**Mouse-Only Actions:**
+```
+Right-click context menus only (no keyboard equivalent) ✗
+Provide button or keyboard shortcut alternative ✓
+```
+
+#### Testing Methods
+
+**Keyboard Navigation Test:**
+1. Unplug/hide your mouse
+2. Navigate entire interface with Tab, Shift+Tab, Enter, Space, Esc, Arrows
+3. Check:
+   - Can you reach all interactive elements?
+   - Is focus indicator always visible?
+   - Is tab order logical?
+   - Can you activate all functions?
+   - Can you escape modals/menus?
+
+**Touch Target Testing:**
+- Use browser DevTools to measure elements (should be 44x44px minimum)
+- Test on actual mobile device (finger test)
+- Try tapping with thumb while holding phone (reachability)
+
+**Motor Accessibility Checklist:**
+- [ ] All touch targets 44x44px minimum
+- [ ] 8px spacing between interactive elements
+- [ ] Entire interface navigable via keyboard only
+- [ ] Focus indicators visible on all interactive elements
+- [ ] Tab order is logical
+- [ ] No hover-only critical interactions
+- [ ] Keyboard shortcuts for common actions
+
+
+### Dimension 3: COGNITIVE ACCESSIBILITY
+
+**Purpose**: Users with cognitive differences (dyslexia, ADHD, anxiety, memory issues) can understand
+
+#### Evaluation Questions
+
+**Language Clarity:**
+- Is language simple and clear (8th grade reading level)?
+- Are sentences short (20 words or less)?
+- Is jargon avoided or explained?
+- Are instructions direct and actionable?
+
+**Cognitive Load:**
+- Is information chunked (5-7 items per group)?
+- Are headings and lists used to organize content?
+- Is progressive disclosure used (simple first, advanced later)?
+- Are users required to remember information across screens?
+
+**Error Prevention & Recovery:**
+- Are errors prevented with constraints and validation?
+- Are error messages clear and helpful?
+- Can users easily undo mistakes?
+- Are confirmations provided for destructive actions?
+
+**Visual Clarity:**
+- Is layout consistent across screens?
+- Are visual cues provided (icons, color, spacing)?
+- Is there adequate white space (not overwhelming)?
+- Are animations purposeful (not distracting)?
+
+#### WCAG 2.1 AA Requirements
+
+**3.1.5 Reading Level - Level AAA (Best Practice):**
+- Text does not require reading ability more advanced than lower secondary education
+
+**3.2.3 Consistent Navigation - Level AA:**
+- Navigational mechanisms that are repeated occur in same order
+
+**3.2.4 Consistent Identification - Level AA:**
+- Components with same functionality are identified consistently
+
+**3.3.1 Error Identification - Level A:**
+- Errors are identified and described to user in text
+
+**3.3.2 Labels or Instructions - Level A:**
+- Labels or instructions provided when content requires user input
+
+**3.3.3 Error Suggestion - Level AA:**
+- Suggestions provided when input error is automatically detected
+
+**3.3.4 Error Prevention (Legal, Financial, Data) - Level AA:**
+- Submissions are reversible, checked, or confirmed
+
+#### Patterns (Good)
+
+**Clear Language:**
+```
+Good: "Enter your email address"
+Bad: "Input your electronic mail identifier"
+
+Good: "Delete this file?"
+Bad: "Permanently remove this resource from the filesystem?"
+
+Target 8th grade reading level (Hemingway Editor)
+```
+
+**Chunked Information:**
+```
+Group related fields:
+┌─────────────────────┐
+│ Contact Information │
+│ - Name              │
+│ - Email             │
+│ - Phone             │
+└─────────────────────┘
+
+Not: 15 fields in one long list
+```
+
+**Progressive Disclosure:**
+```
+Default view: Basic settings (3-5 options)
+"Advanced" button reveals: Power-user settings
+Not: All 30 settings visible at once (overwhelming)
+```
+
+**Helpful Error Messages:**
+```
+Good: "Email format incorrect. Example: name@example.com"
+Bad: "Invalid input in field 3"
+
+Good: "Password must contain: 8 characters, 1 number, 1 uppercase"
+Bad: "Password requirements not met"
+```
+
+**Confirmation for Destructive Actions:**
+```
+User clicks "Delete Account"
+Modal: "Are you sure? This will permanently delete your account and all data. Type 'DELETE' to confirm."
+Prevents accidental data loss
+```
+
+**Visual Hierarchy:**
+```
+Use headings, spacing, color to create structure:
+- H1: Page title (32px, bold)
+- H2: Section headers (24px, bold)
+- H3: Subsections (18px, bold)
+- Body: Content (16px, regular)
+- Spacing: 24px between sections
+```
+
+#### Anti-Patterns (Problematic)
+
+**Complex Jargon:**
+```
+"Utilize the aforementioned methodology" ✗
+"Use this method" ✓
+```
+
+**Wall of Text:**
+```
+Paragraph with 200 words, no headings or lists ✗
+Break into sections with headings, use bullet lists ✓
+```
+
+**Overwhelming Choices:**
+```
+15 buttons on one screen (decision paralysis) ✗
+1 primary action, 1-2 secondary, hide rest in menu ✓
+```
+
+**Cryptic Errors:**
+```
+"Error 4032" (user has no idea what to do) ✗
+"Email already in use. Try logging in instead." ✓
+```
+
+**No Confirmation for Destructive Actions:**
+```
+Single click deletes account (disaster) ✗
+Confirmation modal with type-to-confirm ✓
+```
+
+**Inconsistent Patterns:**
+```
+"Save" button top-right on page 1, bottom-left on page 2 ✗
+Consistent placement across all screens ✓
+```
+
+#### Testing Methods
+
+**Readability Testing:**
+- Hemingway Editor: Checks reading level (aim for grade 8 or lower)
+- Readable.io: Analyzes content complexity
+- Read text aloud: If it sounds awkward, rewrite
+
+**Cognitive Load Testing:**
+- Count choices per screen (5-7 max before chunking)
+- Measure form fields (chunk into logical groups)
+- Check memory requirements (can user see info they need to reference?)
+
+**User Testing:**
+- Watch users complete tasks (where do they hesitate?)
+- Ask users to explain what they think will happen (mental model check)
+- Test with users with cognitive disabilities if possible
+
+**Cognitive Accessibility Checklist:**
+- [ ] Language at 8th grade level or lower (Hemingway)
+- [ ] Sentences short (20 words or less)
+- [ ] Information chunked (5-7 items per group)
+- [ ] Error messages clear and actionable
+- [ ] Destructive actions require confirmation
+- [ ] Consistent navigation and patterns
+- [ ] Adequate white space and visual structure
+
+
+### Dimension 4: SCREEN READER COMPATIBILITY
+
+**Purpose**: Users with screen readers (NVDA, JAWS, VoiceOver, TalkBack) can navigate and understand
+
+#### Evaluation Questions
+
+**Semantic HTML:**
+- Are proper HTML elements used (button, nav, main, article)?
+- Is heading hierarchy logical (h1 → h2 → h3, no skipping)?
+- Are landmarks used (header, nav, main, aside, footer)?
+- Are lists used for lists (ul, ol, not divs)?
+
+**Alternative Text:**
+- Do images have descriptive alt text?
+- Are decorative images marked as decorative (alt="")?
+- Do icon buttons have text labels or aria-label?
+- Are complex images explained (charts, diagrams)?
+
+**Focus Management:**
+- Is focus order logical?
+- Does focus move to opened modals?
+- Is focus trapped in modals (can't escape to background)?
+- Does focus return to trigger element when modal closes?
+
+**ARIA Labels:**
+- Are ARIA labels used when semantic HTML insufficient?
+- Are form inputs properly labeled?
+- Are dynamic updates announced (aria-live)?
+- Are expanded/collapsed states indicated (aria-expanded)?
+
+#### WCAG 2.1 AA Requirements
+
+**1.1.1 Non-text Content - Level A:**
+- Images have text alternatives
+
+**1.3.1 Info and Relationships - Level A:**
+- Information, structure, relationships conveyed through markup
+
+**2.4.1 Bypass Blocks - Level A:**
+- Mechanism to skip repeated blocks of content
+
+**2.4.6 Headings and Labels - Level AA:**
+- Headings and labels describe topic or purpose
+
+**4.1.2 Name, Role, Value - Level A:**
+- For all UI components, name and role can be programmatically determined
+
+**4.1.3 Status Messages - Level AA:**
+- Status messages can be programmatically determined and announced
+
+#### Patterns (Good)
+
+**Semantic HTML:**
+```html
+<header>
+  <nav aria-label="Main navigation">
+    <ul>
+      <li><a href="/">Home</a></li>
+      <li><a href="/about">About</a></li>
+    </ul>
+  </nav>
+</header>
+
+<main>
+  <h1>Page Title</h1>
+  <article>
+    <h2>Section Heading</h2>
+    <p>Content here...</p>
+  </article>
+</main>
+
+<footer>
+  <p>&copy; 2025 Company</p>
+</footer>
+
+Not: <div class="header">, <div class="nav">, <div class="button">
+```
+
+**Descriptive Alt Text:**
+```html
+Good:
+<img src="chart.png" alt="Line chart showing revenue growth from $1M in 2020 to $5M in 2025">
+
+Bad:
+<img src="chart.png" alt="chart">
+<img src="chart.png" alt=""> (if informative, needs description)
+
+Decorative:
+<img src="decorative-line.png" alt=""> (empty alt for decorative)
+```
+
+**Heading Hierarchy:**
+```html
+<h1>Page Title</h1>
+  <h2>Section 1</h2>
+    <h3>Subsection 1.1</h3>
+    <h3>Subsection 1.2</h3>
+  <h2>Section 2</h2>
+    <h3>Subsection 2.1</h3>
+
+Not: <h1> → <h3> → <h2> (illogical)
+```
+
+**Form Labels:**
+```html
+<label for="email">Email Address</label>
+<input type="email" id="email" name="email" required>
+
+Or with ARIA:
+<input type="email" aria-label="Email Address" required>
+
+Not: Placeholder as label (disappears when typing)
+```
+
+**Icon Button Labels:**
+```html
+<button aria-label="Close modal">
+  <svg><!-- X icon --></svg>
+</button>
+
+Or:
+<button>
+  <svg aria-hidden="true"><!-- X icon --></svg>
+  <span class="visually-hidden">Close modal</span>
+</button>
+```
+
+**Skip Links:**
+```html
+<a href="#main-content" class="skip-link">Skip to main content</a>
+
+<!-- Allows screen reader users to skip navigation -->
+
+.skip-link {
+  position: absolute;
+  left: -9999px;
+}
+.skip-link:focus {
+  left: 0;
+  top: 0;
+  z-index: 9999;
+}
+```
+
+**Live Regions:**
+```html
+<div role="status" aria-live="polite">
+  File uploaded successfully
+</div>
+
+aria-live="polite": Announces when screen reader finishes current task
+aria-live="assertive": Interrupts to announce immediately
+```
+
+#### Anti-Patterns (Problematic)
+
+**Divs for Everything:**
+```html
+<div class="button" onclick="doSomething()">Click me</div> ✗
+
+Use: <button onclick="doSomething()">Click me</button> ✓
+```
+
+**Missing Alt Text:**
+```html
+<img src="important-chart.png"> ✗
+<img src="important-chart.png" alt="Revenue chart"> ✓
+```
+
+**Skipping Heading Levels:**
+```html
+<h1>Title</h1>
+<h3>Subsection</h3> ✗ (skipped h2)
+
+Use logical hierarchy: h1 → h2 → h3 ✓
+```
+
+**Placeholder as Label:**
+```html
+<input type="text" placeholder="Email"> ✗
+(Placeholder disappears when typing, screen reader may not announce)
+
+Use: <label for="email">Email</label> ✓
+     <input type="email" id="email">
+```
+
+**Icon Without Label:**
+```html
+<button><i class="icon-trash"></i></button> ✗
+(Screen reader announces "button" - user has no idea what it does)
+
+<button aria-label="Delete"><i class="icon-trash"></i></button> ✓
+```
+
+**No Focus Management in Modals:**
+```
+Modal opens, focus stays on background element ✗
+Focus moves to modal, traps within modal, returns on close ✓
+```
+
+#### Testing Methods
+
+**Screen Reader Testing:**
+
+**Windows - NVDA (Free):**
+1. Download NVDA: https://www.nvaccess.org/download/
+2. Install and launch
+3. Navigate with:
+   - Down arrow: Next item
+   - H: Next heading
+   - Tab: Next interactive element
+   - Enter: Activate link/button
+   - Insert+Down: Read all
+4. Check: Can you navigate? Do elements announce correctly?
+
+**Windows - JAWS (Commercial, most popular):**
+- Similar to NVDA, industry standard for Windows
+- Free 40-minute trial sessions
+
+**macOS - VoiceOver (Built-in):**
+1. Enable: Cmd+F5
+2. Navigate with:
+   - VO+Right Arrow: Next item (VO = Ctrl+Option)
+   - VO+H: Next heading
+   - Tab: Next interactive element
+   - VO+Space: Activate
+3. Check: Does content make sense? Are labels clear?
+
+**Mobile - TalkBack (Android) / VoiceOver (iOS):**
+- Enable in Accessibility settings
+- Swipe right to next element
+- Double-tap to activate
+- Test: Can you complete core tasks?
+
+**Automated Testing:**
+- Axe DevTools (Chrome): Catches 30-40% of issues automatically
+- Lighthouse (Chrome): Accessibility score and specific issues
+- WAVE (browser extension): Visual feedback on accessibility issues
+
+**Manual Testing Checklist:**
+- [ ] Navigate entire site with screen reader (NVDA/VoiceOver)
+- [ ] Check heading hierarchy (use headings list in screen reader)
+- [ ] Verify all images have alt text
+- [ ] Test forms (labels announced correctly?)
+- [ ] Test modals (focus management works?)
+- [ ] Run automated tests (Axe, Lighthouse, WAVE)
+- [ ] No elements announced as "clickable" or "button" without context
+
+
+### Dimension 5: TEMPORAL ACCESSIBILITY
+
+**Purpose**: Users have adequate time to read, interact, and complete tasks
+
+#### Evaluation Questions
+
+**Timeouts:**
+- Are timeouts avoidable or adjustable?
+- Are users warned before session expires?
+- Can users extend timeouts easily?
+- Are timeouts necessary or arbitrary?
+
+**Moving Content:**
+- Can users pause, stop, or hide animations?
+- Is auto-playing content controllable?
+- Are carousels pausable?
+- Do animations respect prefers-reduced-motion?
+
+**Time Limits:**
+- Are time limits user-adjustable (extends, disables)?
+- Are real-time events (auctions) the only exception?
+- Are users given 20 seconds warning minimum before timeout?
+- Can users save work if timeout occurs?
+
+#### WCAG 2.1 AA Requirements
+
+**2.2.1 Timing Adjustable - Level A:**
+- User can turn off, adjust, or extend time limits (except real-time events)
+
+**2.2.2 Pause, Stop, Hide - Level A:**
+- User can pause, stop, or hide moving, blinking, or scrolling content
+
+**2.2.6 Timeouts - Level AAA (Best Practice):**
+- Users are warned of the duration of inactivity that could cause data loss
+
+#### Patterns (Good)
+
+**No Auto-Timeout on Critical Flows:**
+```
+Form filling: No timeout (or 20+ minutes with warning)
+Shopping cart: No timeout (save for later)
+Authentication: 30-minute timeout with 5-minute warning
+
+Not: 2-minute timeout on complex form (anxiety-inducing)
+```
+
+**Timeout Warnings:**
+```
+Modal appears 5 minutes before timeout:
+"Your session will expire in 5 minutes due to inactivity.
+[Extend Session] [Log Out]"
+
+Clicking "Extend Session" resets timer
+```
+
+**Pausable Animations:**
+```
+Carousel with controls:
+[Previous] [Pause/Play] [Next]
+
+Autoplay pauses on hover or focus
+User can disable autoplay entirely
+```
+
+**Respect prefers-reduced-motion:**
+```css
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+Users with motion sensitivity can disable animations
+```
+
+**User-Controlled Content:**
+```
+Video/Audio:
+- Autoplay disabled (or muted with clear unmute button)
+- Play/Pause controls always visible
+- Volume controls available
+```
+
+#### Anti-Patterns (Problematic)
+
+**Tight Timeouts:**
+```
+2-minute timeout on multi-page form ✗
+Users with cognitive disabilities need more time
+Minimum 20 minutes, with warning and extend option ✓
+```
+
+**No Timeout Warning:**
+```
+Session expires suddenly, work lost ✗
+Warning 5+ minutes before, with extend option ✓
+```
+
+**Auto-Playing Video:**
+```
+Video plays on page load with sound ✗
+(Disorienting, accessibility violation)
+Require user interaction to play ✓
+```
+
+**Unstoppable Animations:**
+```
+Constant animation with no pause button ✗
+Motion sickness, distraction
+Provide pause control ✓
+```
+
+**Carousel Auto-Advance:**
+```
+Carousel advances every 3 seconds, can't pause ✗
+Users with reading difficulties can't keep up
+Pause on hover, manual controls, disable autoplay ✓
+```
+
+#### Testing Methods
+
+**Timeout Testing:**
+- Leave interface idle for timeout period
+- Check: Is warning shown before timeout?
+- Check: Can user extend session?
+- Check: Is work saved if timeout occurs?
+
+**Animation Testing:**
+- Enable prefers-reduced-motion in OS settings (macOS: Accessibility > Display > Reduce Motion)
+- Check: Do animations disable or significantly reduce?
+- Check: Is functionality still accessible without animations?
+
+**Auto-Play Testing:**
+- Load pages with video/audio/carousels
+- Check: Does anything auto-play without user action?
+- Check: Are pause controls visible and accessible?
+- Check: Can user disable autoplay permanently?
+
+**Temporal Accessibility Checklist:**
+- [ ] No critical timeouts under 20 minutes
+- [ ] Timeout warnings shown 5+ minutes before expiration
+- [ ] Users can extend timeouts easily
+- [ ] All animations pausable/stoppable
+- [ ] Respect prefers-reduced-motion setting
+- [ ] No auto-playing video/audio
+- [ ] Carousels have pause controls
+
+
+### Dimension 6: SITUATIONAL ACCESSIBILITY
+
+**Purpose**: Design works in varied real-world contexts and situations
+
+#### Evaluation Questions
+
+**Environmental Contexts:**
+- Does it work in bright sunlight (mobile)?
+- Does it work in low light (desktop at night)?
+- Does it work with one hand (mobile, carrying things)?
+- Does it work in noisy environments (captions available)?
+- Does it work in quiet environments (visual feedback, not just audio)?
+
+**Connection Contexts:**
+- Does it work on slow connections (3G, rural)?
+- Does it work offline (progressive web app)?
+- Are large assets lazy-loaded?
+- Is there feedback during loading?
+
+**Device Contexts:**
+- Does it work on small screens (iPhone SE)?
+- Does it work on large screens (4K monitors)?
+- Does it work on old devices (performance)?
+- Does it work on different input methods (touch, mouse, keyboard, voice)?
+
+**User Contexts:**
+- Does it work when distracted (errors prevented)?
+- Does it work when stressed (clear language)?
+- Does it work when tired (high contrast, large text)?
+- Does it work for temporary disabilities (broken arm, eye dilation)?
+
+#### Patterns (Good)
+
+**High Contrast Mode:**
+```css
+@media (prefers-contrast: high) {
+  body {
+    background: #000000;
+    color: #FFFFFF;
+  }
+  a {
+    color: #FFFF00; /* Yellow on black */
+  }
+}
+
+System-level high contrast settings respected
+```
+
+**Dual Feedback (Visual + Audio):**
+```
+Notification arrives:
+- Visual: Toast notification on screen
+- Audio: Subtle sound (optional, user can disable)
+- Vibration: Haptic feedback (mobile)
+
+Works in noisy (visual) and quiet (visual) environments
+```
+
+**Progressive Enhancement:**
+```
+Core content: Loads first, readable without JS/CSS
+Styling: CSS loads, visual hierarchy added
+Interactivity: JS loads, enhanced interactions
+
+Works on slow connections (core content first)
+Works with JS disabled (basic functionality remains)
+```
+
+**Offline Functionality:**
+```
+Service Worker caches essential assets
+Offline page explains situation: "You're offline. Some features unavailable."
+Work continues (drafts saved locally, sync when back online)
+```
+
+**Responsive Images:**
+```html
+<picture>
+  <source media="(max-width: 600px)" srcset="image-small.jpg">
+  <source media="(max-width: 1200px)" srcset="image-medium.jpg">
+  <img src="image-large.jpg" alt="Description">
+</picture>
+
+Appropriate size loaded based on screen (saves bandwidth)
+```
+
+**One-Handed Use (Mobile):**
+```
+Primary actions in thumb zone (bottom 50% of screen)
+Swipe gestures accessible from edges
+Important actions reachable without shifting grip
+```
+
+#### Anti-Patterns (Problematic)
+
+**Low Contrast in Sunlight:**
+```
+Light gray on white (#CCCCCC on #FFFFFF) ✗
+Invisible in bright sunlight on mobile
+Use high contrast: #000000 on #FFFFFF ✓
+```
+
+**Audio-Only Feedback:**
+```
+Error announced via sound only ✗
+Fails in quiet environments (library, meetings)
+Visual indicator required (toast, highlight) ✓
+```
+
+**Heavy Assets on Slow Connections:**
+```
+5MB images load before content ✗
+Lazy load images, optimize sizes, show content first ✓
+```
+
+**Requires Two Hands (Mobile):**
+```
+Critical action in top-left corner (requires shifting grip) ✗
+Primary actions in thumb zone (bottom half) ✓
+```
+
+**No Offline Fallback:**
+```
+Blank white screen when offline ✗
+Offline page explaining situation + cached content ✓
+```
+
+**Fixed Design (No Responsive):**
+```
+Desktop-only design (breaks on mobile) ✗
+Responsive design (adapts to all screens) ✓
+```
+
+#### Testing Methods
+
+**Sunlight Testing:**
+- Test mobile app outdoors in bright sunlight
+- Check: Can you read text?
+- Check: Can you see buttons?
+- Solution: Increase contrast, larger text
+
+**One-Handed Testing:**
+- Use phone with one hand only
+- Check: Can you reach primary actions?
+- Check: Can you navigate comfortably?
+
+**Slow Connection Testing:**
+- Chrome DevTools > Network > Throttle to "Slow 3G"
+- Check: Does core content load first?
+- Check: Is there loading feedback?
+- Check: Can user accomplish tasks on slow connection?
+
+**Offline Testing:**
+- Chrome DevTools > Network > Offline
+- Reload page
+- Check: Is there offline fallback?
+- Check: Is user informed?
+
+**Noise Testing:**
+- Disable device sound
+- Check: Can you still use all features?
+- Check: Is visual feedback provided?
+
+**Situational Accessibility Checklist:**
+- [ ] High contrast mode supported
+- [ ] Works in bright sunlight (high contrast)
+- [ ] Works in noisy and quiet environments (dual feedback)
+- [ ] Works on slow connections (progressive enhancement)
+- [ ] Works offline (service worker, cached content)
+- [ ] Works with one hand (mobile)
+- [ ] Works on small and large screens (responsive)
+
+
+## Practical Application
+
+### Step-by-Step: Accessibility Audit
+
+**Step 1: Automated Scan**
+1. Install Axe DevTools (Chrome extension)
+2. Open your design/site in browser
+3. Run Axe scan
+4. Note critical and serious issues (contrast, missing labels, etc.)
+
+**Step 2: Visual Accessibility**
+1. Check contrast ratios (WebAIM Contrast Checker)
+2. Test colorblind simulation (Stark or Colorblinding extension)
+3. Zoom to 200% (check for horizontal scroll, overlapping)
+4. Verify text sizes (16px mobile minimum)
+
+**Step 3: Motor Accessibility**
+1. Unplug mouse, navigate with keyboard only
+2. Check focus indicators visible
+3. Measure touch targets (44x44px minimum)
+4. Verify spacing between interactive elements (8px)
+
+**Step 4: Cognitive Accessibility**
+1. Read content aloud (does it make sense?)
+2. Check reading level (Hemingway Editor - grade 8 or lower)
+3. Count choices per screen (5-7 max before chunking)
+4. Test error messages (clear and actionable?)
+
+**Step 5: Screen Reader**
+1. Enable screen reader (NVDA on Windows, VoiceOver on macOS)
+2. Navigate with keyboard shortcuts (arrows, H for headings, Tab for links)
+3. Check: Are labels clear? Is order logical? Are images described?
+4. Test forms (are fields labeled correctly?)
+
+**Step 6: Temporal Accessibility**
+1. Check for timeouts (are they adjustable?)
+2. Test animations (can user pause/stop?)
+3. Enable prefers-reduced-motion (do animations disable?)
+4. Check auto-playing content (is it user-controlled?)
+
+**Step 7: Situational Accessibility**
+1. Test in bright light (can you read it?)
+2. Test on slow connection (DevTools throttling)
+3. Test offline (is there fallback?)
+4. Test one-handed (mobile - can you reach actions?)
+
+**Step 8: Document & Prioritize**
+1. List all issues by WCAG severity (A > AA > AAA)
+2. Prioritize: Critical (blocking) > Major (difficult) > Minor (annoying)
+3. Create fix plan with ownership and deadlines
+4. Re-test after fixes
+
+
+## WCAG 2.1 AA Compliance Quick Reference
+
+### Level A (Must Have)
+
+**1.1.1** Non-text Content - Images have alt text
+**1.3.1** Info and Relationships - Semantic HTML structure
+**2.1.1** Keyboard - All functionality keyboard accessible
+**2.1.2** No Keyboard Trap - Can move focus away
+**2.4.1** Bypass Blocks - Skip links for navigation
+**3.3.1** Error Identification - Errors described in text
+**3.3.2** Labels or Instructions - Form fields labeled
+
+### Level AA (Should Have)
+
+**1.4.3** Contrast (Minimum) - 4.5:1 for text, 3:1 for large text
+**1.4.4** Resize Text - 200% zoom without loss
+**1.4.11** Non-text Contrast - 3:1 for UI components
+**2.4.6** Headings and Labels - Describe purpose
+**2.4.7** Focus Visible - Keyboard focus indicator visible
+**3.2.3** Consistent Navigation - Same order across pages
+**3.2.4** Consistent Identification - Same function, same label
+**3.3.3** Error Suggestion - Suggestions for fixing errors
+**3.3.4** Error Prevention - Reversible, checked, or confirmed
+
+### Level AAA (Nice to Have)
+
+**1.4.6** Contrast (Enhanced) - 7:1 for text, 4.5:1 for large text
+**2.5.5** Target Size - 44x44px touch targets
+**3.1.5** Reading Level - Lower secondary education level
+
+**Note**: WCAG AA is the legal standard in most jurisdictions. AAA is best practice.
+
+
+## Accessibility Tools Reference
+
+### Contrast Checkers
+- **WebAIM Contrast Checker**: https://webaim.org/resources/contrastchecker/
+- **Stark** (Figma/Sketch): Real-time contrast checking in design tools
+- **Chrome DevTools**: Color picker shows contrast ratio
+
+### Colorblind Simulation
+- **Stark**: Protanopia, Deuteranopia, Tritanopia filters (Figma)
+- **Colorblinding**: Chrome extension
+- **Sim Daltonism**: macOS system-wide filters
+
+### Screen Readers
+- **NVDA** (Windows): Free, open-source - https://www.nvaccess.org/
+- **JAWS** (Windows): Commercial, most popular - https://www.freedomscientific.com/
+- **VoiceOver** (macOS/iOS): Built-in (Cmd+F5 to enable)
+- **TalkBack** (Android): Built-in (Settings > Accessibility)
+
+### Automated Testing
+- **Axe DevTools**: Chrome/Firefox extension, catches 30-40% of issues
+- **Lighthouse**: Chrome built-in, accessibility score + specific issues
+- **WAVE**: Browser extension, visual feedback on issues
+
+### Readability
+- **Hemingway Editor**: Checks reading level (aim for grade 8 or lower)
+- **Readable.io**: Analyzes content complexity
+
+### Performance & Loading
+- **Chrome DevTools Network Throttling**: Test slow connections
+- **WebPageTest**: Real-world performance testing
+
+
+## Cross-Platform Accessibility Considerations
+
+### Mobile (iOS/Android)
+
+**Voice Control:**
+- iOS: Voice Control for hands-free operation
+- Android: Voice Access for voice navigation
+
+**Magnification:**
+- iOS: Zoom (triple-tap with three fingers)
+- Android: Magnification gestures (triple-tap)
+
+**Screen Readers:**
+- iOS: VoiceOver (swipe right to next element, double-tap to activate)
+- Android: TalkBack (swipe right to next element, double-tap to activate)
+
+**Touch Targets:**
+- iOS: 44x44pt minimum
+- Android: 48x48dp minimum
+
+**References:**
+- iOS: Accessibility > lyra/ux-designer/mobile-design-patterns
+- Android: Accessibility > lyra/ux-designer/mobile-design-patterns
+
+
+### Web Applications
+
+**Keyboard Shortcuts:**
+- Essential: Tab, Shift+Tab, Enter, Esc, Arrow keys
+- Optional: Cmd/Ctrl+S (save), Cmd/Ctrl+F (find), / (search)
+
+**Focus Management:**
+- Modals: Trap focus, return to trigger on close
+- Single-page apps: Manage focus on route changes
+
+**ARIA Live Regions:**
+- Dynamic updates announced to screen readers
+- Form validation errors announced
+
+**References:**
+- Web accessibility > lyra/ux-designer/web-application-design
+
+
+### Desktop Software
+
+**Keyboard-First:**
+- All functions accessible via keyboard
+- Customizable shortcuts for power users
+
+**Zoom:**
+- System-level zoom support (macOS: Cmd+Plus, Windows: Ctrl+Plus)
+- Application-level zoom for specific content
+
+**High Contrast Mode:**
+- Windows: High Contrast themes
+- macOS: Increase Contrast setting
+
+**References:**
+- Desktop accessibility > lyra/ux-designer/desktop-software-design
+
+
+### Game UI
+
+**Colorblind Modes:**
+- Deuteranopia (red-green)
+- Protanopia (red-green)
+- Tritanopia (blue-yellow)
+
+**Subtitles & Captions:**
+- Dialogue subtitles
+- Sound effect indicators (footsteps, gunfire direction)
+
+**Difficulty Adjustments:**
+- Easier difficulty for cognitive accessibility
+- Assist modes for motor accessibility
+
+**References:**
+- Game UI accessibility > lyra/ux-designer/game-ui-design
+
+
+## Common Accessibility Mistakes & Fixes
+
+### Mistake 1: Low Contrast Text
+**Problem**: Light gray text on white background (#999 on #fff = 2.8:1)
+**Fix**: Use darker gray (#595959 on #fff = 7:1) or black (#000 on #fff = 21:1)
+**Tool**: WebAIM Contrast Checker
+
+### Mistake 2: Color as Sole Indicator
+**Problem**: "Red items are errors" (colorblind users can't see red)
+**Fix**: Red + "X" icon + "Error" text
+**Tool**: Stark colorblind simulation
+
+### Mistake 3: Missing Alt Text
+**Problem**: `<img src="chart.png">` (screen reader says "image")
+**Fix**: `<img src="chart.png" alt="Revenue growth from $1M to $5M over 5 years">`
+**Tool**: Screen reader testing (NVDA/VoiceOver)
+
+### Mistake 4: Divs for Buttons
+**Problem**: `<div onclick="submit()">Submit</div>` (not keyboard accessible)
+**Fix**: `<button onclick="submit()">Submit</button>`
+**Tool**: Keyboard navigation test (unplug mouse)
+
+### Mistake 5: No Focus Indicators
+**Problem**: `*:focus { outline: none; }` (keyboard users lost)
+**Fix**: `button:focus { outline: 2px solid blue; }`
+**Tool**: Keyboard navigation test
+
+### Mistake 6: Tiny Touch Targets
+**Problem**: 30x30px buttons (frustrating on mobile)
+**Fix**: 44x44pt (iOS) or 48x48dp (Android) minimum
+**Tool**: DevTools measure, finger test on device
+
+### Mistake 7: Auto-Playing Video
+**Problem**: Video plays on page load with sound (disorienting)
+**Fix**: Require user interaction to play, or autoplay muted with clear controls
+**Tool**: Load page with sound on
+
+### Mistake 8: Illogical Heading Hierarchy
+**Problem**: `<h1>` → `<h4>` → `<h2>` (screen reader users confused)
+**Fix**: Logical hierarchy: `<h1>` → `<h2>` → `<h3>`
+**Tool**: Screen reader headings list (NVDA: Insert+F7)
+
+### Mistake 9: Placeholder as Label
+**Problem**: `<input placeholder="Email">` (disappears when typing)
+**Fix**: `<label for="email">Email</label><input id="email">`
+**Tool**: Screen reader test (is label announced?)
+
+### Mistake 10: Timeout Without Warning
+**Problem**: Session expires at 5 minutes, work lost
+**Fix**: 20+ minute timeout with 5-minute warning and extend option
+**Tool**: Leave interface idle, observe timeout behavior
+
+
+## Related Skills
+
+**Core UX Skills:**
+- `lyra/ux-designer/visual-design-foundations` - Color contrast, typography readability (Dimension 1, 5)
+- `lyra/ux-designer/interaction-design-patterns` - Keyboard navigation, focus states, touch targets (Dimension 2, 4)
+- `lyra/ux-designer/information-architecture` - Logical structure, clear navigation (Dimension 3, 4)
+- `lyra/ux-designer/ux-fundamentals` - Accessibility principles and terminology
+
+**Platform Skills:**
+- `lyra/ux-designer/mobile-design-patterns` - Touch target sizing, platform accessibility APIs
+- `lyra/ux-designer/web-application-design` - ARIA, semantic HTML, keyboard shortcuts
+- `lyra/ux-designer/desktop-software-design` - Keyboard-first design, system accessibility settings
+- `lyra/ux-designer/game-ui-design` - Colorblind modes, subtitle/caption systems
+
+**Cross-Faction:**
+- `muna/technical-writer/clarity-and-style` - Plain language, 8th grade reading level (Dimension 3)
+
+
+## Further Resources
+
+**WCAG Guidelines:**
+- WCAG 2.1: https://www.w3.org/WAI/WCAG21/quickref/
+- WCAG 2.2 (latest): https://www.w3.org/WAI/WCAG22/quickref/
+
+**Testing Tools:**
+- Axe DevTools: https://www.deque.com/axe/devtools/
+- WAVE: https://wave.webaim.org/
+- Lighthouse: Built into Chrome DevTools
+
+**Screen Readers:**
+- NVDA (Windows): https://www.nvaccess.org/
+- JAWS (Windows): https://www.freedomscientific.com/
+- VoiceOver (macOS): Built-in (Cmd+F5)
+
+**Learning:**
+- WebAIM: https://webaim.org/ (excellent articles and guides)
+- A11y Project: https://www.a11yproject.com/ (community-driven resources)
+- Inclusive Components: https://inclusive-components.design/
+
+**Remember**: Accessibility is not optional. It's a legal requirement in most jurisdictions and an ethical imperative. Design for everyone from the start - retrofitting accessibility is expensive and incomplete.
diff --git a/skills/using-ux-designer/desktop-software-design.md b/skills/using-ux-designer/desktop-software-design.md
new file mode 100644
index 0000000..97559f6
--- /dev/null
+++ b/skills/using-ux-designer/desktop-software-design.md
@@ -0,0 +1,1902 @@
+
+# Desktop Software Design
+
+## Overview
+
+This skill provides **The Desktop Application Workflow Model**, a systematic 4-dimension methodology for designing native desktop applications that serve professional users and power workflows. Use this when designing productivity tools, creative software, development environments, or any application where users expect keyboard-driven efficiency, extensive customization, and multi-tasking capabilities.
+
+**Core Principle**: Desktop applications serve power users who demand speed, precision, and control. Success means enabling keyboard-first workflows, supporting complex multi-window tasks, allowing deep workspace customization, and providing expert paths that accelerate professional workflows without overwhelming beginners.
+
+**Focus**: Keyboard efficiency, multi-window organization, workspace persistence, and progressive disclosure of advanced features.
+
+## When to Use This Skill
+
+**Use this skill when:**
+- Designing native desktop applications (Windows, macOS, Linux)
+- Building Electron-based desktop apps
+- Creating professional tools (IDEs, design software, DAWs, CAD)
+- Implementing keyboard-driven interfaces for power users
+- Designing multi-window or multi-document applications
+- User mentions: "desktop app", "keyboard shortcuts", "menu bar", "workspace", "power user", "panels"
+
+**Don't use this skill for:**
+- Web applications (use `lyra/ux-designer/web-application-design`)
+- Mobile apps (use `lyra/ux-designer/mobile-design-patterns`)
+- Simple utility tools (may not need full desktop complexity)
+- Kiosk or public terminal interfaces (different interaction model)
+
+
+## The Desktop Application Workflow Model
+
+A systematic 4-dimension evaluation model for desktop application design:
+
+1. **WINDOW ORGANIZATION** - Multi-window, panels/palettes, tabbed interfaces, docking
+2. **KEYBOARD EFFICIENCY** - Power user shortcuts, menu mnemonics, keyboard-first navigation
+3. **WORKSPACE CUSTOMIZATION** - Toolbars, panels, themes, layouts, import/export settings
+4. **EXPERT PATHS** - Advanced settings, scripting, batch operations, command palette, extensibility
+
+Evaluate designs by examining each dimension systematically, ensuring window layouts support complex workflows, all actions are keyboard-accessible, users can adapt the interface to their needs, and advanced features are discoverable without overwhelming beginners.
+
+
+## Dimension 1: WINDOW ORGANIZATION
+
+**Purpose:** Support complex multi-window workflows and task management typical of desktop environments
+
+Desktop applications leverage the spacious screen real estate and multi-tasking capabilities unique to desktop computers. Users expect to arrange windows across multiple monitors, dock panels to their preferred locations, and have their workspace configuration persist between sessions.
+
+### Evaluation Questions
+
+1. **Does the window structure match task complexity?**
+   - Simple utilities: Single window, focused purpose
+   - Document editors: Multi-window or tabbed (multiple files)
+   - Complex tools: Panels, palettes, multi-monitor support
+
+2. **Can users arrange windows to fit their workflow?**
+   - Dockable panels (drag to dock/undock/stack)
+   - Resizable splits and dividers
+   - Remember positions between sessions
+
+3. **Are window states preserved between sessions?**
+   - Window position and size
+   - Panel visibility and arrangement
+   - Tab order and open documents
+
+4. **Does the app support multi-monitor setups?**
+   - Windows can move to any monitor
+   - Remember monitor-specific positions
+   - Full-screen on secondary monitor
+
+### Single-Window Applications
+
+**Use for:** Simple utilities, focused tools, single-purpose apps
+
+**Characteristics:**
+- One main window, no child windows
+- Simple task (calculator, timer, color picker)
+- All functionality visible at once
+- Quick launch and close
+- Minimal memory footprint
+
+**Examples:**
+- macOS Calculator: Single window, always on top option
+- Windows Clock: Single window with tabs (Timer, Alarm, Stopwatch)
+- Color pickers: Compact single window
+
+**Best Practices:**
+- Window size appropriate for content (not unnecessarily large)
+- "Always on top" option for reference tools
+- Remember last position and size
+- Keyboard shortcuts for main actions
+
+### Multi-Window Applications
+
+**Use for:** Document editors, file browsers, multi-document interfaces
+
+**Characteristics:**
+- Each document/file in separate window
+- Windows can be arranged independently
+- System-level window management (Cmd+Tab, Alt+Tab)
+- Can view multiple documents side-by-side
+
+**Examples:**
+- Text editors: Each file in separate window
+- Image editors (some): Multiple images in separate windows
+- Finder/Explorer: Multiple folder windows
+
+**Window Management:**
+- Cmd+N / Ctrl+N: New window
+- Cmd+W / Ctrl+W: Close current window
+- Cmd+` / Alt+Tab: Cycle between app windows
+- Window menu: List of open windows
+
+**Multi-Monitor Support:**
+- Windows can span or move to any monitor
+- Full-screen on secondary monitor
+- Remember which monitor window was on
+
+### Panels and Palettes
+
+**Use for:** Professional tools, creative software, IDEs
+
+**Characteristics:**
+- Floating or docked panels
+- Tool palettes, property inspectors, layer panels
+- Can be shown/hidden as needed
+- Stackable in tabs
+- Resizable and rearrangeable
+
+**Examples:**
+- Adobe Photoshop: Layers, Tools, Properties panels
+- VS Code: Explorer, Search, Git, Extensions sidebar panels
+- Blender: Properties, Outliner, Timeline panels
+
+**Panel Types:**
+
+**Tool Palettes:**
+- Icons for tools (brush, select, pen)
+- Single-column or grid layout
+- Keyboard shortcuts shown in tooltips
+- Active tool highlighted
+
+**Property Inspectors:**
+- Shows properties of selected object
+- Context-sensitive (changes based on selection)
+- Form fields for editing values
+- Organized by category (accordion or tabs)
+
+**Contextual Panels:**
+- Color picker, layer manager, timeline
+- Specific to workflow (design, video editing)
+- Can be hidden when not needed
+
+**Docking Behavior:**
+
+**Floating (Undocked):**
+- Free-floating window
+- Can position anywhere, even on second monitor
+- Has own window controls (close, minimize)
+- Always on top of main window
+
+**Docked:**
+- Attached to edge of main window (left, right, top, bottom)
+- Integrated into window layout
+- Resizable via drag divider
+- Collapses to icon strip or hides completely
+
+**Tabbed/Stacked:**
+- Multiple panels in same dock area
+- Tabs at top or bottom
+- Switch between tabs
+- Drag tab to reorder or undock
+
+**Best Practices:**
+- Sensible defaults (common panels visible, others hidden)
+- View menu: List all panels with checkboxes (show/hide)
+- Drag panel header to move/undock
+- Double-click header to dock/undock
+- Close button on each panel
+- Remember panel arrangement between sessions
+
+### Tabbed Interfaces
+
+**Use for:** Many documents in single window, web browsers, terminal emulators
+
+**Characteristics:**
+- Multiple documents in single window
+- Tabs at top (or bottom) for switching
+- Saves screen space vs multiple windows
+- Easier to organize than scattered windows
+
+**Examples:**
+- Web browsers (Chrome, Firefox): Multiple pages in tabs
+- VS Code: Multiple files in tabs
+- Terminal emulators: Multiple shells in tabs
+
+**Tab Management:**
+
+**Creating Tabs:**
+- Cmd+T / Ctrl+T: New tab
+- Cmd+Click link: Open in new tab
+- File > Open in New Tab
+
+**Navigating Tabs:**
+- Cmd+Tab / Ctrl+Tab: Next tab
+- Cmd+Shift+Tab / Ctrl+Shift+Tab: Previous tab
+- Cmd+1-9 / Ctrl+1-9: Jump to tab number
+- Cmd+W / Ctrl+W: Close current tab
+
+**Tab Features:**
+- Close button on each tab (X)
+- Drag tabs to reorder
+- Drag tab out to create new window
+- Drag tab to different window to merge
+- Right-click: Close, Close Others, Close to Right
+- Unsaved indicator (dot or asterisk)
+- Preview on hover (thumbnail or tooltip)
+
+**Tab Bar Overflow:**
+- Scroll buttons when too many tabs
+- Or shrink tabs to minimum width
+- Or show dropdown menu of all tabs
+
+### Window Snapping and Management
+
+**Purpose:** Quick window arrangement for multi-tasking
+
+**Windows (Snap Assist):**
+- Win+Left Arrow: Snap left half
+- Win+Right Arrow: Snap right half
+- Win+Up Arrow: Maximize
+- Win+Down Arrow: Restore/minimize
+- Win+Shift+Arrow: Move to another monitor
+
+**macOS (requires third-party or native in recent versions):**
+- Drag window to edge (hold for green button options)
+- Green button: Full-screen or tile left/right
+- Third-party: Rectangle, Magnet (Win-style snapping)
+
+**Linux (varies by window manager):**
+- GNOME: Super+Left/Right (half screen)
+- KDE: Similar to Windows
+- Tiling window managers: i3, bspwm (keyboard-driven)
+
+**Best Practices:**
+- Support standard OS window management
+- Don't override system shortcuts
+- Allow windows to be resized and moved freely
+- Remember window position between sessions
+
+### Window State Persistence
+
+**Purpose:** Users return to their exact workspace configuration
+
+**What to Remember:**
+- Window position (x, y coordinates)
+- Window size (width, height)
+- Window state (maximized, minimized, full-screen)
+- Monitor (if multi-monitor setup)
+- Panel visibility and arrangement
+- Panel sizes and docked positions
+- Tab order and open documents
+- Scroll positions (nice-to-have)
+
+**Storage:**
+- Application preferences file
+- JSON, XML, or binary format
+- Per-user configuration
+
+**Edge Cases:**
+- Monitor no longer exists: Fall back to primary monitor
+- Resolution changed: Scale or center window
+- Off-screen window: Move to visible area
+
+**Reset Option:**
+- "Reset Window Layout" in View menu
+- Restores default layout
+- Clear and immediate
+
+### System Tray / Menu Bar Integration
+
+**Purpose:** Background apps, status indicators, quick actions
+
+**Windows (System Tray):**
+- Icon in bottom-right taskbar
+- Right-click: Context menu (Settings, Quit)
+- Left-click: Open main window or status
+- Notifications: Toast pop-ups
+
+**macOS (Menu Bar):**
+- Icon in top-right menu bar
+- Click: Dropdown menu or panel
+- Status text (e.g., time tracker: "2:34")
+- Can hide main app window, live in menu bar only
+
+**Linux (System Tray):**
+- Varies by desktop environment
+- GNOME: App indicator
+- KDE: System tray icon
+
+**Use Cases:**
+- Background apps (music players, chat)
+- System monitors (CPU, network, battery)
+- Quick toggles (VPN on/off, do not disturb)
+- Status displays (syncing, connected)
+
+**Best Practices:**
+- Minimize to tray option (don't quit app)
+- "Show main window" menu item
+- "Quit" menu item (clear exit)
+- Tooltip shows app name and status
+- Update icon for status changes (syncing, error)
+
+### Multi-Monitor Support
+
+**Purpose:** Professional users often have 2-3+ monitors
+
+**Features:**
+- Windows can move to any monitor
+- Full-screen on secondary monitor (not just primary)
+- Remember which monitor each window was on
+- Handle monitor disconnect gracefully
+
+**Best Practices:**
+- Don't assume single monitor
+- Test with 2+ monitor setup
+- Handle monitor disconnect (move windows to available monitor)
+- Allow floating panels on secondary monitor
+- Don't lock windows to primary monitor
+
+
+## Dimension 2: KEYBOARD EFFICIENCY
+
+**Purpose:** Enable power users to work without reaching for the mouse
+
+Desktop power users expect to complete tasks entirely via keyboard. Every action should be keyboard-accessible, shortcuts should follow platform conventions, and users should be able to customize shortcuts to match their muscle memory from other tools.
+
+### Evaluation Questions
+
+1. **Are all actions accessible via keyboard?**
+   - Every menu item has keyboard equivalent
+   - Modal dialogs have keyboard shortcuts
+   - Tab navigation through all controls
+
+2. **Do shortcuts follow platform conventions?**
+   - Cmd (macOS) vs Ctrl (Windows/Linux)
+   - Standard shortcuts (Cmd+S, Cmd+C, Cmd+V)
+   - Platform-specific patterns (Cmd+Q on macOS, Alt+F4 on Windows)
+
+3. **Are shortcuts discoverable?**
+   - Shown in menus next to commands
+   - Tooltips include shortcuts
+   - Help menu: "Keyboard Shortcuts" reference
+
+4. **Can users customize shortcuts?**
+   - Preferences: Keyboard Shortcuts panel
+   - Conflict detection (warn if duplicate)
+   - Reset to defaults option
+
+### Essential File Operation Shortcuts
+
+**Universal Shortcuts (Cross-Platform):**
+
+```
+Cmd+N / Ctrl+N: New document/file
+Cmd+O / Ctrl+O: Open file
+Cmd+S / Ctrl+S: Save
+Cmd+Shift+S / Ctrl+Shift+S: Save As
+Cmd+W / Ctrl+W: Close window/tab
+Cmd+Q / Ctrl+Q: Quit application (macOS uses Cmd+Q, Windows uses Alt+F4)
+```
+
+**Platform Differences:**
+- **macOS:** Uses Cmd (⌘) key for shortcuts
+- **Windows/Linux:** Uses Ctrl key for shortcuts
+- **macOS Quit:** Cmd+Q (app-level)
+- **Windows Quit:** Alt+F4 (window-level, closes app if last window)
+
+**Best Practices:**
+- Detect platform and show correct modifier key
+- Use standard shortcuts (don't reinvent)
+- Cmd+W closes window/tab, not app (on macOS)
+- Cmd+Q quits entire app (macOS only)
+- Unsaved changes: Prompt before closing
+
+### Essential Edit Operation Shortcuts
+
+**Standard Edit Shortcuts:**
+
+```
+Cmd+Z / Ctrl+Z: Undo
+Cmd+Shift+Z / Ctrl+Shift+Z: Redo (or Cmd+Y / Ctrl+Y on Windows)
+Cmd+X / Ctrl+X: Cut
+Cmd+C / Ctrl+C: Copy
+Cmd+V / Ctrl+V: Paste
+Cmd+A / Ctrl+A: Select All
+```
+
+**Redo Variations:**
+- **macOS:** Cmd+Shift+Z (standard)
+- **Windows:** Ctrl+Y (more common) or Ctrl+Shift+Z
+- Support both on Windows for user preference
+
+**Advanced Edit Shortcuts:**
+
+```
+Cmd+D / Ctrl+D: Duplicate
+Cmd+G / Ctrl+G: Find Next (after Cmd+F)
+Cmd+Shift+G / Ctrl+Shift+G: Find Previous
+Cmd+E / Ctrl+E: Use selection for find (place selection in search field)
+```
+
+### Essential Navigation Shortcuts
+
+**In-App Navigation:**
+
+```
+Cmd+F / Ctrl+F: Find/Search (open search dialog or focus search field)
+Cmd+Tab / Ctrl+Tab: Switch tabs (forward)
+Cmd+Shift+Tab / Ctrl+Shift+Tab: Switch tabs (backward)
+Cmd+1-9 / Ctrl+1-9: Switch to tab number (1st, 2nd, 3rd...)
+Cmd+` / Alt+`: Cycle between app windows (macOS: Cmd+`, Windows varies)
+```
+
+**System Navigation:**
+- **macOS:** Cmd+Tab (switch apps), Cmd+` (switch windows within app)
+- **Windows:** Alt+Tab (switch windows), Win+Tab (Task View)
+- **Linux:** Alt+Tab (switch windows), varies by WM
+
+**Form Navigation:**
+
+```
+Tab: Next field/control
+Shift+Tab: Previous field/control
+Arrow keys: Navigate lists, trees, menus
+Space: Activate checkbox, toggle, button
+Enter: Submit form, activate default button, open selected item
+ESC: Cancel operation, close dialog
+```
+
+**Best Practices:**
+- Tab order matches visual order (left-to-right, top-to-bottom)
+- Focus indicators visible (2px outline, high contrast)
+- Enter activates default button (often "OK" or "Submit")
+- ESC always cancels or closes current context
+
+### Power User Shortcuts
+
+**Advanced Shortcuts:**
+
+```
+F2: Rename (selected file, item)
+Delete / Backspace: Delete selected item
+Cmd+Delete / Shift+Delete: Permanently delete (bypass trash)
+Cmd+I / Ctrl+I: Get Info / Properties
+Cmd+, / Ctrl+,: Preferences/Settings (macOS standard)
+F1: Help (Windows), Help not standard on macOS
+F11: Full-screen (toggle)
+```
+
+**Selection Shortcuts:**
+
+```
+Cmd+Click / Ctrl+Click: Add to selection (multi-select)
+Shift+Click: Range selection (select all between first and last)
+Cmd+A / Ctrl+A: Select all
+ESC: Deselect all
+```
+
+**Examples:**
+- Click first item, Shift+Click last item: Select range
+- Cmd+Click multiple items: Add each to selection
+- Click empty area or ESC: Deselect
+
+**Window Management:**
+
+```
+Cmd+M / Win+Down: Minimize window
+Cmd+H / Win+H: Hide window (macOS hides app windows)
+Cmd+Option+H: Hide others (macOS)
+F11: Full-screen toggle (varies by app)
+```
+
+### Shortcut Discoverability
+
+**Show Shortcuts in Menus:**
+
+```
+File
+  New              Cmd+N
+  Open...          Cmd+O
+  Save             Cmd+S
+  Save As...       Cmd+Shift+S
+  Close Window     Cmd+W
+```
+
+**Display Format:**
+- Right-aligned in menu
+- Gray color (less prominent than label)
+- Use symbols on macOS: ⌘ Cmd, ⌥ Option, ⇧ Shift, ⌃ Control
+- Use text on Windows: Ctrl+S, Alt+F4
+
+**Tooltips with Shortcuts:**
+
+```
+Button: Save
+Tooltip: "Save document (Cmd+S)"
+```
+
+- Brief delay before showing (300ms)
+- Include shortcut in parentheses
+- Position near cursor
+
+**Keyboard Shortcuts Reference:**
+
+- Help menu: "Keyboard Shortcuts" menu item
+- Opens modal or separate window
+- Organized by category:
+  - File Operations
+  - Edit Operations
+  - Navigation
+  - View
+  - Tools
+  - Window Management
+- Searchable (filter by name or shortcut)
+- Printable version
+
+### Shortcut Customization
+
+**Preferences > Keyboard Shortcuts:**
+
+**Interface:**
+- List of all actions with current shortcut
+- Click to edit (record new shortcut)
+- Search/filter actions
+- Reset to defaults button
+- Import/export shortcuts (share with team)
+
+**Conflict Detection:**
+- Warning if shortcut already used
+- "Replace existing shortcut?" confirmation
+- Show what action will lose the shortcut
+
+**Presets:**
+- Default shortcuts
+- VS Code preset (for code editors)
+- Sublime Text preset
+- Vim/Emacs keybindings (for editors)
+- Allow users to switch preset
+
+**Best Practices:**
+- Don't override system shortcuts (Cmd+Tab, Alt+F4)
+- Warn users if remapping common shortcuts
+- Provide sensible defaults (most users won't customize)
+- Sync shortcuts across devices (if cloud-based app)
+
+### Menu Mnemonics (Windows/Linux)
+
+**Alt Key Access:**
+
+```
+Alt (press and release): Highlight menu bar
+Alt+F: File menu
+Alt+E: Edit menu
+Alt+V: View menu
+Alt+H: Help menu
+```
+
+**In Menu:**
+- Underlined letter indicates mnemonic
+- Alt+F, then S: File > Save
+- Can chain: Alt, F, S (Save)
+
+**Not Standard on macOS:**
+- macOS doesn't use mnemonics
+- Use Cmd+shortcuts instead
+
+**Best Practices (Windows/Linux):**
+- First letter of menu item (F for File)
+- Avoid conflicts (different letter if duplicate)
+- Show underlined letter in menu
+- Support Alt+Letter for quick access
+
+
+## Dimension 3: WORKSPACE CUSTOMIZATION
+
+**Purpose:** Let users adapt the interface to their workflow and preferences
+
+Professional desktop users work in the same application for hours daily. They expect to customize toolbars, arrange panels to suit their workflow, save layout presets, and choose themes that reduce eye strain. Customization should be deep but not overwhelming, with sensible defaults that work out-of-the-box.
+
+### Evaluation Questions
+
+1. **Can users customize toolbars and panels?**
+   - Add/remove tools from toolbar
+   - Rearrange toolbar items (drag to reorder)
+   - Show/hide panels (View menu checkboxes)
+   - Dock panels to preferred locations
+
+2. **Are workspace layouts savable and shareable?**
+   - Save current layout as preset
+   - Load preset (Editing, Debugging, Design)
+   - Export/import layouts (share with team)
+   - Quick-switch layouts (dropdown or menu)
+
+3. **Does the app support themes and appearance?**
+   - Light mode, dark mode, high contrast
+   - Custom themes (user-created or third-party)
+   - Accent colors (brand or user preference)
+   - Font size adjustment (accessibility)
+
+4. **Are defaults sensible for new users?**
+   - Works out-of-box without customization
+   - Common panels visible, niche panels hidden
+   - Standard toolbar (most-used tools)
+   - Easy to reset to defaults
+
+### Customizable Toolbars
+
+**Purpose:** Quick access to frequently-used commands
+
+**Customization:**
+
+**Add/Remove Tools:**
+- Right-click toolbar: "Customize Toolbar"
+- Drag tools from palette to toolbar
+- Drag tools off toolbar to remove
+- Reset to default set
+
+**Reorder Tools:**
+- Drag tools to reorder
+- Visual gap indicator while dragging
+- Snap into position on drop
+
+**Display Options:**
+- Icons only (compact)
+- Icons + labels (clearer)
+- Labels only (rare, accessibility)
+- Small icons vs large icons
+
+**Separators and Spacing:**
+- Drag separator to toolbar (visual divider)
+- Flexible space (pushes items to right)
+- Fixed space (small gap)
+
+**Examples:**
+- **macOS:** Right-click toolbar > "Customize Toolbar" (shows palette sheet)
+- **Windows:** Right-click toolbar > "Customize" (dialog or inline editing)
+- **VS Code:** View > Appearance > Customize Layout
+
+**Best Practices:**
+- Default toolbar has most common actions
+- "Customize Toolbar" in View menu
+- Visual feedback while dragging (semi-transparent item)
+- Preview before committing change
+- Undo customization (or reset to defaults)
+
+### Dockable Panels
+
+**Purpose:** Arrange information and tools to match workflow
+
+**Panel Manipulation:**
+
+**Show/Hide:**
+- View menu: List of panels with checkboxes
+- Keyboard shortcut to toggle (e.g., Cmd+1 for panel 1)
+- Close button on panel header (X)
+
+**Dock/Undock:**
+- Drag panel header to move
+- Drag to edge to dock (visual preview)
+- Drag away from edge to undock (floating)
+- Double-click header to toggle dock/undock
+
+**Resize:**
+- Drag divider between panels
+- Double-click divider to collapse/expand
+- Minimum and maximum sizes enforced
+
+**Stack in Tabs:**
+- Drag panel onto another panel (tabbed group)
+- Tabs at top or bottom of panel stack
+- Click tab to switch
+- Drag tab to reorder or separate
+
+**Examples:**
+- **Adobe Photoshop:** Drag panels, dock to edges, stack in tabs, collapse to icons
+- **VS Code:** Drag sidebar panels, resize, move to secondary sidebar
+- **Blender:** Complex docking system, divide areas, merge areas
+
+**Visual Feedback:**
+- Blue outline where panel will dock
+- Semi-transparent panel while dragging
+- Snap to docking zones
+
+**Best Practices:**
+- Clear docking zones (edges, corners)
+- Visual preview before dropping
+- Remember panel arrangement between sessions
+- Reset to default layout option
+
+### Workspace Layouts
+
+**Purpose:** Save and switch between layout presets for different tasks
+
+**Concept:**
+- Layout = panel arrangement, sizes, visibility
+- Presets for common workflows
+- Quick-switch for context changes
+
+**Built-in Presets:**
+- **Default:** Balanced layout for general use
+- **Editing:** Large editor area, minimal panels
+- **Debugging:** Debugger panels prominent, console, watch variables
+- **Design:** Canvas large, tool panels on sides
+
+**Custom Layouts:**
+- Arrange panels as desired
+- View > Save Layout As... (name it)
+- Appears in View > Layouts menu
+- Switch anytime
+
+**Layout Switcher:**
+- Dropdown in toolbar (quick access)
+- Or View menu > Layouts submenu
+- Keyboard shortcut (e.g., Cmd+Shift+1 for layout 1)
+
+**Examples:**
+- **Adobe Photoshop:** Window > Workspace > Essentials, Photography, Painting
+- **VS Code:** View > Command Palette > "View: Load Workspace"
+- **Eclipse IDE:** Window > Perspective > Open Perspective (Java, Debug, Git)
+
+**Best Practices:**
+- Provide 2-4 built-in presets
+- Easy to create custom layouts
+- Delete custom layouts (manage layouts)
+- Export/import layouts (share with team, sync across devices)
+
+### Themes and Appearance
+
+**Purpose:** Reduce eye strain, match user preference, accessibility
+
+**Theme Types:**
+
+**Light Mode:**
+- White or light gray backgrounds
+- Dark text
+- Standard for most users
+- Good for bright environments
+
+**Dark Mode:**
+- Dark backgrounds (black, charcoal, navy)
+- Light text (white, light gray)
+- Reduces eye strain in dim environments
+- Popular for developers, designers
+
+**High Contrast:**
+- Maximum contrast (black and white)
+- Accessibility feature
+- For users with low vision
+- System-level setting (OS theme)
+
+**Custom Themes:**
+- User-created or third-party
+- JSON or CSS-based theme files
+- Color palette (background, text, accent, warning, error)
+- Syntax highlighting (for code editors)
+
+**Accent Colors:**
+- Brand color or user preference
+- Used for highlights, active states, links
+- Preferences > Appearance > Accent Color
+
+**Examples:**
+- **macOS System:** Light, Dark, Auto (follows system)
+- **VS Code:** Many themes (Dracula, Monokai, Solarized)
+- **Slack:** Light, Dark, Sync with OS
+- **Adobe Apps:** Dark theme standard for creative work
+
+**Implementing Themes:**
+
+**CSS Variables (Web-based or Electron):**
+```css
+:root {
+  --background: #ffffff;
+  --text: #000000;
+  --accent: #0066cc;
+}
+
+[data-theme="dark"] {
+  --background: #1e1e1e;
+  --text: #d4d4d4;
+  --accent: #0099ff;
+}
+```
+
+**Native Apps:**
+- Platform theme APIs (Windows: Light/Dark, macOS: NSAppearance)
+- Custom theme engine (load colors from file)
+
+**Respect System Theme:**
+- Preferences > Appearance > "Sync with system"
+- Automatically switch light/dark based on OS setting
+- macOS: Auto (light during day, dark at night)
+
+**Best Practices:**
+- Offer light, dark, and system sync
+- Don't force dark mode (user preference)
+- Test all themes for readability
+- Support high contrast mode (accessibility)
+- Syntax themes for code editors (many options)
+
+### Preferences and Settings
+
+**Purpose:** Central location for all customization options
+
+**Organization:**
+
+**Tabbed Categories:**
+- General, Appearance, Editor, Keyboard, Extensions
+- Each tab is focused category
+- Searchable across all settings
+
+**Search:**
+- Search field at top
+- Filters settings by name or keyword
+- Highlights matches
+
+**Settings Format:**
+
+**Checkboxes:**
+- Enable/disable features
+- "Show line numbers", "Auto-save", "Spell check"
+
+**Dropdowns:**
+- Choose from options
+- "Theme: Light / Dark / Auto"
+- "Font: System / Monospace / Custom"
+
+**Sliders/Numbers:**
+- Numeric values
+- "Font size: 12" (slider or input)
+- "Auto-save interval: 30 seconds"
+
+**Text Fields:**
+- Custom values
+- "Default save location: /Users/name/Documents"
+
+**Color Pickers:**
+- Custom colors
+- "Accent color: [blue]"
+
+**Best Practices:**
+- Searchable settings (filter by keyword)
+- Reset to defaults (per-category or global)
+- Import/export settings (JSON file)
+- Sync settings across devices (cloud-based)
+- Clear labels and descriptions
+- Group related settings together
+- Dangerous settings in "Advanced" tab
+
+
+## Dimension 4: EXPERT PATHS
+
+**Purpose:** Provide advanced features and automation for power users without overwhelming beginners
+
+Professional desktop users demand advanced capabilities: scripting for automation, batch operations for efficiency, extensibility via plugins, and direct access to all commands. These features should be discoverable (not hidden) but progressively disclosed so beginners aren't overwhelmed.
+
+### Evaluation Questions
+
+1. **Are advanced features discoverable but not intrusive?**
+   - Command palette for quick access
+   - Advanced preferences in separate tab (not mixed with basics)
+   - Help documentation for power features
+   - Onboarding hints for expert paths
+
+2. **Can repetitive tasks be automated?**
+   - Macro recording (record actions, replay)
+   - Scripting API (Python, JavaScript, Lua)
+   - Batch operations (process multiple files)
+   - Keyboard maestro integration (macOS)
+
+3. **Is there a command palette for quick access?**
+   - Cmd+Shift+P / Ctrl+Shift+P
+   - Fuzzy search all commands
+   - Shows keyboard shortcuts
+   - Includes recent commands
+
+4. **Does the app support extensibility?**
+   - Plugin/extension system
+   - Marketplace or directory
+   - API documentation
+   - Community contributions
+
+### Command Palette
+
+**Purpose:** Fuzzy search for all actions, keyboard-first power user tool
+
+**Trigger:**
+- Cmd+Shift+P / Ctrl+Shift+P (VS Code style)
+- Or Cmd+K / Ctrl+K (some apps)
+- Appears as modal overlay
+
+**Features:**
+
+**Fuzzy Search:**
+- Type partial command: "sv" matches "Save"
+- "opfl" matches "Open File"
+- Results ranked by match quality
+
+**Categories:**
+- All commands (File, Edit, View, Tools)
+- Recently used (top of list)
+- Frequently used
+- Pages/Navigation
+- Settings
+
+**Keyboard Navigation:**
+- Arrow Up/Down: Select result
+- Enter: Execute selected command
+- ESC: Close palette
+- Type to filter results
+
+**Display Format:**
+```
+Create New File                    Cmd+N
+Open File...                       Cmd+O
+Save                               Cmd+S
+Save As...                         Cmd+Shift+S
+-----------------------------------
+Toggle Sidebar                     Cmd+B
+Toggle Terminal                    Cmd+`
+Command Palette                    Cmd+Shift+P
+```
+
+**Examples:**
+- **VS Code:** Cmd+Shift+P (all commands, extensions, settings)
+- **Sublime Text:** Cmd+Shift+P
+- **Spotlight (macOS):** Cmd+Space (system-wide search, not just app)
+- **Alfred (macOS):** Similar to Spotlight, extensible
+
+**Best Practices:**
+- Fast response (no network delay)
+- Include keyboard shortcuts in results
+- Show icons for visual scanning
+- Recently used at top (learn user patterns)
+- Persistent across sessions (remember recent)
+
+### Advanced Preferences
+
+**Purpose:** Expert settings without overwhelming beginners
+
+**Organization:**
+
+**Basic vs Advanced Tabs:**
+- Preferences > General (basic settings)
+- Preferences > Advanced (expert settings)
+- Clear separation, progressive disclosure
+
+**Advanced Settings Examples:**
+- Performance tuning (cache size, thread count)
+- Experimental features (beta functionality)
+- Developer options (debug mode, console)
+- Network settings (proxy, timeout)
+- File associations (default app for file types)
+
+**Progressive Disclosure:**
+- Simple mode by default
+- "Show Advanced" button expands expert options
+- Collapsible sections (accordion)
+- Warning badges for dangerous settings
+
+**Search in Preferences:**
+- Search field filters all settings (basic + advanced)
+- Finds advanced settings even if hidden
+- Ensures discoverability
+
+**Examples:**
+- **VS Code:** Settings UI (basic) or settings.json (advanced)
+- **Firefox:** Preferences (basic) or about:config (advanced, warning message)
+- **Adobe Lightroom:** Preferences (tabs for each category, advanced options within)
+
+**Best Practices:**
+- Don't hide essential settings in "Advanced"
+- Clear labels and descriptions for expert settings
+- Warning for dangerous changes (can break app)
+- Reset to defaults option
+- Tooltips explain technical terms
+
+### Scripting and Automation
+
+**Purpose:** Automate repetitive tasks, extend functionality
+
+**Macro Recording:**
+
+**Record Actions:**
+- Edit > Start Recording Macro
+- Perform actions (clicks, typing, shortcuts)
+- Edit > Stop Recording
+- Save macro with name
+
+**Playback:**
+- Edit > Playback Macro
+- Or assign keyboard shortcut to macro
+- Executes recorded actions
+
+**Examples:**
+- **Microsoft Office:** Record Macro (VBA)
+- **Photoshop:** Actions panel (record and replay steps)
+- **Excel:** Macro recorder (VBA scripts)
+
+**Scripting API:**
+
+**Embed Scripting Language:**
+- Python (common for creative tools)
+- JavaScript (Electron apps)
+- Lua (games, lightweight tools)
+- AppleScript (macOS automation)
+
+**API Access:**
+- Document manipulation
+- UI automation
+- File I/O
+- Network requests
+
+**Script Editor:**
+- Built-in or external
+- Syntax highlighting
+- Debugging tools
+- Script library (saved scripts)
+
+**Examples:**
+- **Blender:** Python API (access all objects, run headless)
+- **Sublime Text:** Python plugins
+- **AutoCAD:** LISP scripting
+- **Affinity Designer:** JavaScript macros
+
+**Use Cases:**
+- Batch processing (resize 100 images)
+- Custom tools (specialized workflow)
+- Integration (connect to external APIs)
+- Data generation (create test data)
+
+**Best Practices:**
+- Clear API documentation
+- Example scripts (cookbook)
+- Script marketplace (share scripts)
+- Sandboxing (limit dangerous operations)
+- Error handling (clear error messages)
+
+### Batch Operations
+
+**Purpose:** Process multiple files/items at once
+
+**Common Batch Operations:**
+
+**Batch File Processing:**
+- Resize images (all images in folder)
+- Convert formats (PSD to PNG)
+- Rename files (add prefix/suffix)
+- Apply filters (sharpen, color correct)
+
+**Batch Actions:**
+- Delete multiple items (select all, delete)
+- Move/copy files (drag multiple)
+- Tag/categorize (apply tag to selection)
+- Export (export selected items)
+
+**UI Patterns:**
+
+**Select Multiple:**
+- Cmd+Click / Ctrl+Click: Add to selection
+- Shift+Click: Range selection
+- Cmd+A / Ctrl+A: Select all
+
+**Batch Action Menu:**
+- Right-click selection: Context menu
+- "Apply to 12 selected items"
+- Actions: Delete, Move, Export, Convert
+
+**Progress Indicator:**
+- Progress bar: "Processing 45 of 127 files"
+- Cancel button (stop batch)
+- Errors: "3 files failed, view log"
+
+**Examples:**
+- **Lightroom:** Export multiple photos, apply preset to batch
+- **Photoshop:** Batch > Automate (run action on folder)
+- **Finder/Explorer:** Multi-select files, rename all (pattern)
+
+**Best Practices:**
+- Clear progress feedback
+- Cancelable (don't lock UI)
+- Error handling (skip failed items, continue)
+- Undo support (or backup before batch)
+- Summary report (123 succeeded, 3 failed)
+
+### Recently Used
+
+**Purpose:** Quick access to recent files, commands, and actions
+
+**Recent Files:**
+- File > Open Recent (list of recent files)
+- 10-20 items (configurable)
+- Keyboard shortcut to reopen last (Cmd+Shift+T)
+
+**Recent Commands:**
+- Command palette: Recent at top
+- Edit > Repeat Last Action (Cmd+Shift+Z or F4)
+
+**Recent Folders:**
+- File > Open Recent Folder
+- Or Open dialog remembers last location
+
+**Jump Lists (Windows):**
+- Right-click taskbar icon: Recent files
+- Quick access without opening app
+
+**macOS Dock Menu:**
+- Right-click dock icon: Recent files, windows
+
+**Best Practices:**
+- Persistent across sessions
+- Clear recents option (privacy)
+- Pin favorites (always show)
+- Keyboard access (arrow keys navigate)
+
+### Extensibility and Plugins
+
+**Purpose:** Community contributions, user customization
+
+**Plugin Architecture:**
+
+**Plugin Types:**
+- UI extensions (new panels, tools)
+- File format support (import/export)
+- Scripting integrations (connect to services)
+- Themes (appearance customization)
+
+**Plugin Manager:**
+- Browse plugins (marketplace)
+- Install, update, uninstall
+- Enable/disable plugins
+- Configure plugin settings
+
+**API for Developers:**
+- Clear documentation
+- Examples and templates
+- Debugging tools
+- Submission guidelines (marketplace)
+
+**Examples:**
+- **VS Code:** Extensions marketplace (thousands of extensions)
+- **Figma:** Plugins (community-created tools)
+- **Blender:** Add-ons (Python-based extensions)
+- **Sublime Text:** Package Control (plugin manager)
+
+**Security:**
+- Sandboxing (limit plugin permissions)
+- Code review (for marketplace submissions)
+- User warnings (unofficial plugins)
+
+**Best Practices:**
+- Easy to install (one-click)
+- Auto-update plugins (optional)
+- Clear permissions (what plugin can access)
+- Disable plugins if causing issues
+- Official + community plugins (both valuable)
+
+
+## Desktop-Specific Design Patterns
+
+### Menu Bar
+
+**Purpose:** Standard navigation and command access in desktop applications
+
+**Standard Menu Structure:**
+
+**File Menu:**
+```
+File
+  New                    Cmd+N
+  Open...                Cmd+O
+  Open Recent           ▶
+  ---------------------
+  Close                  Cmd+W
+  Close All              Cmd+Option+W
+  Save                   Cmd+S
+  Save As...             Cmd+Shift+S
+  ---------------------
+  Page Setup...
+  Print...               Cmd+P
+  ---------------------
+  Quit                   Cmd+Q (macOS) or Exit (Windows)
+```
+
+**Edit Menu:**
+```
+Edit
+  Undo                   Cmd+Z
+  Redo                   Cmd+Shift+Z
+  ---------------------
+  Cut                    Cmd+X
+  Copy                   Cmd+C
+  Paste                  Cmd+V
+  Delete                 Delete
+  Select All             Cmd+A
+  ---------------------
+  Find                   Cmd+F
+  Replace                Cmd+Option+F
+  ---------------------
+  Preferences            Cmd+, (macOS) or Options (Windows)
+```
+
+**View Menu:**
+```
+View
+  Sidebar                Cmd+B
+  Toolbar                Cmd+Option+T
+  Status Bar
+  ---------------------
+  Zoom In                Cmd++
+  Zoom Out               Cmd+-
+  Actual Size            Cmd+0
+  ---------------------
+  Full Screen            Cmd+Control+F
+  ---------------------
+  Customize Layout...
+```
+
+**Help Menu:**
+```
+Help
+  [App Name] Help
+  Keyboard Shortcuts     Cmd+/
+  Release Notes
+  ---------------------
+  Report Issue...
+  ---------------------
+  About [App Name]       (macOS: App menu > About)
+```
+
+**Platform Differences:**
+
+**macOS:**
+- Menu bar at top of screen (global)
+- Application menu (first menu): About, Preferences, Hide, Quit
+- Menu bar always visible (even without windows)
+- System menus (Window, Help) added automatically
+
+**Windows/Linux:**
+- Menu bar in window (local to window)
+- File menu includes Exit (Quit)
+- Edit menu includes Options/Preferences
+- Alt key accesses menu (mnemonics)
+
+**Best Practices:**
+- Follow platform conventions
+- Group related items (dividers between groups)
+- Show keyboard shortcuts (right-aligned)
+- Disable unavailable items (grayed out)
+- Hierarchical menus (submenu arrow: ▶)
+
+### Context Menus (Right-Click)
+
+**Purpose:** Quick access to contextual actions
+
+**Trigger:**
+- Right-click (mouse)
+- Control+Click (macOS, one-button mouse)
+- Shift+F10 or Menu key (keyboard)
+- Long-press (touchscreen)
+
+**Content:**
+- Context-sensitive (different per item type)
+- 5-10 items maximum
+- Most common actions
+- Dividers separate groups
+- Dangerous actions at bottom (red text)
+
+**Examples:**
+
+**File Context Menu:**
+```
+Open
+Open With              ▶
+-----------------------
+Get Info               Cmd+I
+Rename                 F2
+Duplicate              Cmd+D
+-----------------------
+Move to Trash          Cmd+Delete
+```
+
+**Text Selection Context Menu:**
+```
+Cut                    Cmd+X
+Copy                   Cmd+C
+Paste                  Cmd+V
+-----------------------
+Look Up "[word]"
+Search Google for "[selection]"
+```
+
+**Best Practices:**
+- Top 5-7 actions (don't overwhelm)
+- Match selected object (file, text, canvas object)
+- Include keyboard shortcuts (discoverability)
+- Close on click outside or ESC
+- Keyboard navigation (arrow keys)
+
+### Dialogs
+
+**Purpose:** Modal and modeless windows for focused tasks
+
+**Modal Dialogs:**
+
+**Characteristics:**
+- Block interaction with main window
+- Must be dismissed before continuing
+- Use for critical decisions (save before quit)
+- Or complex forms (preferences)
+
+**Examples:**
+- Save confirmation: "Save changes before closing?"
+- Preferences/Settings dialog
+- Print dialog
+- Error alerts
+
+**Button Placement:**
+- **macOS:** Right-aligned (Cancel left, OK/primary right)
+- **Windows:** Right-aligned (OK left, Cancel right) — note: varies
+- Primary action visually prominent (filled button)
+- Cancel as secondary (outline button) or link
+
+**Keyboard:**
+- Enter: Primary action (OK, Save)
+- ESC: Cancel or Close
+- Tab: Navigate fields
+
+**Modeless Dialogs:**
+
+**Characteristics:**
+- Float on top, don't block main window
+- Can interact with main window while dialog open
+- Use for reference or tools (Find & Replace, Color Picker)
+
+**Examples:**
+- Find & Replace (search while editing)
+- Color picker (select colors while designing)
+- Inspector panel (view properties)
+
+**Best Practices:**
+- Use modal for critical decisions only
+- Modeless for tools and reference
+- Clear primary action (visual weight)
+- Keyboard shortcuts (Enter, ESC)
+- Don't nest modals (confusing)
+
+### Wizards (Multi-Step Dialogs)
+
+**Purpose:** Guide users through complex setup or process
+
+**Structure:**
+- Step 1: Welcome / Choose option
+- Step 2: Configure settings
+- Step 3: Review choices
+- Step 4: Confirmation / Complete
+
+**Navigation:**
+- Buttons: "Back", "Next", "Cancel"
+- Last step: "Finish" or "Done"
+- Progress indicator: "Step 2 of 4"
+- Can skip optional steps
+
+**Examples:**
+- First-launch setup (choose preferences)
+- Export wizard (format, quality, location)
+- Import wizard (select source, map fields, import)
+- Project setup (name, location, template)
+
+**Best Practices:**
+- Clear progress (step 2 of 4)
+- Back button works (don't lose data)
+- Skip optional steps (offer defaults)
+- Review before final step (confirmation)
+- Cancelable (ESC or Cancel button)
+
+### File System Integration
+
+**Purpose:** Native file operations and OS integration
+
+**Open/Save Dialogs:**
+
+**Native Dialogs:**
+- Use OS-native file picker (NSOpenPanel on macOS, IFileOpenDialog on Windows)
+- Users familiar with platform dialog
+- Consistent with other apps
+- Access to system features (favorites, recent, network)
+
+**Open Dialog:**
+- Choose file(s) to open
+- File type filter (dropdown: "Images", "All Files")
+- Multi-select (Cmd+Click / Ctrl+Click)
+- Preview pane (if supported by OS)
+
+**Save Dialog:**
+- Choose location and filename
+- File format dropdown (if multiple formats)
+- Options expander (quality, settings)
+- Overwrite confirmation (if file exists)
+
+**Best Practices:**
+- Remember last location (per dialog or global)
+- Default filename (not "Untitled")
+- Clear file format options
+- Validate filename (illegal characters)
+
+**Drag-and-Drop:**
+
+**Accept Files:**
+- Drag file from Finder/Explorer onto app window
+- Visual feedback (border highlight, "Drop to open")
+- Open file or import content
+
+**Export via Drag:**
+- Drag item from app to Finder/Explorer
+- Creates file at drop location
+- Or copy data to compatible app
+
+**Best Practices:**
+- Visual feedback (highlight drop zone)
+- Support multiple files (batch open)
+- Validate file types (reject incompatible)
+- Handle errors gracefully (unsupported format)
+
+**Quick Look / Preview (macOS):**
+- Select file, press Space: Preview
+- Support in your file format (implement Quick Look plugin)
+- Thumbnail generation
+
+**File Associations:**
+- Register app as handler for file types (.psd, .sketch)
+- Double-click file: Opens in your app
+- Right-click file > Open With: Your app listed
+- Set as default handler
+
+**Best Practices:**
+- Register relevant file extensions
+- Provide app icon for file type
+- Don't claim generic types (.txt) as default (without user choice)
+
+### Status Bar
+
+**Purpose:** Display status information and contextual hints
+
+**Location:**
+- Bottom of window (standard)
+- Full-width bar
+
+**Content:**
+
+**Left Side:**
+- Status text (e.g., "Ready", "Saving...", "23 items selected")
+- Contextual hints ("Click to select")
+
+**Right Side:**
+- Indicators (e.g., "Ln 45, Col 12" in text editor)
+- Progress bar (if operation in progress)
+- Status icons (connection, sync, notifications)
+
+**Examples:**
+- **Text Editor:** Line/column number, character encoding, language mode
+- **Web Browser:** URL on hover, page load progress
+- **File Manager:** "12 items, 3 selected, 1.2 GB"
+
+**Best Practices:**
+- Always visible (not floating)
+- Update in real-time (status changes)
+- Clear, concise text
+- Click to show details (e.g., click errors: show error list)
+
+
+## Platform-Specific Considerations
+
+### macOS
+
+**Design Language:**
+- San Francisco font (system default)
+- Translucent sidebars (vibrancy effect)
+- Full-height sidebars (no gap at top)
+- Traffic light buttons (close, minimize, maximize) in title bar
+
+**Menu Bar:**
+- Global menu bar (top of screen)
+- Application menu (app name): About, Preferences, Hide, Quit
+- Window menu: List of open windows
+- Help menu: Searchable help
+
+**Keyboard Shortcuts:**
+- Cmd (⌘) key (not Ctrl)
+- Cmd+Q: Quit app
+- Cmd+H: Hide app
+- Cmd+W: Close window
+- Cmd+`: Cycle app windows
+
+**Window Management:**
+- Green button: Full-screen or tile (hover for options)
+- Yellow button: Minimize to Dock
+- Red button: Close window (doesn't quit app)
+
+**Integration:**
+- Spotlight search (index app content)
+- Quick Look (preview files with Space)
+- Share menu (system share sheet)
+- Services menu (inter-app actions)
+
+**Best Practices:**
+- Use NSToolbar for native toolbar
+- Vibrancy for sidebars (if appropriate)
+- Support full-screen mode
+- App continues running with no windows (dock icon)
+
+### Windows
+
+**Design Language:**
+- Segoe UI font (system default)
+- Fluent Design (transparency, depth, motion)
+- Ribbon UI (Office-style) or classic menu bar
+- Window controls (minimize, maximize, close) in title bar
+
+**Menu Bar:**
+- In window (local to window)
+- File menu includes "Exit"
+- Edit menu includes "Options" (preferences)
+- Mnemonics (underlined letters, Alt+F for File)
+
+**Keyboard Shortcuts:**
+- Ctrl key (not Cmd)
+- Alt+F4: Close window (quit if last window)
+- Ctrl+W: Close tab/document
+- Win+Arrow: Snap window (left, right, up, down)
+
+**Window Management:**
+- Maximize button: Full-screen or snap options
+- Minimize button: To taskbar
+- Close button: Close window (quit app if last window)
+
+**Integration:**
+- Taskbar integration (pinned apps, jump lists)
+- Notifications (Action Center)
+- Share target (Windows 10+)
+- File Explorer integration (context menu)
+
+**Best Practices:**
+- Support snap assist (Win+Arrow)
+- Jump lists for recent files (taskbar right-click)
+- Native file dialogs (IFileOpenDialog)
+- Respect system theme (light/dark mode)
+
+### Linux
+
+**Design Language:**
+- Varies by desktop environment (GNOME, KDE, XFCE)
+- GTK or Qt toolkit
+- Follows desktop environment theme
+
+**GNOME (GTK):**
+- Header bar (title bar + toolbar combined)
+- Hamburger menu or app menu
+- Clean, minimal design
+
+**KDE (Qt):**
+- Traditional menu bar
+- More customization options
+- Similar to Windows layout
+
+**Keyboard Shortcuts:**
+- Ctrl key (like Windows)
+- Alt+F4: Close window (common)
+- Ctrl+Q: Quit app (some apps)
+
+**Window Management:**
+- Varies by window manager
+- GNOME: Super+Left/Right (snap half)
+- KDE: Similar to Windows
+- Tiling WMs: i3, bspwm (keyboard-driven)
+
+**Integration:**
+- .desktop file (app launcher)
+- File manager integration (Nautilus, Dolphin)
+- System tray (varies by DE)
+
+**Best Practices:**
+- Use GTK or Qt (native look)
+- Respect desktop theme
+- Standard .desktop file (for app menu)
+- Follow freedesktop.org standards
+
+### Cross-Platform (Electron, Qt, etc.)
+
+**Unified Design:**
+- Custom UI (not native controls)
+- Consistent across platforms
+- Brand identity maintained
+
+**Platform Adaptations:**
+- Detect platform, adjust shortcuts (Cmd vs Ctrl)
+- Menu bar position (global on macOS, local on Windows/Linux)
+- Native file dialogs (use platform dialogs)
+- Window controls (platform-specific styling)
+
+**Examples:**
+- **VS Code (Electron):** Unified UI, platform-specific shortcuts
+- **Figma (Web/Electron):** Custom UI, platform shortcuts
+- **Spotify (Electron):** Custom design, cross-platform
+
+**Best Practices:**
+- Consistent design language
+- Platform-specific keyboard shortcuts
+- Native file dialogs (better UX)
+- Support platform gestures (macOS trackpad)
+- Respect system themes (light/dark mode)
+
+
+## Anti-Patterns
+
+### Priority 0 (Critical - Never Do)
+
+**1. No keyboard access to core features:**
+- **Problem:** Mouse-only interface, excludes keyboard users
+- **Impact:** Accessibility fail, WCAG violation, frustrates power users
+- **Fix:** Tab navigation, keyboard shortcuts for all actions, focus indicators
+
+**2. Non-standard shortcuts (Ctrl+S not saving):**
+- **Problem:** Breaks user expectations, muscle memory fails
+- **Impact:** Errors, frustration, slow workflow
+- **Fix:** Use platform conventions (Cmd+S / Ctrl+S for save)
+
+**3. Lost work (no autosave, no crash recovery):**
+- **Problem:** Users lose hours of work on crash or accidental close
+- **Impact:** Extreme frustration, negative reviews, lost trust
+- **Fix:** Autosave drafts every 2-5 minutes, crash recovery, unsaved changes warning
+
+**4. Unresponsive UI (blocking on long operations):**
+- **Problem:** Entire app freezes during save, export, or processing
+- **Impact:** Feels broken, users force-quit, lose work
+- **Fix:** Background threads, progress indicator, cancelable operations
+
+### Priority 1 (High - Avoid)
+
+**5. Modal dialogs for every action:**
+- **Problem:** Constant interruptions, slow workflow
+- **Impact:** Annoying, inefficient, breaks concentration
+- **Fix:** Inline editing, modeless panels, fewer confirmations
+
+**6. No workspace persistence (lose layout on restart):**
+- **Problem:** Users reconfigure panels and windows every session
+- **Impact:** Time waste, frustration, inconsistent experience
+- **Fix:** Save window positions, panel layout, open tabs between sessions
+
+**7. Hidden essential features (no discoverability):**
+- **Problem:** Power features exist but users never find them
+- **Impact:** Underutilized features, users leave for competitors
+- **Fix:** Command palette, tooltips, onboarding hints, help documentation
+
+**8. Inconsistent UI (different patterns in different areas):**
+- **Problem:** Save button top-right in one dialog, bottom-left in another
+- **Impact:** Cognitive load, users must relearn each screen
+- **Fix:** Design system, consistent button placement, standard patterns
+
+### Priority 2 (Medium - Be Cautious)
+
+**9. Too many customization options (overwhelming):**
+- **Problem:** 500 settings in preferences, users lost
+- **Impact:** Decision paralysis, never customize, confused
+- **Fix:** Sensible defaults, progressive disclosure, basic vs advanced tabs
+
+**10. Non-native file dialogs (platform inconsistency):**
+- **Problem:** Custom file picker doesn't match OS
+- **Impact:** Unfamiliar, lacks OS features (favorites, recent), confusing
+- **Fix:** Use platform-native dialogs (NSOpenPanel, IFileOpenDialog)
+
+**11. Reinventing standard controls:**
+- **Problem:** Custom buttons, checkboxes, dropdowns that look/behave differently
+- **Impact:** Users must learn new patterns, accessibility issues
+- **Fix:** Use platform controls or follow established design systems
+
+**12. Over-reliance on mouse (not keyboard-accessible):**
+- **Problem:** Hover-only actions, drag-only reordering, no keyboard alternative
+- **Impact:** Excludes keyboard users, slow for power users
+- **Fix:** Keyboard shortcuts for all actions, Tab navigation, arrow keys
+
+
+## Practical Application
+
+### Workflow 1: Document Editor Design
+
+**Step 1: Define Document Model**
+- Single-document (one window per file) or multi-tab?
+- Decision: Multi-tab (many documents, single window)
+- Rationale: Easier to organize than scattered windows
+
+**Step 2: Design Multi-Tab Interface**
+- Tabs at top (standard)
+- Cmd+T: New tab, Cmd+W: Close tab
+- Cmd+1-9: Jump to tab number
+- Drag tabs to reorder
+- Unsaved indicator (dot on tab)
+
+**Step 3: Implement Keyboard Shortcuts**
+- File: Cmd+N, Cmd+O, Cmd+S, Cmd+Shift+S
+- Edit: Cmd+Z, Cmd+Shift+Z, Cmd+X/C/V
+- Find: Cmd+F
+- Show in tooltip and menu
+
+**Step 4: Add Autosave**
+- Save draft every 2 minutes
+- Status indicator: "All changes saved"
+- Crash recovery: Restore last autosave on relaunch
+- Unsaved changes warning on quit
+
+**Step 5: Export and Print**
+- File > Export: PDF, DOCX, HTML
+- File > Print: Native print dialog
+- File > Page Setup: Margins, orientation
+
+**Step 6: Preferences**
+- Cmd+,: Open preferences
+- Tabs: General, Appearance, Editor
+- Settings: Font, theme, autosave interval
+- Reset to defaults button
+
+### Workflow 2: Design Tool (Creative Professional)
+
+**Step 1: Canvas + Panels Layout**
+- Large canvas area (center)
+- Tool palette (left sidebar)
+- Properties inspector (right sidebar)
+- Layers panel (right, tabbed with properties)
+
+**Step 2: Tool Palettes**
+- Tools: Select, Pen, Brush, Text, Shape
+- Single-click to select tool
+- Keyboard shortcuts (V, P, B, T, R)
+- Active tool highlighted
+
+**Step 3: Dockable Panels**
+- Drag panel header to move
+- Dock to left/right/bottom
+- Stack panels in tabs
+- View menu: Show/hide panels
+- Remember arrangement between sessions
+
+**Step 4: Workspace Layouts**
+- Built-in: Default, Painting, Photo Editing
+- Custom: User saves current layout
+- View > Workspace > [name]
+- Quick-switch dropdown in toolbar
+
+**Step 5: Plugin Support**
+- Plugin menu: List installed plugins
+- Plugin manager: Browse, install, disable
+- API: Canvas access, tool creation, file export
+- Community marketplace
+
+**Step 6: Export and Batch Processing**
+- Export: PNG, JPG, SVG, PDF
+- Batch export: All artboards or selected
+- Resize on export (1x, 2x, 3x)
+- Save export preset (for reuse)
+
+### Workflow 3: IDE / Code Editor
+
+**Step 1: File Tree + Editor Layout**
+- File tree (left sidebar)
+- Editor area (center, tabbed)
+- Terminal (bottom panel, toggleable)
+- Debug panels (right sidebar, shown when debugging)
+
+**Step 2: Editor Tabs**
+- Multiple files open in tabs
+- Cmd+P: Quick open file (fuzzy search)
+- Cmd+Tab: Switch tabs
+- Cmd+W: Close tab
+- Split editor (side-by-side, up to 3 columns)
+
+**Step 3: Command Palette**
+- Cmd+Shift+P: All commands
+- Fuzzy search: "git commit", "format document"
+- Shows keyboard shortcuts
+- Recent commands at top
+
+**Step 4: Integrated Debugger**
+- Breakpoints: Click gutter to toggle
+- Debug panel: Variables, call stack, watch
+- Keyboard: F5 (start), F10 (step over), F11 (step into)
+- Inline variable values during debug
+
+**Step 5: Extensions**
+- Extensions sidebar: Browse, install
+- Language support (Python, Go, Rust)
+- Themes (dark mode, light mode, custom)
+- Linters, formatters, git tools
+- Auto-update extensions
+
+**Step 6: Terminal Integration**
+- Integrated terminal (Cmd+`)
+- Split terminals (multiple shells)
+- Run tasks (npm, make, cargo)
+- Link file paths (click to open)
+
+### Workflow 4: Data Analysis Tool
+
+**Step 1: Data Import**
+- File > Import: CSV, Excel, SQL, API
+- Import wizard: Choose columns, data types
+- Preview data (first 10 rows)
+- Confirm import
+
+**Step 2: Data Table View**
+- Sortable columns (click header)
+- Filter rows (search, column filters)
+- Edit cells inline (click to edit)
+- Add/remove columns
+
+**Step 3: Charts + Visualizations**
+- Drag column to chart area: Create chart
+- Chart types: Line, bar, scatter, pie
+- Customize: Colors, labels, axes
+- Export chart (PNG, SVG)
+
+**Step 4: Batch Processing**
+- Select multiple rows (Cmd+Click)
+- Batch actions: Delete, tag, export
+- Apply formula to column (fill down)
+- Merge datasets (join tables)
+
+**Step 5: Export Results**
+- Export to CSV (all rows or filtered)
+- Export to Excel (multiple sheets)
+- Export chart images (PNG, SVG)
+- Generate report (PDF with charts + tables)
+
+**Step 6: Scripting**
+- Built-in Python console
+- Run scripts on data (pandas, numpy)
+- Save scripts (reusable workflows)
+- Script library (community scripts)
+
+
+## Related Skills
+
+**Core Lyra Skills:**
+- **`lyra/ux-designer/visual-design-foundations`**: Visual hierarchy for complex interfaces, typography for dense data, color for status indicators
+- **`lyra/ux-designer/information-architecture`**: Menu structure, panel organization, command categorization
+- **`lyra/ux-designer/interaction-design-patterns`**: Keyboard shortcuts, button states, feedback patterns, focus indicators
+- **`lyra/ux-designer/accessibility-and-inclusive-design`**: Keyboard navigation, screen reader support, focus management, WCAG compliance
+
+**Platform Skills:**
+- **`lyra/ux-designer/web-application-design`**: Shared patterns (command palette, keyboard shortcuts), responsive considerations for Electron apps
+- **`lyra/ux-designer/mobile-design-patterns`**: Touch considerations if desktop app has touch support (Surface, touchscreen laptops)
+
+**Cross-Faction:**
+- **`muna/technical-writer/clarity-and-style`**: Microcopy for menus, tooltips, error messages, help documentation
+- **`ordis/security-architect/secure-authentication-patterns`**: Desktop auth flows, credential storage, session management
+
+
+## Additional Resources
+
+**Design Guidelines:**
+- **macOS Human Interface Guidelines:** https://developer.apple.com/design/human-interface-guidelines/macos
+- **Windows Fluent Design System:** https://www.microsoft.com/design/fluent/
+- **GNOME Human Interface Guidelines:** https://developer.gnome.org/hig/
+- **KDE Human Interface Guidelines:** https://develop.kde.org/hig/
+
+**Desktop Patterns:**
+- Menu bars: File, Edit, View, Window, Help (standard structure)
+- Keyboard shortcuts: Platform conventions (Cmd vs Ctrl)
+- Window management: Multi-monitor, persistence, docking
+- Context menus: Right-click for common actions
+
+**Keyboard Standards:**
+- **Essential:** Cmd+N, Cmd+O, Cmd+S, Cmd+W, Cmd+Q
+- **Edit:** Cmd+Z, Cmd+Shift+Z, Cmd+X/C/V, Cmd+A
+- **Navigation:** Cmd+F, Cmd+Tab, Tab/Shift+Tab
+- **Platform differences:** Cmd (macOS) vs Ctrl (Windows/Linux)
+
+**Workspace Customization:**
+- Dockable panels (drag to dock, stack in tabs)
+- Toolbar customization (add/remove tools)
+- Layout presets (save and load)
+- Themes (light, dark, high contrast)
+
+**Power User Features:**
+- Command palette: Cmd+Shift+P (fuzzy search all commands)
+- Scripting: Python, JavaScript, Lua APIs
+- Batch operations: Process multiple files/items
+- Extensions: Plugin system, marketplace
+
+**Accessibility Standards:**
+- **WCAG 2.1 AA:** Keyboard navigation, focus indicators, contrast
+- **Keyboard-first:** All actions accessible via keyboard
+- **Focus indicators:** Visible 2px outline, high contrast
+- **Screen readers:** ARIA labels, semantic structure
diff --git a/skills/using-ux-designer/game-ui-design.md b/skills/using-ux-designer/game-ui-design.md
new file mode 100644
index 0000000..a003607
--- /dev/null
+++ b/skills/using-ux-designer/game-ui-design.md
@@ -0,0 +1,1858 @@
+
+# Game UI Design
+
+## Overview
+
+This skill provides **The Game UI Integration Framework**: a systematic 4-dimension methodology for designing game interfaces that balance player immersion with information delivery, optimize for input devices, maintain aesthetic coherence, and preserve game performance.
+
+**Core Principle**: Game UI faces unique constraints not present in productivity software. Players need critical information without breaking immersion, controls must work across multiple input methods (gamepad, keyboard+mouse, touch), visual design must match the game's genre and era, and UI rendering must never compromise frame rates. Success means players get the information they need while staying immersed in the game world.
+
+**Platform Focus**: Multi-platform games (console, PC, mobile) with guidance on input method optimization and performance constraints.
+
+## When to Use This Skill
+
+**Use this skill when:**
+- Designing game interfaces (HUDs, menus, pause screens, inventory systems)
+- Building game UI systems (Unity UI, Unreal UMG, custom engines)
+- Balancing immersion with usability in games
+- Optimizing UI for different input methods (gamepad, keyboard+mouse, touch)
+- Creating genre-appropriate UI (RPG stats, FPS minimalism, strategy overlays)
+- Ensuring UI doesn't impact frame rate performance
+- User mentions: "game UI", "HUD", "game menu", "inventory screen", "gamepad navigation"
+
+**Don't use this skill for:**
+- Non-game applications (use appropriate platform skill: web, mobile, desktop)
+- Game engines themselves (use `lyra/ux-designer/desktop-software-design`)
+- Simple 2D casual games with minimal UI (framework may be overkill)
+- Game design mechanics (use game design resources)
+
+
+## The Game UI Integration Framework
+
+A systematic 4-dimension framework for evaluating and designing game interfaces:
+
+1. **VISIBILITY VS IMMERSION** - Diegetic vs non-diegetic UI, minimal HUD, contextual display
+2. **INPUT METHOD OPTIMIZATION** - Gamepad, keyboard+mouse, touch controls
+3. **AESTHETIC COHERENCE** - UI matches game's visual style and genre
+4. **PERFORMANCE IMPACT** - GPU acceleration, minimize draw calls, optimize assets
+
+Evaluate game UI designs by examining each dimension systematically, identifying genre conventions, and ensuring designs balance information delivery with immersion.
+
+
+## Dimension 1: VISIBILITY VS IMMERSION
+
+**Purpose:** Balance the need for player information with immersion in the game world
+
+Players need critical information (health, resources, objectives) but constant UI elements can break immersion and clutter the screen. The challenge is showing exactly what players need, exactly when they need it, without disrupting the game experience.
+
+### Evaluation Questions
+
+1. **Does the HUD show only essential information?**
+   - Health in action games, stamina in combat
+   - Resource counts in strategy/survival
+   - Objective markers in open-world games
+   - Avoid: Everything all the time
+
+2. **Can players toggle UI visibility?**
+   - Button to hide/show HUD (screenshot mode)
+   - Allow players to customize HUD elements
+   - Optional: Auto-hide UI after inactivity
+
+3. **Is critical information always visible when needed?**
+   - Health bar when taking damage
+   - Ammo count when weapon drawn
+   - Quest markers when near objectives
+   - Never hide critical info when player needs it
+
+4. **Does the UI design match the game's immersion level?**
+   - Horror games: Minimal to no HUD (maximum fear)
+   - Arcade games: Bold, prominent HUD (score focus)
+   - Simulation games: Realistic, diegetic UI (cockpit displays)
+   - RPGs: Stats-heavy UI (character progression focus)
+
+### UI Integration Levels
+
+**Diegetic UI (In-World)**
+
+UI elements that exist within the game world - other characters can theoretically see them.
+
+**Examples:**
+- Dead Space: Health bar on Isaac's suit spine (glowing segments)
+- Splinter Cell: Radar projection on Sam's wrist device
+- Halo: Spartans see HUD inside their helmet visor
+- Racing games: Speedometer on car dashboard
+- Sci-fi games: Holographic computer interfaces
+
+**Advantages:**
+- Maximum immersion (feels part of world)
+- Natural aesthetic fit (designed as game objects)
+- Reinforces setting (futuristic tech, medieval scrolls)
+
+**Challenges:**
+- Harder to read (perspective, distance, lighting)
+- Limited by world constraints (must fit in 3D space)
+- Can be obscured by game elements (enemies, effects)
+- Higher art production cost (3D models, animations)
+
+**When to Use:**
+- Horror/immersive sims (maximum immersion)
+- VR games (UI must exist in 3D space)
+- Strong artistic vision (The Division's AR overlays)
+
+**Non-Diegetic UI (Overlay)**
+
+Traditional HUD overlays - flat 2D elements on screen that don't exist in the game world.
+
+**Examples:**
+- Call of Duty: Health bar, minimap, ammo counter (corners)
+- Assassin's Creed: Objective markers, health, minimap
+- Mario: Coin count, lives, score (top of screen)
+- Most games: Pause menu, settings, inventory screens
+
+**Advantages:**
+- Always readable (fixed position, no occlusion)
+- Flexible positioning (corners, edges, center)
+- Clear information hierarchy (consistent layout)
+- Lower production cost (2D UI elements)
+
+**Challenges:**
+- Breaks immersion (reminds player it's a game)
+- Can clutter screen (overlays on gameplay)
+- Generic appearance if not styled well
+
+**When to Use:**
+- Most games (practical default)
+- Competitive games (clarity over immersion)
+- When information density is high (strategy, RPG)
+
+**Spatial UI (World-Space)**
+
+UI anchored to 3D space but not physically diegetic - floating elements in the world.
+
+**Examples:**
+- Floating health bars above enemies (MMORPGs)
+- Objective markers floating at quest locations
+- Damage numbers floating off enemies
+- Waypoint beacons in the distance
+- Username tags over players (multiplayer)
+
+**Advantages:**
+- Shows location context (where enemy is)
+- Less screen clutter than full overlay
+- Scalable with distance (far = smaller)
+
+**Challenges:**
+- Can clutter 3D space (many enemies = many bars)
+- May obscure world details
+- Depth sorting issues (render order)
+
+**When to Use:**
+- Open-world navigation (waypoints)
+- Multiplayer identification (player names)
+- Enemy status in action games
+
+**Meta UI (Player-Aware)**
+
+UI that acknowledges it's a game, breaking the fourth wall intentionally.
+
+**Examples:**
+- Tutorial hints: "Press X to jump"
+- Achievement notifications: "Achievement Unlocked!"
+- Loading screens with tips
+- Fourth-wall-breaking games (Deadpool, Stanley Parable)
+
+**Advantages:**
+- Clear communication (no in-world justification needed)
+- Good for teaching mechanics
+- Can be humorous or stylistically interesting
+
+**Challenges:**
+- Breaks immersion completely
+- Can feel intrusive if overused
+
+**When to Use:**
+- Tutorials and onboarding
+- Achievements and progression systems
+- Games with comedic or meta tone
+
+### HUD Visibility Patterns
+
+**Minimal HUD**
+
+Show only absolutely essential information, hide everything else.
+
+**Implementation:**
+- **FPS:** Health (bottom-left), ammo (bottom-right), crosshair (center)
+- **Horror:** No HUD, or only health when low
+- **Racing:** Speed, position, lap time (minimal text)
+- **Exploration:** Nothing, or only compass/objective marker
+
+**Best For:**
+- Immersive games (horror, narrative adventures)
+- Games with simple mechanics (few systems to track)
+- Cinematic experiences
+
+**Avoid:**
+- Complex RPGs (too many stats to hide)
+- Strategy games (need resource/unit information)
+
+**Contextual Display**
+
+Show UI elements only when relevant, hide when not needed.
+
+**Patterns:**
+- **Health bar:** Appears when taking damage, fades after 3-5 seconds
+- **Stamina bar:** Visible when sprinting/dodging, hidden when full
+- **Ammo counter:** Shows when weapon drawn, hidden when holstered
+- **Interaction prompts:** "Press E to open" appears near interactive objects
+- **Quest notifications:** Appear when near objectives, hidden otherwise
+
+**Timing Guidelines:**
+- Appear: Immediate (0ms when condition met)
+- Stay: 3-5 seconds after last update
+- Fade: 500-1000ms smooth fade-out
+- Reappear: Instant if condition triggers again
+
+**Best For:**
+- Most modern games (good balance)
+- Reduces clutter without hiding critical info
+- Keeps player focused on action
+
+**Auto-Hide UI**
+
+UI fades after period of no input, returns on interaction.
+
+**Implementation:**
+- Full HUD visible during gameplay
+- After 3-5 seconds of no input → fade out (1s transition)
+- Any input (movement, camera, action) → fade in (500ms)
+- Critical info (low health) overrides auto-hide
+
+**Best For:**
+- Screenshot enthusiasts
+- Cutscene transitions
+- Exploration phases (walking, sightseeing)
+
+**Configuration:**
+- Allow players to adjust timing (3s, 5s, 10s, never)
+- Allow players to exclude elements (always show health)
+
+**HUD Toggle**
+
+Button press completely hides/shows all HUD elements.
+
+**Standard Mapping:**
+- PC: F1 or H key (common convention)
+- Console: D-pad down (or hold)
+- Mobile: Two-finger tap (uncommon, conflicts with zoom)
+
+**Behavior:**
+- Instant toggle (no animation)
+- Or smooth fade (500ms)
+- Remember state across sessions (save preference)
+- Show critical warnings even when hidden (very low health)
+
+**Best For:**
+- Screenshot mode
+- Replay/spectator mode
+- Accessibility (players with sensory issues)
+
+### Genre Conventions
+
+Understanding genre-specific HUD expectations helps meet player expectations.
+
+**FPS (First-Person Shooter):**
+- **Minimal HUD:** Health, ammo, crosshair, minimap (optional)
+- **Position:** Health bottom-left, ammo bottom-right, minimap top-corner
+- **Style:** Sleek, minimal, doesn't obscure center view
+- **Examples:** Call of Duty, Halo, Titanfall
+- **Reasoning:** Players need clear sightlines for shooting
+
+**RPG (Role-Playing Game):**
+- **Stats-Heavy:** Health, mana/stamina, XP bar, level, quest log, minimap
+- **Position:** Multiple bars (top or bottom), minimap (top-right)
+- **Style:** Ornate, fantasy or sci-fi themed borders
+- **Examples:** Skyrim, World of Warcraft, The Witcher 3
+- **Reasoning:** Character progression is core, players want stats
+
+**Survival:**
+- **Resource Tracking:** Health, hunger, thirst, temperature, inventory weight
+- **Position:** Multiple gauges (bottom or side), icon-based status effects
+- **Style:** Gritty, realistic, gauge-based
+- **Examples:** Rust, ARK, Subnautica
+- **Reasoning:** Resource management is core gameplay
+
+**Racing:**
+- **Speed & Position:** Speedometer, current position, lap time, minimap
+- **Position:** Bottom center (speed), top center (position/time)
+- **Style:** Sleek, digital, racing-aesthetic
+- **Examples:** Forza, Gran Turismo, Mario Kart
+- **Reasoning:** Need speed awareness, competitive position
+
+**Strategy (RTS/4X):**
+- **Resource Counts:** Gold, wood, food, population, minimap
+- **Position:** Top bar (resources), bottom (unit selection), corner (minimap)
+- **Style:** Information-dense, clear icons
+- **Examples:** StarCraft, Civilization, Age of Empires
+- **Reasoning:** Managing many systems simultaneously
+
+**Horror:**
+- **Minimal to None:** No HUD, or only health/ammo when critical
+- **Style:** Diegetic (flashlight, wrist device), minimal overlay
+- **Examples:** Resident Evil, Dead Space, Alien: Isolation
+- **Reasoning:** UI breaks fear and tension
+
+**Fighting Games:**
+- **Health Bars:** Large horizontal bars top of screen, character portraits
+- **Position:** Top (health), bottom (super meter, combo counter)
+- **Style:** Bold, high-contrast, instantly readable
+- **Examples:** Street Fighter, Mortal Kombat, Tekken
+- **Reasoning:** Frame-perfect decisions need instant readability
+
+**MOBA (Multiplayer Online Battle Arena):**
+- **Complex HUD:** Health/mana, abilities (cooldowns), minimap, inventory, gold, team status
+- **Position:** Bottom center (abilities), corners (minimap, score), side (inventory)
+- **Style:** Dense, icon-heavy, color-coded teams
+- **Examples:** League of Legends, Dota 2, Smite
+- **Reasoning:** High information density for competitive play
+
+
+## Dimension 2: INPUT METHOD OPTIMIZATION
+
+**Purpose:** Ensure UI works seamlessly with the player's input device
+
+Games support multiple input methods - gamepad (console), keyboard+mouse (PC), touch (mobile) - and UI navigation must feel native to each. Radial menus excel with analog sticks but fail with mouse. Keyboard hotkeys are fast for PC but impossible on gamepad. Touch requires large targets unavailable on small phone screens.
+
+### Evaluation Questions
+
+1. **Is the UI navigable with all supported input methods?**
+   - Gamepad: D-pad or analog stick navigation
+   - Keyboard+Mouse: Click + hotkeys
+   - Touch: Tap targets 60px+ minimum
+
+2. **Do input prompts show the correct button/key?**
+   - Xbox controller: "Press A to continue"
+   - PlayStation: "Press X to continue"
+   - PC: "Press E to interact"
+   - Dynamic switching when controller changes
+
+3. **Are radial menus used effectively for gamepad?**
+   - Analog stick selects from circular menu
+   - 4-8 items maximum (more = hard to select)
+   - Visual feedback (highlight selection)
+
+4. **Are touch targets appropriately sized for mobile?**
+   - Minimum 60x60px (larger than standard mobile UI)
+   - Bottom half of screen (thumb zone)
+   - Semi-transparent controls (don't obscure gameplay)
+
+### Input Methods
+
+**Gamepad Navigation**
+
+Console players expect smooth navigation with controller, using analog sticks, D-pad, and face buttons.
+
+**Radial Menus (Analog Stick)**
+
+Circular menus ideal for analog stick selection - fast, intuitive, visually interesting.
+
+**Specifications:**
+- **Item Count:** 4-8 items maximum (8 = cardinal/diagonal directions)
+- **Selection:** Analog stick direction (or flick gesture)
+- **Deadzone:** Center 20% diameter (no selection)
+- **Visual Feedback:** Highlighted slice, icon enlarges
+- **Confirmation:** Release stick (auto-select) or press button
+- **Center Option:** Cancel/back action
+
+**Examples:**
+- Mass Effect: Power wheel (8 abilities mapped to analog directions)
+- Grand Theft Auto V: Weapon wheel (8 weapon categories)
+- Red Dead Redemption: Item wheel (8 item slots)
+
+**Best For:**
+- Weapon/ability selection (fast, mid-combat)
+- Item quick-access
+- Context-sensitive actions (multiple options)
+
+**Avoid:**
+- More than 8 items (too precise, hard to select)
+- Nested radial menus (confusing)
+- Text-heavy options (labels should be icons)
+
+**D-pad Menus (Cardinal Navigation)**
+
+Traditional up/down/left/right navigation through menus and lists.
+
+**List Navigation (Vertical):**
+- **Up/Down:** Navigate items in list
+- **A/X (confirm):** Select item
+- **B/Circle (cancel):** Go back
+- **Wrap:** Bottom → top (optional, helps long lists)
+
+**Grid Navigation (2D):**
+- **All Directions:** Navigate grid cells
+- **Visual Indicator:** Highlight current cell (border, background)
+- **Wrap:** Edges wrap to opposite side (optional)
+
+**Tab Switching:**
+- **L1/R1 (shoulder buttons):** Previous/next tab
+- **Visual:** Tab bar at top, current tab highlighted
+- **Examples:** Inventory tabs (Weapons, Armor, Items, Quest)
+
+**Best For:**
+- Menus, settings, inventory lists
+- Turn-based games (no time pressure)
+- Text-heavy interfaces
+
+**Face Button Mapping (Standard Conventions)**
+
+**Xbox (and Nintendo Switch positions):**
+- **A (bottom):** Confirm/Select
+- **B (right):** Cancel/Back
+- **X (left):** Secondary action (reload, use item)
+- **Y (top):** Alternative action (switch weapon, jump)
+
+**PlayStation (different positions, same function):**
+- **X (bottom):** Confirm/Select
+- **Circle (right):** Cancel/Back (or confirm in Japan)
+- **Square (left):** Secondary action
+- **Triangle (top):** Alternative action
+
+**Note:** Japan has opposite confirm/cancel (Circle=confirm, X=cancel). Respect regional settings.
+
+**Shoulder Buttons:**
+- **L1/R1 (bumpers):** Tab switching, weapon cycling
+- **L2/R2 (triggers):** Aim, fire, brake (in-game actions, not UI)
+- **L3/R3 (stick clicks):** Rarely used for menus (accessibility issue)
+
+**Special Buttons:**
+- **Start:** Pause menu, main menu
+- **Select/Share/View:** Map, inventory, photo mode
+
+**Quick Access Patterns**
+
+Access frequently-used actions without pausing - critical for action games.
+
+**D-pad Quick Actions:**
+- **D-pad Up:** Heal/use item
+- **D-pad Down:** Change stance/crouch
+- **D-pad Left/Right:** Quick weapon switch
+- **Hold D-pad:** Open radial menu for more options
+
+**Bumper Cycling:**
+- **Tap L1/R1:** Cycle weapons/abilities
+- **Visual:** Weapon icon flashes briefly (bottom corner)
+- **No Menu:** Instant, doesn't pause game
+
+**Keyboard + Mouse**
+
+PC players expect precision with mouse and speed with keyboard shortcuts.
+
+**Mouse Click Interactions**
+
+**Left-Click:**
+- Primary action (attack, select, confirm)
+- Drag to rotate camera
+- Click UI buttons
+
+**Right-Click:**
+- Secondary action (aim, block, context menu)
+- Hold for continuous action (aim down sights)
+
+**Middle-Click (Scroll Wheel Click):**
+- Special action (grenade, ping, mark)
+- Less common (not all mice have reliable middle-click)
+
+**Scroll Wheel:**
+- **Scroll Up/Down:** Weapon switch, zoom in/out
+- **Fast Switch:** Common in FPS (scroll = cycle weapons)
+
+**Mouse Hover:**
+- Tooltips appear after 300ms delay
+- Highlight interactive objects
+- Preview information (item stats)
+
+**Keyboard Shortcuts**
+
+Fast access to actions without mouse movement - critical for competitive play.
+
+**Number Keys (1-9):**
+- **Hotbar:** Weapons, abilities, items mapped to keys
+- **Instant Access:** Press 3 → switch to weapon in slot 3
+- **Visual:** Hotbar UI at bottom showing 9 slots
+
+**Common Keyboard Mappings:**
+- **WASD:** Movement (never use for UI navigation - conflicts)
+- **E:** Interact/use
+- **F:** Melee/special action
+- **R:** Reload
+- **Q:** Quick ability/gadget
+- **G:** Grenade/throwable
+- **Tab:** Scoreboard, map, overlay
+- **ESC:** Pause menu
+- **I:** Inventory
+- **M:** Map
+- **J:** Journal/quests
+- **C:** Character stats
+- **H:** Toggle HUD
+- **F1-F12:** Less common (farther reach)
+
+**Modifier Keys:**
+- **Shift+Key:** Alternative action (Shift+1 = ability variant)
+- **Ctrl+Key:** Rarely used (hand position conflicts with WASD)
+- **Alt+Key:** Possible but less common
+
+**Menu Navigation:**
+- **Arrow Keys:** Navigate menus (alternative to mouse)
+- **Enter:** Confirm
+- **ESC:** Cancel/back
+- **Tab:** Next field (forms)
+
+**Hybrid Navigation (Mouse + Keyboard)**
+
+Fastest method: mouse for selection, keyboard for confirmation/common actions.
+
+**Pattern:**
+- Hover item with mouse (instant)
+- Press E to use (faster than clicking "Use" button)
+- Or press 1-9 to quick-slot item
+
+**Best For:**
+- Inventory management (fast sorting)
+- Crafting systems
+- PC-first game design
+
+**Touch (Mobile Games)**
+
+Mobile games require larger touch targets, thumb-zone positioning, and gesture controls.
+
+**Touch Target Sizing**
+
+**Minimum Sizes:**
+- **Critical Actions:** 60x60px minimum (larger than mobile UI standard)
+- **Secondary Actions:** 50x50px acceptable
+- **Spacing:** 16px minimum between targets (prevent accidental taps)
+
+**Reasoning:**
+- Gameplay is fast, precision is lower
+- Fingers obscure screen (larger = easier to hit)
+- "Fat finger" problem exacerbated by stress
+
+**Thumb Zones**
+
+Design for one-handed play when possible - most mobile gamers use thumbs.
+
+**Most Reachable (Right Hand):**
+- **Bottom 50%:** Easiest reach
+- **Right side:** Natural thumb arc
+- **Center-bottom:** Both hands reachable
+
+**Least Reachable:**
+- **Top corners:** Require hand repositioning
+- **Top center:** Requires thumb stretch
+
+**Layout Strategy:**
+- **Left Side:** Virtual joystick (movement)
+- **Right Side:** Action buttons (fire, jump, crouch)
+- **Top:** Non-critical info (score, minimap)
+- **Bottom Center:** Pause button (reachable by both thumbs)
+
+**On-Screen Controls**
+
+**Virtual Joystick:**
+- **Position:** Bottom-left corner
+- **Size:** 120-150px diameter
+- **Appearance:** Semi-transparent circle (50-70% opacity)
+- **Behavior:** Stick appears on touch, follows thumb (floating joystick)
+- **Deadzone:** Center 20% (no movement)
+
+**Action Buttons:**
+- **Position:** Bottom-right, clustered arrangement
+- **Size:** 60-80px diameter each
+- **Layout:** Primary button largest, secondary smaller, arranged in arc
+- **Labels:** Icons (not text) for clarity
+- **Spacing:** 10-16px between buttons
+
+**Transparency:**
+- **Semi-Transparent:** 60-70% opacity (see gameplay underneath)
+- **Solid on Press:** 100% opacity when finger touching (clear feedback)
+- **Customizable:** Let players adjust opacity (30-100%)
+
+**Gestures**
+
+Touch-specific interactions for mobile games.
+
+**Swipe:**
+- **Use:** Camera control (swipe to rotate view)
+- **Direction:** Anywhere on empty screen space
+- **Conflicts:** Don't conflict with joystick area
+
+**Pinch:**
+- **Use:** Zoom map (strategy games)
+- **Not Common:** In gameplay (hard to pinch while controlling character)
+
+**Long-Press:**
+- **Use:** Context menu, alternate action
+- **Duration:** 500ms hold
+- **Feedback:** Circle fills around finger (progress indicator)
+
+**Tap:**
+- **Use:** Primary action (fire, select)
+- **Double-Tap:** Less common (timing window issues)
+
+**Two-Finger Tap:**
+- **Use:** Rare (HUD toggle, screenshot)
+- **Not Recommended:** Awkward, conflicts with other gestures
+
+**Input Prompts (Dynamic)**
+
+Show correct button/key based on current input device - critical for multi-platform games.
+
+**Implementation:**
+- **Detect Input:** Game detects controller type (Xbox, PlayStation, keyboard)
+- **Update Prompts:** All on-screen prompts update instantly
+- **Switch On Input:** If player picks up controller, prompts change from keyboard to gamepad
+
+**Examples:**
+- **Xbox Controller:** "Press A to continue"
+- **PlayStation Controller:** "Press X to continue"
+- **Keyboard:** "Press E to interact"
+
+**Icon Libraries:**
+- Use official button icons (Microsoft, Sony, Nintendo)
+- Or generic icons (acceptable if clean)
+- Never: Wrong platform icons (Xbox icons on PlayStation)
+
+**Text Fallback:**
+- If no icon available: "[A Button]" or "Confirm Button"
+
+**Consistent Mapping**
+
+Buttons should have consistent meaning across all menus and screens.
+
+**Standard Mapping:**
+- **A/X:** Always confirm (never cancel)
+- **B/Circle:** Always cancel (never confirm)
+- **L1/R1:** Always tab switching (not random actions)
+
+**Why This Matters:**
+- Muscle memory (players don't read prompts after first few times)
+- Consistency reduces errors (accidentally backing out of menu)
+
+**Exceptions:**
+- Regional differences (Japan swaps confirm/cancel)
+- Game respects system settings
+
+
+## Dimension 3: AESTHETIC COHERENCE
+
+**Purpose:** Ensure UI visually integrates with the game's art style and genre
+
+Game UI should feel like it belongs in the game world, not a generic overlay. A medieval fantasy game with sleek modern UI feels wrong. A cyberpunk game with ornate serif fonts breaks the aesthetic. Typography, color palette, animations, and visual effects must all reinforce the game's setting and tone.
+
+### Evaluation Questions
+
+1. **Does the UI typography match the game's era/genre?**
+   - Medieval fantasy: Ornate serif, parchment textures
+   - Sci-fi: Futuristic sans-serif, glowing effects
+   - Modern military: Stencil fonts, tactical styling
+
+2. **Do UI colors complement the game's palette?**
+   - Extract colors from game's environment art
+   - Use game's accent colors for highlights
+   - Avoid generic blue/gray if game uses warm tones
+
+3. **Do animations match the game's pacing?**
+   - Fast-paced shooter: Snappy 100-150ms transitions
+   - Slow RPG: Smooth 200-300ms transitions
+   - Horror: Delayed, unsettling animations
+
+4. **Does the UI evolve with player progression?**
+   - Basic UI early game (tutorial-friendly)
+   - Enhanced UI as player gains skills/gear
+   - Visual upgrades reinforce progression
+
+### Visual Style Matching
+
+**Typography**
+
+Font choice must match game setting, era, and tone.
+
+**Fantasy RPG:**
+- **Fonts:** Ornate serif (Cinzel, Trajan), blackletter for titles
+- **Textures:** Parchment, leather, weathered paper
+- **Colors:** Warm (gold, brown, burgundy)
+- **Examples:** Skyrim, Diablo, World of Warcraft
+
+**Sci-Fi/Futuristic:**
+- **Fonts:** Clean sans-serif (Orbitron, Exo, Rajdhani), monospace for data
+- **Effects:** Glowing edges, scan lines, holographic flicker
+- **Colors:** Cool (cyan, blue, green accents), high contrast
+- **Examples:** Halo, Mass Effect, Cyberpunk 2077
+
+**Horror:**
+- **Fonts:** Distressed, handwritten, scratchy
+- **Textures:** Blood stains, torn paper, smudges
+- **Colors:** Desaturated, red accents
+- **Examples:** Resident Evil, Silent Hill, Dead Space
+
+**Military/Tactical:**
+- **Fonts:** Stencil (Eurostile, Quantico), military sans-serif
+- **Style:** Grid overlays, tactical markers, NATO symbols
+- **Colors:** Olive drab, black, orange/yellow highlights
+- **Examples:** Call of Duty, Battlefield, Ghost Recon
+
+**Cartoon/Stylized:**
+- **Fonts:** Rounded, playful, bold (Fredoka, Baloo, Comic Sans actually works here)
+- **Style:** Thick outlines, bright colors, bouncy animations
+- **Colors:** Saturated, high contrast, cheerful
+- **Examples:** Mario, Overwatch, Fall Guys
+
+**Minimalist/Modern:**
+- **Fonts:** Clean sans-serif (Helvetica, Roboto, Inter)
+- **Style:** Flat design, subtle shadows, geometric
+- **Colors:** Monochrome with single accent color
+- **Examples:** Mirror's Edge, Monument Valley, Inside
+
+**Historical/Period:**
+- **Medieval:** Gothic fonts, illuminated manuscript style
+- **Western:** Slab serif, wanted poster aesthetic
+- **1920s-40s:** Art deco, vintage film noir
+- **Match Historical Context:** Research typography of era
+
+**Readability Requirements:**
+
+Despite theme, text must always be readable:
+- **Minimum Font Size:** 14px for body text, 18px+ for critical info
+- **Contrast Ratio:** 4.5:1 minimum (WCAG AA) even in themed UI
+- **Test in Game Lighting:** Dark areas, bright areas, motion blur
+- **Fallback:** Provide accessibility option for plain readable fonts
+
+**Color Palette**
+
+UI colors should be extracted from and complement the game's art direction.
+
+**Extract from Game:**
+- Sample dominant colors from environment art
+- Use game's lighting mood (warm desert, cool snow)
+- Match color temperature (warm vs cool)
+
+**Accent Colors:**
+- Use game's existing accent colors (character glows, magic effects)
+- Maintain brand consistency (if game has signature color)
+- Color-code UI elements (red=danger, green=safe, blue=info)
+
+**Examples:**
+- **The Legend of Zelda: Breath of the Wild:** Warm golds, sky blues (matches Hyrule landscapes)
+- **Bloodborne:** Dark grays, deep reds, muted purples (Gothic horror)
+- **Ori and the Blind Forest:** Ethereal blues, vibrant greens (magical forest)
+
+**Avoid:**
+- Generic game UI blue (#0066CC) if game has warm palette
+- Pure black backgrounds if game uses warm lighting
+- Overly saturated colors in realistic games
+
+**Visual Effects**
+
+Effects should match game's visual language and genre conventions.
+
+**Fantasy:**
+- **Effects:** Magic particles, glowing runes, sparkles
+- **Transitions:** Fade with magical shimmer
+- **Textures:** Aged parchment, leather stitching, metal clasps
+
+**Sci-Fi:**
+- **Effects:** Hologram flicker, scan lines, lens flare
+- **Transitions:** Digital wipes, hexagon patterns
+- **Textures:** Brushed metal, circuit patterns, glass panels
+
+**Modern Military:**
+- **Effects:** Minimal, tactical overlays, grid lines
+- **Transitions:** Fast, efficient (no decoration)
+- **Textures:** Matte surfaces, stenciled text
+
+**Cyberpunk:**
+- **Effects:** Glitch effects, chromatic aberration, neon glows
+- **Transitions:** Digital corruption, VHS distortion
+- **Textures:** Neon signs, rain-wet surfaces, CRT scanlines
+
+**Horror:**
+- **Effects:** Blood drips, scratches, static noise
+- **Transitions:** Slow, unnerving fades
+- **Textures:** Rust, decay, organic textures
+
+**Performance Note:** Effects are expensive - use sparingly, optimize particle counts.
+
+**Animations and Timing**
+
+Animation speed and easing should match game's overall pacing.
+
+**Fast-Paced Games (FPS, Racing, Fighting):**
+- **Menu Transitions:** 100-150ms (snappy, get out of player's way)
+- **Button Feedback:** Instant (<50ms)
+- **Modal Open/Close:** 150ms (quick)
+- **Reasoning:** Players want to get back to action fast
+
+**Medium-Paced Games (Action-RPG, Third-Person Shooter):**
+- **Menu Transitions:** 200-250ms (smooth but not slow)
+- **Animations:** Ease-out curves (natural settling)
+- **Modal Open/Close:** 200ms
+- **Reasoning:** Balance between speed and polish
+
+**Slow-Paced Games (Turn-Based RPG, Strategy, Simulation):**
+- **Menu Transitions:** 250-300ms (luxurious, smooth)
+- **Animations:** Elaborate transitions (page turns, unfurls)
+- **Modal Open/Close:** 300ms
+- **Reasoning:** Players aren't rushed, appreciate polish
+
+**Horror Games:**
+- **Menu Transitions:** 300-500ms (deliberately slow, unsettling)
+- **Animations:** Delayed, stuttering, unpredictable timing
+- **Modal Open/Close:** Slow fade (200-400ms)
+- **Reasoning:** Build tension even in menus
+
+**Puzzle Games:**
+- **Menu Transitions:** 200ms (smooth, not distracting)
+- **Animations:** Satisfying completion animations (300ms)
+- **Reasoning:** Calm, thoughtful pace
+
+**Consistency Within Game:**
+
+All UI animations should use same timing/easing family:
+- Don't mix 100ms and 500ms transitions randomly
+- Use consistent easing curves (all ease-out, or all ease-in-out)
+- Faster animations for frequently-accessed menus, slower for rare screens
+
+### Patterns
+
+**Themed Menus**
+
+Menus that visually belong to the game world, not generic overlays.
+
+**Medieval Fantasy:**
+- Menus appear as parchment pages with wax seals
+- Item icons on weathered paper background
+- Navigation tabs as leather-bound book sections
+- Sound effects: Paper rustling, quill scratching
+
+**Sci-Fi/Space:**
+- Menus as holographic projections with flicker
+- Grid overlays and hexagonal patterns
+- Blue/cyan glows, scan line effects
+- Sound effects: Computer beeps, digital chirps
+
+**Post-Apocalyptic:**
+- Menus as worn, salvaged technology (cracked screens)
+- Hand-drawn maps, graffiti-style markers
+- Rusty metal textures, duct-tape repairs
+- Sound effects: Static, mechanical clicks
+
+**Pirate/Naval:**
+- Menus as nautical charts, ship logs
+- Rope borders, compass rose decorations
+- Ink stains, water damage on paper
+- Sound effects: Creaking wood, waves
+
+**Diegetic Justification**
+
+Explain UI through game world - gives immersion and context.
+
+**Examples:**
+- **Dead Space:** "This is your RIG suit's holographic interface"
+- **Fallout:** "This is your Pip-Boy wrist computer"
+- **Tom Clancy Games:** "This is your tactical AR headset display"
+- **Hacking Games:** "This is the terminal you're using"
+
+**Benefits:**
+- Justifies UI existence in-world
+- Excuses UI limitations ("Old tech, low resolution")
+- Allows UI to break/glitch when narrative appropriate
+
+**Progression Reflection**
+
+UI evolves as player progresses - visual reward for advancement.
+
+**Patterns:**
+- **Early Game:** Basic, minimal UI (few features unlocked)
+- **Mid Game:** Enhanced UI elements (skill tree unlocked, shows new options)
+- **Late Game:** Polished, feature-rich UI (all systems available)
+
+**Examples:**
+- **RPG:** Character portrait upgrades with better gear (armor shown in UI)
+- **Crafting Game:** Inventory UI upgrades from bag → chest → warehouse
+- **Sci-Fi:** HUD upgrades from basic to advanced (new scan modes, data overlays)
+
+**Implementation:**
+- Tie UI unlocks to player progression milestones
+- Tutorial: Introduce UI elements gradually, not all at once
+- Visual polish increases (more effects, better icons) as player advances
+
+**Consistency Across Screens**
+
+All menus, HUD, and UI should feel cohesive - unified visual language.
+
+**Checklist:**
+- **Font Family:** Same 1-2 fonts across all UI
+- **Color Palette:** Same accent colors, backgrounds, borders
+- **Button Style:** All buttons same shape, size, effects
+- **Icon Style:** Consistent line weight, detail level, colors
+- **Animation Timing:** Same durations, same easing curves
+- **Spacing:** Consistent padding, margins, alignment grid
+
+**Why This Matters:**
+- Professional appearance (sloppy if inconsistent)
+- Easier to learn (patterns repeat)
+- Lower production cost (reuse components)
+
+**Testing:**
+- Screenshot all menu screens side-by-side
+- Check for visual outliers (one menu looks different)
+- Ensure UI feels like single design system
+
+### Readability vs Theme
+
+Aesthetic theming must never sacrifice legibility - players need to read text.
+
+**Non-Negotiable Requirements:**
+
+**Contrast Ratio:**
+- **WCAG AA:** 4.5:1 for normal text, 3:1 for large text (18pt+)
+- **Game Recommendation:** 7:1 for critical info (easier to read in motion)
+- **Test:** Use contrast checker tools, test in-game with real lighting
+
+**Font Sizing:**
+- **Body Text:** 14px minimum on PC, 18px+ on console (TV distance)
+- **Critical Info:** 16px+ minimum
+- **Headings:** 24px+ for clear hierarchy
+
+**Lighting Conditions:**
+- **Dark Scenes:** UI must be visible (add background, increase contrast)
+- **Bright Scenes:** UI must not wash out (darken backgrounds)
+- **Motion Blur:** Text must remain readable even when camera moving
+
+**TV Distance (Console Games):**
+- Players sit 6-10 feet from TV (much farther than PC monitor)
+- Text must be larger, higher contrast
+- Test on real TV at typical living room distance
+
+**Accessibility Options:**
+
+Provide fallbacks for players with readability issues:
+- **High Contrast Mode:** Black/white UI, maximum contrast
+- **Large Text Mode:** 1.5x or 2x text size
+- **Colorblind Modes:** Alternative color palettes (red/green, blue/yellow)
+- **Simplified UI:** Remove decorative elements, plain backgrounds
+
+**When to Prioritize Readability:**
+- Critical information (health, ammo, quest objectives)
+- Text-heavy games (RPGs, visual novels, strategy)
+- Accessibility compliance (legal requirement in some regions)
+
+**When Theme Can Bend Rules Slightly:**
+- Decorative elements (menu backgrounds, borders)
+- Non-critical information (lore text, optional codex)
+- With accessibility toggle available
+
+
+## Dimension 4: PERFORMANCE IMPACT
+
+**Purpose:** Ensure UI doesn't negatively impact game frame rate or responsiveness
+
+Game UI competes with gameplay for GPU/CPU resources. A 60fps game that drops to 45fps when opening inventory feels broken. UI must be optimized through GPU acceleration, draw call reduction, lazy rendering, and asset optimization. Poor UI performance is especially visible when contrasted with smooth gameplay.
+
+### Evaluation Questions
+
+1. **Does UI maintain target frame rate (60fps or 30fps)?**
+   - Measure frame time with UI open vs closed
+   - UI should add <10% to frame time
+   - Critical UI (HUD) should add <5%
+
+2. **Are draw calls minimized through batching?**
+   - Combine UI elements into single draw call
+   - Use texture atlases (sprite sheets)
+   - Minimize material changes
+
+3. **Are only visible UI elements rendered?**
+   - Disable hidden menus (not just set invisible)
+   - Cull off-screen elements
+   - Use object pooling (reuse UI objects)
+
+4. **Are UI assets optimized?**
+   - Compressed textures (DXT, ASTC)
+   - Appropriate texture sizes (256x256 for icons, not 2048x2048)
+   - Minimal overdraw (transparent overlays)
+
+### Performance Testing
+
+**Measure Frame Impact:**
+
+**Baseline:**
+- Run gameplay without UI (or minimal HUD)
+- Measure frame time (16.67ms at 60fps, 33.33ms at 30fps)
+- Record average, min, max frame times
+
+**With UI:**
+- Open complex menu (inventory, map, skill tree)
+- Measure frame time again
+- Calculate UI overhead (difference from baseline)
+
+**Target Overhead:**
+- **HUD (Always Visible):** <5% overhead (0.8ms at 60fps)
+- **Menus (Paused):** <10% overhead (1.67ms at 60fps)
+- **Acceptable:** <15% overhead (2.5ms at 60fps)
+- **Problematic:** >20% overhead (3.3ms+ at 60fps)
+
+**Tools:**
+- Unity: Profiler (CPU/GPU breakdown)
+- Unreal: Unreal Insights, stat commands (stat fps, stat unit)
+- Custom: Frame time overlays, PIX (Windows), RenderDoc
+
+**Test on Minimum Spec:**
+- Test on lowest-end supported hardware (base console, min-spec PC)
+- UI that runs fine on high-end may tank on low-end
+- Optimize for worst-case hardware
+
+**Measure Input Latency:**
+
+**Target:** <50ms from input to UI response (button press to visual feedback)
+
+**Test:**
+- Press button, measure time until UI updates
+- Use high-speed camera (240fps) to measure lag
+- Competitive games: <30ms critical
+
+**Common Causes of Lag:**
+- UI framework overhead (Unity UI, Unreal UMG can add 1-2 frames)
+- Complex layout recalculations
+- Synchronous asset loading (blocking)
+
+### Optimization Strategies
+
+**GPU Acceleration**
+
+Use hardware rendering, never CPU-based UI rendering.
+
+**Implementation:**
+- **Unity:** Canvas set to Screen Space - Overlay or Camera, GPU mode
+- **Unreal:** UMG uses native GPU rendering by default
+- **Custom Engines:** Use GPU texture quads, not CPU-drawn pixels
+
+**Indicators of CPU Rendering:**
+- UI updates cause CPU spikes (not GPU)
+- Frame rate drops on UI updates but GPU utilization doesn't increase
+- Profiler shows UI code on CPU thread, not render thread
+
+**Draw Call Optimization**
+
+Reduce number of draw calls - single biggest performance factor.
+
+**Batching:**
+- Combine multiple UI elements into single draw call
+- **Static Batching:** Elements that don't move/change (backgrounds)
+- **Dynamic Batching:** Elements that update (health bars)
+
+**Texture Atlases (Sprite Sheets):**
+- Pack all UI icons/sprites into single texture (2048x2048 or 4096x4096)
+- Reduces texture switches (expensive)
+- **Tools:** TexturePacker, Unity Sprite Packer, Unreal Paper2D
+
+**Example:**
+- 100 icons as separate textures = 100 draw calls
+- 100 icons in atlas = 1-5 draw calls (huge savings)
+
+**Minimize Material Changes:**
+- Use same material for all UI elements (just different textures/colors)
+- Each material change breaks batching
+- **Unity:** Use same shader, shared material
+
+**Canvas Optimization (Unity-Specific):**
+- Split UI into multiple canvases (static vs dynamic)
+- Updating one element doesn't rebuild entire canvas
+- Static canvas (background) separate from dynamic canvas (health bar)
+
+**Lazy Rendering**
+
+Only render visible UI - disable hidden elements completely.
+
+**Disable Hidden Menus:**
+- Don't just set invisible (UI still calculated, rendered)
+- Disable GameObject entirely (Unity: SetActive(false))
+- Save state and restore when re-enabled
+
+**Cull Off-Screen Elements:**
+- Scrollable lists: Only render visible items (virtualization)
+- **Example:** Inventory with 1000 items - only render 20 visible at once
+- **Unity:** Scroll Rect with pooling
+- **Unreal:** List View with virtualization
+
+**Object Pooling:**
+- Reuse UI objects instead of creating/destroying
+- Create pool of 20 list items, reuse as player scrolls
+- Avoids garbage collection spikes (memory allocation lag)
+
+**Level of Detail (LOD) for UI**
+
+Simplify UI at low frame rates - graceful degradation.
+
+**Patterns:**
+- **<60fps:** Reduce particle effects (skill tree sparkles, menu animations)
+- **<30fps:** Disable non-critical animations (bouncing buttons, fades)
+- **<20fps:** Remove decorative elements (background effects, shadows)
+- **Dynamic Adjustment:** Automatically reduce quality when frame rate drops
+
+**Implementation:**
+- Monitor frame rate continuously
+- Disable effects when FPS drops below threshold
+- Re-enable when FPS stable above threshold for 3+ seconds
+
+**Example:**
+- Inventory menu has animated background (particle effects)
+- If FPS <50, disable particle system
+- Menu still functional, just less decorative
+
+**Asset Optimization**
+
+UI textures are often unoptimized - easy performance wins.
+
+**Texture Compression:**
+- **PC/Console:** DXT1/DXT5 (up to 6x compression)
+- **Mobile:** ASTC, ETC2, PVRTC
+- **Lossless:** PNG for UI (but larger file size)
+- **Quality:** High compression acceptable for backgrounds, low for icons (readability)
+
+**Texture Sizes:**
+- **Icons:** 64x64 to 256x256 (rarely need larger)
+- **Backgrounds:** 1024x1024 to 2048x2048
+- **Buttons:** 128x64 to 512x256
+- **Never:** 4096x4096 for small UI element (huge waste)
+
+**Mipmaps:**
+- Generate mipmaps for scaled UI elements
+- Prevents aliasing, improves performance when downscaled
+- Not needed for pixel-perfect UI (native resolution)
+
+**Vector UI (Scalable):**
+- Use vector graphics where possible (crisp at any resolution)
+- **Unity:** TextMeshPro (vector fonts), SVG plugins
+- **Unreal:** Slate vectors, SVG support
+- **Benefits:** Small file size, no resolution limitations
+
+**Overdraw Reduction:**
+
+Overdraw = pixels drawn multiple times (transparency layers).
+
+**Problem:**
+- 10 transparent UI panels stacked = 10x overdraw (GPU draws same pixel 10 times)
+- Mobile GPUs especially sensitive to overdraw
+
+**Solutions:**
+- Reduce transparent overlays (use opaque backgrounds when possible)
+- Minimize UI depth (fewer stacked elements)
+- **Tools:** Unity Frame Debugger (overdraw mode), Unreal shader complexity view
+
+**Example:**
+- Modal with transparent darkened background (50% black overlay)
+- Overlay covers entire screen = full-screen overdraw
+- **Optimization:** Use opaque dark background (80% black, 20% transparency) - still looks good, less overdraw
+
+**Frame Budget**
+
+Allocate specific time budget to UI - enforce performance discipline.
+
+**60fps Game (16.67ms per frame):**
+- **Gameplay:** 13-14ms (80-85%)
+- **UI (HUD):** 0.8-1.5ms (5-10%)
+- **Other:** 1-2ms (audio, physics, etc.)
+
+**30fps Game (33.33ms per frame):**
+- **Gameplay:** 26-28ms (80-85%)
+- **UI (HUD):** 1.5-3ms (5-10%)
+- **Other:** 3-5ms
+
+**Menu Screen (Paused):**
+- UI can use more budget (gameplay paused)
+- Still target <20% frame time (6ms at 30fps)
+- Maintain responsive feel
+
+**Enforcement:**
+- Profile UI regularly (every sprint/milestone)
+- Flag any UI element exceeding budget
+- Optimize or simplify until within budget
+
+
+## Game-Specific UI Patterns
+
+Common UI elements with production-ready specifications.
+
+### HUD Elements
+
+**Health/Stamina Bars**
+
+**Position:**
+- **Bottom-Left:** Common in FPS, action games (near character)
+- **Top-Left:** Alternative, used in some RPGs
+- **Top-Center:** Fighting games (both players side-by-side)
+
+**Style:**
+- **Bar Fill:** Horizontal bar, colored fill left-to-right
+- **Segmented:** Individual chunks (3-5 hits per segment)
+- **Numeric:** "100/100" or "100%" text
+- **Hybrid:** Bar + number
+
+**Colors:**
+- **Health:** Red (universal), green when full (some games)
+- **Stamina:** Yellow, green, or blue (depends on game)
+- **Mana/Energy:** Blue (magic), purple (energy)
+
+**Specifications:**
+```
+Health Bar Example:
+- Size: 200px width, 24px height
+- Position: Bottom-left, 32px margin
+- Background: Dark gray/black (80% opacity)
+- Fill: Red gradient (bright to dark)
+- Border: 2px white/gray outline
+- Text: White, 16px, centered (optional)
+- Animation: Smooth decrease (200ms), instant increase
+- Flash: Red flash when taking damage (100ms)
+```
+
+**Minimap**
+
+**Position:**
+- **Top-Right:** Most common (doesn't obscure center view)
+- **Bottom-Right:** Alternative
+- **Top-Left:** Rare (can conflict with health)
+
+**Size:**
+- **Small:** 10-12% of screen (FPS, action)
+- **Medium:** 15-20% of screen (RPG, exploration)
+- **Large:** 25%+ (strategy, when map is critical)
+
+**Rotation:**
+- **World-Locked:** North always up (easier orientation, used in strategy)
+- **Player-Locked:** Player always center, map rotates (intuitive movement, used in FPS)
+
+**Elements:**
+- **Player Icon:** Distinct, centered (arrow showing facing direction)
+- **Enemies:** Red dots/icons
+- **Allies:** Blue/green dots
+- **Objectives:** Yellow markers
+- **Fog of War:** Gray unexplored areas (strategy games)
+
+**Toggle Zoom:**
+- **Scroll Wheel:** Zoom in/out (PC)
+- **Button Press:** Cycle zoom levels (console)
+- **Levels:** Close (detailed), Medium, Far (overview)
+
+**Objective Markers**
+
+**World-Space Markers:**
+- Icon floating at objective location (3D space)
+- Arrow pointing to objective if off-screen
+- Distance indicator: "350m" text below icon
+
+**Off-Screen Indicators:**
+- Arrow at edge of screen pointing toward objective
+- Fades when close (on-screen)
+- Multiple colors for multiple objectives (red=main, yellow=side)
+
+**Specifications:**
+```
+Objective Marker:
+- Icon: 32x32px (on-screen), 48x48px (close-up)
+- Distance Text: 14px, white with black outline
+- Arrow: 64px, at screen edge, points to objective
+- Color: Yellow (neutral), changes to green when near
+- Fade: Opacity 100% far, 50% close, 0% when reached
+```
+
+**Crosshairs/Reticles**
+
+**Position:** Center screen, exactly (critical for aiming accuracy)
+
+**Types:**
+- **Dot:** Single pixel or small circle (precision rifles)
+- **Cross:** Four lines forming +, with center gap (assault rifles)
+- **Circle:** Circular outline (shotguns, spread weapons)
+- **Dynamic:** Expands when moving, contracts when still (shows accuracy)
+
+**Customization:**
+- Color (player preference)
+- Size (1x, 1.5x, 2x)
+- Opacity (50-100%)
+- Enable/disable (some players prefer no crosshair)
+
+**Hit Feedback:**
+- **On Hit:** Crosshair changes color (white → red, 100ms)
+- **Damage Number:** Damage dealt appears briefly (100ms fade-in, 500ms fade-out)
+- **Audio:** Hit sound (essential feedback)
+
+**Ammo Counter**
+
+**Position:**
+- **Bottom-Right:** Most common (near weapon, doesn't obscure aim)
+- **Bottom-Center:** Alternative (minimalist FPS)
+
+**Format:**
+- **Current / Reserve:** "30 / 120" (current magazine / reserve ammo)
+- **Current Only:** "30" (reserve shown separately or not at all)
+- **Icon + Number:** Bullet icon + number (visual clarity)
+
+**Low Ammo Warning:**
+- **Color Change:** White → red when <30% remaining
+- **Pulsing:** Gentle pulse animation (every 1s)
+- **Audio:** Click sound when magazine empty
+
+**Specifications:**
+```
+Ammo Counter:
+- Size: 48px height text
+- Position: Bottom-right, 32px margin
+- Font: Bold sans-serif, high contrast
+- Color: White (normal), red (low)
+- Format: "30 / 120" (large / small text)
+- Reload Indicator: Circular progress bar (2s animation)
+```
+
+### Menus
+
+**Pause Menu**
+
+**Trigger:**
+- **PC:** ESC key
+- **Console:** Start button
+- **Mobile:** Pause button (top corner)
+
+**Background:**
+- Dim/blur gameplay (50-70% dark overlay)
+- Or pause frame (freeze last frame, apply blur)
+
+**Options (Typical):**
+- Resume (highlighted by default)
+- Settings (audio, video, controls)
+- Save/Load (if applicable)
+- Map (if applicable)
+- Quit to Menu
+- Quit to Desktop (PC only)
+
+**Layout:**
+- Vertical list, centered
+- Large touch targets (64px height minimum)
+- Clear visual hierarchy (Resume most prominent)
+
+**Inventory System**
+
+**Grid Layout:**
+- Items arranged in grid cells (8x8, 10x10, etc.)
+- Each cell: 64x64px to 128x128px
+- Drag-and-drop to move/equip items
+- Hover for tooltip (item stats)
+
+**Sorting Options:**
+- Sort by: Name, Type, Rarity, Weight, Value
+- Dropdown or button strip at top
+- Filter tabs: All, Weapons, Armor, Consumables, Quest
+
+**Equipment Slots:**
+- Visual representation of character (paper doll)
+- Slots: Head, Chest, Legs, Hands, Feet, Weapon, Shield, etc.
+- Drag item to slot to equip
+- Right-click for quick equip (PC)
+
+**Weight/Capacity:**
+- Current weight / max weight: "45 / 100 kg"
+- Progress bar (fill = closer to max)
+- Warning: Red text/bar when overencumbered
+
+**Specifications:**
+```
+Inventory Grid:
+- Cell Size: 96x96px
+- Spacing: 8px between cells
+- Background: Dark semi-transparent
+- Selected: Yellow border (4px)
+- Hover: White border (2px)
+- Tooltip: Appears after 300ms hover
+- Drag: Item follows cursor at 90% opacity
+```
+
+**Skill Trees**
+
+**Visual Progression:**
+- Nodes connected by lines (show prerequisites)
+- Locked nodes: Grayed out (requires previous skill)
+- Unlocked nodes: Bright, colored (can be selected)
+- Purchased nodes: Filled, checkmark icon
+
+**Navigation:**
+- **PC:** Click node to view, click again to purchase
+- **Console:** D-pad or analog stick to navigate, A/X to view, hold to confirm purchase
+- **Zoom:** Scroll wheel (PC) or triggers (console)
+
+**Node Information:**
+- **Title:** Skill name (16px bold)
+- **Icon:** 64x64px visual representation
+- **Description:** What skill does (14px)
+- **Cost:** Skill points required (yellow text, coin icon)
+- **Requirements:** Level or prerequisite skills
+
+**Unlock Animation:**
+- Node glows, particles burst outward (500ms)
+- Line animates connecting to next nodes (300ms)
+- Sound effect (success chime)
+
+**Settings Menu**
+
+**Tabbed Categories:**
+- **Video:** Resolution, quality, VSync, brightness
+- **Audio:** Master, music, SFX, voice volume sliders
+- **Controls:** Key bindings, sensitivity, invert Y-axis
+- **Gameplay:** Difficulty, subtitles, HUD options, language
+
+**Tab Navigation:**
+- **PC:** Click tab or Q/E to cycle
+- **Console:** L1/R1 shoulder buttons to cycle tabs
+
+**Option Types:**
+- **Sliders:** Volume (0-100%), brightness, mouse sensitivity
+- **Dropdowns:** Resolution, quality preset, language
+- **Toggles:** VSync on/off, subtitles on/off
+- **Key Binding:** Click field, press key to rebind (PC)
+
+**Buttons:**
+- **Apply:** Save and apply changes immediately
+- **Save:** Save changes, return to game
+- **Revert:** Undo changes since last save
+- **Default:** Reset all to default values
+
+**Visual Preview:**
+- Resolution change: Show example (1920x1080 vs 2560x1440)
+- Brightness: Show gradient bar with dark → light
+- Audio: Play test sound when adjusting volume
+
+### Feedback Systems
+
+**Hit Markers**
+
+**Visual:**
+- Crosshair briefly changes (white → red, or + to X)
+- Duration: 100ms
+- Position: Center screen (overlays crosshair)
+
+**Critical Hit:**
+- Different visual (larger X, yellow color)
+- Damage number larger/different color (yellow vs white)
+- Sound effect distinct (heavy thunk vs light hit)
+
+**Kill Confirmation:**
+- Special icon (skull, X, etc.) flashes (200ms)
+- Kill feed notification (top-right): "You eliminated PlayerName"
+- Audio: Satisfying impact sound
+
+**Specifications:**
+```
+Hit Marker:
+- Size: 32x32px
+- Color: White (normal), yellow (critical), red (kill)
+- Duration: 100ms (normal), 200ms (critical/kill)
+- Animation: Scale from 0% to 100% (50ms), hold, fade (50ms)
+- Position: Centered on crosshair
+- Audio: Sync with visual (essential)
+```
+
+**XP/Level-Up Notifications**
+
+**XP Gain:**
+- **Position:** Bottom-right corner (doesn't obscure gameplay)
+- **Format:** "+50 XP" (green text, fades in/out)
+- **Duration:** 2 seconds visible
+- **Stacking:** Multiple XP gains add to counter ("+50 XP" → "+75 XP")
+
+**Level-Up:**
+- **Visual:** Full-screen flash (200ms), or corner burst animation
+- **Notification:** "Level Up! Level 15" (large text, 3s duration)
+- **Sound:** Triumphant fanfare (reward audio)
+- **Reward:** Show unlocked skills/items (modal or banner)
+
+**Progress Bar:**
+- Horizontal bar showing XP progress to next level
+- Position: Top of screen (under level number) or bottom corner
+- Fill animation smooth (500ms when gaining XP)
+
+**Loot Notifications**
+
+**Item Acquired:**
+- **Position:** Bottom-right (or top-right, consistent)
+- **Format:** Icon + item name (64px icon, 16px text)
+- **Duration:** 2-3 seconds visible
+- **Queue:** Multiple items stack vertically (up to 5, then scroll)
+
+**Rarity Color-Coding:**
+- **Common:** White/gray
+- **Uncommon:** Green
+- **Rare:** Blue
+- **Epic:** Purple
+- **Legendary:** Orange/gold
+- **Border/glow matches rarity color**
+
+**Loot Explosion (On-Screen):**
+- When opening chest/killing enemy
+- Items shoot out (particle effect)
+- Icons briefly visible in 3D space
+- Collect automatically or by pressing button
+
+**Specifications:**
+```
+Loot Notification:
+- Size: 64x64px icon, 200px width card
+- Background: Semi-transparent dark (80% opacity)
+- Border: Rarity color (4px, glowing)
+- Text: White, 16px, item name
+- Animation: Slide in from right (300ms ease-out)
+- Duration: 2s visible, then fade out (500ms)
+- Audio: Pickup sound (different for rare items)
+```
+
+**Status Effects**
+
+**Icon Display:**
+- Position: Near health bar (clustered)
+- Size: 32x32px icon per effect
+- Max Visible: 5-8 icons (more = scroll or grid)
+
+**Timer:**
+- Circular progress bar around icon (clockwise fill)
+- Or numeric countdown: "5s" below icon
+- Flash/pulse when about to expire (last 3 seconds)
+
+**Color Coding:**
+- **Buffs (Positive):** Green border/glow
+- **Debuffs (Negative):** Red border/glow
+- **Neutral:** Blue or white border
+
+**Tooltip:**
+- Hover (PC) or select (console) to see details
+- Name: "Poison" (16px bold)
+- Description: "Lose 5 HP per second" (14px)
+- Duration: "8 seconds remaining" (14px)
+
+**Stacking:**
+- Multiple stacks of same effect: Show number badge "x3"
+- Or separate icons for each stack (if important)
+
+
+## Anti-Patterns
+
+Common mistakes that harm game UI usability, immersion, or performance.
+
+### Priority 0 (Critical - Never Do)
+
+**1. UI Blocking Gameplay Input:**
+- **Problem:** Menu animation plays, player can't move/shoot during transition (200ms+ input lock)
+- **Impact:** Player feels unresponsive, frustration in action games
+- **Example:** Opening inventory freezes character for 500ms
+- **Fix:** Input should remain active (or gameplay pauses if menu is modal)
+
+**2. No Way to Rebind Controls:**
+- **Problem:** Hardcoded controls, player can't change bindings
+- **Impact:** Accessibility failure, left-handed players, alternative keyboard layouts
+- **Fix:** Full key/button remapping in settings
+
+**3. UI Consuming >20% Frame Time:**
+- **Problem:** Menu open = frame rate drops from 60fps to 40fps (12ms overhead)
+- **Impact:** Feels broken, especially contrasted with smooth gameplay
+- **Fix:** Profile and optimize (batching, disable hidden elements, reduce particles)
+
+**4. Critical Information Hidden:**
+- **Problem:** Health bar auto-hides, player dies without knowing they're low
+- **Impact:** Unfair deaths, frustration
+- **Fix:** Critical info always visible, or reappears when critical (low health)
+
+**5. No Input Prompts for Controller:**
+- **Problem:** Tutorial says "Press E" but player using gamepad
+- **Impact:** Player confused, doesn't know which button to press
+- **Fix:** Dynamic prompts based on current input device
+
+### Priority 1 (High - Avoid)
+
+**6. Cluttered HUD (Too Much Information):**
+- **Problem:** 20+ UI elements on screen simultaneously
+- **Impact:** Visual clutter, hard to focus on gameplay
+- **Fix:** Minimal HUD, contextual display, let players customize
+
+**7. Generic UI (Doesn't Match Game):**
+- **Problem:** Medieval fantasy game with modern blue/gray UI
+- **Impact:** Breaks immersion, feels cheap/lazy
+- **Fix:** Themed UI matching game's aesthetic and era
+
+**8. No Gamepad Support (PC-Only):**
+- **Problem:** Game on Steam but only supports keyboard+mouse
+- **Impact:** Excludes controller players, poor couch gaming
+- **Fix:** Support Xbox/PlayStation controllers, radial menus, proper navigation
+
+**9. Tiny Text on TV (Console Games):**
+- **Problem:** 14px text unreadable from 8 feet away on TV
+- **Impact:** Player can't read quest text, item descriptions
+- **Fix:** 18px+ minimum for console, test on real TV at distance
+
+**10. No Loading Feedback (>2s Loads):**
+- **Problem:** Screen freezes for 5 seconds, no spinner/progress bar
+- **Impact:** Player thinks game crashed
+- **Fix:** Loading spinner, progress bar, or tips/art during loading
+
+### Priority 2 (Medium - Be Cautious)
+
+**11. Over-Animated UI (Distracting):**
+- **Problem:** Every button bounces, sparkles constantly animate, particles everywhere
+- **Impact:** Distracting from gameplay, sensory overload
+- **Fix:** Subtle animations, purposeful not decorative
+
+**12. Diegetic UI Sacrificing Readability:**
+- **Problem:** Health bar on character's armor, but dark lighting makes it invisible
+- **Impact:** Can't see critical info, defeats purpose
+- **Fix:** Increase contrast, add glow/outline, or fallback to overlay
+
+**13. No HUD Toggle Option:**
+- **Problem:** Can't hide UI for screenshots/video
+- **Impact:** Content creators frustrated, limits community engagement
+- **Fix:** Simple button to toggle HUD visibility
+
+**14. Inconsistent Button Mapping:**
+- **Problem:** A=confirm in main menu, B=confirm in sub-menu
+- **Impact:** Muscle memory breaks, accidental actions
+- **Fix:** Consistent A=confirm, B=cancel across all menus
+
+**15. Hover-Only Actions (No Touch Alternative):**
+- **Problem:** Critical button only appears on mouse hover
+- **Impact:** Unusable on mobile/touch devices
+- **Fix:** Always-visible buttons, or tap-to-reveal on touch
+
+
+## Practical Application
+
+Step-by-step workflows for common game UI design scenarios.
+
+### Workflow 1: FPS HUD Design
+
+**Scenario:** Designing minimal HUD for fast-paced first-person shooter.
+
+**Step 1: Identify Essential Information**
+- Health (critical - need to know when low)
+- Ammo (critical - need to know when to reload)
+- Objective marker (important - where to go)
+- Minimap (optional - depends on game)
+- Crosshair (essential - aiming)
+
+**Step 2: Minimal Layout**
+- **Crosshair:** Center screen (dot or small cross)
+- **Health Bar:** Bottom-left, 200x24px, red fill
+- **Ammo Counter:** Bottom-right, large numbers (48px), "30 / 120" format
+- **Objective Marker:** World-space arrow, top of screen when off-screen
+- **Minimap:** Top-right, 12% screen size (optional toggle)
+
+**Step 3: Contextual Display**
+- Health bar appears when taking damage, fades after 5s
+- Ammo counter always visible when weapon drawn
+- Objective marker fades when within 10m (too close)
+
+**Step 4: Hit Markers & Feedback**
+- Hit marker: White X flashes on crosshair (100ms)
+- Critical hit: Yellow X, larger (200ms)
+- Damage numbers: Float upward from hit location (500ms fade)
+
+**Step 5: Performance Test**
+- Profile HUD frame time (should be <1ms)
+- Test at 60fps minimum
+- Optimize: Batch UI elements, use texture atlas for icons
+
+**Step 6: Playtesting**
+- Test with fast movement (can player track info while moving?)
+- Test in dark/bright environments (is UI always readable?)
+- Test with multiple players (feedback needed?)
+
+### Workflow 2: RPG Menu System
+
+**Scenario:** Designing inventory, character stats, and skill tree for fantasy RPG.
+
+**Step 1: Information Architecture**
+- **Tabs:** Inventory, Equipment, Skills, Map, Journal, Settings
+- **Primary:** Inventory (most accessed)
+- **Secondary:** Equipment, Skills
+- **Tertiary:** Map, Journal, Settings
+
+**Step 2: Inventory Grid Design**
+- 10x8 grid (80 slots)
+- Cell size: 96x96px (large enough for detailed icons)
+- Drag-and-drop to rearrange
+- Sorting: Name, Type, Rarity, Value
+- Filter tabs: All, Weapons, Armor, Consumables, Quest Items
+
+**Step 3: Character Equipment (Paper Doll)**
+- Visual character in center (shows equipped gear)
+- Equipment slots around character: Head, Chest, Legs, Hands, Feet, Weapon, Shield, Ring1, Ring2, Amulet
+- Drag item from inventory to slot to equip
+- Tooltip on hover: Item stats, compare with equipped
+
+**Step 4: Skill Tree**
+- Branching tree showing skill progression
+- Nodes: Locked (gray), Unlocked (colored), Purchased (filled)
+- Lines connecting prerequisites
+- Zoom: Scroll wheel to zoom in/out
+- Info panel: Selected skill details (right side)
+
+**Step 5: Themed Aesthetic**
+- **Font:** Ornate serif (Cinzel) for titles, readable sans-serif (Lato) for body
+- **Textures:** Parchment background, leather borders, metal corner decorations
+- **Colors:** Warm browns, golds, burgundy accents
+- **Animations:** Page-turn transitions (300ms), skill unlock glow (500ms)
+
+**Step 6: Gamepad Navigation**
+- D-pad: Navigate grid cells
+- L1/R1: Switch tabs
+- A/X: Select item
+- B/Circle: Cancel
+- Y/Triangle: Quick-use item
+- Radial menu (hold LB): Quick-access to consumables
+
+**Step 7: Performance Optimization**
+- Disable inventory UI when not open (SetActive false)
+- Use object pooling for grid cells (reuse 80 cells)
+- Texture atlas for all item icons (single draw call)
+- Target: <3ms frame time for menu
+
+### Workflow 3: Mobile Game UI
+
+**Scenario:** Designing touch controls and HUD for mobile action game.
+
+**Step 1: Touch Controls Layout**
+- **Left Side:** Virtual joystick (120px diameter, bottom-left corner)
+- **Right Side:** Action buttons (3 buttons, 70px diameter each)
+  - Jump (bottom-right, largest)
+  - Attack (above jump, slightly smaller)
+  - Special (top-right, smallest)
+- **Top:** Pause button (50px, top-right)
+
+**Step 2: Thumb Zone Optimization**
+- All controls in bottom 50% of screen (thumb reachable)
+- Virtual joystick: Semi-transparent (60% opacity), solid on touch
+- Action buttons: Clustered in arc (easy thumb sweep)
+
+**Step 3: HUD Placement**
+- **Top-Left:** Health bar (horizontal, 150x20px)
+- **Top-Right:** Score/coins (next to pause button)
+- **Top-Center:** Timer (if applicable)
+- **Bottom:** Space reserved for controls (no UI here)
+
+**Step 4: Touch Target Sizing**
+- All buttons: 60px+ minimum (larger than standard mobile UI)
+- Spacing: 16px between buttons (prevent accidental taps)
+- Test on smallest supported phone (iPhone SE, small Android)
+
+**Step 5: Performance Optimization (Critical for Mobile)**
+- Use ASTC texture compression (smallest file size)
+- Icon textures: 256x256 max (not 1024x1024)
+- Disable all particle effects on low-end devices
+- Target: 30fps minimum on oldest supported device (2-3 year old phone)
+
+**Step 6: Landscape vs Portrait**
+- **Landscape:** Action games (better control layout)
+- **Portrait:** Casual games (one-handed play)
+- Test UI in chosen orientation, ensure controls reachable
+
+### Workflow 4: Horror Game UI
+
+**Scenario:** Designing minimal, immersive UI for survival horror game.
+
+**Step 1: Minimal HUD Philosophy**
+- **No HUD** during normal gameplay (maximum immersion)
+- **Diegetic Elements Only:** Flashlight for visibility, no health bar
+- **Contextual Display:** UI appears only when absolutely necessary
+
+**Step 2: Health Indication (No Bar)**
+- Visual: Screen desaturation when low health (color fades to gray)
+- Audio: Heartbeat sound increases when injured
+- Breathing: Heavy breathing audio when very low health
+- No numeric value (player infers from visual/audio cues)
+
+**Step 3: Inventory System (Diegetic)**
+- **Pause to Open:** Pause game, open backpack (freeze-frame background)
+- **Grid Inventory:** Limited slots (8-12 items, resource scarcity)
+- **Inspection:** Pick up item, examine in 3D (rotate with mouse)
+- **Combine:** Drag items together to craft (bullets, health kits)
+
+**Step 4: Interaction Prompts (Minimal)**
+- **Prompt Appearance:** "Press E to open" appears only when very close to object (<1m)
+- **Style:** Small, faded text (not bold, not intrusive)
+- **Duration:** Fades in (500ms), stays while in range
+
+**Step 5: Menu Aesthetic (Unsettling)**
+- **Font:** Distressed, handwritten (Creepster, or custom scratchy font)
+- **Colors:** Desaturated, brown/gray tones, red accents (blood)
+- **Animations:** Slow fades (300-500ms), occasional glitch effect
+- **Sound:** Subtle unsettling ambience in menus (creaking, distant sounds)
+
+**Step 6: Performance**
+- Minimal UI = minimal performance impact (<0.5ms)
+- Focus performance budget on atmosphere (lighting, shadows, audio)
+
+
+## Related Skills
+
+**Core Lyra UX Skills:**
+- **`lyra/ux-designer/visual-design-foundations`**: Visual hierarchy, contrast, color theory, typography (apply to game UI, but games have unique constraints like genre aesthetics and TV viewing distance)
+- **`lyra/ux-designer/interaction-design-patterns`**: Button states, touch targets (44x44pt iOS, 48x48dp Android, 60x60px games), feedback timing, animations (games require faster feedback <100ms for responsive feel)
+- **`lyra/ux-designer/accessibility-and-inclusive-design`**: Colorblind modes, text sizing, control remapping, subtitle support (critical for games, often legally required)
+- **`lyra/ux-designer/information-architecture`**: Menu structure, navigation flow (games have complex nested menus - inventory, skills, settings - need clear hierarchy)
+
+**Platform Skills:**
+- **`lyra/ux-designer/mobile-design-patterns`**: Touch controls, thumb zones, on-screen controls (mobile games overlap with mobile app patterns but with game-specific needs like virtual joysticks)
+- **`lyra/ux-designer/desktop-software-design`**: Keyboard shortcuts, hotkeys (PC games use extensive keyboard shortcuts like MMO hotbars 1-9, modifier keys)
+
+**Cross-Faction:**
+- **`muna/technical-writer/clarity-and-style`**: UI copy, error messages, tutorial text (games need concise, flavorful text that fits genre and doesn't break immersion)
+- **`ordis/security-architect/secure-authentication-patterns`**: Account systems, login flows (multiplayer games need secure authentication without disrupting game experience)
+
+
+## Additional Resources
+
+**Game UI Design References:**
+- **GDC Talks:** Game Developers Conference UI/UX talks (YouTube: search "GDC UI design")
+- **Gamasutra:** Articles on game UI patterns, case studies
+- **Game UI Database:** gameuidatabase.com (screenshots of game UIs by genre)
+
+**Engine Documentation:**
+- **Unity UI (uGUI):** docs.unity3d.com (Canvas, anchors, event system)
+- **Unity TextMeshPro:** Vector fonts, better than legacy text
+- **Unreal UMG:** docs.unrealengine.com (Widget blueprints, animations)
+- **Unreal Slate:** Low-level UI framework (for editor/engine UI)
+
+**Performance Profiling:**
+- **Unity Profiler:** Analyze CPU/GPU, UI draw calls, frame time
+- **Unreal Insights:** Frame analysis, rendering breakdown
+- **RenderDoc:** Frame capture, inspect draw calls, shaders
+- **PIX (Windows/Xbox):** Microsoft's GPU profiler
+
+**Input Standards:**
+- **Xbox Controller:** docs.microsoft.com (button mapping, guidelines)
+- **PlayStation Controller:** developer.playstation.com (button conventions)
+- **Steam Input:** docs.steampowered.com (controller API, supports all controllers)
+- **Touch Standards:** 60x60px minimum for game controls (larger than 44-48px mobile UI)
+
+**Accessibility Standards:**
+- **Game Accessibility Guidelines:** gameaccessibilityguidelines.com (free, comprehensive)
+- **Xbox Accessibility:** xbox.com/accessibility (guidelines, best practices)
+- **CVAA (US Law):** Advanced communications features must be accessible (multiplayer chat, menus)
+- **WCAG 2.1:** Apply to game UI text (contrast 4.5:1, resizable text)
+
+**Books:**
+- **"The Design of Everyday Things"** by Don Norman (general design principles, affordances)
+- **"Game UI Discoveries"** by Heck Media (game UI screenshots, pattern library)
+- **"Game Feel"** by Steve Swink (feedback, responsiveness, juice in games)
+- **"Don't Make Me Think"** by Steve Krug (usability principles, apply to game menus)
+
+**Example Games to Study:**
+- **HUD Design:** Halo (minimalist FPS), The Division (diegetic AR), God of War (minimal one-take camera)
+- **Menu Systems:** The Witcher 3 (RPG inventory), Destiny 2 (live-service menus), Civilization VI (strategy UI)
+- **Mobile Controls:** PUBG Mobile (touch controls), Call of Duty Mobile (layout customization)
+- **Accessibility:** The Last of Us Part II (extensive accessibility options, industry-leading)
diff --git a/skills/using-ux-designer/information-architecture.md b/skills/using-ux-designer/information-architecture.md
new file mode 100644
index 0000000..dd38064
--- /dev/null
+++ b/skills/using-ux-designer/information-architecture.md
@@ -0,0 +1,834 @@
+
+# Information Architecture
+
+## Overview
+
+This skill provides a systematic approach to organizing content and designing navigation systems. Use when users can't find features, navigation feels confusing, or content needs structural organization.
+
+**Core Principle**: Good IA matches users' mental models and provides multiple paths to content with clear information scent.
+
+## When to Use
+
+Load this skill when:
+- Users complain "I can't find [feature]"
+- Navigation structure needs design or reorganization
+- Content organization is unclear or inconsistent
+- Designing site maps, menus, or navigation systems
+- User requests mention: "navigation", "menu", "structure", "organize", "findability"
+
+**Don't use for**: Visual styling (use visual-design-foundations), interaction mechanics (use interaction-design-patterns)
+
+
+## The Navigation & Discoverability Model
+
+A systematic 4-layer framework for evaluating and designing information architecture:
+
+**Layer 1: MENTAL MODELS** - Does structure match how users think?
+**Layer 2: NAVIGATION SYSTEMS** - Are there multiple paths to content?
+**Layer 3: INFORMATION SCENT** - Do labels lead users to their goal?
+**Layer 4: DISCOVERABILITY** - Can users find features beyond the basics?
+
+Evaluate each layer systematically to identify IA gaps.
+
+
+## Layer 1: Mental Models
+
+**Purpose:** Align information structure with users' existing mental models
+
+### Evaluation Questions
+
+- Does the IA match how users think about this domain?
+- Are we using terminology users understand?
+- Would users expect to find X under category Y?
+- Does the structure match users' tasks and goals?
+- Are we organizing by internal company structure (BAD) or user needs (GOOD)?
+
+### Research Methods
+
+**Card Sorting (Open)**
+- Give users cards with content/features
+- Ask them to group cards into categories they create
+- Reveals natural mental model organization
+- Use for: New IA, understanding user categories
+
+**Card Sorting (Closed)**
+- Give users cards and predefined categories
+- Ask them to place cards in categories
+- Validates existing IA structure
+- Use for: Testing proposed navigation
+
+**Tree Testing**
+- Give users IA tree (text-only, no visual design)
+- Ask them to find specific items
+- Measures findability without visual interference
+- Use for: Validating IA before visual design
+
+**Mental Model Diagrams**
+- Map user's understanding of domain (Indi Young method)
+- Compare to organization's mental model
+- Identify gaps between user expectations and implementation
+- Use for: Deep understanding, strategy
+
+### Patterns
+
+**Task-Based Organization**
+- Structure around what users do, not what you sell
+- Example: "Send Money" not "Products > Wire Transfer"
+- Users think in goals, not features
+
+**Domain-Appropriate Terminology**
+- Use industry terms users know (not internal jargon)
+- Example: "Shopping Cart" not "Basket" (e-commerce convention)
+- Test terminology with card sorting
+
+**Flat-ish Hierarchy**
+- Aim for 3-5 levels deep maximum
+- Broad (5-9 top-level categories) > Deep (3 categories, 10 levels)
+- Users struggle with navigation deeper than 3-4 clicks
+
+**Mutually Exclusive Categories**
+- Each item belongs in one obvious place
+- Avoid: "Accessories" and "Cables" (cables are accessories)
+- Reduces confusion, speeds navigation
+
+### Anti-Patterns
+
+**Organized by Internal Structure**
+- "About Us > Divisions > Division 3 > Services"
+- Users don't care about org chart
+- Organize by user needs, not company hierarchy
+
+**Jargon Users Don't Understand**
+- Internal product names ("Project Phoenix")
+- Acronyms without context ("SDLC Dashboard")
+- Test labels with users unfamiliar with domain
+
+**Categories That Overlap**
+- Item could reasonably go in 2+ categories
+- Users waste time checking multiple places
+- Forces arbitrary decisions
+
+**Too Many Top-Level Categories**
+- 15+ menu items = overwhelming
+- Users can't hold that many options in memory
+- Chunk into 5-9 logical groups
+
+### Practical Application
+
+**Step 1:** Conduct card sorting with 15-20 users
+- Open card sort to discover categories
+- Closed card sort to validate proposed structure
+
+**Step 2:** Analyze sorting patterns
+- What categories did users create?
+- What labels did they use?
+- Where was agreement? Disagreement?
+
+**Step 3:** Map to mental model
+- Create IA structure matching user categories
+- Use user terminology for labels
+- Keep hierarchy flat (3-4 levels max)
+
+**Step 4:** Validate with tree testing
+- Test findability before implementing
+- Iterate based on task success rates
+
+
+## Layer 2: Navigation Systems
+
+**Purpose:** Provide multiple paths to content so users can navigate their preferred way
+
+### Evaluation Questions
+
+- Can users reach content via global navigation?
+- Is search available and functional?
+- Are contextual links provided within content?
+- Can users get back to where they were (breadcrumbs)?
+- Are there shortcuts for common tasks?
+- Is navigation consistent across screens?
+
+### Navigation Types
+
+**Global Navigation**
+- Persistent across entire site/app (top bar, sidebar)
+- Contains primary categories (5-7 items)
+- Always visible or easily accessible
+- Example: Main menu, app navigation drawer
+
+**Local Navigation**
+- Specific to current section (sub-menu)
+- Shows related pages within category
+- Example: Sidebar in documentation, tabs within settings
+
+**Contextual Navigation**
+- Links embedded in content
+- "See also", "Related articles", inline links
+- Helps users discover related content
+
+**Search**
+- Direct path to specific content
+- Essential when >50 pages/items
+- Requires: autocomplete, filters, clear results
+
+**Utility Navigation**
+- Secondary functions (login, settings, help)
+- Usually top-right corner or under menu
+- Less prominent than global nav
+
+**Breadcrumbs**
+- Show path from home to current page
+- Allow users to backtrack easily
+- Example: Home > Products > Electronics > Laptops
+
+### Patterns
+
+**3-Click Rule (Modified)**
+- Any content reachable within 3 clicks
+- More accurately: 3 CLEAR clicks (with good information scent)
+- Better to have 5 obvious clicks than 2 confusing ones
+
+**Consistent Navigation Placement**
+- Same location across all pages
+- Same labels, same order
+- Users learn once, applies everywhere
+
+**Primary + Secondary Actions**
+- One primary path (main menu, prominent)
+- Secondary paths (search, contextual links)
+- Redundancy helps different user styles
+
+**Mobile Navigation Patterns**
+- Bottom tab bar (iOS standard, 3-5 items)
+- Hamburger menu (for 6+ items)
+- Bottom sheet menus (Android)
+- Prioritize: Most important actions at bottom (thumb zone)
+
+**Web Navigation Patterns**
+- Horizontal top nav (desktop)
+- Sticky header (nav always accessible)
+- Mega-menus (for complex sites, show 2+ levels)
+- Sidebar nav (for deep hierarchies)
+
+**Desktop Navigation Patterns**
+- Menu bar (File, Edit, View, Help)
+- Toolbar (icon buttons for common actions)
+- Keyboard shortcuts (Cmd+N, Cmd+O, Cmd+S)
+
+### Anti-Patterns
+
+**Single Path to Content**
+- Only one way to reach feature (menu > submenu > page)
+- Users with different mental models get lost
+- Provide: Global nav + search + contextual links
+
+**Mega-Menu Overload**
+- Showing 50+ links in dropdown
+- Overwhelming, hard to scan
+- Chunk into logical groups, use hierarchy
+
+**Mystery Meat Navigation**
+- Icons without labels
+- Users guess what icon means
+- Use: Icon + label (or tooltip on hover)
+
+**Inconsistent Navigation**
+- Menu moves or changes on different pages
+- Different labels for same destination
+- Forces users to relearn on each page
+
+**Buried Search**
+- Search hidden in menu or obscure icon
+- Essential for large sites (>50 pages)
+- Make prominent: Top-right is convention
+
+**No Way Back**
+- Dead-end pages with no navigation
+- Modal with no close/back button
+- Always provide: Back, breadcrumbs, or close
+
+### Practical Application
+
+**Step 1:** Audit all navigation paths
+- List all ways to reach each major page/feature
+- Identify single-path content (problem)
+
+**Step 2:** Add redundant paths
+- Global nav for primary content
+- Search for direct access
+- Contextual links within content
+- Breadcrumbs for backtracking
+
+**Step 3:** Test with first-click tests
+- Show users page/screen
+- Ask "Where would you click to [task]?"
+- Measure if first click is correct path
+
+**Step 4:** Verify consistency
+- Same navigation on all pages
+- Same labels across contexts
+- Test on 10+ different pages
+
+
+## Layer 3: Information Scent
+
+**Purpose:** Labels and clues accurately predict what users will find
+
+### Evaluation Questions
+
+- Do link labels accurately describe destination?
+- Are category names specific (not vague)?
+- Would users know where to look for their task?
+- Do labels use user terminology?
+- Are categories mutually exclusive?
+- Does "scent" get stronger as user gets closer (progressive refinement)?
+
+### Core Concept: Scent Strength
+
+**Strong Scent**
+- Label clearly predicts content
+- Example: "Download Receipt" → PDF receipt downloads
+- Users confident they're on right path
+
+**Weak Scent**
+- Label vague, ambiguous
+- Example: "Resources" → Could be anything
+- Users unsure if this is right path
+
+**False Scent**
+- Label misleads users
+- Example: "Settings" → Only shows account info, not all settings
+- Users frustrated, waste time
+
+### Patterns
+
+**Specific, Action-Oriented Labels**
+- Good: "Download Invoice", "Change Password", "View Order History"
+- Bad: "Account", "Options", "More"
+- Users scan for action verbs matching their goal
+
+**Front-Loading Keywords**
+- Good: "Projects > Project Alpha > Documents"
+- Bad: "All > Alpha > Files and Documents for Projects"
+- Users scan left-to-right, see important words first
+
+**Descriptive Category Names**
+- Good: "User Settings", "Billing Information", "Security Preferences"
+- Bad: "Preferences", "Options", "More"
+- Specific > generic
+
+**Progressive Refinement**
+- Each level narrows scope
+- Example: Electronics > Laptops > Gaming Laptops > 17-inch Gaming Laptops
+- Scent gets stronger at each level
+
+**Preview/Descriptions for Ambiguous Items**
+- When label can't be specific, add description
+- Example: "Advanced" (label) + "For power users: API keys, webhooks, custom scripts" (description)
+- Clarifies before user clicks
+
+**Avoid Overlapping Categories**
+- Bad: "Accessories" + "Cables" (cables are accessories)
+- Users check both, waste time
+- Make mutually exclusive or nest hierarchically
+
+### Anti-Patterns
+
+**Vague Labels**
+- "Stuff", "Other", "More", "Miscellaneous"
+- Tells users nothing about content
+- If necessary, add description
+
+**Marketing Speak**
+- "Solutions", "Innovative Tools", "Next-Gen Platform"
+- Sounds impressive, means nothing
+- Use plain language users understand
+
+**Icon-Only Labels (No Text)**
+- Users guess what icon means
+- Different cultures interpret icons differently
+- Use icon + text (or tooltip)
+
+**Jargon Users Don't Know**
+- Internal product names ("Project Phoenix Dashboard")
+- Industry acronyms ("SDLC", "KPIs") without context
+- Test with users unfamiliar with domain
+
+**Same Label for Different Things**
+- "Settings" in menu → All settings
+- "Settings" in modal → Only this feature's settings
+- Creates confusion, breaks trust
+
+**Label Doesn't Match Content**
+- Link says "View Profile", page shows "Account Settings"
+- Breaks trust, wastes time
+- Ensure label = page title/content
+
+### Practical Application
+
+**Step 1:** Audit all labels
+- List every menu item, button, link
+- Ask: "Does this label clearly predict destination?"
+
+**Step 2:** Test with users (5-second test)
+- Show label for 5 seconds
+- Ask: "What do you expect to find here?"
+- Compare to actual content
+
+**Step 3:** Refine labels
+- Replace vague with specific
+- Front-load keywords
+- Use user terminology (from card sorting)
+
+**Step 4:** Validate with tree testing
+- Users navigate text-only IA tree
+- Measure task success rate
+- Iterate on failing labels
+
+
+## Layer 4: Discoverability
+
+**Purpose:** Users can find features beyond the basics, progressively
+
+### Evaluation Questions
+
+- Can users discover advanced features?
+- Is there progressive disclosure (simple first, advanced later)?
+- Are there tooltips/contextual help?
+- Do features have logical placement (near related functionality)?
+- Is there onboarding for core features?
+- Can users learn without documentation?
+
+### Patterns
+
+**Progressive Disclosure**
+- Show basics by default
+- Hide advanced features behind "Advanced" button/section
+- Example: Simple form with 3 fields + "More options" reveals 10 more
+- Prevents overwhelming new users, empowers advanced users
+
+**Onboarding for Core Features**
+- First-time users see guided tour
+- Highlights 3-5 essential features
+- Optional skip (don't force)
+- Example: "Here's how to create your first project"
+
+**Contextual Help**
+- "?" icon next to complex fields
+- Tooltips on hover (desktop) or tap (mobile)
+- Inline explanations (not separate docs)
+- Example: "What's this?" next to "API Key"
+
+**Logical Feature Placement**
+- Related features grouped together
+- Example: "Export as PDF" near "Print"
+- Users discover by exploring related functionality
+
+**Empty States with Guidance**
+- When no content exists, show how to create content
+- Example: "No projects yet. Create your first project."
+- Provides clear next action
+
+**Search for Hidden Features**
+- Power users use search to find advanced features
+- Ensure all features indexed by search
+- Example: Search for "API" finds API settings
+
+**"Learn More" Links**
+- Link to docs/help for complex features
+- Non-intrusive (users opt-in)
+- Example: "Learn about webhooks" link in webhook settings
+
+**Feature Announcements**
+- Toast/modal when new feature ships
+- "Dismiss" option (one-time)
+- Example: "New: Dark mode in settings"
+
+### Anti-Patterns
+
+**Power Features Buried 5+ Levels Deep**
+- Users never discover them
+- Balance: Progressive disclosure vs discoverability
+- Solution: Provide search, contextual hints
+
+**No Onboarding (Users Never Discover Features)**
+- Blank screen with no guidance
+- Users churn because they don't understand value
+- Solution: Quick tour highlighting core features
+
+**Everything Exposed at Once (Overwhelming)**
+- 50 buttons on screen
+- Analysis paralysis, cognitive overload
+- Solution: Progressive disclosure, hide advanced
+
+**No Contextual Help**
+- Complex features with no explanation
+- Users trial-and-error or leave
+- Solution: Tooltips, inline help, "?" icons
+
+**Inconsistent Placement**
+- "Settings" in different places on different screens
+- Users can't predict where to look
+- Solution: Consistent placement (top-right for settings is convention)
+
+**Dead-End Experiences**
+- Users reach feature but don't know what to do
+- No placeholder text, no examples, no guidance
+- Solution: Empty states with next steps
+
+**Features Without Labels**
+- Icon-only buttons (users guess)
+- Hover-only discoverability (fails on mobile)
+- Solution: Icons + labels or clear tooltips
+
+### Practical Application
+
+**Step 1:** Identify core vs advanced features
+- Core: 80% of users need these
+- Advanced: 20% of users, power features
+
+**Step 2:** Design progressive disclosure
+- Core features: Visible by default
+- Advanced features: Behind "Advanced" or "More"
+- Ensure advanced still discoverable (search, contextual hints)
+
+**Step 3:** Add contextual help
+- Complex fields get tooltips
+- First-time experience gets onboarding
+- Empty states explain next actions
+
+**Step 4:** Test with new users
+- Give users tasks (don't tell them how)
+- Observe: Do they discover features?
+- Iterate: Add hints where users get stuck
+
+
+## User Journey Integration
+
+Information architecture must support complete user journeys:
+
+### Journey Mapping for IA
+
+**Step 1: Map Primary User Journeys**
+- List top 5-10 tasks users do
+- Example: "Find product", "Check order status", "Contact support"
+
+**Step 2: Identify Touchpoints**
+- Where does user enter? (Google, home page, deep link)
+- What pages do they visit? (in what order)
+- Where do they exit? (goal complete or frustrated)
+
+**Step 3: Evaluate IA Against Journeys**
+- Can users complete journey with current IA?
+- Where do they get stuck? (missing scent, dead ends)
+- Are there unnecessary steps? (simplify)
+
+**Step 4: Optimize IA for Common Journeys**
+- Put common endpoints in global nav
+- Add shortcuts for frequent paths
+- Remove obstacles (reduce clicks, clarify labels)
+
+### Example: E-Commerce Journey
+
+**Journey:** Find and purchase product
+
+**Touchpoints:**
+1. Enter via Google search → Product page (deep link)
+2. View product details
+3. Add to cart
+4. View cart
+5. Checkout
+6. Confirmation
+
+**IA Optimizations:**
+- Breadcrumbs on product page (Layer 2: Navigation)
+- Related products (Layer 2: Contextual nav)
+- Clear "Add to Cart" button (Layer 3: Information scent)
+- Persistent cart icon (Layer 4: Discoverability)
+- Guest checkout option (Layer 1: Mental model - not everyone wants account)
+
+
+## Cross-Platform Navigation Considerations
+
+Navigation patterns adapt to platform context:
+
+### Mobile Navigation
+
+**Constraints:**
+- Small screen (375px width typical)
+- Thumb-based interaction
+- One screen at a time (no multi-window)
+
+**Patterns:**
+- Bottom tab bar (3-5 items, iOS standard)
+- Hamburger menu (for 6+ items)
+- Bottom sheet menus (Android)
+- Swipe gestures (swipe back, swipe between tabs)
+
+**Prioritization:**
+- Most important actions at bottom (thumb zone)
+- Secondary actions in hamburger menu
+- Search prominent (magnifying glass icon)
+
+**Reference:** See `mobile-design-patterns` for platform specifics
+
+### Web Application Navigation
+
+**Affordances:**
+- Large screen (1024px+ width)
+- Keyboard + mouse
+- Multi-tab workflows
+
+**Patterns:**
+- Horizontal top nav (persistent)
+- Sidebar nav (for deep hierarchies)
+- Breadcrumbs (show location in hierarchy)
+- Mega-menus (reveal 2+ levels on hover)
+- Keyboard shortcuts (Cmd+K command palette)
+
+**Considerations:**
+- Responsive: Collapses to mobile patterns on narrow screens
+- Dense information: Can show more hierarchy on desktop
+
+**Reference:** See `web-application-design` for responsive patterns
+
+### Desktop Software Navigation
+
+**Affordances:**
+- Multi-window support
+- Extensive keyboard shortcuts
+- Menu bars
+
+**Patterns:**
+- Menu bar (File, Edit, View, Help)
+- Toolbars (icon buttons, customizable)
+- Panels/palettes (floating or docked)
+- Context menus (right-click)
+
+**Considerations:**
+- Keyboard-first: Every menu item has shortcut
+- Customization: Users rearrange toolbars/panels
+
+**Reference:** See `desktop-software-design` for window management
+
+### Game UI Navigation
+
+**Constraints:**
+- Gamepad/controller input (limited buttons)
+- Immersion (minimize UI)
+- Performance (UI can't tank frame rate)
+
+**Patterns:**
+- Radial menus (analog stick selection)
+- D-pad for menus (up/down/left/right)
+- Pause menu (Start button)
+- Context-sensitive prompts ("Press X to interact")
+
+**Considerations:**
+- Minimize navigation: Players want to play, not navigate menus
+- Contextual: Show only relevant options for current situation
+
+**Reference:** See `game-ui-design` for immersion vs visibility tradeoffs
+
+
+## Navigation Pattern Library
+
+Common navigation solutions with rationale:
+
+### Pattern: Bottom Tab Bar (Mobile)
+
+**Use When:**
+- Mobile app with 3-5 primary sections
+- Users frequently switch between sections
+- Following iOS Human Interface Guidelines
+
+**Structure:**
+- 3-5 tabs at bottom
+- Always visible
+- Icon + label (or icon only if space constrained)
+- Active tab highlighted
+
+**Example:** Instagram (Home, Search, Create, Reels, Profile)
+
+
+### Pattern: Hamburger Menu (Mobile)
+
+**Use When:**
+- 6+ navigation items (too many for tabs)
+- Secondary functions (not primary navigation)
+- Android or web mobile
+
+**Structure:**
+- ☰ icon (top-left or top-right)
+- Slides out drawer with nav items
+- Overlay or push content
+
+**Warning:** Reduces discoverability ("out of sight, out of mind")
+
+
+### Pattern: Breadcrumbs (Web/Desktop)
+
+**Use When:**
+- Deep hierarchies (3+ levels)
+- Users need to understand location
+- E-commerce, documentation, file systems
+
+**Structure:**
+- Home > Category > Subcategory > Current Page
+- Each level clickable (except current)
+- Shows path from root to current
+
+**Example:** Amazon product pages
+
+
+### Pattern: Mega-Menu (Web)
+
+**Use When:**
+- Complex site with many categories
+- Need to show 2-3 levels of hierarchy at once
+- Desktop web (requires hover)
+
+**Structure:**
+- Hover top nav item
+- Reveals large dropdown with subcategories
+- Grid or column layout
+
+**Warning:** Doesn't work on mobile (no hover), requires desktop
+
+
+### Pattern: Sidebar Navigation (Web/Desktop)
+
+**Use When:**
+- Deep hierarchies (documentation, admin panels)
+- Always need to show navigation context
+- Desktop-first or responsive web
+
+**Structure:**
+- Left sidebar (persistent or collapsible)
+- Hierarchical tree (expand/collapse sections)
+- Active page highlighted
+
+**Example:** Documentation sites, admin dashboards
+
+
+### Pattern: Command Palette (Web/Desktop)
+
+**Use When:**
+- Power users need fast access to all commands
+- Many features (50+ actions)
+- Keyboard-first workflows
+
+**Structure:**
+- Keyboard shortcut (Cmd+K common)
+- Fuzzy search all actions
+- Jump to any page/feature instantly
+
+**Example:** VS Code, Slack, Figma
+
+
+## Red Flags & Anti-Patterns
+
+### Red Flag: Users Can't Find Primary Features
+
+**Symptom:** Support requests "Where is [feature]?"
+
+**Root Cause:** Poor information scent or buried navigation
+
+**Fix:**
+- Audit Layer 3 (Information Scent): Are labels clear?
+- Add to global navigation (Layer 2)
+- Provide search (Layer 2)
+
+
+### Red Flag: Navigation Inconsistent Across Screens
+
+**Symptom:** Menu changes or moves on different pages
+
+**Root Cause:** Lack of navigation system standards
+
+**Fix:**
+- Define persistent global navigation
+- Same placement, same labels everywhere
+- Test on 10+ different screens
+
+
+### Red Flag: One Way to Reach Content
+
+**Symptom:** Users lost if they don't know exact path
+
+**Root Cause:** Single navigation path (Layer 2 failure)
+
+**Fix:**
+- Add redundant paths (global nav + search + contextual links)
+- Provide breadcrumbs for backtracking
+- Test with users who enter via deep links
+
+
+### Red Flag: Users Complete Task But Say "That Was Confusing"
+
+**Symptom:** Low satisfaction despite task completion
+
+**Root Cause:** Weak information scent (Layer 3) - users succeeded through trial-and-error
+
+**Fix:**
+- Improve label specificity
+- Add descriptions to ambiguous categories
+- Test with 5-second test (label → expected content)
+
+
+### Red Flag: Power Users Can't Find Advanced Features
+
+**Symptom:** "Does this have [feature]?" (feature exists but hidden)
+
+**Root Cause:** Poor discoverability (Layer 4)
+
+**Fix:**
+- Add search (all features indexed)
+- Contextual hints ("Looking for advanced options? Click here")
+- Feature announcements when new features ship
+
+
+### Red Flag: New Users Overwhelmed, Churn Quickly
+
+**Symptom:** High bounce rate, low activation
+
+**Root Cause:** No progressive disclosure, everything shown at once
+
+**Fix:**
+- Hide advanced features behind "Advanced" section
+- Add onboarding (highlight core features)
+- Empty states with guidance
+
+
+### Red Flag: Users Click Wrong Category, Backtrack Repeatedly
+
+**Symptom:** Analytics show high back-button usage, category exploration
+
+**Root Cause:** Labels don't match user mental model (Layer 1) or weak scent (Layer 3)
+
+**Fix:**
+- Card sorting to understand user categories
+- Relabel based on user terminology
+- Tree testing to validate
+
+
+## Related Skills
+
+**Cross-references to other Lyra skills:**
+
+- `lyra/ux-designer/user-research-and-validation` - Card sorting, tree testing, mental model research methods for IA validation
+- `lyra/ux-designer/interaction-design-patterns` - Navigation interactions (menus, dropdowns, tabs) and micro-interactions for nav elements
+- `lyra/ux-designer/visual-design-foundations` - Visual hierarchy to emphasize navigation, typography for readable labels
+- `lyra/ux-designer/accessibility-and-inclusive-design` - Keyboard navigation, screen reader compatibility for nav systems
+- `lyra/ux-designer/ux-fundamentals` - Core IA principles and terminology
+
+**Platform-specific IA:**
+
+- `lyra/ux-designer/mobile-design-patterns` - Mobile navigation patterns (bottom tabs, hamburger menus, gestures)
+- `lyra/ux-designer/web-application-design` - Complex web nav systems (mega-menus, breadcrumbs, responsive patterns)
+- `lyra/ux-designer/desktop-software-design` - Desktop navigation (menu bars, toolbars, keyboard shortcuts)
+- `lyra/ux-designer/game-ui-design` - Game navigation (radial menus, contextual prompts, minimal UI)
+
+**Cross-faction references:**
+
+- `muna/technical-writer/documentation-structure` - IA for documentation sites (organizing docs for findability)
+- `muna/technical-writer/clarity-and-style` - Writing clear labels and navigation copy
diff --git a/skills/using-ux-designer/interaction-design-patterns.md b/skills/using-ux-designer/interaction-design-patterns.md
new file mode 100644
index 0000000..3f1fa5d
--- /dev/null
+++ b/skills/using-ux-designer/interaction-design-patterns.md
@@ -0,0 +1,1132 @@
+
+# Interaction Design Patterns
+
+## Overview
+
+This skill provides **The Interaction Clarity Framework**, a systematic 5-dimension methodology for designing clear, responsive, and comfortable user interactions. Use this when evaluating or designing interactive elements, feedback systems, button states, animations, or touch-based interfaces.
+
+**Core Principle**: Users should never wonder if something is interactive, whether their action registered, or what state the system is in. Clear interactions build trust and efficiency.
+
+## When to Use
+
+Load this skill when:
+- Designing button states, touch targets, or interactive elements
+- User mentions: "feedback", "loading states", "micro-interactions", "animations"
+- Evaluating interaction clarity ("Does this feel responsive?")
+- Specifying interaction behaviors (hover, active, disabled states)
+- Designing gesture-based interfaces (swipe, tap, long-press)
+- Touch target sizing issues (too small, accidental taps)
+- Creating animations or transitions
+- Defining system feedback patterns
+
+**Don't use for**: Visual hierarchy alone (use visual-design-foundations), navigation structure (use information-architecture)
+
+
+## The Interaction Clarity Framework
+
+A systematic 5-dimension evaluation model for interaction design:
+
+1. **AFFORDANCES** - Users understand what's interactive
+2. **FEEDBACK** - System responds to actions (<100ms)
+3. **MICRO-INTERACTIONS** - Purposeful animations (150-300ms)
+4. **STATE CHANGES** - Current state is visually distinct
+5. **TOUCH TARGETS & GESTURES** - Physically comfortable (44x44pt+)
+
+
+## Dimension 1: AFFORDANCES
+
+**Purpose:** Make interactive elements obvious and discoverable
+
+### Evaluation Questions
+
+- Can users immediately identify what's clickable/tappable?
+- Do interactive elements look different from static content?
+- Are platform conventions followed (links colored, buttons raised)?
+- Does the cursor change on hover (desktop)?
+- Do elements have visual weight appropriate to their interactivity?
+
+### Patterns (Good Examples)
+
+**Primary Buttons:**
+- Visual weight (filled background, contrasting color)
+- Subtle shadow or border for depth
+- Clear label with action verb ("Save", "Submit", "Continue")
+- Adequate padding (12-16px horizontal, 8-12px vertical)
+- Hover state shows interactivity (brightness change, shadow increase)
+
+**Secondary Buttons:**
+- Less visual weight than primary (outlined vs filled)
+- Still clearly interactive (not flat text)
+- Same size targets as primary (even if visually lighter)
+
+**Links:**
+- Colored text (blue standard, or brand color)
+- Underline on hover or persistent
+- Cursor changes to pointer
+- Distinct from body text (color and/or weight)
+
+**Interactive Icons:**
+- Consistent sizing (24px minimum for touch)
+- Hover/focus states (background circle, color change)
+- Tooltips on hover (desktop) or long-press (mobile)
+- Clear visual boundary (not floating in white space)
+
+**Form Fields:**
+- Border or background distinguishes from static text
+- Focus state with border color change
+- Placeholder text lighter than input text
+- Label positioned clearly (above or floating)
+
+### Anti-Patterns (Problematic Examples)
+
+**Flat Text Buttons:**
+- Plain text with no visual weight
+- No hover state or indication
+- Looks like static label
+- Users miss the interactive opportunity
+
+**False Affordances:**
+- Static elements styled like buttons (shadows, borders)
+- Decorative elements that look clickable
+- Creates frustration when clicks don't work
+
+**Mystery Interactions:**
+- Icons without labels or tooltips
+- No indication of hover/focus
+- Users must guess what happens
+
+**Inconsistent Affordances:**
+- Some buttons filled, some text-only with no pattern
+- Links sometimes underlined, sometimes not
+- Creates cognitive load as users relearn each screen
+
+### Platform-Specific Affordances
+
+**Web (Desktop):**
+- Cursor changes (pointer for interactive, default for static)
+- Hover states reveal interactivity
+- Underlined links standard
+
+**Mobile (iOS/Android):**
+- No hover states (touch-only)
+- Visual affordances must be permanent (not hover-dependent)
+- Platform conventions (iOS segmented controls, Android FABs)
+- Haptic feedback option (tactile confirmation)
+
+**Desktop Software:**
+- Menu items highlight on hover
+- Keyboard focus indicators (2px outline)
+- Right-click context menus (subtle cue on hover)
+
+**Games:**
+- Cursor changes for interactive objects
+- Outline glow on hover (world objects)
+- Button prompts for gamepad ("Press A to interact")
+
+
+## Dimension 2: FEEDBACK
+
+**Purpose:** Confirm user actions with immediate, appropriate responses
+
+### Evaluation Questions
+
+- Does the user see feedback within 100ms of action?
+- Is loading state shown for operations >1 second?
+- Are errors explained clearly with actionable fixes?
+- Is success confirmed explicitly?
+- Does feedback match action magnitude (subtle for minor, prominent for major)?
+
+### Feedback Timing Guidelines
+
+**Immediate (<100ms):**
+- Button press (depress visual)
+- Toggle switch flip
+- Checkbox check/uncheck
+- Text input (character appears)
+- Drag start (element lifts)
+
+**Short Delay (100ms-1s):**
+- Form validation (after blur)
+- Search autocomplete
+- Hover tooltips (300ms delay prevents flicker)
+- Menu open/close animations
+
+**Long Operations (>1s):**
+- Loading spinner or progress bar
+- Percentage complete (if calculable)
+- Optimistic UI (assume success, show immediately)
+- Background processing indicator
+
+**Error Timing:**
+- Inline validation (after field blur, not on every keystroke)
+- Form submission errors (immediate, at top of form)
+- Toast notifications (appear immediately, auto-dismiss 3-5s)
+
+### Patterns (Good Examples)
+
+**Button Press Feedback:**
+- Visual depress (shadow reduces, brightness changes)
+- Disabled state immediately on click (prevent double-submit)
+- Loading spinner replaces button text
+- Success state (checkmark icon, green color, 2s duration)
+
+**Form Validation:**
+- Error state: Red border, error icon, error message below field
+- Error message explains problem: "Email must include @"
+- Success state: Green border, checkmark icon (optional)
+- Real-time hints: "Password strength: Weak → Strong"
+
+**Loading States:**
+- Spinner for indeterminate waits (<10s expected)
+- Progress bar for determinate (shows percentage)
+- Skeleton screens (show content structure while loading)
+- Optimistic UI (show result immediately, rollback if fails)
+
+**Success Confirmation:**
+- Toast notification: "Settings saved successfully" (3s auto-dismiss)
+- Inline message: Green banner with checkmark
+- Visual transition: Item moves to "completed" section
+- Subtle animation: Brief green flash on save icon
+
+**Error Messages:**
+- Clear problem statement: "Unable to connect to server"
+- Actionable fix: "Check your internet connection and try again"
+- Retry button or manual dismiss
+- Not technical jargon: "Error 500" → "Something went wrong on our end"
+
+**Drag & Drop Feedback:**
+- Item lifts on grab (shadow increases, opacity 90%)
+- Drop zones highlight when dragging over (border, background color)
+- Snap animation when dropped (ease-out 200ms)
+- Cancel if dropped outside zone (return to original position)
+
+### Anti-Patterns (Problematic Examples)
+
+**No Feedback:**
+- Button doesn't depress on click
+- User clicks again thinking it didn't work
+- Results in duplicate submissions, frustration
+
+**Generic Errors:**
+- "Something went wrong" (no explanation)
+- "Error 500" (technical jargon)
+- No guidance on how to fix
+
+**Slow Feedback:**
+- Delayed button press visual (>200ms)
+- Feels sluggish, unresponsive
+- Users lose confidence in system
+
+**No Loading Indicator:**
+- Blank screen during load
+- User wonders if system is frozen
+- May leave or refresh, interrupting process
+
+**Success Without Confirmation:**
+- Form submits but no feedback
+- User unsure if it worked
+- May submit again or leave uncertain
+
+### Platform-Specific Feedback
+
+**Web:**
+- Toast notifications (top-right or bottom-center)
+- Inline validation messages
+- Loading spinners (CSS animations)
+- Browser native feedback (form validation bubbles)
+
+**Mobile:**
+- Haptic feedback (vibration on button press)
+- Bottom sheets for confirmations
+- Snackbars (Android Material Design)
+- Pull-to-refresh feedback (iOS)
+
+**Desktop:**
+- System notifications (OS-level)
+- Status bar updates (bottom of window)
+- Progress in dock/taskbar icon
+- Modal dialogs for critical confirmations
+
+**Games:**
+- HUD updates (health, score, ammo)
+- Visual effects (hit sparks, damage numbers)
+- Audio feedback (essential in fast action)
+- Screen shake for major impacts
+
+
+## Dimension 3: MICRO-INTERACTIONS
+
+**Purpose:** Delight users and clarify relationships through purposeful animations
+
+### Evaluation Questions
+
+- Are animations purposeful (not gratuitous decoration)?
+- Is timing appropriate (150-300ms for most UI)?
+- Do transitions feel natural (easing curves)?
+- Do animations hint at spatial relationships?
+- Can users disable animations (accessibility)?
+
+### Animation Timing Guidelines
+
+**UI Transitions (150-300ms):**
+- Modal open/close: 200ms
+- Dropdown menu: 150ms
+- Tooltip appear: 200ms
+- Page transitions: 250ms
+- Accordion expand: 300ms
+
+**Micro-Interactions (100-200ms):**
+- Button hover: 100ms
+- Toggle switch: 150ms
+- Checkbox check: 100ms
+- Icon morph: 200ms
+
+**Too Fast (<100ms):**
+- Feels abrupt, jarring
+- Users miss the transition
+- No sense of continuity
+
+**Too Slow (>500ms):**
+- Feels sluggish
+- Slows users down
+- Creates impatience
+
+**Long Animations (>500ms):**
+- Only for skeleton loading screens
+- Or onboarding/tutorial animations
+- User must be able to skip or dismiss
+
+### Easing Curves
+
+**Ease-Out (Deceleration):**
+- Use for: Entering animations (modals, tooltips)
+- Effect: Fast start, slow finish
+- Feels: Natural, settling into place
+- CSS: `cubic-bezier(0.0, 0.0, 0.2, 1)`
+
+**Ease-In (Acceleration):**
+- Use for: Exiting animations (closing, dismissing)
+- Effect: Slow start, fast finish
+- Feels: Quick departure
+- CSS: `cubic-bezier(0.4, 0.0, 1, 1)`
+
+**Ease-In-Out (Acceleration then Deceleration):**
+- Use for: Movement between states (repositioning)
+- Effect: Smooth throughout
+- Feels: Graceful, continuous
+- CSS: `cubic-bezier(0.4, 0.0, 0.2, 1)`
+
+**Linear (No Easing):**
+- Use for: Loading spinners, progress bars
+- Effect: Constant speed
+- Feels: Mechanical (intentionally)
+- CSS: `linear`
+
+### Patterns (Good Examples)
+
+**Modal Entry:**
+- Fade-in background overlay (200ms ease-out)
+- Scale up modal from 90% to 100% (200ms ease-out)
+- Slight upward movement (20px)
+- Combined effect: Smooth, attention-grabbing
+
+**Dropdown Menu:**
+- Expand from button (origin point clear)
+- Fade + scale (150ms ease-out)
+- Stagger items (20ms delay each) for cascade effect
+
+**Loading Skeleton:**
+- Shimmer effect passes over grey boxes
+- Continuous animation (1500ms linear loop)
+- Indicates "still loading" without blocking
+
+**Toggle Switch:**
+- Circle slides across track (150ms ease-out)
+- Background color changes (150ms)
+- Both animated simultaneously
+
+**Accordion Expand:**
+- Content height animates (300ms ease-out)
+- Icon rotates 90° (300ms ease-out)
+- Smooth reveal, not abrupt pop
+
+**Pull to Refresh:**
+- Spinner rotates continuously
+- Page slides down as user pulls
+- Elastic bounce when released (iOS)
+
+**Hover Lift:**
+- Card elevates on hover (shadow increases, slight Y translation)
+- 200ms ease-out
+- Subtle but clear interactivity
+
+**Icon Morph:**
+- Hamburger → X (menu icon)
+- SVG path animation (200ms ease-out)
+- Clear transformation, not abrupt swap
+
+### Anti-Patterns (Problematic Examples)
+
+**Gratuitous Animation:**
+- Every element bounces on page load
+- Slows users, adds no value
+- Creates distraction, not delight
+
+**Overly Long Animations:**
+- Modal takes 1 second to open
+- Users feel impatient
+- Slows workflow significantly
+
+**Animation Without Purpose:**
+- Random spinning or bouncing
+- Doesn't clarify relationships
+- Pure decoration that distracts
+
+**Inconsistent Timing:**
+- Some modals 200ms, others 500ms
+- Creates uneven, sloppy feel
+- Breaks user expectations
+
+**No Ability to Disable:**
+- Critical for motion sensitivity
+- WCAG requirement (prefers-reduced-motion)
+- Can cause vestibular disorders
+
+**Animations That Block:**
+- Must watch animation complete before interacting
+- Users can't skip or dismiss
+- Creates forced waiting
+
+### Accessibility Considerations
+
+**Respect prefers-reduced-motion:**
+```css
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+```
+
+**Avoid:**
+- Parallax scrolling (motion sickness)
+- Constant background motion
+- Flashing/strobing (seizure risk)
+- Rapid color changes
+
+**Provide:**
+- Setting to disable animations
+- Pause controls for auto-playing content
+- Skip buttons for long animations
+
+
+## Dimension 4: STATE CHANGES
+
+**Purpose:** Make current state immediately obvious and visually distinct
+
+### Evaluation Questions
+
+- Can users identify the current state at a glance?
+- Is selected/active state high contrast?
+- Are disabled states obvious (grayed out)?
+- Is progress shown for multi-step flows?
+- Do states persist across navigation?
+
+### Standard State Specifications
+
+**Button States:**
+
+**Default (Resting):**
+- Normal color and styling
+- Cursor: pointer (desktop)
+- No special indication
+
+**Hover (Desktop Only):**
+- Brightness +10% or shadow increase
+- Cursor: pointer
+- Transition: 100ms ease-out
+
+**Focus (Keyboard Navigation):**
+- 2px outline (browser default or custom color)
+- Persistent until blur
+- High contrast (visible on all backgrounds)
+- Never remove outline without replacement
+
+**Active (Pressed):**
+- Brightness -10% or shadow decrease
+- Slight scale down (98%)
+- Immediate feedback (no transition delay)
+
+**Disabled:**
+- Opacity 40-50% or gray color
+- Cursor: not-allowed
+- No hover/active states
+- Clearly non-interactive
+
+**Loading:**
+- Disabled state + spinner
+- Button text hidden or replaced
+- Prevents multiple clicks
+- Spinner animates continuously
+
+**Success (Temporary):**
+- Green color + checkmark icon
+- Duration: 2 seconds
+- Then return to default or disabled
+- Confirms completion
+
+**Error (Temporary):**
+- Red color + error icon
+- Duration: Persistent until user acts
+- Error message nearby
+- Remains interactive (user can retry)
+
+### Form Input States
+
+**Default:**
+- Border: 1px solid #ccc
+- Background: white or light gray
+- Placeholder: #999
+- Cursor: text
+
+**Focus:**
+- Border: 2px solid brand color
+- Shadow: 0 0 0 3px brand-color-20%
+- Placeholder fades or disappears
+- Cursor: text blinking
+
+**Filled (Valid):**
+- Border: 1px solid #ccc or green
+- Optional: Green checkmark icon
+- Input text: #000
+
+**Error:**
+- Border: 2px solid red
+- Error message below (red text)
+- Error icon inside or next to field
+- Focus: Red border remains
+
+**Disabled:**
+- Background: #f5f5f5
+- Border: #ddd
+- Text: #999
+- Cursor: not-allowed
+
+### Navigation States
+
+**Default (Unselected):**
+- Normal text color
+- No background highlight
+
+**Hover:**
+- Background: Light gray
+- Text color: Slightly darker
+
+**Active/Selected:**
+- Background: Brand color or darker gray
+- Text: White or high contrast
+- Bold weight or indicator (left border, icon)
+
+**Visited (Links Only):**
+- Purple or muted brand color
+- Indicates "already been here"
+
+### Toggle/Checkbox States
+
+**Unchecked:**
+- Empty box or gray background
+- Border visible
+
+**Checked:**
+- Checkmark icon or filled circle
+- Brand color background
+- Smooth transition (100ms)
+
+**Indeterminate (Tri-state):**
+- Dash icon (some children checked)
+- Used in hierarchical lists
+
+### Progress Indicators
+
+**Multi-Step Forms:**
+- Stepper: "Step 2 of 5"
+- Visual progress: Filled circles or bar
+- Current step highlighted
+- Completed steps: Checkmark
+- Future steps: Gray or outline only
+
+**Loading Progress:**
+- Percentage: "Loading 45%"
+- Progress bar fills left-to-right
+- Smooth animation (not jumpy)
+
+**Status Badges:**
+- "Draft" (gray), "Published" (green), "Archived" (blue)
+- Color-coded with icon
+- Consistent placement
+
+### Patterns (Good Examples)
+
+**Tab Navigation:**
+- Default: Gray text, no underline
+- Hover: Darker text
+- Active: Brand color, bottom border (3px), bold weight
+- Smooth underline animation (200ms)
+
+**Toggle Switch:**
+- Off: Gray background, circle left
+- On: Brand color background, circle right
+- Smooth slide animation (150ms)
+- Clear on/off state at glance
+
+**Radio Button Group:**
+- Selected: Filled circle, brand color
+- Unselected: Empty circle, gray border
+- Only one selected at a time
+
+**Accordion:**
+- Collapsed: Down arrow icon
+- Expanded: Up arrow icon, content visible
+- Smooth height animation (300ms)
+
+**Drag & Drop Items:**
+- Default: Normal state
+- Grabbing: Cursor changes, item lifts (shadow)
+- Dragging: Opacity 90%, follows cursor
+- Drop zone: Highlighted border/background
+- Dropped: Snap into place (200ms ease-out)
+
+### Anti-Patterns (Problematic Examples)
+
+**Subtle State Differences:**
+- Active tab only 5% darker (not noticeable)
+- Users can't tell which tab is current
+
+**No Disabled State:**
+- Grayed text but still interactive
+- Users click and get error
+- Should be cursor: not-allowed
+
+**Lost Progress:**
+- Multi-step form refreshes, progress lost
+- No indication of current step
+- Users lose place and confidence
+
+**No Visual Feedback:**
+- Button clicked but no active state
+- User unsure if click registered
+
+**Inconsistent States:**
+- Some buttons show loading, others don't
+- Creates uneven experience
+
+### Platform-Specific States
+
+**iOS:**
+- Segmented controls (grouped buttons)
+- Large titles (bold 34pt)
+- Haptic feedback on state change
+
+**Android:**
+- Ripple effect on tap (Material Design)
+- FAB (Floating Action Button) for primary action
+- Bottom sheets for contextual actions
+
+**Web:**
+- Focus visible for keyboard nav
+- Hover states (desktop only)
+- Active states on click
+
+**Desktop Software:**
+- Selected items in lists (full row highlight)
+- Menu items (hover background)
+- Focus indicators (keyboard nav essential)
+
+
+## Dimension 5: TOUCH TARGETS & GESTURES
+
+**Purpose:** Ensure interactions are physically comfortable and discoverable
+
+### Evaluation Questions
+
+- Are touch targets at least 44x44px (iOS) or 48x48dp (Android)?
+- Is adequate spacing between tappable elements (8px minimum)?
+- Are gestures discoverable and teachable?
+- Do gestures follow platform conventions?
+- Can users complete tasks with one hand (mobile)?
+
+### Touch Target Sizing
+
+**Minimum Sizes:**
+- **iOS (Apple HIG):** 44x44 points
+- **Android (Material Design):** 48x48 dp
+- **Web (Touch):** 48x48 pixels
+- **Desktop (Mouse):** 32x32 pixels acceptable (more precise)
+
+**Optimal Sizes:**
+- **Primary buttons:** 48-56px height
+- **Secondary buttons:** 40-48px height
+- **Icon buttons:** 48x48px minimum (larger if alone)
+- **List items:** 48-72px height (more space = easier tap)
+- **Form inputs:** 48px height minimum
+
+**Spacing Between Targets:**
+- **Minimum:** 8px between tappable elements
+- **Optimal:** 16px spacing (reduces accidental taps)
+- **Dense UIs:** 8px acceptable if targets are distinct
+- **Forms:** 16-24px spacing between fields
+
+### Thumb Zones (Mobile)
+
+**Most Reachable (One-Handed):**
+- Bottom third of screen
+- Center of screen
+- Thumb's natural arc (bottom-center to middle-right for right hand)
+
+**Hard to Reach:**
+- Top corners (especially top-left for right hand)
+- Opposite side (top-right for left hand)
+
+**Design Implications:**
+- **Primary actions:** Bottom navigation, bottom buttons
+- **Navigation:** Bottom tabs (iOS), bottom nav (Android)
+- **Secondary actions:** Top (back button, settings)
+- **Content:** Top and middle (scrollable)
+
+### Standard Gestures
+
+**Universal Gestures:**
+- **Tap:** Select, activate (like mouse click)
+- **Double-tap:** Zoom in (maps, images)
+- **Long-press:** Context menu, additional options
+- **Swipe:** Navigate (swipe back), scroll, pan
+- **Pinch:** Zoom in/out (two-finger spread/pinch)
+- **Drag:** Move items, reorder lists
+
+**Platform-Specific Gestures:**
+
+**iOS:**
+- **Swipe back:** Left edge swipe = back navigation (system-wide)
+- **Swipe actions:** Swipe left/right on list items = actions
+- **Pull to refresh:** Pull down on scrollable content
+- **3D Touch/Haptic Touch:** Force press for quick actions (older devices)
+
+**Android:**
+- **Swipe back:** Swipe from left edge or back button
+- **Swipe to dismiss:** Notifications, dialogs
+- **Pull to refresh:** Pull down (Material Design)
+- **Edge swipe:** Navigation drawer (left edge)
+
+**Web (Touch):**
+- **Scroll:** Vertical swipe
+- **Zoom:** Pinch or double-tap (if enabled)
+- **Context menu:** Long-press (may trigger text selection)
+
+### Patterns (Good Examples)
+
+**Bottom Navigation (Mobile):**
+- 3-5 tabs at bottom
+- 56-72px height
+- Icons + labels (or icon-only if 3 items)
+- Easy thumb reach
+
+**Floating Action Button (Android):**
+- 56dp diameter (large touch target)
+- Bottom-right corner
+- Primary action for screen
+- Elevated (shadow), branded color
+
+**Swipe Actions (List Items):**
+- Swipe left: Delete (red)
+- Swipe right: Archive (blue)
+- Icons reveal as user swipes
+- Can swipe fully to auto-trigger or partial to show buttons
+
+**Pull to Refresh:**
+- Pull down on scrollable content
+- Spinner appears at top
+- Elastic bounce on release
+- Standard convention (users expect it)
+
+**Large Tap Targets:**
+- Full-width list items (not just icon)
+- Entire card tappable (not just title)
+- Generous padding (16-24px)
+- Clear tap feedback (ripple, highlight)
+
+**Gesture Hints:**
+- Faint swipe icon on first use
+- Tutorial overlay: "Swipe right to see more"
+- Visual affordances (visible edge of next screen)
+
+### Anti-Patterns (Problematic Examples)
+
+**Tiny Touch Targets:**
+- 30x30px buttons (too small)
+- Causes accidental taps, frustration
+- Especially bad for users with motor difficulties
+
+**Crowded Interfaces:**
+- Buttons 2px apart
+- "Fat finger" problem (tap wrong button)
+- Requires precision users can't provide
+
+**Undiscoverable Gestures:**
+- Custom gestures with no hint
+- Users never discover features
+- Essential actions hidden behind gestures
+
+**Conflicting Gestures:**
+- Swipe right does different things on different screens
+- Inconsistency creates confusion
+
+**Top-Heavy Mobile Design:**
+- All actions at top of screen
+- Requires two-handed use or thumb stretching
+- Ignores ergonomics
+
+**No Gesture Alternative:**
+- Only way to delete is swipe (no button)
+- Some users may not discover gesture
+- Always provide visible alternative
+
+### Gesture Discovery Patterns
+
+**Progressive Disclosure:**
+1. First use: Show tutorial overlay
+2. Subsequent uses: Subtle hint (fade after 2-3 uses)
+3. Experienced users: No hints, fast workflow
+
+**Visual Cues:**
+- Visible edge of next screen (hints swipe)
+- Icon handles on draggable items
+- Bounce animation suggests "pull here"
+
+**Empty States:**
+- "Swipe left on items to delete"
+- Teaches gesture when no content to interfere
+
+**Settings/Help:**
+- Gesture guide in settings
+- Helps users discover advanced gestures
+
+### Accessibility Considerations
+
+**Motor Accessibility:**
+- Large targets (48px+) help everyone
+- Adequate spacing (16px) reduces errors
+- Avoid hover-only actions (mobile has no hover)
+
+**Gesture Alternatives:**
+- Always provide button alternative to gestures
+- Some users can't perform complex gestures
+- Voice control users need tappable targets
+
+**Timing:**
+- No tight timing requirements (no "double-tap within 300ms")
+- Allow slow, deliberate interactions
+- Long-press timeout: 500ms (not shorter)
+
+
+## Cross-Platform Interaction Patterns
+
+### Web Application Interactions
+
+**Hover States:**
+- Desktop only (no hover on touch)
+- Reveal additional actions on hover
+- Tooltips after 300ms delay
+- Cursor changes (pointer, grab, not-allowed)
+
+**Keyboard Shortcuts:**
+- Cmd/Ctrl+S: Save
+- Cmd/Ctrl+Z: Undo
+- Tab: Next field
+- Enter: Submit form
+- Esc: Close modal
+
+**Form Interactions:**
+- Inline validation (after blur)
+- Autocomplete for common inputs
+- Clear/reset buttons
+- Keyboard navigation (Tab, Shift+Tab)
+
+### Mobile Application Interactions
+
+**Touch-First Design:**
+- No hover states (all affordances visible)
+- Large touch targets (48px+)
+- Platform gestures (swipe back, pull to refresh)
+- Bottom-heavy layout (thumb zone)
+
+**Haptic Feedback:**
+- Button press (light tap)
+- Toggle switch (light tap)
+- Error (notification haptic)
+- Success (success haptic)
+
+**Native Patterns:**
+- iOS: Segmented controls, action sheets, large titles
+- Android: FABs, bottom sheets, ripple effects, snackbars
+
+### Desktop Software Interactions
+
+**Keyboard-First:**
+- All actions accessible via keyboard
+- Visible focus indicators
+- Keyboard shortcuts (Cmd+N, Cmd+O, etc.)
+- Mnemonics (Alt+F for File menu)
+
+**Mouse Precision:**
+- Smaller targets acceptable (32px)
+- Right-click context menus
+- Drag-and-drop between windows
+- Hover tooltips (immediate)
+
+**Multi-Window:**
+- Window snapping (drag to edge)
+- Panel management (dock, resize, collapse)
+- Cross-window drag-and-drop
+
+### Game Interactions
+
+**Input Method:**
+- Gamepad: Radial menus, D-pad navigation
+- Keyboard+Mouse: Click, hotkeys (1-9), WASD movement
+- Touch: Virtual joysticks, large buttons
+
+**Feedback:**
+- Visual (hit sparks, damage numbers)
+- Audio (critical in games)
+- Haptic (controller vibration)
+- Screen effects (shake, flash)
+
+**Responsiveness:**
+- <16ms for competitive games (60fps)
+- <33ms for casual games (30fps)
+- Immediate feedback even if network delayed
+- Optimistic UI (client-side prediction)
+
+
+## Practical Application
+
+### Step-by-Step Usage
+
+**For Critique Mode:**
+1. Identify all interactive elements in design
+2. Evaluate against all 5 dimensions systematically
+3. Note issues: unclear affordances, missing feedback, tiny targets
+4. Prioritize by user impact (critical vs nice-to-have)
+5. Provide specific recommendations with examples
+
+**For Specification Mode:**
+1. Define all interaction states (default, hover, focus, active, disabled, loading)
+2. Specify timing for animations and transitions (150-300ms)
+3. Detail feedback mechanisms (spinners, messages, state changes)
+4. Size touch targets (48x48px minimum)
+5. Document gestures and keyboard shortcuts
+
+### Example Evaluation
+
+**Scenario:** Reviewing a mobile checkout button
+
+**Dimension 1 - Affordances:** ✓ Pass
+- Green filled button, clear label "Complete Purchase"
+- High visual weight, obvious primary action
+
+**Dimension 2 - Feedback:** ✗ Fail
+- No loading state on tap
+- No success confirmation
+- **Recommendation:** Add loading spinner on tap, disable button, show success message
+
+**Dimension 3 - Micro-interactions:** ⚠ Warning
+- No press animation
+- **Recommendation:** Add subtle scale-down (98%) on active state, 100ms
+
+**Dimension 4 - State Changes:** ✗ Fail
+- Disabled state not visually distinct (same color)
+- **Recommendation:** Change to opacity 50% when disabled, cursor: not-allowed
+
+**Dimension 5 - Touch Targets:** ✓ Pass
+- 56px height, 48px meets minimum
+- Full-width button, easy to tap
+
+**Priority Fixes:**
+1. Add loading/disabled states (critical - prevents double-submit)
+2. Add success confirmation (high - user needs confidence)
+3. Add press animation (low - polish, not critical)
+
+
+## Interaction Pattern Library
+
+### Button Interaction Specs
+
+**Primary Button (Full Spec):**
+```
+Default:
+  - Background: Brand color (#0066CC)
+  - Text: White, 16px, 600 weight
+  - Padding: 12px 24px
+  - Height: 48px
+  - Border-radius: 8px
+  - Shadow: 0 2px 4px rgba(0,0,0,0.1)
+
+Hover (desktop):
+  - Background: Lighter brand color (#0077DD)
+  - Shadow: 0 4px 8px rgba(0,0,0,0.15)
+  - Transition: all 100ms ease-out
+  - Cursor: pointer
+
+Focus (keyboard):
+  - Outline: 2px solid #0066CC
+  - Outline-offset: 2px
+
+Active (pressed):
+  - Background: Darker brand color (#0055BB)
+  - Shadow: 0 1px 2px rgba(0,0,0,0.1)
+  - Transform: scale(0.98)
+  - Transition: none (immediate)
+
+Disabled:
+  - Background: #CCCCCC
+  - Text: #666666
+  - Shadow: none
+  - Cursor: not-allowed
+  - Opacity: 0.6
+
+Loading:
+  - Same as disabled
+  - Plus: Spinner icon (16px, white, centered)
+  - Text: "Processing..." or hidden
+```
+
+### Form Input Interaction Specs
+
+**Text Input (Full Spec):**
+```
+Default:
+  - Border: 1px solid #CCCCCC
+  - Background: White
+  - Padding: 12px 16px
+  - Height: 48px
+  - Font: 16px (prevents zoom on iOS)
+  - Placeholder: #999999
+
+Focus:
+  - Border: 2px solid #0066CC
+  - Box-shadow: 0 0 0 3px rgba(0,102,204,0.1)
+  - Placeholder: fade out or move up (floating label)
+
+Filled (valid):
+  - Border: 1px solid #CCCCCC
+  - Optional: 1px solid #00CC66 (green)
+  - Checkmark icon: inside right (16px)
+
+Error:
+  - Border: 2px solid #CC0000
+  - Box-shadow: 0 0 0 3px rgba(204,0,0,0.1)
+  - Error message: Below field, #CC0000, 14px
+  - Error icon: inside right (16px)
+
+Disabled:
+  - Background: #F5F5F5
+  - Border: 1px solid #DDDDDD
+  - Text: #999999
+  - Cursor: not-allowed
+```
+
+### Modal Interaction Specs
+
+**Modal Dialog (Full Spec):**
+```
+Entry Animation:
+  - Backdrop: Fade in (opacity 0 → 0.5, 200ms ease-out)
+  - Modal: Scale up (90% → 100%, 200ms ease-out)
+  - Modal: Translate up (0 → -20px, 200ms ease-out)
+  - Modal: Fade in (opacity 0 → 1, 200ms ease-out)
+
+Exit Animation:
+  - Backdrop: Fade out (200ms ease-in)
+  - Modal: Scale down (100% → 95%, 200ms ease-in)
+  - Modal: Fade out (200ms ease-in)
+
+Interactions:
+  - Backdrop click: Close modal
+  - ESC key: Close modal
+  - Focus trap: Tab cycles within modal
+  - Close button: Top-right, 32x32px minimum
+
+Positioning:
+  - Centered horizontally and vertically
+  - Max-width: 600px (desktop)
+  - Full-width minus 32px margin (mobile)
+  - Scrollable if content exceeds viewport
+```
+
+
+## Red Flags & Anti-Patterns
+
+### Critical Issues (Fix Immediately)
+
+1. **Touch targets <40px** - Unusable on mobile, accessibility fail
+2. **No loading feedback** - Users will click multiple times
+3. **Generic error messages** - Users can't fix the problem
+4. **Disabled without visual indication** - Users confused why click doesn't work
+5. **No keyboard navigation** - Excludes keyboard-only users, WCAG fail
+
+### Major Issues (Fix Soon)
+
+6. **Slow animations (>500ms)** - Users feel impatience
+7. **No success confirmation** - Users uncertain if action completed
+8. **Inconsistent state styling** - Creates cognitive load
+9. **Hover-only critical actions** - Fails on mobile/touch devices
+10. **Tiny spacing between targets** - Accidental taps, frustration
+
+### Minor Issues (Nice to Fix)
+
+11. **No micro-interactions** - Feels less polished
+12. **Linear easing** - Feels mechanical, not natural
+13. **Missing focus indicators** - Keyboard nav unclear (but browser defaults exist)
+14. **No haptic feedback** - Missed opportunity for polish (mobile)
+15. **Generic spinner** - Missed branding opportunity
+
+
+## Related Skills
+
+**Core UX Skills:**
+- `lyra/ux-designer/visual-design-foundations` - Visual feedback, button styling, state colors
+- `lyra/ux-designer/accessibility-and-inclusive-design` - Keyboard navigation, focus indicators, touch target sizing
+- `lyra/ux-designer/ux-fundamentals` - Interaction design principles, affordances, feedback concepts
+
+**Platform Extensions:**
+- `lyra/ux-designer/mobile-design-patterns` - Touch targets (44x44pt iOS, 48x48dp Android), gestures, platform interactions
+- `lyra/ux-designer/web-application-design` - Keyboard shortcuts, hover states, responsive interactions
+- `lyra/ux-designer/desktop-software-design` - Keyboard-first workflows, focus management, window interactions
+- `lyra/ux-designer/game-ui-design` - Gamepad navigation, immediate feedback, performance-optimized interactions
+
+**Cross-Faction:**
+- `ordis/security-architect/threat-modeling` - Secure interaction patterns (prevent double-submit, rate limiting UI)
+
+
+## Additional Resources
+
+**Animation Timing References:**
+- Material Design Motion: 150-300ms standard
+- iOS Human Interface Guidelines: Fast animations (<300ms)
+- Google Material: Ease-out for entrances, ease-in for exits
+
+**Touch Target Standards:**
+- Apple HIG: 44x44pt minimum
+- Material Design: 48x48dp minimum
+- WCAG 2.1 AA: 44x44px minimum (Level AAA: larger)
+
+**Gesture Standards:**
+- iOS Human Interface Guidelines: Gestures chapter
+- Material Design: Gestures documentation
+- Platform conventions trump custom gestures
+
+**Accessibility Standards:**
+- WCAG 2.1 SC 2.5.5: Target Size (44x44px minimum, Level AAA)
+- WCAG 2.1 SC 2.2.4: Interruptions (users can control timing)
+- WCAG 2.1 SC 2.3.3: Animation from Interactions (can be disabled)
diff --git a/skills/using-ux-designer/mobile-design-patterns.md b/skills/using-ux-designer/mobile-design-patterns.md
new file mode 100644
index 0000000..a16856a
--- /dev/null
+++ b/skills/using-ux-designer/mobile-design-patterns.md
@@ -0,0 +1,1641 @@
+
+# Mobile Design Patterns
+
+## Overview
+
+This skill provides **The Mobile Interaction Evaluation Model**: a systematic 4-dimension framework for designing native mobile applications (iOS and Android). Use this when designing for touch-first interfaces, platform-specific patterns, or optimizing for mobile constraints.
+
+**Core Principle**: Mobile design requires balancing platform conventions with usability under real-world constraints (one-handed use, variable connectivity, outdoor viewing, interruptions). Success means feeling native to the platform while remaining accessible to the human hand and thumb.
+
+**Platform Focus**: iOS (Human Interface Guidelines) and Android (Material Design), with guidance on when to unify or differentiate.
+
+## When to Use This Skill
+
+**Use this skill when:**
+- Designing native iOS or Android applications
+- Implementing touch-based interactions and gestures
+- Ensuring platform consistency (iOS HIG vs Material Design)
+- Optimizing for one-handed use and thumb reachability
+- Specifying touch target sizes, navigation patterns, or mobile-specific components
+- User mentions: "mobile app", "iOS", "Android", "touch targets", "gestures", "native design"
+
+**Don't use this skill for:**
+- Desktop software (use `lyra/ux-designer/desktop-software-design`)
+- Responsive web design (use `lyra/ux-designer/web-application-design`)
+- Game UI (use `lyra/ux-designer/game-ui-design`)
+- Visual hierarchy alone (use `lyra/ux-designer/visual-design-foundations`)
+- Accessibility evaluation (use `lyra/ux-designer/accessibility-and-inclusive-design`, though it complements this skill)
+
+
+## The Mobile Interaction Evaluation Model
+
+A systematic 4-dimension framework for evaluating and specifying mobile design:
+
+1. **REACHABILITY** - Thumb zones, one-handed use, navigation placement
+2. **GESTURE CONVENTIONS** - Platform-specific gestures (iOS swipe back, Android bottom nav)
+3. **PLATFORM VISUAL CONSISTENCY** - iOS HIG vs Material Design visual language
+4. **PERFORMANCE PERCEPTION** - Optimistic UI, skeleton screens, instant feedback
+
+Evaluate designs by examining each dimension systematically, identifying platform-specific requirements, and ensuring designs feel native while remaining ergonomically sound.
+
+
+## Dimension 1: REACHABILITY
+
+**Purpose:** Design for comfortable one-handed use with thumb-driven navigation
+
+The human thumb reaches comfortably to the bottom and center of a mobile screen. Top corners require hand repositioning or two-handed use. Design should place primary actions in the natural thumb zone (bottom 50-60% of screen) and secondary actions in harder-to-reach areas.
+
+### Evaluation Questions
+
+1. **Are primary actions in the thumb zone?**
+   - Bottom 50-60% of screen: Most reachable
+   - Center: Comfortable for most grips
+   - Top corners: Hardest to reach (avoid critical actions)
+
+2. **Does navigation placement follow platform conventions?**
+   - iOS: Tab bar at bottom (5 items max)
+   - Android: Bottom navigation (3-5 destinations) or navigation drawer
+   - Top navigation only for secondary/browse contexts
+
+3. **Can users complete primary tasks one-handed?**
+   - Critical actions within thumb arc
+   - No stretching required for frequent actions
+   - Two-handed interactions reserved for secondary tasks
+
+4. **Are destructive actions protected?**
+   - Delete/dangerous actions not in easy-tap zones
+   - Confirmation dialogs for irreversible actions
+   - Swipe-to-delete requires intentional gesture
+
+### Thumb Zone Mapping
+
+**Right-Handed Thumb Zones (mirror for left-handed):**
+
+```
+┌─────────────────────────┐
+│  HARD    │    HARD      │  ← Top corners: Hardest reach
+│  (Back)  │  (Settings)  │     Reserve for secondary actions
+├──────────┴──────────────┤
+│                         │
+│   COMFORTABLE STRETCH   │  ← Upper middle: Reachable with stretch
+│     (Content area)      │     Place scrollable content here
+│                         │
+├─────────────────────────┤
+│                         │
+│    NATURAL THUMB ARC    │  ← Bottom 50%: Most comfortable
+│   (Primary actions)     │     Place navigation & primary CTAs
+│                         │
+└─────────────────────────┘
+     ↑ Bottom: Easiest reach
+     (Tab bar, bottom nav, primary buttons)
+```
+
+**Specific Zone Recommendations:**
+
+- **Easy (Bottom 1/3):** Tab bars, bottom navigation, primary CTAs, FABs
+- **Comfortable (Middle 1/3):** Scrollable content, secondary actions, list items
+- **Stretch (Top 1/3):** Back button, settings, page titles, status indicators
+
+### iOS Navigation Patterns
+
+**iOS Tab Bar (Bottom Navigation):**
+- **Position:** Fixed at bottom of screen
+- **Height:** 49pt (without safe area) or 83pt (with iPhone X+ safe area)
+- **Items:** 3-5 tabs maximum (5 max per Apple HIG)
+- **Icon size:** 25x25pt (image assets at 1x, 2x, 3x)
+- **Label:** Optional but recommended (better clarity)
+- **State:** Selected tab uses tint color, unselected uses gray
+- **Behavior:** Tapping selected tab scrolls to top
+
+```
+Example Tab Bar Specs:
+- Container height: 49pt + safe area inset
+- Item spacing: Equal distribution
+- Icon: 25x25pt template image
+- Label: 10pt SF Pro font
+- Selected color: Brand color (e.g., #007AFF iOS blue)
+- Unselected color: #8E8E93 (iOS gray)
+```
+
+**iOS Navigation Bar (Top):**
+- **Height:** 44pt (standard) or 96pt (large title)
+- **Back button:** Top-left (platform convention)
+- **Title:** Center or large title (scrolls to center on scroll)
+- **Actions:** Top-right (1-2 buttons max)
+- **Translucent:** Blur effect behind (iOS standard)
+
+**When to Use:**
+- Tab bar: 3-5 top-level sections, flat hierarchy
+- Navigation bar: Hierarchical navigation, drill-down flows
+
+### Android Navigation Patterns
+
+**Bottom Navigation (Material Design):**
+- **Position:** Fixed at bottom
+- **Height:** 56dp
+- **Items:** 3-5 destinations (Material Design spec)
+- **Icon size:** 24x24dp
+- **Label:** Always show for 3 items, optional for 4-5 items
+- **Elevation:** 8dp shadow
+- **Behavior:** No scroll-to-top on re-tap (unlike iOS)
+
+```
+Example Bottom Nav Specs:
+- Container height: 56dp
+- Item icon: 24x24dp
+- Label: 12sp Roboto Medium
+- Active color: Primary color (#6200EE Material purple)
+- Inactive color: #757575 (Material gray)
+- Elevation: 8dp
+```
+
+**Navigation Drawer (Side Menu):**
+- **Width:** 256dp (mobile), 320dp (tablet)
+- **Activation:** Left edge swipe or hamburger menu button
+- **Content:** App-level navigation, settings, account
+- **Header:** 64dp height with branding/account info
+- **Items:** 48-56dp height, 16dp left padding for icon
+
+**Top App Bar:**
+- **Height:** 56dp (mobile), 64dp (tablet/desktop)
+- **Navigation icon:** Left (24x24dp hamburger or back arrow)
+- **Title:** 20sp Roboto Medium
+- **Action icons:** Right (24x24dp, 48dp touch target)
+
+**When to Use:**
+- Bottom navigation: 3-5 top-level destinations, primary navigation
+- Navigation drawer: 6+ destinations, or mixed hierarchy
+- Top app bar: Always (provides context and actions)
+
+### Floating Action Button (FAB)
+
+**Material Design FAB Specs:**
+- **Size:** 56dp diameter (default) or 40dp (mini)
+- **Position:** Bottom-right, 16dp from edges
+- **Elevation:** 6dp (resting), 12dp (pressed)
+- **Icon:** 24dp, centered
+- **Color:** Primary or secondary brand color
+- **Purpose:** Single primary action for screen
+
+**Usage Guidelines:**
+- One FAB per screen maximum
+- Primary action only (e.g., "Compose", "Add", "Create")
+- Not for navigation or minor actions
+- Can extend on scroll to show label
+
+**iOS Alternative:**
+- iOS doesn't have FAB convention
+- Use toolbar button or prominent button in content
+- Or adopt FAB if it's your brand pattern (e.g., Google apps on iOS)
+
+### One-Handed Optimization Checklist
+
+✓ **Primary actions in bottom 50% of screen**
+✓ **Navigation at bottom (tab bar or bottom nav)**
+✓ **Secondary actions in top (back, settings, filters)**
+✓ **Scrollable content in middle (comfortable reading)**
+✓ **Large touch targets (44x44pt iOS, 48x48dp Android)**
+✓ **Spacing between targets (8dp/pt minimum)**
+✓ **Two-handed gestures optional (pinch zoom, not required for core tasks)**
+
+
+## Dimension 2: GESTURE CONVENTIONS
+
+**Purpose:** Follow platform-specific gesture standards for intuitive, discoverable interactions
+
+Mobile users expect platform-standard gestures. Custom gestures create friction and require learning. Always prioritize platform conventions over custom interactions unless you have exceptional reason (and user testing) to deviate.
+
+### Evaluation Questions
+
+1. **Do gestures follow platform conventions?**
+   - iOS: Swipe back from left edge, pull to refresh
+   - Android: System back button, edge swipe for navigation drawer
+   - Cross-platform: Pinch to zoom, swipe to delete
+
+2. **Are gestures discoverable?**
+   - Visual hints for non-standard gestures
+   - Tutorial on first use (if custom)
+   - Alternative button-based actions available
+
+3. **Do gestures have immediate feedback?**
+   - Visual response within 100ms
+   - Follow gesture with finger (drag, swipe)
+   - Haptic feedback on success/completion (optional but nice)
+
+4. **Are conflicts avoided?**
+   - Custom gestures don't override system gestures
+   - Swipe directions have consistent meanings
+   - Long-press doesn't interfere with tap
+
+### iOS Standard Gestures
+
+**Swipe Back Navigation (System-Wide):**
+- **Gesture:** Swipe right from left edge of screen
+- **Behavior:** Navigate back in hierarchy
+- **Feedback:** Page slides right, revealing previous page underneath
+- **System-level:** Works in all apps by default (UINavigationController)
+- **Design implication:** Don't put critical actions on left edge (conflicts with swipe)
+
+```
+Implementation note:
+- Enabled by default in UINavigationController
+- Can be disabled but shouldn't (user expectation)
+- Custom back gestures should augment, not replace
+```
+
+**Pull to Refresh:**
+- **Gesture:** Pull down on scrollable content
+- **Feedback:** Spinner appears at top, elastic bounce
+- **Use case:** Refresh lists, feeds, mailboxes
+- **System component:** UIRefreshControl
+- **Timing:** Trigger after ~60pt pull distance
+
+**Swipe Actions on Lists:**
+- **Gesture:** Swipe left or right on list item
+- **Feedback:** Action buttons reveal behind item
+- **Common patterns:**
+  - Swipe left: Delete (red), Archive (blue)
+  - Swipe right: Mark as read, Favorite
+- **Full swipe:** Can auto-trigger action without showing buttons
+- **Color coding:** Red for destructive, blue/green for non-destructive
+
+```
+iOS Swipe Actions Specs:
+- Button height: Match row height (minimum 44pt)
+- Button width: 74pt per button (typical)
+- Icon + text or icon-only
+- Full swipe threshold: ~50% of row width
+```
+
+**Long Press (Context Menu):**
+- **Gesture:** Touch and hold for 500ms
+- **Feedback:** Haptic tap, menu appears (iOS 13+: blur background)
+- **Use case:** Preview (peek), context actions, copy/paste
+- **iOS 13+:** Context menu with preview and actions
+- **Design:** Provide shortcuts, not primary actions
+
+**3D Touch / Haptic Touch:**
+- **Deprecated:** 3D Touch removed in iPhone 11+
+- **Replaced by:** Long press (Haptic Touch)
+- **Design:** Don't rely on pressure sensitivity
+
+**Pinch to Zoom:**
+- **Gesture:** Two-finger pinch (spread to zoom in, pinch to zoom out)
+- **Use case:** Images, maps, PDFs, web content
+- **Feedback:** Content scales with gesture
+- **Alternative:** Double-tap to zoom in (toggles 2x zoom)
+
+### Android Standard Gestures
+
+**System Navigation (Android 10+ Gesture Nav):**
+- **Swipe up from bottom:** Go home
+- **Swipe up and hold:** Recent apps / multitasking
+- **Swipe from left or right edge:** Back navigation
+- **Design implication:** Avoid critical actions on screen edges
+
+**Note:** Android supports 3 navigation modes:
+1. Gesture navigation (modern, default on Android 10+)
+2. 2-button navigation (back button + home button)
+3. 3-button navigation (back, home, recents - legacy)
+
+Design should work with all three modes.
+
+**Navigation Drawer (Left Edge Swipe):**
+- **Gesture:** Swipe right from left edge
+- **Behavior:** Open navigation drawer (side menu)
+- **Feedback:** Drawer slides in from left
+- **Component:** DrawerLayout (Material Design)
+- **Design:** Show hamburger menu icon to hint drawer presence
+
+**Pull to Refresh:**
+- **Gesture:** Pull down on scrollable content
+- **Feedback:** Circular spinner, Material motion
+- **Component:** SwipeRefreshLayout
+- **Timing:** Similar to iOS (~60dp pull to trigger)
+
+**Swipe to Dismiss:**
+- **Gesture:** Swipe left or right on cards, notifications
+- **Feedback:** Item fades and slides out
+- **Use case:** Notifications, recent apps, dismissable cards
+- **Undo:** Show Snackbar with "Undo" option (Material pattern)
+
+**Long Press:**
+- **Gesture:** Touch and hold for 500ms
+- **Feedback:** Haptic feedback (if available), context menu appears
+- **Use case:** Select mode (multi-select), app shortcuts (home screen)
+- **Design:** Similar to iOS long-press
+
+**Bottom Sheet Swipe:**
+- **Gesture:** Swipe up on bottom sheet to expand, down to collapse
+- **Feedback:** Sheet follows finger, snaps to states
+- **States:** Collapsed, half-expanded, fully expanded
+- **Use case:** Contextual actions, maps (Google Maps), music players
+
+### Cross-Platform Universal Gestures
+
+**Tap (Primary Interaction):**
+- **Minimum target size:** 44x44pt (iOS), 48x48dp (Android)
+- **Feedback:** Visual press state, ripple (Android), or opacity change (iOS)
+- **Timing:** Immediate (<100ms)
+
+**Double-Tap:**
+- **Use case:** Zoom in (images, maps), like (Instagram heart)
+- **Feedback:** Zoom animation or visual confirmation
+- **Timing window:** Second tap within 300ms
+
+**Scroll (Vertical Swipe):**
+- **Gesture:** Swipe up/down in content area
+- **Behavior:** Inertial scrolling (continues after release)
+- **Edge behavior:** Bounce (iOS), glow (Android)
+
+**Horizontal Swipe:**
+- **Use case:** Carousels, image galleries, onboarding flows
+- **Feedback:** Content slides horizontally
+- **Pagination:** Snap to pages or free-scroll
+
+**Drag:**
+- **Use case:** Reorder lists, move items, pan maps
+- **Feedback:** Item lifts (shadow increases), follows finger
+- **States:** Rest → Lift (shadow) → Drag (follows) → Drop (animates to position)
+
+**Pinch (Two-Finger):**
+- **Use case:** Zoom in/out (maps, images, PDFs)
+- **Feedback:** Content scales continuously with gesture
+- **Alternative:** Provide zoom buttons for accessibility
+
+### Gesture Discovery Patterns
+
+**Problem:** Custom gestures are invisible to users
+
+**Solutions:**
+
+1. **First-Time Hints:**
+   - Transparent overlay with animation: "Swipe left to archive"
+   - Dismiss after first use or after 3 seconds
+   - Don't show again (store in user preferences)
+
+2. **Visual Affordances:**
+   - Partially visible next screen (hint swipe)
+   - Bounce animation on first load (suggests pull down)
+   - Handle or drag indicator (bottom sheets)
+
+3. **Progressive Disclosure:**
+   - Animate gesture on empty states
+   - Show partial swipe action on first interaction
+   - Tutorial screens for complex gestures
+
+4. **Always Provide Alternative:**
+   - Button for swipe action (three-dot menu)
+   - Long-press for quick actions
+   - Visible controls alongside gesture shortcuts
+
+### Gesture Conflicts to Avoid
+
+❌ **Left edge swipe with custom action (iOS)**
+- Conflicts with system back gesture
+- Users will accidentally trigger back navigation
+
+❌ **Bottom edge swipe (Android 10+)**
+- Conflicts with system home gesture
+- Reserve bottom 16dp for system gestures
+
+❌ **Horizontal scroll inside vertical scroll**
+- Gesture ambiguity (which direction?)
+- Use tabs or clear horizontal zones
+
+❌ **Custom pinch gesture with zoom-enabled content**
+- Conflicts with expected zoom behavior
+- Users expect pinch = zoom universally
+
+### Platform-Specific Gesture Specs
+
+**iOS Gesture Timing:**
+- Tap: <100ms to register
+- Long press: 500ms hold
+- Swipe velocity threshold: 500 points/second
+- Scroll deceleration: Exponential (feels natural)
+
+**Android Gesture Timing:**
+- Tap: <100ms to register
+- Long press: 500ms hold (ViewConfiguration.getLongPressTimeout())
+- Swipe velocity threshold: 100-1000 dp/second (ViewConfiguration.getScaledMinimumFlingVelocity())
+- Scroll deceleration: Android physics (different from iOS)
+
+**Haptic Feedback:**
+- **iOS:** UIImpactFeedbackGenerator (light, medium, heavy)
+- **Android:** HapticFeedbackConstants (VIRTUAL_KEY, LONG_PRESS, etc.)
+- **Use sparingly:** Confirmation, error, important events only
+- **Make optional:** Some users disable haptics in settings
+
+
+## Dimension 3: PLATFORM VISUAL CONSISTENCY
+
+**Purpose:** Match OS design conventions while maintaining brand identity
+
+Users expect apps to feel native to their platform. iOS users expect iOS visual patterns; Android users expect Material Design. Deviating creates cognitive friction and "uncanny valley" feelings of wrongness.
+
+### Evaluation Questions
+
+1. **Does the design follow platform conventions?**
+   - iOS: Translucent nav bars, SF Pro font, large titles, rounded cards
+   - Android: Elevation/shadows, Roboto font, FABs, Snackbars
+
+2. **Are typography choices platform-appropriate?**
+   - iOS: SF Pro (system default), large titles (34pt), dynamic type support
+   - Android: Roboto (system default), distinct type scale, Material typography
+
+3. **Do elevation/shadows match platform expectations?**
+   - iOS: Subtle shadows, translucency, blur effects
+   - Android: Elevation system (2dp, 4dp, 8dp), z-axis hierarchy
+
+4. **Are navigation components platform-standard?**
+   - iOS: Tab bar (bottom), navigation bar (top), action sheets
+   - Android: Bottom nav or drawer, top app bar, bottom sheets
+
+5. **Do UI components match OS design language?**
+   - iOS: Segmented controls, switches, activity indicators
+   - Android: Tabs, switches, progress indicators, ripple effects
+
+### iOS Human Interface Guidelines (HIG)
+
+**iOS Typography:**
+
+```
+SF Pro (System Font):
+- Large Title: 34pt, Bold (Navigation bars, scrolls to 17pt)
+- Title 1: 28pt, Regular (Page titles)
+- Title 2: 22pt, Regular (Section headers)
+- Title 3: 20pt, Regular (Subsections)
+- Headline: 17pt, Semibold (Emphasized content)
+- Body: 17pt, Regular (Primary content)
+- Callout: 16pt, Regular (Secondary content)
+- Subhead: 15pt, Regular (Tertiary content)
+- Footnote: 13pt, Regular (Timestamps, meta)
+- Caption 1: 12pt, Regular (Image captions)
+- Caption 2: 11pt, Regular (Smallest readable text)
+```
+
+**Dynamic Type:**
+- iOS allows users to scale text size (Settings → Display & Brightness → Text Size)
+- Use system text styles to support automatic scaling
+- Test at largest and smallest sizes
+- Don't use fixed pixel sizes for text
+
+**iOS Visual Patterns:**
+
+**Translucency:**
+- Navigation bars: Translucent blur effect (shows content beneath)
+- Tab bars: Translucent with blur
+- Toolbars: Translucent
+- System overlays: Heavy blur
+
+**Rounded Corners:**
+- Cards: 13pt corner radius (continuous curve, not circular)
+- Buttons: 8-10pt corner radius
+- Modals: 13pt corner radius (top corners only)
+- Alerts: 13pt corner radius
+
+**Shadows:**
+- Subtle: iOS uses minimal shadows
+- Prefer translucency and separators over heavy shadows
+- Cards: 0 2px 8px rgba(0,0,0,0.1) (light shadow)
+
+**Borders and Separators:**
+- Hairline separators: 0.5pt (1px at 2x) in light gray
+- Minimal use of borders (rely on spacing and hierarchy)
+- Inset separators: Indented 16pt from left (list items)
+
+**Color:**
+- System colors: Adapt to light/dark mode automatically
+- Tint color: Single accent color for interactive elements (default #007AFF)
+- Gray scale: #F2F2F7 (light gray) to #1C1C1E (dark gray)
+- Support both light and dark modes (required as of iOS 13)
+
+**iOS Components:**
+
+**Tab Bar:**
+- Height: 49pt + safe area
+- Items: 3-5 maximum
+- Icons: 25x25pt, line style (not filled unless selected)
+- Selected: Filled icon + tint color
+- Labels: 10pt, always visible
+
+**Navigation Bar:**
+- Height: 44pt (standard) or 96pt (large title)
+- Large title: 34pt Bold, scrolls to 17pt Regular center title
+- Back button: Chevron + previous screen title (or "Back")
+- Actions: Text buttons or icons (top-right)
+
+**Segmented Control:**
+- Grouped buttons with single selection
+- Background: Light gray rounded rectangle
+- Selected: White background (iOS 13+)
+- Height: 28-32pt
+
+**Action Sheet:**
+- Modal from bottom with actions
+- iOS style: Rounded corners, translucent background
+- Destructive action: Red text
+- Cancel: Separate at bottom
+
+**iOS Motion:**
+- Spring animations (UISpringTimingParameters)
+- Natural, physics-based easing
+- Respects Reduce Motion accessibility setting
+- Duration: 200-300ms typical
+
+### Android Material Design
+
+**Android Typography:**
+
+```
+Roboto (System Font):
+- H1: 96sp, Light, -1.5sp letter spacing
+- H2: 60sp, Light, -0.5sp letter spacing
+- H3: 48sp, Regular, 0sp letter spacing
+- H4: 34sp, Regular, 0.25sp letter spacing
+- H5: 24sp, Regular, 0sp letter spacing (Page titles)
+- H6: 20sp, Medium, 0.15sp letter spacing (Section headers)
+- Subtitle 1: 16sp, Regular, 0.15sp letter spacing
+- Subtitle 2: 14sp, Medium, 0.1sp letter spacing
+- Body 1: 16sp, Regular, 0.5sp letter spacing (Primary content)
+- Body 2: 14sp, Regular, 0.25sp letter spacing
+- Button: 14sp, Medium, 1.25sp letter spacing, ALL CAPS
+- Caption: 12sp, Regular, 0.4sp letter spacing (Meta info)
+- Overline: 10sp, Regular, 1.5sp letter spacing, ALL CAPS
+```
+
+**Note:** Android uses "sp" (scale-independent pixels) for text, which respects user font size settings.
+
+**Material Elevation System:**
+
+Material Design uses elevation (z-axis) to create hierarchy and show relationships:
+
+```
+Elevation (shadows):
+- 0dp: Flat on surface (text, backgrounds)
+- 1dp: Cards (resting state)
+- 2dp: Buttons (resting state), app bar (scrolled)
+- 4dp: App bar (resting state)
+- 6dp: FAB (resting state), snackbar
+- 8dp: Bottom navigation, drawer, modal side sheet
+- 9dp: FAB (pressed), dialog, time picker
+- 12dp: FAB (pressed, alternative spec)
+- 16dp: Navigation drawer (while opening)
+- 24dp: Modal bottom sheet
+```
+
+**Elevation creates shadows:**
+- Higher elevation = larger, softer shadow
+- Shadow color: rgba(0,0,0,0.14) for ambient, rgba(0,0,0,0.20) for key light
+- Elevation changes on interaction (press = +6dp to +12dp for FAB)
+
+**Material Visual Patterns:**
+
+**Rounded Corners:**
+- Cards: 4dp corner radius
+- Buttons: 4dp corner radius
+- Dialogs: 4dp corner radius
+- Bottom sheets: 8dp corner radius (top corners only)
+- More pronounced than iOS (4-8dp vs 8-13pt)
+
+**Color:**
+- Primary color: Brand color for main UI elements
+- Secondary color: Accent color for FABs, highlights
+- Surface colors: White (light theme), #121212 (dark theme)
+- Error: #B00020 (Material red)
+- Background elevation: Lighter overlays on dark theme (8% white per elevation step)
+
+**Ripple Effect:**
+- Touch feedback: Circular ripple emanating from touch point
+- Color: 12% opacity of foreground color
+- Duration: 300ms fade out
+- All interactive elements should have ripple (Material standard)
+
+**Android Components:**
+
+**Bottom Navigation:**
+- Height: 56dp
+- Items: 3-5 destinations
+- Icons: 24dp, active/inactive states
+- Labels: 12sp, show for 3 items, optional for 4-5
+- Ripple on tap
+- Elevation: 8dp
+
+**Top App Bar:**
+- Height: 56dp (mobile), 64dp (tablet/desktop)
+- Title: 20sp Medium
+- Icons: 24dp (48dp touch target)
+- Elevation: 4dp (0dp if scrolled to top, optional)
+
+**FAB (Floating Action Button):**
+- Size: 56dp (default) or 40dp (mini)
+- Icon: 24dp centered
+- Elevation: 6dp (resting), 12dp (pressed)
+- Ripple: Circular outward
+- Position: 16dp from edges (bottom-right typical)
+
+**Snackbar:**
+- Height: 48-80dp (single/multi-line)
+- Position: Bottom of screen (above bottom nav if present)
+- Duration: 4-10 seconds or indefinite
+- Action: Optional text button (right side)
+- Elevation: 6dp
+
+**Bottom Sheet:**
+- Swipe up to expand, down to collapse
+- Corner radius: 8dp (top corners)
+- States: Collapsed, half-expanded, fully expanded
+- Handle: Optional 32x4dp rounded indicator at top
+- Elevation: 16dp (modal) or 1dp (persistent)
+
+**Material Motion:**
+- Easing curves: Material easing (cubic-bezier(0.4, 0.0, 0.2, 1))
+- Duration: 150-300ms for most transitions
+- Choreography: Elements move together in meaningful ways
+- Shared element transitions: Smooth transitions between screens
+
+### When to Deviate from Platform Conventions
+
+**Strong Brand Identity:**
+- **Example:** Instagram, Spotify, Netflix use custom UI across platforms
+- **Rationale:** Brand consistency trumps platform consistency
+- **Risk:** Slightly steeper learning curve, but offset by familiarity with brand
+- **Rule:** If your brand is strong enough, users will adapt
+
+**Cross-Platform Consistency:**
+- **Example:** Google apps on iOS use Material Design (Gmail, Drive, Photos)
+- **Rationale:** Consistent experience across devices for multi-platform users
+- **Risk:** Feels "wrong" to platform purists
+- **Rule:** If your users switch platforms frequently, consistency helps
+
+**Unique Use Case:**
+- **Example:** Creative tools (Procreate, Figma), games, AR/VR apps
+- **Rationale:** Standard patterns don't fit the interaction model
+- **Risk:** Requires custom patterns, user education
+- **Rule:** Deviate only if platform patterns genuinely don't support your use case
+
+**Careful Deviation:**
+- **Test extensively:** Custom patterns require more usability testing
+- **Provide onboarding:** Teach custom interactions
+- **Maintain accessibility:** Platform conventions are accessible by default
+- **Respect system gestures:** Don't override system back, home, etc.
+
+**Never Deviate On:**
+- System gestures (back, home, app switcher)
+- Accessibility features (VoiceOver, TalkBack, Dynamic Type, large text)
+- Status bar, safe areas, notches (use system APIs)
+- System permissions and dialogs
+
+### Supporting Both Light and Dark Modes
+
+**iOS:**
+- **Required:** All apps must support dark mode (iOS 13+)
+- **System colors:** Use UIColor.label, .systemBackground, etc. (adapt automatically)
+- **Custom colors:** Define light and dark variants in asset catalog
+- **Test:** Switch in Settings → Developer → Dark Appearance
+
+**Android:**
+- **Recommended:** Support dark theme (Material Design standard, Android 10+)
+- **System colors:** Use ?attr/colorPrimary, ?attr/colorSurface (adapt automatically)
+- **Dark theme elevation:** Lighter overlays on elevated surfaces (8% white per step)
+- **Test:** Settings → Display → Dark theme
+
+**Dark Mode Best Practices:**
+- Don't use pure black (#000000) for backgrounds (use #121212 on Android, system background on iOS)
+- Reduce saturation of bright colors (lower luminance)
+- Use elevation to create hierarchy (not just borders)
+- Test contrast ratios (still need 4.5:1 for text on dark backgrounds)
+- Avoid pure white text (use off-white for less eye strain)
+
+
+## Dimension 4: PERFORMANCE PERCEPTION
+
+**Purpose:** Create the perception of speed even when actual processing takes time
+
+Users judge app quality by perceived performance, not actual milliseconds. An app that feels instant (even if loading in background) beats an app that's fast but provides no feedback. Optimistic UI, skeleton screens, and instant feedback are critical for mobile where network is unreliable.
+
+### Evaluation Questions
+
+1. **Does the app provide instant feedback (<100ms)?**
+   - Button press visual change
+   - Tap acknowledgment
+   - Action initiated indicator
+
+2. **Are skeleton screens used during content loading?**
+   - Show content structure while loading
+   - Better than blank screens or spinners
+   - Smooth transition to real content
+
+3. **Is optimistic UI used for actions?**
+   - Assume success, show result immediately
+   - Rollback if action fails
+   - Reduces perceived latency
+
+4. **Is offline functionality supported?**
+   - Cached content available offline
+   - Queue actions for later sync
+   - Clear indicators of offline state
+
+5. **Are loading states appropriate for duration?**
+   - <1 second: No indicator (instant)
+   - 1-10 seconds: Spinner or progress indicator
+   - >10 seconds: Progress bar with percentage (if calculable)
+
+### Optimistic UI
+
+**Concept:** Assume user actions will succeed and update UI immediately, rollback if failure occurs.
+
+**When to Use:**
+- Actions with high success rate (>95%)
+- Network-dependent actions (post, like, save)
+- Actions with visible state (checkbox, toggle, star)
+
+**When NOT to Use:**
+- Destructive actions (delete account, permanent delete)
+- Financial transactions (payment processing)
+- Actions with complex server-side validation
+
+**Pattern Example: Like Button**
+
+```
+User taps "Like":
+1. Immediate: Change icon from outline to filled (0ms)
+2. Immediate: Increment like count (0ms)
+3. Background: Send API request
+4. On success (500ms later): No change, already updated
+5. On failure: Revert icon and count, show error toast
+
+Result: Feels instant, even with 500ms network latency
+```
+
+**Pattern Example: Post Creation**
+
+```
+User taps "Post":
+1. Immediate: Add post to feed with "Posting..." indicator (0ms)
+2. Immediate: Disable edit/delete for this post
+3. Background: Upload to server
+4. On success (2s later): Remove "Posting..." indicator, enable actions
+5. On failure: Show "Failed to post" with Retry button, mark post in error state
+
+Result: Feed updates instantly, user can continue browsing
+```
+
+**Rollback Strategy:**
+- Visual indicator during sync ("Sending...", gray outline)
+- Error state if fails (red outline, "Failed to send")
+- Retry button or automatic retry (exponential backoff)
+- Don't silently fail (user needs to know)
+
+**Implementation Considerations:**
+- Maintain optimistic state locally (local-first architecture)
+- Track pending actions (queue)
+- Handle conflicts (what if another user edited same item?)
+- Provide manual refresh ("Pull to refresh") for paranoid users
+
+### Skeleton Screens
+
+**Concept:** Show content structure (gray boxes) while loading actual content.
+
+**Better Than:**
+- Blank white screen (looks broken)
+- Spinner alone (no context, feels slow)
+- Old content with spinner (confusing if content changes)
+
+**Pattern Structure:**
+
+```
+Skeleton for News Feed:
+┌─────────────────────────────┐
+│ [Avatar] [Text line────]    │ ← User info placeholder
+│          [Text line──]       │
+│                              │
+│ [Gray rectangle────────]     │ ← Image placeholder
+│ [─────────────────────]      │
+│                              │
+│ [Text line──────────]        │ ← Content placeholder
+│ [Text line────────]          │
+│ [Text line──────]            │
+└─────────────────────────────┘
+
+Shimmer effect: Light sweep left-to-right (1.5s loop)
+```
+
+**Skeleton Guidelines:**
+- Match actual content layout (same card size, spacing)
+- Use neutral gray (#E0E0E0 light theme, #2C2C2C dark theme)
+- Shimmer animation (optional): Light gradient sweeps across (suggests loading)
+- Transition: Fade out skeleton, fade in real content (200ms)
+- Number of skeletons: Match expected content (3-5 cards typical)
+
+**Skeleton Components:**
+- Avatar: Circle (40-48dp/pt)
+- Text line: Rounded rectangle (12-16dp/pt height)
+- Image: Rectangle (match aspect ratio of real images)
+- Button: Rounded rectangle (48dp/pt height)
+
+**When to Use:**
+- Initial screen load (first 1-3 seconds)
+- Infinite scroll (next page loading)
+- Content refresh (pull-to-refresh)
+
+**iOS Example:** Apple News, App Store (show skeleton cards while loading)
+**Android Example:** YouTube, LinkedIn (show skeleton feed)
+
+### Progressive Loading
+
+**Concept:** Load content in stages, showing most important content first.
+
+**Priority Layers:**
+
+1. **Layout shell (0ms):** Navigation, screen structure, skeleton
+2. **Critical content (500ms):** Headlines, titles, primary text
+3. **Images (1-2s):** Load low-res placeholder, then high-res
+4. **Non-critical (2-5s):** Ads, recommendations, analytics
+
+**Pattern Example: Article Screen**
+
+```
+Stage 1 (0ms): Show nav bar, skeleton article layout
+Stage 2 (200ms): Load and show article title, author, date (text is fast)
+Stage 3 (500ms): Load article body text (streaming if long)
+Stage 4 (1s): Load hero image (show low-res blur first)
+Stage 5 (2s): Load high-res image, comments, related articles
+
+User can start reading at Stage 2, well before images load.
+```
+
+**Image Loading Strategy:**
+
+1. **Placeholder:** Solid color (average color of image) or blur hash
+2. **Low-res:** 10-20px width, blurred, loads in <100ms
+3. **High-res:** Full size, replaces low-res with fade transition (200ms)
+4. **Lazy loading:** Images below fold load when scrolled into view
+
+**iOS:** Use UIImage progressive loading or SDWebImage library
+**Android:** Use Glide or Coil libraries (built-in progressive loading)
+
+### Instant Feedback
+
+**100ms Rule:** User must see visual response within 100ms of touch.
+
+**Feedback Types:**
+
+**Button Press (0-50ms):**
+- Visual: Brightness change, scale down (98%), or shadow reduction
+- iOS: Opacity 60% or slight scale
+- Android: Ripple effect starts immediately
+
+**Toggle Switch (0-50ms):**
+- Visual: Circle starts sliding animation
+- Haptic: Light tap feedback
+- State: Assume toggled (optimistic)
+
+**Text Input (0ms):**
+- Visual: Character appears immediately (no perceptible lag)
+- Feedback: Cursor blinks, keyboard haptic (optional)
+
+**Action Completion (100-500ms):**
+- Success: Checkmark, green color (brief animation)
+- Error: Shake animation, red color, error message
+- Processing: Spinner, "Saving..." text
+
+**Timing Guidelines:**
+
+- **<100ms:** Instant (no spinner needed)
+- **100ms-1s:** Short wait (spinner or progress indicator)
+- **1-10s:** Loading state (spinner with message: "Loading your feed...")
+- **>10s:** Progress bar (show percentage if calculable)
+- **>30s:** Consider background task with notification when complete
+
+**Long Operations:**
+- Show estimated time ("About 2 minutes remaining...")
+- Allow cancellation (Cancel button)
+- Allow background processing (minimize, app continues in background)
+- Notify on completion (push notification)
+
+### Offline-First Architecture
+
+**Concept:** App works offline by default, syncs when connected.
+
+**Core Patterns:**
+
+**Cache Strategy:**
+- Cache recently viewed content locally
+- Serve from cache first, update from network in background (stale-while-revalidate)
+- Show cache age: "Updated 5 minutes ago"
+
+**Action Queue:**
+- Queue user actions (like, post, save) when offline
+- Auto-sync when connection restored
+- Show pending actions: "3 items waiting to sync"
+
+**Sync Indicators:**
+- Offline mode: Banner at top ("No internet connection")
+- Syncing: Small indicator ("Syncing..." in status area)
+- Synced: Brief confirmation ("All changes saved")
+
+**Conflict Resolution:**
+- Last-write-wins (simple, works for most cases)
+- Server-wins (important data, user must re-apply)
+- Manual merge (complex, show both versions, let user choose)
+
+**iOS:** NSURLSession background tasks, Core Data for local storage
+**Android:** WorkManager for background sync, Room database for local storage
+
+### Performance Perception Checklist
+
+✓ **Instant feedback on all taps (<100ms visual response)**
+✓ **Optimistic UI for common actions (like, save, post)**
+✓ **Skeleton screens for initial load (not blank or spinner-only)**
+✓ **Progressive image loading (low-res → high-res)**
+✓ **Offline support (cache content, queue actions)**
+✓ **Appropriate loading indicators (spinner for 1-10s, progress for >10s)**
+✓ **Background sync (don't block user while syncing)**
+✓ **Pull-to-refresh for manual updates (user control)**
+
+
+## Mobile-Specific Constraints
+
+### Screen Size Considerations
+
+**Design for Smallest First:**
+- **iOS:** iPhone SE (375x667pt at 2x) = 750x1334 physical pixels
+- **Android:** Small phone (~360x640dp) = ~720x1280 physical pixels
+- Test on smallest supported device, scale up for larger
+
+**Common iOS Sizes:**
+- iPhone SE: 375x667pt (4.7" diagonal)
+- iPhone 13/14: 390x844pt (6.1")
+- iPhone 14 Pro Max: 430x932pt (6.7")
+- iPad Mini: 768x1024pt (8.3")
+- iPad Pro: 1024x1366pt (12.9")
+
+**Common Android Sizes:**
+- Small: 360x640dp (5" phone)
+- Medium: 411x731dp (6" phone)
+- Large: 480x853dp (6.5" phone)
+- Tablet: 600x960dp (7" tablet) and up
+
+**Responsive Strategy:**
+- Single column on phones (< 600dp wide)
+- Two column on tablets (>= 600dp wide)
+- Three column on large tablets (>= 960dp wide)
+- Use safe areas for notches, rounded corners, home indicators
+
+**Safe Areas:**
+- **iOS:** Top inset (status bar, notch), bottom inset (home indicator)
+- **Android:** Status bar, navigation bar (if 3-button), notches/camera cutouts
+- **Always use system APIs:** UIView.safeAreaInsets (iOS), WindowInsets (Android)
+
+### Touch Target Sizing
+
+**Minimum Touch Target Sizes:**
+
+```
+iOS (Apple HIG):
+- Minimum: 44x44pt (points, not pixels)
+- Recommended: 48pt for primary actions
+- Spacing: 8pt minimum between targets
+
+Android (Material Design):
+- Minimum: 48x48dp (density-independent pixels)
+- Recommended: 56dp for primary actions (FABs, buttons)
+- Spacing: 8dp minimum between targets
+
+Web Mobile:
+- Minimum: 48x48px (physical pixels)
+- Recommended: 56px for primary actions
+- Spacing: 8px minimum between targets
+```
+
+**Why 44/48 Minimum?**
+- Average adult fingertip: 10mm (roughly 40-50px)
+- Allows for imprecision, reduces accidental taps
+- WCAG 2.1 Level AAA: 44x44px minimum
+
+**Target Size Calculation:**
+
+Even if visible button is smaller, ensure touch target is 44/48:
+
+```
+Example: Icon button with 24pt icon
+- Visible icon: 24x24pt
+- Touch target: 48x48pt (add 12pt padding on all sides)
+- Implementation: Increase padding or use transparent hit area
+
+iOS (SwiftUI):
+.frame(width: 48, height: 48) // Touch target
+.contentShape(Rectangle()) // Make entire frame tappable
+
+Android (XML):
+android:minWidth="48dp"
+android:minHeight="48dp"
+android:padding="12dp" // Icon is 24dp, padding makes it 48dp
+```
+
+**Spacing Between Targets:**
+
+```
+Minimum spacing: 8dp/pt (prevents accidental taps)
+Comfortable spacing: 16dp/pt (easier, more forgiving)
+
+Example: Three buttons in a row
+[Button] <8dp> [Button] <8dp> [Button]
+Each button 48x48dp, spacing 8dp = total 168dp width
+```
+
+**High-Density Interfaces:**
+- Lists with 48dp height items: 8dp spacing acceptable (dividers help)
+- Toolbars with multiple icons: 8dp spacing, 48dp targets (icons smaller, padding larger)
+- Keyboards: Slightly smaller targets acceptable (40dp) due to muscle memory and two-handed use
+
+### Context of Use
+
+**One-Handed Operation:**
+- Primary actions in thumb zone (bottom 50%)
+- Bottom navigation (not top tabs)
+- Avoid top-left corner for critical actions
+- Test: Hold phone one-handed, reach with thumb
+
+**Environmental Factors:**
+
+**Sunlight (Outdoor Use):**
+- High contrast critical (text: 7:1 or higher)
+- Avoid subtle grays, low-contrast colors
+- Bright UI backgrounds easier to read in sun
+- Dark mode can be harder to read outdoors (less contrast with environment)
+
+**Movement (Walking, Transit):**
+- Larger touch targets (harder to be precise while moving)
+- Less reliance on small text (harder to read while bouncing)
+- Confirmation dialogs for destructive actions (prevent accidental taps)
+
+**Interruptions:**
+- Save state frequently (app can be backgrounded anytime)
+- Auto-save form inputs (don't lose data on interruption)
+- Resume where user left off (deep linking, state restoration)
+- Handle calls, notifications, alarms gracefully
+
+**Variable Connectivity:**
+
+```
+Connection Quality:
+- WiFi: Fast, reliable (10+ Mbps typical)
+- 4G LTE: Fast, mostly reliable (5-50 Mbps)
+- 3G: Slow, variable (0.5-5 Mbps)
+- Offline: No connection
+
+Design Implications:
+- Don't assume always online (offline-first architecture)
+- Optimize images (WebP format, responsive sizes)
+- Show loading indicators >1 second load time
+- Allow manual refresh (pull-to-refresh)
+- Cache aggressively (reduce network dependency)
+```
+
+**Low-Connectivity Strategy:**
+- Serve cached content first (instant, even if stale)
+- Update in background when connected
+- Show sync status ("Updated 5 min ago")
+- Defer non-critical content (ads, analytics, recommendations)
+- Compress data (gzip, Brotli, protocol buffers)
+
+
+## Platform Detection and Adaptation
+
+### Detecting Platform at Runtime
+
+**iOS (Swift):**
+```swift
+#if os(iOS)
+  // iOS-specific code
+  let tabBar = UITabBar() // iOS tab bar
+#elseif os(macOS)
+  // macOS-specific code
+#endif
+
+// Detect device type
+if UIDevice.current.userInterfaceIdiom == .phone {
+  // iPhone
+} else if UIDevice.current.userInterfaceIdiom == .pad {
+  // iPad
+}
+```
+
+**Android (Kotlin):**
+```kotlin
+// Screen size category
+val screenSize = resources.configuration.screenLayout and
+                 Configuration.SCREENLAYOUT_SIZE_MASK
+
+when (screenSize) {
+    Configuration.SCREENLAYOUT_SIZE_SMALL -> // Small phone
+    Configuration.SCREENLAYOUT_SIZE_NORMAL -> // Normal phone
+    Configuration.SCREENLAYOUT_SIZE_LARGE -> // Large phone/small tablet
+    Configuration.SCREENLAYOUT_SIZE_XLARGE -> // Tablet
+}
+
+// Width breakpoints
+val widthDp = resources.configuration.screenWidthDp
+if (widthDp >= 600) {
+  // Tablet layout
+}
+```
+
+**React Native (Cross-Platform):**
+```javascript
+import { Platform } from 'react-native';
+
+if (Platform.OS === 'ios') {
+  // iOS-specific code
+  return <IOSTabBar />;
+} else if (Platform.OS === 'android') {
+  // Android-specific code
+  return <AndroidBottomNav />;
+}
+```
+
+### Responsive Layout Strategies
+
+**Breakpoint-Based:**
+
+```
+iOS (Size Classes):
+- Compact width: iPhone portrait, narrow iPhone landscape
+- Regular width: iPad, wide iPhone landscape
+- Compact height: iPhone landscape
+- Regular height: iPhone portrait, iPad
+
+Android (Width Breakpoints):
+- < 600dp: Phone portrait
+- 600-839dp: Phone landscape, small tablet portrait
+- 840-1279dp: Large tablet portrait, medium tablet landscape
+- >= 1280dp: Large tablet landscape, desktop
+```
+
+**Layout Adaptation:**
+
+```
+Phone (< 600dp):
+- Single column
+- Bottom navigation
+- Full-width buttons
+- Stacked content
+
+Tablet (>= 600dp):
+- Two columns (master-detail)
+- Side navigation (drawer always visible or tabs)
+- Floating modals (not full-screen)
+- Multi-pane layouts
+```
+
+
+## Cross-Platform Design Strategy
+
+### Option 1: Platform-Specific Design
+
+**Approach:** Design separately for iOS and Android, following each platform's conventions.
+
+**Pros:**
+- Feels native to each platform
+- Leverages platform-specific components
+- Meets user expectations (iOS users expect iOS, Android users expect Android)
+
+**Cons:**
+- Double design effort (two designs, two specs)
+- Double development effort (two implementations)
+- Inconsistent across platforms (brand less recognizable)
+
+**When to Use:**
+- Native development (Swift/SwiftUI for iOS, Kotlin/Jetpack Compose for Android)
+- Platform-first companies (most iOS users OR most Android users, not both)
+- OS-level integration (widgets, Siri shortcuts, Android sharing)
+
+**Example:** Apollo Reddit client (iOS-first, feels perfectly iOS-native)
+
+### Option 2: Unified Design Language
+
+**Approach:** Create single design system, apply to both platforms (ignore platform conventions).
+
+**Pros:**
+- Consistent experience across platforms
+- Single design effort (one design, one spec)
+- Easier to maintain (changes apply everywhere)
+- Strong brand identity
+
+**Cons:**
+- Feels foreign on both platforms
+- More custom development (can't use platform components)
+- Steeper learning curve (users must learn your patterns)
+
+**When to Use:**
+- Strong brand identity (Instagram, Spotify, Netflix)
+- Cross-platform tools (React Native, Flutter)
+- Frequent platform switchers (users have both iOS and Android)
+
+**Example:** Instagram, Spotify (nearly identical on iOS and Android)
+
+### Option 3: Hybrid Approach (Recommended)
+
+**Approach:** Unified brand/design language, but adapt navigation and key interactions to platform conventions.
+
+**Platform-Specific:**
+- Navigation (iOS tab bar, Android bottom nav or drawer)
+- System gestures (iOS swipe back, Android back button)
+- Typography (SF Pro on iOS, Roboto on Android)
+- Modals/sheets (iOS action sheet, Android bottom sheet)
+
+**Unified:**
+- Brand colors, logos, iconography
+- Content layout, information hierarchy
+- Core feature design (posts, feeds, detail screens)
+- Illustration style, photography treatment
+
+**Pros:**
+- Feels native (navigation, gestures)
+- Consistent brand (colors, layout, features)
+- Balanced effort (shared design, minor platform tweaks)
+
+**Cons:**
+- Requires design flexibility (can't pixel-perfect match screenshots)
+- Need platform-aware components (tabs vs bottom nav)
+
+**When to Use:**
+- Most apps (best balance of native feel and consistency)
+- Cross-platform frameworks with platform components (React Native, Flutter)
+- Large user base on both iOS and Android
+
+**Example:** Twitter, Gmail, YouTube (unified brand, platform-adapted navigation)
+
+**Implementation Tips:**
+
+```
+Design System Structure:
+1. Core brand (colors, typography scale, spacing)
+2. Components (buttons, cards, forms - unified)
+3. Navigation (platform-specific templates)
+4. Patterns (platform-specific gestures, modals)
+
+Result: 80% shared, 20% platform-specific
+```
+
+
+## Anti-Patterns
+
+### Priority 0 (Critical - Never Do)
+
+**1. Touch targets smaller than 44pt/48dp:**
+- **Problem:** Users can't tap accurately, frustration, accessibility failure
+- **Impact:** Critical usability issue, WCAG fail
+- **Fix:** Increase touch target to minimum 44x44pt (iOS) or 48x48dp (Android)
+
+**2. Critical actions in top corners:**
+- **Problem:** Hardest reach, especially one-handed
+- **Impact:** Users must reposition hand or use two hands
+- **Fix:** Move primary actions to bottom 50% of screen (thumb zone)
+
+**3. No offline error handling:**
+- **Problem:** App breaks when offline, no feedback
+- **Impact:** Users think app is broken, not just offline
+- **Fix:** Cache content, queue actions, show offline indicator
+
+**4. Ignoring safe areas (notches, home indicators):**
+- **Problem:** Content hidden behind notch or home indicator
+- **Impact:** Critical content unreadable, unprofessional
+- **Fix:** Use system safe area APIs (safeAreaInsets, WindowInsets)
+
+**5. Overriding system back gesture (iOS) or back button (Android):**
+- **Problem:** Breaks universal navigation pattern, confuses users
+- **Impact:** Users trapped in screens, can't navigate out
+- **Fix:** Always support system back navigation
+
+### Priority 1 (High - Avoid)
+
+**6. Blank screens during loading (no skeleton):**
+- **Problem:** Looks broken, feels slow
+- **Impact:** Perceived performance is poor, higher bounce rate
+- **Fix:** Show skeleton screen or cached content while loading
+
+**7. Platform-inappropriate gestures:**
+- **Problem:** Android swipe-back when platform uses back button, or vice versa
+- **Impact:** Inconsistent with user expectations, confusion
+- **Fix:** Follow platform gesture conventions (iOS swipe back, Android back button)
+
+**8. Desktop-first responsive design (shrunk desktop UI):**
+- **Problem:** Small text, tiny touch targets, cramped layout
+- **Impact:** Unusable on mobile, requires zooming
+- **Fix:** Design mobile-first, touch targets 44-48pt minimum, readable text 16sp+
+
+**9. No loading feedback (>1 second operations):**
+- **Problem:** Users don't know if action registered, may tap again
+- **Impact:** Double-submits, confusion, frustration
+- **Fix:** Show spinner or progress indicator for operations >1 second
+
+**10. Modal dialogs for everything:**
+- **Problem:** Overuse of modals interrupts flow, feels heavy
+- **Impact:** Annoying, slows users down
+- **Fix:** Use inline editing, bottom sheets (Android), or action sheets (iOS) for lighter interactions
+
+### Priority 2 (Medium - Be Cautious)
+
+**11. Custom UI that breaks platform expectations:**
+- **Problem:** Non-standard navigation, unusual gestures
+- **Impact:** Learning curve, feels foreign
+- **Fix:** Use platform conventions unless you have strong brand reason to deviate
+
+**12. Animations longer than 300ms:**
+- **Problem:** Slows users down, feels sluggish
+- **Impact:** Perceived performance suffers
+- **Fix:** Keep animations 150-300ms, use interruption (user can tap to skip)
+
+**13. Hidden navigation patterns (hamburger menu overuse):**
+- **Problem:** Navigation hidden behind hamburger, low discoverability
+- **Impact:** Users don't explore features, lower engagement
+- **Fix:** Use bottom navigation (3-5 items) for primary navigation, drawer for secondary
+
+**14. Too many onboarding screens (>3):**
+- **Problem:** Users skip, don't read, or abandon
+- **Impact:** Low completion rate, doesn't teach effectively
+- **Fix:** Progressive onboarding (teach in context when feature is needed)
+
+**15. No pull-to-refresh (for feed-based apps):**
+- **Problem:** Users expect pull-to-refresh, can't manually update
+- **Impact:** Frustration, feels outdated
+- **Fix:** Implement pull-to-refresh for feeds, lists, content screens
+
+**16. Inconsistent touch target sizes:**
+- **Problem:** Some buttons 44pt, others 32pt, creates uneven feel
+- **Impact:** Harder to develop muscle memory, feels sloppy
+- **Fix:** Standardize to 48pt (primary), 44pt (secondary), never below 44pt
+
+
+## Practical Application
+
+### Workflow 1: New iOS App Design
+
+**Step 1: Define Information Architecture**
+- Map top-level sections (3-5 for tab bar)
+- Plan navigation hierarchy (push/pop stack)
+- Identify modal flows (login, creation, settings)
+
+**Step 2: Design for Smallest iOS Device (iPhone SE 375x667pt)**
+- Single column layout
+- Bottom tab bar (49pt + safe area)
+- Top navigation bar (44pt or 96pt large title)
+- Safe area insets (status bar, home indicator)
+
+**Step 3: Apply iOS Visual Patterns**
+- Typography: SF Pro, large titles (34pt), body (17pt)
+- Components: Tab bar, navigation bar, segmented controls
+- Colors: System colors for light/dark mode support
+- Corners: 13pt radius for cards, 8-10pt for buttons
+
+**Step 4: Specify Touch Targets and Spacing**
+- Minimum: 44x44pt for all interactive elements
+- Spacing: 8pt minimum between targets
+- Primary buttons: 48pt height
+- Form inputs: 44pt height
+
+**Step 5: Define Gestures**
+- Swipe back: System gesture (enabled by default)
+- Pull to refresh: UIRefreshControl for lists
+- Swipe actions: Trailing (delete) and leading (archive) on list items
+- Long press: Context menu for previews
+
+**Step 6: Design Loading and Error States**
+- Skeleton screens: Show content structure while loading
+- Pull-to-refresh: Manual refresh option
+- Error states: Clear message + retry button
+- Empty states: Illustration + message + CTA
+
+**Step 7: Test on Multiple iOS Sizes**
+- iPhone SE (375pt): Smallest, most constrained
+- iPhone 13 (390pt): Most common
+- iPhone 14 Pro Max (430pt): Largest, test scaling
+- iPad (768pt+): Adapt to two-column if supported
+
+**Step 8: Accessibility Check**
+- VoiceOver labels for all interactive elements
+- Dynamic Type support (text scales with user setting)
+- High contrast colors (check in accessibility settings)
+- Reduce motion support (disable animations)
+
+### Workflow 2: New Android App Design
+
+**Step 1: Define Information Architecture**
+- Map top-level destinations (3-5 for bottom nav, 6+ for drawer)
+- Plan navigation hierarchy (fragments, back stack)
+- Identify modals and bottom sheets
+
+**Step 2: Design for Smallest Android Device (360x640dp)**
+- Single column layout
+- Bottom navigation (56dp) or navigation drawer
+- Top app bar (56dp)
+- System navigation bar spacing (gesture or button nav)
+
+**Step 3: Apply Material Design Patterns**
+- Typography: Roboto, H6 (20sp), Body1 (16sp)
+- Components: Bottom nav, FAB, top app bar, bottom sheets
+- Elevation: Cards 1dp, app bar 4dp, FAB 6dp, bottom nav 8dp
+- Colors: Primary (brand), secondary (accent), surface, error
+- Corners: 4dp for cards/buttons, 8dp for bottom sheets
+
+**Step 4: Specify Touch Targets and Spacing**
+- Minimum: 48x48dp for all interactive elements
+- Spacing: 8dp minimum between targets
+- Primary buttons: 56dp height
+- FAB: 56dp diameter
+
+**Step 5: Define Gestures**
+- System back: Support back button and gesture (edge swipe)
+- Pull to refresh: SwipeRefreshLayout for lists
+- Swipe to dismiss: Notifications, cards (optional)
+- Bottom sheet swipe: Expand/collapse gestures
+- Navigation drawer: Left edge swipe to open (if using drawer)
+
+**Step 6: Design Loading and Error States**
+- Skeleton screens: Show content structure while loading
+- Pull-to-refresh: Manual refresh option
+- Snackbars: Brief messages (4s), optional action
+- Error states: Clear message + retry button
+
+**Step 7: Test on Multiple Android Sizes**
+- Small phone (360dp): Smallest, most constrained
+- Medium phone (411dp): Common (Pixel, Samsung)
+- Large phone (480dp): Test scaling
+- Tablet (600dp+): Adapt to two-column layout
+
+**Step 8: Accessibility Check**
+- TalkBack labels for all interactive elements
+- Large text support (test at 200% font size)
+- High contrast colors (check in accessibility settings)
+- Touch target size (48dp minimum, test with accessibility scanner)
+
+### Workflow 3: Cross-Platform App (React Native/Flutter)
+
+**Step 1: Define Unified Information Architecture**
+- Core features same on both platforms
+- Navigation adapts to platform (iOS tab bar, Android bottom nav)
+- Content screens identical (articles, profiles, detail pages)
+
+**Step 2: Create Unified Design System**
+- Brand colors (apply to both platforms)
+- Typography scale (adapt font family per platform: SF Pro/Roboto)
+- Component library (buttons, cards, forms - unified styling)
+- Iconography (custom icon set or cross-platform library)
+
+**Step 3: Design Platform-Specific Navigation**
+- **iOS:** Tab bar (bottom), navigation bar (top), large titles
+- **Android:** Bottom navigation or drawer, top app bar, FAB
+
+**Step 4: Specify Touch Targets (Use Larger Minimum)**
+- Minimum: 48x48pt/dp (largest of the two platforms)
+- Works for both iOS (44pt min) and Android (48dp min)
+- Reduces platform-specific specs
+
+**Step 5: Define Gestures (Support Both Platform Conventions)**
+- iOS: Swipe back (from left edge)
+- Android: Back button and gesture
+- Both: Pull to refresh, swipe actions (if used), pinch to zoom
+- Use platform-detection for gesture implementation
+
+**Step 6: Implement Platform-Aware Components**
+
+```
+Example: Navigation Component (React Native)
+import { Platform } from 'react-native';
+
+const Navigation = () => {
+  if (Platform.OS === 'ios') {
+    return <TabBar items={topLevelScreens} />;
+  } else {
+    return <BottomNavigation items={topLevelScreens} />;
+  }
+};
+```
+
+**Step 7: Test on Both Platforms**
+- iOS: iPhone SE, iPhone 13, iPad (if supported)
+- Android: Small phone (360dp), medium phone (411dp), tablet (if supported)
+- Verify navigation feels native to each platform
+
+**Step 8: Accessibility on Both Platforms**
+- iOS: VoiceOver, Dynamic Type
+- Android: TalkBack, large text
+- Cross-platform: Ensure accessibility props work on both
+
+### Workflow 4: Mobile-Responsive Web App
+
+**Step 1: Mobile-First Design (Start at 375px Width)**
+- Single column layout
+- Touch-friendly targets (48x48px minimum)
+- Readable text (16px+ body text)
+- Thumb-reachable navigation (bottom or sticky header)
+
+**Step 2: Navigation Pattern (Web Mobile)**
+- **Bottom navigation:** 3-5 items, fixed position (mimics native app)
+- **Hamburger menu:** Overlay menu (left or right slide-in)
+- **Sticky header:** Fixed top navigation (can collapse on scroll)
+
+**Step 3: Touch Target Sizing (48x48px Minimum)**
+- Web mobile uses physical pixels (px)
+- Minimum: 48x48px (slightly larger than iOS 44pt at 2x = 88px physical)
+- Spacing: 8px minimum between targets
+
+**Step 4: Typography (Web Mobile)**
+- Body text: 16px minimum (prevents iOS auto-zoom on focus)
+- Line height: 1.5 (24px for 16px text)
+- Headings: 24px+, line height 1.2-1.3
+- Max line length: 70ch (~600px at 16px)
+
+**Step 5: Gestures (Web Mobile)**
+- **Tap:** Standard (click events work)
+- **Scroll:** Vertical swipe (native browser)
+- **Pinch zoom:** Disabled by default on web (viewport meta tag), enable for images/maps
+- **Pull to refresh:** Not standard on web, can implement with JS library
+- **No swipe back:** Web doesn't have system swipe back (use back button in nav)
+
+**Step 6: Responsive Breakpoints**
+```
+Mobile: < 600px (single column, bottom nav)
+Tablet: 600-1024px (two column, side nav optional)
+Desktop: > 1024px (multi-column, side nav)
+```
+
+**Step 7: Progressive Web App Features (Optional)**
+- Add to home screen (PWA manifest)
+- Service worker (offline support)
+- Push notifications (web push)
+- Feels like native app on mobile
+
+**Step 8: Test on Real Devices**
+- iOS Safari: Quirks with viewport, safe areas
+- Android Chrome: Default browser
+- Test touch targets, scrolling, gestures
+
+
+## Related Skills
+
+**Core Lyra UX Skills:**
+- **`lyra/ux-designer/visual-design-foundations`**: Visual hierarchy, contrast, typography, color (applies to mobile, but mobile has specific constraints like high outdoor contrast)
+- **`lyra/ux-designer/interaction-design-patterns`**: Touch targets (44x44pt iOS, 48x48dp Android), button states, feedback, animations (mobile is touch-first subset of general interactions)
+- **`lyra/ux-designer/information-architecture`**: Navigation structure, hierarchy (mobile requires simpler, flatter IA due to smaller screen)
+- **`lyra/ux-designer/accessibility-and-inclusive-design`**: Touch target sizing (WCAG 44px min), VoiceOver/TalkBack, high contrast, large text support (critical for mobile)
+- **`lyra/ux-designer/user-research-and-validation`**: Usability testing on mobile devices, thumb zone validation, one-handed use testing
+
+**Other Platform Skills:**
+- **`lyra/ux-designer/web-application-design`**: Responsive web differs from native mobile (no native gestures, different navigation patterns)
+- **`lyra/ux-designer/desktop-software-design`**: Desktop has opposite constraints (mouse precision, large screen, keyboard-first)
+- **`lyra/ux-designer/game-ui-design`**: Games on mobile have unique constraints (performance, gamepad or touch controls)
+
+**Meta-Skill:**
+- **`lyra/ux-designer/using-ux-designer`**: Routes to appropriate UX skill based on user's question (mentions "mobile", "iOS", "Android" → routes here)
+
+**Cross-Faction:**
+- **`muna/technical-writer/clarity-and-style`**: Clear UI copy, error messages, microcopy (especially important on mobile where space is limited)
+- **`ordis/security-architect/secure-authentication-patterns`**: Biometric authentication (Face ID, Touch ID, Android Biometric), secure mobile auth flows
+
+
+## Additional Resources
+
+**iOS Human Interface Guidelines:**
+- **Official documentation:** https://developer.apple.com/design/human-interface-guidelines/ios
+- **Key sections:** Layout (safe areas, size classes), Visual Design (typography, color), Interaction (gestures, touch)
+- **Updated regularly:** Check for latest iOS version guidelines
+
+**Android Material Design:**
+- **Official documentation:** https://m3.material.io/ (Material 3, latest)
+- **Key sections:** Foundations (layout, typography, color), Components (bottom nav, FAB, app bar), Motion
+- **Material 3 vs Material 2:** Material 3 is newest (dynamic color, updated components), but Material 2 still widely used
+
+**Touch Target Standards:**
+- Apple HIG: 44x44pt minimum
+- Material Design: 48x48dp minimum
+- WCAG 2.1 Level AAA (SC 2.5.5): 44x44px minimum
+- Microsoft: 34x34px minimum (less strict)
+
+**Platform-Specific Components:**
+- **iOS:** UITabBar, UINavigationBar, UISegmentedControl, UIActionSheet
+- **Android:** BottomNavigationView, FloatingActionButton, AppBarLayout, BottomSheetDialog
+- **Cross-platform:** React Native, Flutter have platform-aware components
+
+**Testing Tools:**
+- **iOS:** Xcode Simulator (size classes, safe areas, dark mode)
+- **Android:** Android Studio Emulator (screen sizes, system navigation modes)
+- **Accessibility:** iOS Accessibility Inspector, Android Accessibility Scanner
+- **Performance:** Xcode Instruments, Android Profiler
+
+**Design Tools:**
+- **Figma:** iOS and Android design kits (official and community)
+- **Sketch:** iOS and Android UI kits
+- **Adobe XD:** Mobile design templates
+- **Framer:** Interactive prototypes with gestures
+
+**Recommended Reading:**
+- "Mobile Design Pattern Gallery" by Theresa Neil
+- "Designing Mobile Interfaces" by Steven Hoober & Eric Berkman
+- iOS HIG (updated with each iOS release)
+- Material Design Guidelines (updated regularly)
+- "Don't Make Me Think" by Steve Krug (general usability, applies to mobile)
diff --git a/skills/using-ux-designer/user-research-and-validation.md b/skills/using-ux-designer/user-research-and-validation.md
new file mode 100644
index 0000000..5d60ef4
--- /dev/null
+++ b/skills/using-ux-designer/user-research-and-validation.md
@@ -0,0 +1,1386 @@
+
+# User Research and Validation
+
+## Overview
+
+This skill teaches systematic user research methodology across all project phases, from initial discovery through post-launch optimization. Use when you need to understand users, test designs, or validate design decisions with evidence.
+
+**Core Principle**: Design decisions based on user evidence are more successful than decisions based on assumptions, intuition, or stakeholder opinions alone.
+
+## When to Use
+
+Load this skill when:
+- Starting a new project (need to understand users first)
+- User asks: "How do I test this design?", "Will users understand this?"
+- Validating design decisions before development
+- Post-launch evaluation and optimization
+- User mentions: "research", "testing", "validation", "users", "interviews", "usability"
+
+**Don't use for**: Pure design specification (use visual/interaction/IA skills), technical implementation
+
+
+## The User Understanding Model
+
+A systematic 5-phase approach matching project lifecycle:
+
+**Phase 1: DISCOVERY** - Understand users, context, problems
+**Phase 2: GENERATIVE** - Explore possibilities, ideate solutions
+**Phase 3: EVALUATIVE** - Test designs, identify usability issues
+**Phase 4: VALIDATION** - Confirm design meets user needs
+**Phase 5: POST-LAUNCH** - Measure impact, identify improvements
+
+Each phase has specific methods, research questions, and deliverables.
+
+
+## Phase 1: Discovery Research
+
+### Purpose
+
+Understand users deeply before designing solutions. Answer: Who are the users? What problems do they face? What's their current workflow?
+
+**When to use**: Project kickoff, redesign, entering new market, foundational understanding
+
+### Research Methods
+
+#### Method 1: User Interviews (Contextual Inquiry)
+
+**Setup:**
+- 5-8 participants (representative sample)
+- 30-60 minutes per interview
+- User's environment (office, home, wherever they'd use product)
+- Record with permission (audio/video)
+
+**Script structure:**
+1. Introduction (5 min) - Build rapport, explain purpose
+2. Background (10 min) - Demographics, tech comfort, role
+3. Current workflow (20 min) - "Walk me through how you currently..."
+4. Pain points (15 min) - "What's frustrating about this?"
+5. Goals and motivations (10 min) - "What would success look like?"
+
+**Key questions:**
+- "Tell me about the last time you [did task]..."
+- "What's the hardest part of [workflow]?"
+- "If you could wave a magic wand, what would you change?"
+- "What workarounds have you developed?"
+
+**Good practices:**
+- Ask open-ended questions ("Tell me about..." not "Do you like...?")
+- Follow up with "Why?" to understand motivations
+- Observe actual behavior (not just self-reported)
+- Stay neutral (don't lead toward your preferred solution)
+
+**Anti-patterns:**
+- Leading questions ("Don't you think X would be better?")
+- Only talking to power users (miss mainstream needs)
+- Interviewing in artificial settings (miss real context)
+- Pitching your solution (you're here to learn, not sell)
+
+#### Method 2: Field Observations (Ethnographic)
+
+**Setup:**
+- Observe users in natural environment
+- 2-4 hours per observation
+- Take notes on context, workarounds, interruptions
+- Minimal intervention (be a fly on wall)
+
+**What to observe:**
+- Physical environment (lighting, noise, space constraints)
+- Tools they use (software, hardware, paper notes)
+- Workarounds (sticky notes, spreadsheets, manual steps)
+- Interruptions (calls, colleagues, notifications)
+- Emotional reactions (frustration, confusion, satisfaction)
+
+**Documentation:**
+- Photos of workspace (with permission)
+- Video of workflows (if allowed)
+- Detailed field notes
+- Artifacts (forms they fill, outputs they create)
+
+**Benefits:**
+- See actual behavior (not self-reported)
+- Discover unarticulated needs
+- Understand real context (messy reality, not ideal)
+
+#### Method 3: Diary Studies
+
+**Setup:**
+- Users log experiences over time (1-4 weeks)
+- Mobile app, Google Form, or notebook
+- Daily or event-triggered entries
+- Minimal burden (3-5 minutes per entry)
+
+**Entry prompts:**
+- "What task did you complete?"
+- "Rate difficulty (1-5)"
+- "What went well? What was frustrating?"
+- "Photo of situation (optional)"
+
+**When to use:**
+- Longitudinal behavior (patterns over time)
+- Infrequent tasks (happens weekly, not daily)
+- Context variety (different locations, times)
+
+#### Method 4: Analytics Review (Quantitative Baseline)
+
+**Data to gather:**
+- Usage patterns (feature adoption, frequency)
+- Drop-off points (where users abandon)
+- Error rates (where things break)
+- Time on task (efficiency baseline)
+- Device/browser distribution
+
+**Tools:**
+- Google Analytics, Mixpanel (web)
+- Firebase Analytics (mobile)
+- Hotjar, FullStory (session recordings)
+- Server logs (API usage, errors)
+
+**Look for:**
+- High-traffic flows (optimize these first)
+- Abandonment funnels (usability issues)
+- Feature deserts (built but not used)
+- Error spikes (technical or UX problems)
+
+### Research Questions to Answer
+
+**User Characteristics:**
+- Who are they? (demographics, role, tech comfort)
+- What's their experience level? (novice → expert)
+- What devices do they use? (mobile, desktop, tablet)
+- What's their context? (office, home, on-the-go, distractions)
+
+**Goals and Motivations:**
+- What are they trying to accomplish?
+- Why is this important to them?
+- What's their success criteria?
+- What would make them switch to competitor?
+
+**Current Workflow:**
+- How do they accomplish task today?
+- What tools do they use?
+- What steps are involved?
+- How long does it take?
+
+**Pain Points:**
+- What's frustrating about current approach?
+- Where do they get stuck?
+- What errors do they encounter?
+- What workarounds have they developed?
+
+**Mental Models:**
+- How do they think about the problem space?
+- What terminology do they use?
+- What categories make sense to them?
+- What analogies do they use?
+
+### Deliverables
+
+#### User Personas
+
+**Structure:**
+- Name and photo (humanize)
+- Demographics (age, role, tech comfort)
+- Goals (what they want to accomplish)
+- Pain points (current frustrations)
+- Behaviors (how they work today)
+- Quote (memorable user voice)
+
+**Example:**
+
+```
+Sarah - The Efficiency-Focused Manager
+
+Age: 35 | Role: Marketing Manager | Tech Comfort: Medium
+
+Goals:
+- Monitor campaign performance at a glance
+- Quickly generate reports for executives
+- Collaborate with team on content calendar
+
+Pain Points:
+- Data scattered across 5 different tools
+- Takes 2 hours to build executive report
+- Can't see real-time campaign status
+
+Behaviors:
+- Checks dashboard 3-4 times per day
+- Works primarily on laptop, occasionally mobile
+- Prefers visual summaries over detailed tables
+
+Quote: "I just want to see what's working and what's not, without digging through spreadsheets."
+```
+
+**Good practices:**
+- Base on real research (not assumptions)
+- 3-5 personas (not 10+, too many to use)
+- Focus on behaviors and goals (not just demographics)
+- Include primary persona (design for this one first)
+
+**Anti-patterns:**
+- Marketing personas (not UX personas - different goals)
+- Stereotypes without research basis
+- Too many personas (design becomes unfocused)
+- Perfect users (no pain points or constraints)
+
+#### Journey Maps
+
+**Structure:**
+- Phases (stages of user journey)
+- Actions (what user does at each stage)
+- Thoughts (what they're thinking)
+- Emotions (how they feel - graph line)
+- Pain points (frustrations encountered)
+- Opportunities (where design can help)
+
+**Example: E-commerce Purchase Journey**
+
+```
+Phase 1: DISCOVERY
+Actions: Search, browse categories, filter results
+Thoughts: "Do they have what I need?"
+Emotions: Curious → Frustrated (can't find it)
+Pain points: Unclear categories, too many results
+Opportunities: Better search, faceted filtering
+
+Phase 2: EVALUATION
+Actions: Compare products, read reviews, check specs
+Thoughts: "Is this the right choice? Can I trust this?"
+Emotions: Analytical → Uncertain
+Pain points: Missing spec comparisons, conflicting reviews
+Opportunities: Comparison tool, verified reviews
+
+Phase 3: PURCHASE
+Actions: Add to cart, enter shipping, payment
+Thoughts: "Is this secure? What if I need to return it?"
+Emotions: Cautious → Anxious
+Pain points: Unexpected shipping costs, unclear return policy
+Opportunities: Transparent pricing, clear return policy upfront
+```
+
+**Good practices:**
+- Based on real user journeys (not ideal path)
+- Include emotional arc (highs and lows)
+- Highlight pain points (design opportunities)
+- Show cross-channel journeys (mobile → desktop)
+
+#### Research Insights Report
+
+**Structure:**
+1. Executive Summary (1 page)
+2. Methodology (who, how, when)
+3. Key Findings (5-10 insights with evidence)
+4. User Personas (detailed profiles)
+5. Journey Maps (visual workflows)
+6. Opportunity Areas (prioritized design implications)
+7. Appendix (raw data, interview transcripts)
+
+**Key Findings Format:**
+
+```
+Finding 3: Users abandon checkout due to unexpected costs
+
+Evidence:
+- 67% of users mentioned shipping costs as frustration (8/12 interviews)
+- Analytics show 43% cart abandonment at shipping step
+- "I hate when they hide the total cost until the end" - multiple quotes
+
+Implications:
+- Show estimated total early in flow
+- Be transparent about shipping costs upfront
+- Consider free shipping threshold
+
+Priority: HIGH (affects 43% of users at critical conversion point)
+```
+
+
+## Phase 2: Generative Research
+
+### Purpose
+
+Explore possibilities and generate solutions collaboratively with users. Answer: How do users think about organizing this? What solutions resonate with them?
+
+**When to use**: After discovery, during ideation, before committing to specific design direction
+
+### Research Methods
+
+#### Method 1: Card Sorting
+
+**Purpose**: Understand how users mentally organize information
+
+**Types:**
+
+**Open Card Sorting** (exploratory):
+- Users create their own categories
+- Reveals mental models
+- Use for new IA, unclear structure
+
+**Closed Card Sorting** (validation):
+- Users place cards in predefined categories
+- Tests proposed structure
+- Use to validate IA decisions
+
+**Setup:**
+- 15-30 participants (for statistical validity)
+- 40-60 cards (content items, features)
+- Online tools: OptimalSort, UserZoom
+- Physical cards: 3x5 index cards
+
+**Process:**
+1. Participant gets stack of cards (each = content item)
+2. "Group these in a way that makes sense to you"
+3. "Name each group you created"
+4. (Optional) "Describe your thinking"
+
+**Analysis:**
+- Cluster analysis (which cards grouped together frequently)
+- Category names (user terminology)
+- Patterns across participants (consensus vs diversity)
+
+**Deliverables:**
+- Dendrogram (tree showing card relationships)
+- Category labels (from user language)
+- IA recommendations (structure that matches mental models)
+
+**Good practices:**
+- Use actual content (not generic labels)
+- Test with representative users (not internal team)
+- Mix easy and ambiguous items (find the edge cases)
+
+**Anti-patterns:**
+- Too many cards (>60 = cognitive overload)
+- Cards that overlap (confuses participants)
+- Only testing with 3 users (not statistically valid)
+
+#### Method 2: Co-Design Workshops
+
+**Purpose**: Generate solutions collaboratively with users
+
+**Setup:**
+- 6-10 participants (representative users)
+- 2-3 hours
+- Materials: paper, markers, sticky notes, templates
+- Facilitators: 1 lead, 1 note-taker
+
+**Activities:**
+
+**Brainstorming:**
+- "How might we [improve X]?"
+- Quantity over quality (defer judgment)
+- Build on others' ideas
+- 10-15 minutes of rapid ideation
+
+**Sketching:**
+- Low-fidelity sketches (no art skills needed)
+- 8-12 frames (crazy eights method)
+- Focus on flows, not pixel perfection
+- 5 minutes per sketch round
+
+**Dot Voting:**
+- Participants vote on favorite ideas
+- 3 dots per person
+- Can cluster votes or spread them
+- Reveals group priorities
+
+**Storyboarding:**
+- Map ideal user journey
+- Before/during/after scenarios
+- Show context and emotions
+- Identify key moments
+
+**Benefits:**
+- Users feel heard (buy-in)
+- Uncover unarticulated needs
+- Generate diverse ideas
+- Validate assumptions early
+
+#### Method 3: Concept Testing
+
+**Purpose**: Test early ideas before investing in high-fidelity design
+
+**Format:**
+- Sketches, wireframes, or paper prototypes
+- 5-8 participants
+- 15-30 minutes per session
+- Show concept, gather reactions
+
+**Questions:**
+- "What do you think this does?"
+- "How would you use this?"
+- "What's unclear or confusing?"
+- "How does this compare to current approach?"
+- "Would you use this? Why or why not?"
+
+**Variations:**
+
+**A/B Concept Testing:**
+- Show two different approaches
+- Ask which they prefer and why
+- Not a vote (understand reasoning)
+
+**Desirability Study:**
+- Show concept
+- "Pick 5 words that describe this" (from 60-word list)
+- Reveals emotional response and brand perception
+
+**Benefits:**
+- Fail fast (before development)
+- Understand reactions (not just usability)
+- Compare directions (which resonates)
+
+#### Method 4: Affinity Mapping (Synthesis)
+
+**Purpose**: Synthesize research findings into insights
+
+**Process:**
+1. Write each observation on sticky note (from interviews, studies)
+2. Put all notes on wall
+3. Group similar observations together
+4. Name each group (theme)
+5. Identify patterns across themes
+
+**Example themes:**
+- "Users struggle with navigation" (12 notes)
+- "Price transparency is critical" (8 notes)
+- "Mobile experience is frustrating" (15 notes)
+
+**Deliverables:**
+- Thematic clusters (key insights)
+- Priority order (by frequency or impact)
+- Design implications (what to do about it)
+
+**Good practices:**
+- Involve cross-functional team (diverse perspectives)
+- Use actual user quotes (not interpretations)
+- Look for patterns (not one-off comments)
+- Connect to business goals (not just user wants)
+
+### Deliverables
+
+**Information Architecture Proposals:**
+- Sitemap (navigation structure)
+- Category labels (user terminology)
+- Justification (based on card sorting, mental models)
+
+**Low-Fidelity Concepts:**
+- Paper sketches (workflow options)
+- Wireframes (structure, no visual design)
+- Flow diagrams (user paths)
+
+**Feature Prioritization:**
+- MoSCoW method (Must/Should/Could/Won't)
+- Impact vs effort matrix (quick wins vs long-term)
+- User priority (from co-design voting)
+
+
+## Phase 3: Evaluative Research
+
+### Purpose
+
+Test designs to identify usability issues before development. Answer: Can users complete tasks? Where do they struggle?
+
+**When to use**: Mid-design, after wireframes/prototypes created, before high-fidelity investment
+
+### Research Methods
+
+#### Method 1: Usability Testing (Moderated)
+
+**Purpose**: Watch users attempt tasks, identify friction points
+
+**Setup:**
+- 5-8 participants (Nielsen: 5 users find 85% of issues)
+- 45-60 minutes per session
+- Prototype (clickable wireframes or mockups)
+- Think-aloud protocol (narrate thoughts)
+
+**Test structure:**
+
+1. **Introduction (5 min)**
+   - Explain purpose: "Testing design, not you"
+   - Ask to think aloud
+   - Remind: no wrong answers
+
+2. **Warm-up task (5 min)**
+   - Easy task to practice thinking aloud
+   - Builds comfort
+
+3. **Core tasks (30 min)**
+   - 5-7 realistic tasks
+   - Specific, scenario-based
+   - "You need to [goal]. Show me how you'd do that."
+
+4. **Post-task questions (10 min)**
+   - "What was confusing?"
+   - "What would you change?"
+   - "How does this compare to current approach?"
+
+5. **Wrap-up (5 min)**
+   - Overall impressions
+   - Thank participant
+
+**Good task examples:**
+- "You need to change your shipping address. Show me how." (specific goal)
+- "Find the return policy for this product." (findability)
+- "Compare the features of these two plans." (information clarity)
+
+**Bad task examples:**
+- "Click the settings button" (too specific, not realistic)
+- "What do you think of this page?" (not a task)
+- "Do you like the blue button?" (leading, not behavioral)
+
+**What to observe:**
+- Task success (completed, partial, failed)
+- Time on task (efficiency)
+- Errors (wrong clicks, backtracking)
+- Confusion (hesitation, pauses, "hmm...")
+- Workarounds (unexpected paths to goal)
+- Emotional reactions (frustration, delight)
+
+**Note-taking:**
+- Use observer template (task, time, success, notes, severity)
+- Record session (with permission)
+- Tag issues (navigation, labeling, feedback, visual hierarchy)
+
+**Good practices:**
+- Don't help (unless completely stuck)
+- Probe for understanding ("What are you thinking?")
+- Stay neutral (no leading)
+- Test realistic tasks (not feature tours)
+
+**Anti-patterns:**
+- Leading users ("Try clicking the blue button")
+- Defending design ("But that's obvious, isn't it?")
+- Testing with 1-2 users only (not enough)
+- Testing final-stage designs (too late to fix major issues)
+
+#### Method 2: Unmoderated Remote Testing
+
+**Purpose**: Scale testing across more users, faster
+
+**Tools:**
+- UserTesting.com
+- Maze
+- Lookback
+- UsabilityHub
+
+**Setup:**
+- 10-20 participants (broader sample)
+- 15-20 minutes per test
+- Pre-recorded task instructions
+- Automated metrics
+
+**Advantages:**
+- Faster turnaround (hours, not weeks)
+- Larger sample size (statistical confidence)
+- No scheduling logistics
+- Users in natural environment
+
+**Disadvantages:**
+- Can't probe ("Why did you do that?")
+- Technical issues harder to diagnose
+- Less nuanced observations
+
+**When to use:**
+- Quick validation (A vs B)
+- Large sample needed
+- Limited budget/time
+- Simple task flows
+
+#### Method 3: Tree Testing
+
+**Purpose**: Validate information architecture (findability)
+
+**Setup:**
+- Text-only hierarchy (no visual design)
+- 15-30 participants
+- 5-8 findability tasks
+- Online tool: Treejack (Optimal Workshop)
+
+**Process:**
+1. Show text sitemap (categories and subcategories)
+2. Task: "Where would you look to find [X]?"
+3. Participant clicks through hierarchy
+4. Success or failure recorded
+
+**Metrics:**
+- Task success rate (found correct location)
+- Directness (straight path vs backtracking)
+- Time to complete
+- First click (did they start in right direction?)
+
+**Analysis:**
+- Which categories are clear vs confusing?
+- Where do users go wrong? (misleading labels)
+- Which content is hard to find? (IA gaps)
+
+**Benefits:**
+- Tests IA without visual design (pure structure)
+- Identifies labeling issues
+- Fast to run and analyze
+
+#### Method 4: First-Click Testing
+
+**Purpose**: Validate if users can start tasks correctly
+
+**Setup:**
+- Screenshot or prototype
+- "To accomplish [task], what would you click first?"
+- One click per task
+- 15-30 participants
+
+**Analysis:**
+- Heat map (where users clicked)
+- Success rate (clicked correct element)
+- Misclicks (where they went wrong)
+
+**Insight:**
+- First click predicts task success (if first click right, 87% complete task successfully)
+- Identifies unclear navigation
+- Tests visual hierarchy (do important elements get clicked?)
+
+### Research Questions to Answer
+
+**Usability:**
+- Can users complete core tasks?
+- How long does it take? (efficiency)
+- What errors do they make?
+- Where do they get stuck?
+
+**Findability:**
+- Can users locate features/content?
+- Do labels make sense?
+- Is navigation intuitive?
+- Do search results match expectations?
+
+**Comprehension:**
+- Do users understand what elements do?
+- Is feedback clear?
+- Are error messages helpful?
+- Is terminology familiar?
+
+**Satisfaction:**
+- Is the experience pleasant?
+- What delights users?
+- What frustrates them?
+- Would they recommend it?
+
+### Deliverables
+
+#### Usability Findings Report
+
+**Structure:**
+1. **Executive Summary**
+   - Overall success rates
+   - Top 5 critical issues
+   - Recommendations priority
+
+2. **Methodology**
+   - Participants (who, how recruited)
+   - Tasks tested
+   - Test environment
+
+3. **Findings by Task**
+   - Task description
+   - Success rate (5/8 completed)
+   - Time on task (average)
+   - Key issues observed
+   - Severity rating
+
+4. **Issue Details**
+   - Issue description (what went wrong)
+   - Severity (critical/high/medium/low)
+   - Evidence (quotes, clips, frequency)
+   - Recommendation (how to fix)
+   - Affected users (5/8 participants)
+
+5. **Prioritized Recommendations**
+   - Quick wins (high impact, low effort)
+   - Critical fixes (before launch)
+   - Future improvements (next iteration)
+
+**Issue Severity Scale:**
+- **Critical**: Blocks task completion, affects all users
+- **High**: Major friction, affects most users
+- **Medium**: Slows users down, workarounds exist
+- **Low**: Minor annoyance, rare occurrence
+
+**Example Finding:**
+
+```
+Issue #3: Users can't find the "Save" button (HIGH SEVERITY)
+
+Observed: 6/8 participants looked around screen for 10+ seconds before finding save button in bottom-right corner. Two gave up and asked for help.
+
+Quotes:
+- "Where's the save button? I keep looking for it..."
+- "Oh, it's way down there. I didn't see it."
+
+Recommendation: Move save button to top-right (expected location) OR make it a prominent floating action button. Consider adding keyboard shortcut (Cmd+S) for power users.
+
+Priority: Fix before launch (blocks core workflow)
+```
+
+#### Task Success Rates
+
+**Metrics table:**
+
+| Task | Success | Partial | Failed | Avg Time | Notes |
+|------|---------|---------|--------|----------|-------|
+| Change shipping address | 7/8 (88%) | 1/8 | 0/8 | 45s | Easy |
+| Find return policy | 4/8 (50%) | 2/8 | 2/8 | 2m 15s | Label unclear |
+| Compare pricing plans | 2/8 (25%) | 3/8 | 3/8 | 3m 30s | Table confusing |
+
+**Benchmark targets:**
+- Core tasks: >80% success rate
+- Secondary tasks: >60% success rate
+- Average task time: <2 minutes for common tasks
+
+**Issue Severity Ratings:**
+- Critical: 5 issues (must fix)
+- High: 8 issues (should fix)
+- Medium: 12 issues (consider)
+- Low: 6 issues (backlog)
+
+
+## Phase 4: Validation Research
+
+### Purpose
+
+Confirm design meets user needs and follows best practices before launch. Answer: Is design ready to ship?
+
+**When to use**: Pre-launch, final design validation, quality assurance
+
+### Research Methods
+
+#### Method 1: Heuristic Evaluation (Expert Review)
+
+**Purpose**: Expert applies usability principles to find violations
+
+**Framework: Nielsen's 10 Usability Heuristics**
+
+1. **Visibility of system status** - Users know what's happening
+2. **Match system and real world** - Familiar language and concepts
+3. **User control and freedom** - Undo/redo, escape hatches
+4. **Consistency and standards** - Patterns match conventions
+5. **Error prevention** - Design prevents mistakes
+6. **Recognition over recall** - Minimize memory load
+7. **Flexibility and efficiency** - Shortcuts for power users
+8. **Aesthetic and minimalist** - No unnecessary information
+9. **Error recovery** - Help users fix mistakes
+10. **Help and documentation** - When needed, accessible
+
+**Process:**
+1. Expert walks through interface
+2. Evaluates against each heuristic
+3. Documents violations (with severity)
+4. Provides recommendations
+
+**Severity scale:**
+- 0 = Not a problem
+- 1 = Cosmetic (fix if time)
+- 2 = Minor usability issue
+- 3 = Major usability issue (priority)
+- 4 = Usability catastrophe (must fix)
+
+**Benefits:**
+- Fast (1-2 days)
+- Cheap (expert time only, no users)
+- Finds 30-40% of issues
+- Good for catching obvious violations
+
+**Limitations:**
+- Expert opinions (not user behavior)
+- Misses novel issues (not covered by heuristics)
+- Should complement user testing (not replace)
+
+#### Method 2: Cognitive Walkthrough
+
+**Purpose**: Step through tasks to find learning barriers
+
+**Process:**
+1. Define user persona and goals
+2. List task steps
+3. For each step, ask:
+   - "Will user know what to do?"
+   - "Will user see how to do it?"
+   - "Will user understand the feedback?"
+   - "Will user know they're making progress?"
+
+**Example walkthrough: Change password**
+
+```
+Step 1: User needs to find settings
+→ Will user know settings exist? (Yes, common pattern)
+→ Will user see settings menu? (Yes, in top-right nav)
+→ Issue: None
+
+Step 2: User needs to find "Change Password"
+→ Will user know it's in Account section? (Maybe - test)
+→ Will user see it in the list? (Yes, clear label)
+→ Will user understand it's clickable? (Yes, styled as link)
+→ Issue: None
+
+Step 3: User needs to enter current password
+→ Will user understand why? (Yes, security explained)
+→ Will user remember current password? (Maybe - offer "Forgot?" link)
+→ Issue: Add "Forgot password?" link
+```
+
+**Deliverable**: Step-by-step analysis with identified learning barriers
+
+#### Method 3: Accessibility Audit (WCAG Compliance)
+
+**Purpose**: Ensure design is accessible to people with disabilities
+
+**Standards: WCAG 2.1 Level AA** (minimum legal requirement)
+
+**Automated checks** (tools: Axe, Lighthouse, WAVE):
+- Color contrast (4.5:1 for text, 3:1 for UI elements)
+- Alt text on images
+- Form labels
+- Heading hierarchy
+- Link text (not "click here")
+
+**Manual checks:**
+- Keyboard navigation (Tab, Enter, Esc, arrows)
+- Focus indicators visible (2px outline)
+- Skip links (bypass navigation)
+- Screen reader compatibility (NVDA, JAWS, VoiceOver)
+- Semantic HTML (button, nav, main, article)
+- ARIA labels where needed
+
+**Test scenarios:**
+- Navigate entire flow with keyboard only (no mouse)
+- Turn on screen reader, close eyes, complete task
+- Zoom to 200%, verify no content loss
+- Toggle high contrast mode, verify readable
+- Test with colorblind simulator (Stark plugin)
+
+**Deliverable**: Accessibility audit report
+- Issues found (with WCAG reference)
+- Severity (A, AA, AAA)
+- Recommendations (how to fix)
+- Priority (critical before launch vs future improvement)
+
+**Integration**: Reference `accessibility-and-inclusive-design` skill for detailed evaluation framework
+
+#### Method 4: Beta Testing
+
+**Purpose**: Validate in real-world conditions with real users
+
+**Setup:**
+- Invite 50-200 users (representative sample)
+- 1-4 weeks of use
+- Production or staging environment
+- Feedback channels (in-app, survey, support)
+
+**Data to collect:**
+- Usage metrics (adoption, frequency)
+- Error rates (crashes, bugs)
+- Support tickets (what confuses users)
+- Satisfaction survey (NPS, satisfaction ratings)
+- Feature requests (what's missing)
+
+**Benefits:**
+- Real workflows (not test scenarios)
+- Real data (not lab environment)
+- Uncovers edge cases (not anticipated)
+- Validates at scale
+
+**Risks:**
+- Can't fix major issues this late (should be polished already)
+- Users frustrated if too buggy (damages trust)
+- Sensitive to first impressions
+
+**When to skip:**
+- High-stakes launches (financial, medical)
+- Critical bug risk (test more before beta)
+- No time to act on feedback (too close to launch)
+
+### Deliverables
+
+**Heuristic Evaluation Report:**
+- Violations by heuristic (grouped)
+- Severity ratings (prioritized)
+- Screenshots (annotated)
+- Recommendations (actionable)
+
+**Accessibility Audit:**
+- WCAG compliance status (pass/fail per criterion)
+- Issues by severity (critical → low)
+- Remediation steps (how to fix)
+- Re-test checklist (verify fixes)
+
+**Beta Feedback Synthesis:**
+- Quantitative metrics (usage, errors, satisfaction)
+- Qualitative themes (from support tickets, feedback)
+- Priority issues (blockers vs nice-to-haves)
+- Go/no-go recommendation (ready to launch?)
+
+
+## Phase 5: Post-Launch Research
+
+### Purpose
+
+Measure impact and identify next improvements. Answer: Is it working? What should we optimize next?
+
+**When to use**: After launch, ongoing optimization, annual reviews
+
+### Research Methods
+
+#### Method 1: Analytics Analysis (Behavioral Data)
+
+**Purpose**: Understand actual usage patterns at scale
+
+**Metrics to track:**
+
+**Adoption:**
+- New users per week/month
+- Feature usage (% of users who tried feature)
+- Repeat usage (% who return)
+- Power users (top 10% usage)
+
+**Engagement:**
+- Sessions per user (frequency)
+- Session duration (time spent)
+- Actions per session (depth)
+- Retention (day 1, day 7, day 30)
+
+**Performance:**
+- Task completion rate (% who finish flow)
+- Time to complete (efficiency)
+- Error rate (% who encounter errors)
+- Drop-off points (where users abandon)
+
+**Conversion:**
+- Funnel conversion (% through each step)
+- Drop-off analysis (where and why)
+- Assisted conversions (multi-touch attribution)
+
+**Tools:**
+- Google Analytics 4 (web)
+- Mixpanel, Amplitude (product analytics)
+- Firebase (mobile)
+- Hotjar, FullStory (session recordings)
+
+**Analysis techniques:**
+- Cohort analysis (compare user groups over time)
+- Funnel analysis (conversion optimization)
+- Path analysis (common user journeys)
+- Segmentation (power users vs casual)
+
+#### Method 2: Surveys (Satisfaction Data)
+
+**Purpose**: Measure user satisfaction and sentiment
+
+**Types:**
+
+**NPS (Net Promoter Score):**
+- "How likely are you to recommend [product] to a friend?" (0-10)
+- Detractors (0-6), Passives (7-8), Promoters (9-10)
+- NPS = % Promoters - % Detractors
+- Follow-up: "Why did you give that score?"
+
+**CSAT (Customer Satisfaction):**
+- "How satisfied are you with [feature/experience]?" (1-5)
+- Measure specific interactions (support, checkout, onboarding)
+- Benchmark: >80% satisfied (4-5 rating)
+
+**CES (Customer Effort Score):**
+- "How easy was it to [complete task]?" (1-7)
+- Predicts loyalty (ease → retention)
+- Target: <2 average effort score
+
+**Custom surveys:**
+- Feature-specific questions
+- Usability self-assessment
+- Priorities for improvement
+- Open-ended feedback
+
+**Best practices:**
+- Short surveys (5 questions max)
+- In-context (after completing task)
+- Right timing (not too frequent)
+- Follow up on negative scores (reach out, fix issues)
+
+#### Method 3: Session Recordings (Qualitative Observation)
+
+**Purpose**: Watch real users interact with live product
+
+**Tools:**
+- Hotjar (web)
+- FullStory (web)
+- Lookback (mobile)
+- Microsoft Clarity (free)
+
+**What to look for:**
+- Rage clicks (rapid clicking on unresponsive element)
+- Confusion (hesitation, backtracking, random clicks)
+- Error encounters (how users recover)
+- Workarounds (creative solutions to design gaps)
+- Unexpected paths (users find their own way)
+
+**Analysis:**
+- Tag sessions by behavior (errors, success, confusion)
+- Watch sample of sessions per segment (new users, power users, churned)
+- Identify patterns (common issues affecting multiple users)
+- Prioritize fixes (high-impact, high-frequency)
+
+**Benefits:**
+- See actual behavior (not self-reported)
+- Discover unknown issues (not in hypothesis)
+- Empathy building (watch real struggles)
+
+**Limitations:**
+- Time-consuming (manual review)
+- Privacy concerns (anonymize, get consent)
+- Sampling bias (recorded sessions may not be representative)
+
+#### Method 4: Support Ticket Analysis
+
+**Purpose**: Find pain points users report
+
+**Process:**
+1. Export support tickets (last 1-3 months)
+2. Categorize by issue type (bug, question, request, complaint)
+3. Tag by product area (checkout, navigation, settings)
+4. Quantify frequency (which issues are common)
+5. Identify patterns (related issues clustering)
+
+**Insights:**
+- Usability gaps (repeated "how do I..." questions)
+- Confusing flows (users need help to complete)
+- Missing features (workaround requests)
+- Error messaging (unclear error explanations)
+
+**Integration with design:**
+- High support volume = design issue (not just support issue)
+- FAQ content becomes in-app help/tooltips
+- Common questions reveal discoverability problems
+
+### Deliverables
+
+**Usage Metrics Dashboard:**
+- Weekly active users (trend)
+- Feature adoption (% using each feature)
+- Task completion rate (success %)
+- Drop-off points (where users abandon)
+- Top user paths (common journeys)
+
+**Satisfaction Scores:**
+- NPS trend (month over month)
+- CSAT by feature (which are well-received)
+- Verbatim feedback (user quotes)
+- Sentiment analysis (positive vs negative themes)
+
+**Improvement Roadmap:**
+- Priority 1 (critical issues, launch blockers)
+- Priority 2 (high-impact improvements)
+- Priority 3 (nice-to-haves, future enhancements)
+- Justification (data supporting each priority)
+
+**Example roadmap item:**
+
+```
+Improvement: Redesign checkout flow
+
+Evidence:
+- 38% cart abandonment at shipping step (analytics)
+- "Checkout is too long" - 47 support tickets (3 months)
+- NPS detractors cite checkout complexity (12/20 mentions)
+- Session recordings show 2m 45s average (benchmark: 1m 30s)
+
+Impact: HIGH
+- Directly affects revenue (38% abandonment)
+- Frequent user complaint (47 tickets)
+- Competitive disadvantage (competitors faster)
+
+Recommendation: Reduce checkout from 4 steps to 2, streamline form fields, add guest checkout option
+
+Expected outcome: Reduce abandonment to <25%, increase conversion by 13%
+
+Priority: P1 (next quarter)
+```
+
+
+## Integration with Design Skills
+
+Research informs and validates design decisions:
+
+### Discovery Research → Design Skills
+
+**Findings feed into:**
+- `information-architecture` - Mental models inform IA structure
+- `visual-design-foundations` - Understand user context (lighting, device, distractions)
+- `interaction-design-patterns` - Learn user workflows and expectations
+- `accessibility-and-inclusive-design` - Identify user needs (disabilities, constraints)
+
+**Example**: Discovery reveals users frequently switch between mobile and desktop → Design must prioritize responsive consistency and cross-device sync
+
+### Generative Research → Design Skills
+
+**Card sorting informs:**
+- `information-architecture` - Navigation structure and labels
+
+**Co-design feeds:**
+- `visual-design-foundations` - User preferences for layout and hierarchy
+- `interaction-design-patterns` - Expected interactions and feedback
+
+### Evaluative Research → Design Skills
+
+**Usability testing validates:**
+- `visual-design-foundations` - Is hierarchy clear? Do users notice CTAs?
+- `information-architecture` - Can users find content? Are labels clear?
+- `interaction-design-patterns` - Do interactions feel responsive? Are affordances clear?
+- `accessibility-and-inclusive-design` - Can users with disabilities complete tasks?
+
+**Example**: Testing reveals users miss "Save" button → Visual design needs higher contrast or better placement
+
+### Post-Launch Research → All Design Skills
+
+**Analytics and feedback identify:**
+- High-friction flows (redesign with all skills)
+- Underused features (discoverability issue → IA)
+- Frequent errors (interaction design → better feedback)
+- Accessibility complaints (audit and fix)
+
+
+## When to Use Which Phase
+
+### Starting New Project
+→ **Phase 1: DISCOVERY** (understand users, context, problems)
+→ **Phase 2: GENERATIVE** (explore solutions, ideate)
+→ Design phase (apply visual/IA/interaction skills)
+→ **Phase 3: EVALUATIVE** (test designs)
+→ **Phase 4: VALIDATION** (pre-launch check)
+→ Launch
+→ **Phase 5: POST-LAUNCH** (measure impact, optimize)
+
+### Redesigning Existing Product
+→ **Phase 1: DISCOVERY** (understand current pain points)
+→ **Phase 3: EVALUATIVE** (test current design, identify issues)
+→ Design improvements (apply skills)
+→ **Phase 3: EVALUATIVE** (test improvements)
+→ **Phase 4: VALIDATION** (pre-launch check)
+→ Launch
+→ **Phase 5: POST-LAUNCH** (measure improvement)
+
+### Optimizing Live Product
+→ **Phase 5: POST-LAUNCH** (identify issues from analytics/support)
+→ **Phase 3: EVALUATIVE** (test hypothesized improvements)
+→ Design iteration (apply skills)
+→ **Phase 3: EVALUATIVE** (validate improvements)
+→ Launch
+→ **Phase 5: POST-LAUNCH** (measure impact)
+
+### Adding New Feature
+→ **Phase 2: GENERATIVE** (co-design, concept testing)
+→ Design feature (apply skills)
+→ **Phase 3: EVALUATIVE** (test with users)
+→ **Phase 4: VALIDATION** (pre-launch check)
+→ Launch
+→ **Phase 5: POST-LAUNCH** (measure adoption)
+
+
+## Research Methods Catalog
+
+### Qualitative Methods (Understanding Why)
+
+| Method | Phase | Purpose | Participants | Duration |
+|--------|-------|---------|--------------|----------|
+| User Interviews | Discovery | Understand needs, context | 5-8 | 30-60 min |
+| Field Observations | Discovery | See real workflows | 3-5 | 2-4 hours |
+| Diary Studies | Discovery | Longitudinal behavior | 10-15 | 1-4 weeks |
+| Card Sorting | Generative | Mental models, IA | 15-30 | 20-30 min |
+| Co-design Workshops | Generative | Generate solutions | 6-10 | 2-3 hours |
+| Concept Testing | Generative | Test early ideas | 5-8 | 15-30 min |
+| Usability Testing | Evaluative | Find usability issues | 5-8 | 45-60 min |
+| Cognitive Walkthrough | Validation | Learning barriers | 2-3 experts | 2-4 hours |
+| Session Recordings | Post-Launch | Real user behavior | Sample | 5-10 min/session |
+
+### Quantitative Methods (Measuring What)
+
+| Method | Phase | Purpose | Sample Size | Analysis |
+|--------|-------|---------|-------------|----------|
+| Analytics Review | Discovery | Usage patterns | All users | Descriptive |
+| Tree Testing | Evaluative | IA validation | 15-30 | Success rate |
+| First-Click Testing | Evaluative | Visual hierarchy | 15-30 | Heat map |
+| A/B Testing | Evaluative | Compare designs | 100+ per variant | Statistical |
+| Surveys (NPS, CSAT) | Post-Launch | Satisfaction | 50-200 | Descriptive |
+| Funnel Analysis | Post-Launch | Conversion | All users | Drop-off % |
+
+### Validation Methods (Quality Assurance)
+
+| Method | Phase | Purpose | Evaluators | Time |
+|--------|-------|---------|------------|------|
+| Heuristic Evaluation | Validation | Usability principles | 3 experts | 1-2 days |
+| Accessibility Audit | Validation | WCAG compliance | 1-2 specialists | 2-4 days |
+| Beta Testing | Validation | Real-world validation | 50-200 | 1-4 weeks |
+
+
+## Deliverable Templates
+
+### User Persona Template
+
+```
+[Name] - [Role/Archetype]
+
+Photo: [Realistic stock photo]
+
+Demographics:
+- Age: [Range]
+- Role: [Job title or context]
+- Tech Comfort: [Novice/Intermediate/Expert]
+- Location: [Context for usage]
+
+Goals:
+1. [Primary goal]
+2. [Secondary goal]
+3. [Tertiary goal]
+
+Pain Points:
+1. [Current frustration #1]
+2. [Current frustration #2]
+3. [Current frustration #3]
+
+Behaviors:
+- [How they work today]
+- [Tools they use]
+- [Frequency of use]
+- [Device preferences]
+
+Quote: "[Memorable statement that captures their perspective]"
+
+Scenario: [Day-in-the-life narrative showing context]
+```
+
+### Journey Map Template
+
+```
+Journey: [User goal - e.g., "Purchase product online"]
+
+Phase 1: [STAGE NAME]
+├─ Actions: [What user does]
+├─ Thoughts: [What they're thinking]
+├─ Emotions: [How they feel - rate 1-10]
+├─ Pain Points: [Frustrations]
+└─ Opportunities: [Design improvements]
+
+Phase 2: [STAGE NAME]
+[Repeat structure]
+
+Emotion Graph: [Visual line showing emotional highs and lows across journey]
+
+Key Insights:
+- [Overall pattern]
+- [Critical moments]
+- [Design opportunities]
+```
+
+### Usability Findings Template
+
+```
+Issue #[X]: [Brief description]
+
+Severity: [Critical / High / Medium / Low]
+
+Frequency: [X/Y participants affected]
+
+Description:
+[What went wrong in detail]
+
+Evidence:
+- Observation: [What you saw]
+- Quotes: "[User statement]"
+- Metrics: [Time, clicks, errors]
+
+Impact:
+[How this affects users and business goals]
+
+Recommendation:
+[Specific, actionable fix with rationale]
+
+Priority: [P0/P1/P2/P3]
+- P0 = Blocker (must fix before launch)
+- P1 = Critical (fix ASAP post-launch)
+- P2 = Important (next sprint)
+- P3 = Backlog (future improvement)
+
+Related Issues: [Links to other findings]
+```
+
+
+## Common Patterns
+
+### Pattern 1: Research-Driven Design Process
+**Discovery** (understand) → **Generative** (ideate) → Design (create) → **Evaluative** (test) → **Validation** (quality check) → Launch → **Post-Launch** (optimize)
+
+### Pattern 2: Lean Validation
+**Evaluative** (test current state) → Design iteration → **Evaluative** (test improvement) → Launch if better
+
+### Pattern 3: Continuous Improvement
+**Post-Launch** (identify issues) → Design fixes → **Evaluative** (test fixes) → Launch → **Post-Launch** (measure impact) → Repeat
+
+### Pattern 4: Feature Development
+**Generative** (co-design) → Design feature → **Evaluative** (usability test) → **Validation** (QA) → Launch → **Post-Launch** (adoption metrics)
+
+
+## Red Flags & Anti-Patterns
+
+### Anti-Pattern 1: Skipping Discovery
+**Problem**: Designing without understanding users
+**Consequence**: Build wrong thing, wasted effort
+**Fix**: Always start with discovery (even if brief)
+
+### Anti-Pattern 2: Testing Too Late
+**Problem**: Usability testing after development complete
+**Consequence**: Expensive to fix, must ship with known issues
+**Fix**: Test wireframes/prototypes before development
+
+### Anti-Pattern 3: Testing with Wrong Users
+**Problem**: Using internal team or unrepresentative users
+**Consequence**: Miss real user issues, false confidence
+**Fix**: Recruit actual target users (representative sample)
+
+### Anti-Pattern 4: Ignoring Negative Feedback
+**Problem**: Dismissing usability issues ("Users will learn it")
+**Consequence**: Poor user experience, churn, support burden
+**Fix**: Take all feedback seriously, prioritize based on severity and frequency
+
+### Anti-Pattern 5: Over-Relying on Quantitative Data
+**Problem**: Only looking at analytics, no qualitative insight
+**Consequence**: Know what's broken, not why or how to fix
+**Fix**: Combine quant (what) with qual (why) methods
+
+### Anti-Pattern 6: Research Without Action
+**Problem**: Conducting research but not using findings
+**Consequence**: Wasted time, frustrated participants
+**Fix**: Only research what you can act on, prioritize findings, implement changes
+
+### Anti-Pattern 7: One-Time Research
+**Problem**: Research once, never again
+**Consequence**: Design becomes outdated as users evolve
+**Fix**: Establish continuous research cadence (quarterly pulse checks)
+
+### Anti-Pattern 8: Confusing Preference with Usability
+**Problem**: "Users said they like blue, so we made it blue"
+**Consequence**: Aesthetic preference doesn't equal usability
+**Fix**: Test behavior (can they complete tasks?), not opinions (do they like it?)
+
+
+## Related Skills
+
+**Core UX Skills:**
+- `lyra/ux-designer/information-architecture` - Research validates IA structure (card sorting, tree testing)
+- `lyra/ux-designer/accessibility-and-inclusive-design` - Research with users with disabilities, accessibility audits
+- `lyra/ux-designer/visual-design-foundations` - Research informs visual hierarchy, usability testing validates designs
+- `lyra/ux-designer/interaction-design-patterns` - Research validates interaction clarity and feedback
+
+**Meta Skills:**
+- `lyra/ux-designer/using-ux-designer` - Routes to this skill when research/validation needed
+- `lyra/ux-designer/ux-fundamentals` - Explains research terminology and principles
+
+**Platform Extensions:**
+- All platform skills benefit from research findings (validates platform-specific patterns)
+
+**Cross-Faction:**
+- `muna/technical-writer/*` - Research methods apply to documentation usability testing
diff --git a/skills/using-ux-designer/ux-fundamentals.md b/skills/using-ux-designer/ux-fundamentals.md
new file mode 100644
index 0000000..263783f
--- /dev/null
+++ b/skills/using-ux-designer/ux-fundamentals.md
@@ -0,0 +1,608 @@
+
+# UX Fundamentals
+
+## Overview
+
+This teaching skill explains core UX principles, terminology, and mental models. Use when users ask "What is X?" or need foundational understanding before applying other Lyra skills.
+
+**Core Principle**: Understanding why design principles exist enables better application than memorizing rules.
+
+## When to Use
+
+Load this skill when:
+- User asks "What is [UX concept]?"
+- User needs explanation of design terminology
+- User wants to understand UX thinking approach
+- User is new to UX and needs orientation
+- You need to explain rationale behind design recommendations
+
+**Don't use for**: Specific design tasks (use specialized skills), detailed implementation guidance
+
+
+## Core UX Principles
+
+### 1. User-Centered Design
+
+**Definition**: Design decisions driven by user needs, not business/technical constraints
+
+**Key Concepts**:
+- **Empathy**: Understand users' context, goals, frustrations
+- **Iteration**: Design → Test → Refine → Repeat
+- **Evidence-based**: Use research data, not assumptions
+
+**In Practice**:
+- Start with user research (interviews, observations)
+- Test designs with real users early and often
+- Prioritize user goals over feature lists
+
+**Why it matters**: Designs that ignore users fail, regardless of technical excellence
+
+
+### 2. Progressive Disclosure
+
+**Definition**: Show only what users need now, reveal complexity gradually
+
+**Key Concepts**:
+- **Layers**: Basic → Intermediate → Advanced
+- **Just-in-time**: Information appears when needed
+- **Defaults**: Sensible defaults for common cases
+
+**In Practice**:
+- Simple interface by default, "Advanced" button for power features
+- Tooltips on hover, not permanent labels everywhere
+- Wizards guide through complex multi-step flows
+
+**Why it matters**: Showing everything at once = cognitive overload
+
+
+### 3. Affordances
+
+**Definition**: Visual/physical properties that suggest how something is used
+
+**Key Concepts**:
+- **Perceived affordance**: Looks clickable/tappable (buttons raised, links colored)
+- **Real affordance**: Actually is clickable/tappable
+- **Signifiers**: Clues about functionality (icons, labels, shadows)
+
+**In Practice**:
+- Buttons look different from text (visual weight, borders)
+- Links are colored and/or underlined
+- Interactive elements change on hover (cursor, highlight)
+
+**Why it matters**: Users shouldn't guess what's interactive
+
+
+### 4. Feedback
+
+**Definition**: System responds to user actions immediately and clearly
+
+**Key Concepts**:
+- **Immediate**: <100ms for most interactions (button press)
+- **Appropriate**: Match feedback to action (subtle for minor, prominent for major)
+- **Informative**: What happened? Success/failure? Next steps?
+
+**In Practice**:
+- Button depresses on click
+- Loading spinner for async operations (>1s delay)
+- Success messages confirm completion
+- Error messages explain what went wrong + how to fix
+
+**Why it matters**: No feedback = user repeats action = bugs/confusion
+
+
+### 5. Consistency
+
+**Definition**: Similar elements behave similarly throughout interface
+
+**Key Concepts**:
+- **Internal consistency**: Within your app (same patterns everywhere)
+- **External consistency**: Match platform conventions (iOS vs Android)
+- **Functional consistency**: Same action has same result
+
+**In Practice**:
+- All primary buttons same color/style
+- Navigation pattern consistent across screens
+- Keyboard shortcuts work the same everywhere
+
+**Why it matters**: Inconsistency forces users to relearn patterns
+
+
+### 6. Visibility of System Status
+
+**Definition**: Users always know what's happening
+
+**Key Concepts**:
+- **Current state**: Where am I? (active nav item highlighted)
+- **Process**: What's happening? (loading spinner, progress bar)
+- **Outcome**: What happened? (success/error message)
+
+**In Practice**:
+- Active tab/page highlighted
+- Progress indicators for multi-step flows (step 2 of 5)
+- Breadcrumbs show navigation path
+- Form validation shows which fields have errors
+
+**Why it matters**: Users lost in interface = frustration
+
+
+### 7. Error Prevention & Recovery
+
+**Definition**: Design to prevent errors, make recovery easy when they happen
+
+**Key Concepts**:
+- **Prevention**: Constraints, validation, confirmations
+- **Clear errors**: What went wrong? How to fix?
+- **Undo**: Easy to reverse mistakes
+
+**In Practice**:
+- Disable "Submit" until form valid
+- Confirm before destructive actions ("Delete all?")
+- Undo/redo for content changes
+- Auto-save to prevent lost work
+
+**Why it matters**: Errors are frustrating, especially if unrecoverable
+
+
+### 8. Recognition Over Recall
+
+**Definition**: Minimize memory load by making information visible
+
+**Key Concepts**:
+- **Show, don't hide**: Visible options > memorized commands
+- **Contextual help**: Information available when needed
+- **Autocomplete**: Suggest options rather than require exact input
+
+**In Practice**:
+- Menus show available actions (vs. command-line memorization)
+- Recently used items listed (vs. remembering file names)
+- Autocomplete in search (vs. typing exact query)
+- Date pickers (vs. typing date format)
+
+**Why it matters**: Memory is fragile, recognition is easier
+
+
+### 9. Flexibility & Efficiency
+
+**Definition**: Support both novice and expert users
+
+**Key Concepts**:
+- **Novice path**: Simple, guided, obvious
+- **Expert path**: Shortcuts, customization, speed
+- **Progressive disclosure**: Novices aren't overwhelmed, experts aren't constrained
+
+**In Practice**:
+- Keyboard shortcuts for power users (Cmd+S)
+- Command palettes (fuzzy search all actions)
+- Customizable toolbars/workspaces
+- Both clicking and keyboard navigation work
+
+**Why it matters**: Users grow from novice → expert over time
+
+
+### 10. Aesthetic & Minimalist Design
+
+**Definition**: Remove unnecessary elements, focus on essentials
+
+**Key Concepts**:
+- **Signal vs. noise**: Every element competes for attention
+- **White space**: Breathing room improves readability
+- **Hierarchy**: Guide attention to important elements
+
+**In Practice**:
+- Remove decorative elements that don't serve purpose
+- Use white space to group related items
+- Single clear primary action per screen
+- Reduce visual clutter (colors, borders, shadows)
+
+**Why it matters**: Too much information = user misses important parts
+
+
+## UX Terminology
+
+### Mental Models
+
+**Definition**: User's internal understanding of how system works
+
+**Why it matters**: Design must match user's mental model, not system architecture
+
+**Example**:
+- Good: File structure matches user's mental organization (Projects → Project Name → Files)
+- Bad: File structure matches database schema (table_id → foreign_key → blob_id)
+
+
+### Information Architecture (IA)
+
+**Definition**: Organizing and labeling content for findability
+
+**Related skill**: `lyra/ux-designer/information-architecture`
+
+**Key aspects**: Navigation structure, labeling, categorization, search
+
+
+### Interaction Design
+
+**Definition**: Defining how users interact with system (clicks, gestures, feedback)
+
+**Related skill**: `lyra/ux-designer/interaction-design-patterns`
+
+**Key aspects**: Touch targets, micro-interactions, state changes, animations
+
+
+### Visual Hierarchy
+
+**Definition**: Arranging elements to guide attention in order of importance
+
+**Related skill**: `lyra/ux-designer/visual-design-foundations`
+
+**Key aspects**: Size, color, contrast, spacing, typography
+
+
+### Accessibility
+
+**Definition**: Designing for people with disabilities (visual, motor, cognitive)
+
+**Related skill**: `lyra/ux-designer/accessibility-and-inclusive-design`
+
+**Key aspects**: WCAG compliance, screen readers, keyboard navigation, color contrast
+
+
+### Usability
+
+**Definition**: How easy and efficient it is to use a system
+
+**Measured by**: Task success rate, time on task, error rate, satisfaction
+
+**Related skill**: `lyra/ux-designer/user-research-and-validation` (testing)
+
+
+### User Journey / User Flow
+
+**Definition**: Path user takes to accomplish a goal
+
+**Includes**: Entry point → Steps → Decision points → Outcome
+
+**Related skill**: `lyra/ux-designer/user-research-and-validation` (journey mapping)
+
+
+### Personas
+
+**Definition**: Fictional characters representing user segments
+
+**Includes**: Demographics, goals, behaviors, pain points, context
+
+**Related skill**: `lyra/ux-designer/user-research-and-validation` (research methods)
+
+
+### Wireframe
+
+**Definition**: Low-fidelity layout sketch (structure, not visual design)
+
+**Purpose**: Test IA and layout before investing in visual design
+
+**Related skills**: `information-architecture`, `visual-design-foundations`
+
+
+### Prototype
+
+**Definition**: Interactive simulation of design (clickable, navigable)
+
+**Purpose**: Test flows and interactions before development
+
+**Types**: Low-fidelity (Balsamiq), high-fidelity (Figma with interactions)
+
+
+### Heuristic Evaluation
+
+**Definition**: Expert review against usability principles (heuristics)
+
+**Common framework**: Nielsen's 10 Usability Heuristics
+
+**Related skill**: `lyra/ux-designer/user-research-and-validation` (validation methods)
+
+
+## Design Thinking Process
+
+### 1. Empathize (Understand Users)
+
+**Goal**: Deep understanding of user needs, context, pain points
+
+**Methods**: Interviews, observations, diary studies
+
+**Related skill**: `lyra/ux-designer/user-research-and-validation`
+
+**Output**: User insights, pain points, opportunity areas
+
+
+### 2. Define (Frame the Problem)
+
+**Goal**: Synthesize research into clear problem statement
+
+**Methods**: Affinity mapping, personas, journey maps
+
+**Output**: Problem statement, design principles, success criteria
+
+
+### 3. Ideate (Generate Solutions)
+
+**Goal**: Explore many possible solutions without judgment
+
+**Methods**: Brainstorming, sketching, co-design workshops
+
+**Output**: Diverse design concepts
+
+
+### 4. Prototype (Build to Test)
+
+**Goal**: Make ideas tangible for testing
+
+**Methods**: Wireframes, mockups, clickable prototypes
+
+**Related skills**: All design skills (visual, IA, interaction)
+
+**Output**: Testable prototypes (lo-fi or hi-fi)
+
+
+### 5. Test (Validate with Users)
+
+**Goal**: Learn what works, what doesn't, iterate
+
+**Methods**: Usability testing, A/B testing, analytics
+
+**Related skill**: `lyra/ux-designer/user-research-and-validation`
+
+**Output**: Insights for iteration, validated design decisions
+
+
+### 6. Iterate (Refine & Improve)
+
+**Goal**: Continuously improve based on feedback
+
+**Process**: Implement → Measure → Learn → Refine
+
+**Output**: Improved design, new insights
+
+
+## When to Use Each Lyra Skill
+
+### lyra/ux-designer/using-ux-designer (Meta)
+
+**When**: Starting any UX task, unsure which skill to load
+
+**Purpose**: Routes to appropriate skills based on context
+
+
+### lyra/ux-designer/ux-fundamentals (This Skill)
+
+**When**: "What is...?", "Explain...", learning UX concepts
+
+**Purpose**: Teaching and foundational knowledge
+
+
+### lyra/ux-designer/visual-design-foundations
+
+**When**: Color, typography, hierarchy, spacing, contrast issues
+
+**Purpose**: Systematic framework for visual design evaluation
+
+**Framework**: 6-dimension Visual Hierarchy Analysis (Contrast, Scale, Spacing, Color, Typography, Layout Flow)
+
+
+### lyra/ux-designer/information-architecture
+
+**When**: Navigation confusing, content organization, findability issues
+
+**Purpose**: Structure content for discoverability
+
+**Framework**: 4-layer Navigation & Discoverability Model (Mental Models, Navigation Systems, Information Scent, Discoverability)
+
+
+### lyra/ux-designer/interaction-design-patterns
+
+**When**: Touch targets, feedback, micro-interactions, button states
+
+**Purpose**: Design clear, responsive interactions
+
+**Framework**: 5-dimension Interaction Clarity Framework (Affordances, Feedback, Micro-interactions, State Changes, Touch Targets)
+
+
+### lyra/ux-designer/accessibility-and-inclusive-design
+
+**When**: WCAG compliance, colorblind-safe, keyboard nav, screen readers
+
+**Purpose**: Ensure design works for everyone
+
+**Framework**: 6-dimension Universal Access Model (Visual, Motor, Cognitive, Screen Reader, Temporal, Situational)
+
+
+### lyra/ux-designer/user-research-and-validation
+
+**When**: Need to understand users, test designs, validate decisions
+
+**Purpose**: Research methods and usability testing
+
+**Framework**: 5-phase User Understanding Model (Discovery, Generative, Evaluative, Validation, Post-Launch)
+
+
+### lyra/ux-designer/mobile-design-patterns
+
+**When**: iOS/Android app design, touch interactions
+
+**Purpose**: Mobile-specific patterns and constraints
+
+**Framework**: Mobile Interaction Evaluation Model (Reachability, Gesture Conventions, Platform Consistency, Performance Perception)
+
+
+### lyra/ux-designer/web-application-design
+
+**When**: Web app, dashboard, SaaS, data visualization
+
+**Purpose**: Web-specific patterns (responsive, complex data)
+
+**Framework**: Web Application Usability Framework (Data Clarity, Workflow Efficiency, Responsive Adaptation, Progressive Enhancement)
+
+
+### lyra/ux-designer/desktop-software-design
+
+**When**: Desktop app, Electron, multi-window, keyboard-first
+
+**Purpose**: Desktop-specific patterns (windows, shortcuts)
+
+**Framework**: Desktop Application Workflow Model (Window Organization, Keyboard Efficiency, Workspace Customization, Expert Paths)
+
+
+### lyra/ux-designer/game-ui-design
+
+**When**: Game, HUD, menu system, in-game interface
+
+**Purpose**: Game-specific patterns (immersion, performance)
+
+**Framework**: Game UI Integration Framework (Visibility vs Immersion, Input Method Optimization, Aesthetic Coherence, Performance Impact)
+
+
+## Common UX Questions Answered
+
+### "How do I know if my design is good?"
+
+**Answer**: Test with users. Good design = users accomplish goals efficiently and satisfactorily.
+
+**Objective measures**: Task success rate, time on task, error rate
+**Subjective measures**: User satisfaction, perceived ease of use
+
+**Related skill**: `user-research-and-validation`
+
+
+### "Should I follow platform conventions (iOS HIG, Material Design)?"
+
+**Answer**: Yes, with rare exceptions.
+
+**Why follow conventions**:
+- Users already know the patterns (less learning curve)
+- Accessibility features work as expected
+- Platform integration (gestures, navigation)
+
+**When to deviate**:
+- Strong brand identity requires custom patterns
+- Unique use case not covered by conventions (games, creative tools)
+- Cross-platform consistency is more important
+
+**Related skill**: Platform extensions (mobile, web, desktop, game)
+
+
+### "Design for mobile-first or desktop-first?"
+
+**Answer**: Depends on your users' primary context.
+
+**Mobile-first**: When most users on mobile, forces prioritization
+**Desktop-first**: When desktop is primary, mobile is secondary
+
+**Best practice**: Design for primary platform, adapt to others
+
+**Related skills**: `mobile-design-patterns`, `web-application-design`
+
+
+### "How do I balance aesthetics and usability?"
+
+**Answer**: They're not in conflict. Good aesthetics enhance usability.
+
+**Aesthetic benefits**:
+- Visual hierarchy guides attention (usability)
+- Consistent visual system reduces cognitive load
+- Pleasant aesthetics increase trust and engagement
+
+**Warning signs of conflict**:
+- Low contrast text (aesthetic > accessibility = BAD)
+- Hiding essential functions for "clean" look = BAD
+- Decorative elements obscuring content = BAD
+
+**Related skills**: `visual-design-foundations`, `accessibility-and-inclusive-design`
+
+
+### "Should I use modals/popups?"
+
+**Answer**: Sparingly. Modals interrupt users.
+
+**When appropriate**:
+- Requires user decision before proceeding (confirm destructive action)
+- Focus needed (entering password, selecting from list)
+- Contextual detail (lightbox for image, detail view)
+
+**Alternatives**:
+- Inline expansion (accordion, show/hide)
+- Separate page (if lots of content)
+- Toast notification (non-blocking feedback)
+
+**Related skills**: `interaction-design-patterns`, platform extensions
+
+
+### "How many clicks/taps is too many?"
+
+**Answer**: 3-click rule is guideline, not law. Clarity > click count.
+
+**What matters**:
+- **Information scent**: Each step has clear clues to next
+- **No dead ends**: Users can always proceed or go back
+- **Progress visible**: Users know where they are in flow
+
+**10 clear clicks > 2 confusing clicks**
+
+**Related skill**: `information-architecture`
+
+
+### "Should I use animation?"
+
+**Answer**: Yes, purposefully. Animation guides attention and shows relationships.
+
+**Good uses**:
+- State transitions (show what changed)
+- Drawing attention (new message, error)
+- Showing relationships (element moves from A to B)
+
+**Bad uses**:
+- Gratuitous decoration (slows users down)
+- Too slow (>500ms feels sluggish)
+- Motion sickness triggers (parallax, constant movement)
+
+**Related skill**: `interaction-design-patterns`
+
+
+### "How do I design for accessibility without compromising design?"
+
+**Answer**: Accessibility constraints make design BETTER, not worse.
+
+**Examples**:
+- High contrast = more readable for everyone
+- Large touch targets = easier for everyone
+- Clear labels = less confusion for everyone
+- Keyboard navigation = faster for power users
+
+**Accessibility IS good design.**
+
+**Related skill**: `accessibility-and-inclusive-design`
+
+
+## Related Skills
+
+**All Lyra UX Designer skills**: This teaching skill references concepts explained in detail by specialized skills
+
+**Cross-faction**:
+- `muna/technical-writer/clarity-and-style` - Writing clear UI copy
+- `ordis/security-architect/threat-modeling` - Security implications of UX decisions
+
+
+## Further Learning
+
+**Books**:
+- "Don't Make Me Think" (Steve Krug) - Web usability fundamentals
+- "The Design of Everyday Things" (Don Norman) - Affordances, mental models
+- "About Face" (Alan Cooper) - Interaction design principles
+
+**Frameworks**:
+- Nielsen's 10 Usability Heuristics
+- WCAG 2.1 Guidelines (accessibility)
+- iOS Human Interface Guidelines
+- Material Design Guidelines
+
+**Practice**:
+- Critique existing interfaces (what works? what doesn't?)
+- Apply frameworks from other Lyra skills
+- Test designs with real users (even 5 users find major issues)
diff --git a/skills/using-ux-designer/visual-design-foundations.md b/skills/using-ux-designer/visual-design-foundations.md
new file mode 100644
index 0000000..cfaa6bf
--- /dev/null
+++ b/skills/using-ux-designer/visual-design-foundations.md
@@ -0,0 +1,996 @@
+
+# Visual Design Foundations
+
+## Overview
+
+This skill provides **The Visual Hierarchy Analysis Framework**: a systematic 6-dimension evaluation model for visual design decisions. Use this when working with color, typography, spacing, contrast, or overall visual hierarchy.
+
+**Core Principle**: Visual hierarchy guides user attention through intentional design choices. Every visual element competes for attention—systematic evaluation ensures priority matches importance.
+
+**Dual-Mode Support**:
+- **Critique Mode**: "Your dashboard has contrast issues—the primary CTA blends with secondary actions."
+- **Specification Mode**: "Primary button: #0066CC background, #FFFFFF text (7:1 contrast), 16px padding, 48px min height."
+
+## When to Use
+
+Load this skill when:
+- User mentions: "color", "typography", "hierarchy", "spacing", "layout", "contrast", "visual design"
+- Reviewing visual aspects of a design (mockups, screenshots, prototypes)
+- Creating new visual specifications for interfaces
+- Troubleshooting readability or attention-flow issues
+- Establishing visual design systems
+
+**Don't use for**: Navigation structure (use information-architecture), interaction patterns (use interaction-design-patterns), pure content strategy
+
+
+## The Visual Hierarchy Analysis Framework
+
+A systematic 6-dimension evaluation model. Evaluate designs by examining each dimension sequentially, identifying friction points where dimensions conflict, then prioritizing fixes by user impact.
+
+
+### Dimension 1: CONTRAST
+
+**Purpose:** Guide attention through visual weight differences
+
+Contrast creates hierarchy by making important elements stand out from their surroundings. High contrast draws attention; low contrast recedes into the background.
+
+#### Evaluation Questions
+
+1. **What's the most important element on this screen?**
+   - Does it have the highest visual contrast?
+   - Can users identify it within 3 seconds?
+
+2. **Does contrast match priority?**
+   - Primary actions: High contrast
+   - Secondary actions: Medium contrast
+   - Tertiary/destructive: Low contrast or subdued
+
+3. **Are there competing focal points?**
+   - If everything screams for attention, nothing gets it
+   - Only 1-2 high-contrast elements per screen
+
+4. **Is text readable against backgrounds?**
+   - Light text on dark: sufficient contrast?
+   - Dark text on light: sufficient contrast?
+   - Meets WCAG contrast ratios? (see accessibility-and-inclusive-design)
+
+#### Patterns (Good Examples)
+
+**Primary Action Emphasis**:
+- Submit button: Dark blue (#0066CC) on white background = 7:1 contrast
+- Secondary "Cancel": Gray (#666666) on white = 3:1 contrast
+- Result: Eye goes to Submit first
+
+**Card Hierarchy**:
+- Card background: White
+- Body text: Dark gray (#333333) = 12:1 contrast (high readability)
+- Meta text (timestamps): Light gray (#999999) = 2.8:1 contrast (de-emphasized)
+- Result: Important content stands out, metadata recedes
+
+**Call-to-Action Contrast**:
+- Page content: Black text on white background (standard)
+- CTA button: Bright color (#FF6B35) with white text = vibrant, attention-grabbing
+- Result: Action is unmissable
+
+#### Anti-Patterns (Problematic Examples)
+
+**Everything High Contrast** ❌:
+- All buttons same bright color
+- All text same dark black
+- No hierarchy = user doesn't know where to look first
+- **Fix**: Vary contrast to match importance
+
+**Low Contrast on Critical Actions** ❌:
+- Light gray button (#CCCCCC) on white background (#FFFFFF)
+- Contrast ratio: 1.4:1 (fails WCAG AA 3:1 minimum for UI components)
+- Users miss the action entirely
+- **Fix**: Increase contrast to at least 3:1, preferably 4.5:1+
+
+**Insufficient Text Contrast** ❌:
+- Gray text (#999999) on white (#FFFFFF) = 2.8:1
+- Fails WCAG AA (requires 4.5:1 for normal text)
+- Strains eyes, inaccessible to low-vision users
+- **Fix**: Darken to #767676 or darker for 4.5:1+ contrast
+
+**False Affordances via Contrast** ❌:
+- Static text styled with high contrast and color
+- Looks clickable but isn't interactive
+- **Fix**: Reserve high-contrast color for interactive elements
+
+#### Practical Application
+
+**Critique Mode Example**:
+> "Your login form has contrast hierarchy issues (Dimension 1). The 'Forgot Password' link (#0066CC) has higher visual weight than the 'Sign In' button (#EEEEEE on white). Users' eyes are drawn to the secondary action first. **Recommendation**: Increase Sign In button contrast (dark blue background, white text = 7:1 ratio) and reduce Forgot Password to standard link styling."
+
+**Specification Mode Example**:
+> **Primary Button (Sign In)**:
+> - Background: #0066CC (dark blue)
+> - Text: #FFFFFF (white)
+> - Contrast ratio: 7:1 (WCAG AAA)
+> - Visual weight: High (draws attention)
+>
+> **Secondary Link (Forgot Password)**:
+> - Text: #0066CC (blue)
+> - Background: Transparent
+> - Contrast ratio: 4.8:1 against white
+> - Visual weight: Medium (visible but not primary)
+
+#### Cross-Platform Considerations
+
+- **Mobile**: Higher contrast needed (viewed in sunlight, smaller screens)
+- **Web**: Standard contrast works, but test with browser zoom (200%)
+- **Desktop**: Larger screens allow subtler contrast variations
+- **Game**: High contrast essential during action (HUD must be readable)
+
+
+### Dimension 2: SCALE
+
+**Purpose:** Size communicates importance and functionality
+
+Larger elements signal importance. Smaller elements recede. Scale also affects usability—too small = hard to interact with.
+
+#### Evaluation Questions
+
+1. **Does size match information hierarchy?**
+   - Headings > subheadings > body text?
+   - Primary actions > secondary actions?
+
+2. **Are touch targets large enough?**
+   - Mobile: 44x44pt minimum (iOS), 48x48dp (Android)
+   - Web: 40x40px minimum for mouse, 48x48px for touch
+   - Desktop: 24x24px minimum (mouse precision)
+
+3. **Is text readable at intended viewing distance?**
+   - Mobile: 16px+ body text (arm's length, small screen)
+   - Desktop: 14px+ body text (farther viewing distance, larger screen)
+   - Presentations: 24px+ body text (across room)
+
+4. **Is there clear visual distinction between levels?**
+   - At least 2px difference in font sizes
+   - At least 20% difference in element sizes
+
+#### Patterns (Good Examples)
+
+**Typographic Scale**:
+- H1: 32px (page title)
+- H2: 24px (section headers)
+- H3: 20px (subsection headers)
+- Body: 16px (paragraphs)
+- Caption: 14px (meta information)
+- **Result**: Clear hierarchy, each level distinct
+
+**Button Sizing**:
+- Primary CTA: 48px height (prominent, easy to tap)
+- Secondary actions: 40px height (smaller but still comfortable)
+- Tertiary links: Standard text size with padding
+- **Result**: Importance reflected in size
+
+**Touch Target Sizing (Mobile)**:
+- Interactive icons: 44x44pt minimum
+- Buttons: 48pt height minimum
+- Form inputs: 44pt height minimum
+- Spacing between targets: 8pt minimum
+- **Result**: No accidental taps, comfortable for thumbs
+
+**Icon Sizing**:
+- Interactive icons: 24px minimum (recognizable, tappable)
+- Decorative icons: 16-20px (visual accent)
+- Large feature icons: 48-64px (hero sections)
+- **Result**: Function matches size
+
+#### Anti-Patterns (Problematic Examples)
+
+**Tiny Touch Targets** ❌:
+- 30x30px buttons on mobile
+- Users miss taps, frustration
+- **Fix**: Increase to 44x44pt minimum, add spacing
+
+**All Elements Same Size** ❌:
+- H1 = H2 = H3 = 18px
+- No visual hierarchy, can't scan page
+- **Fix**: Use modular scale (1.2x or 1.5x multiplier per level)
+
+**Unreadable Small Text** ❌:
+- 12px body text on mobile
+- Requires zooming, poor accessibility
+- **Fix**: 16px minimum for body text on mobile
+
+**Insufficient Size Distinction** ❌:
+- H1: 18px, Body: 16px (only 2px difference)
+- Hierarchy unclear, looks like emphasis not heading
+- **Fix**: H1 at least 1.5x body size (24px+)
+
+**Button Size vs Importance Mismatch** ❌:
+- Large "Cancel" button, small "Submit" button
+- Visual weight suggests Cancel is primary action
+- **Fix**: Primary action should be largest
+
+#### Practical Application
+
+**Critique Mode Example**:
+> "Your mobile form has touch target issues (Dimension 2). The checkbox inputs are 28x28px—below iOS minimum of 44x44pt. Users will struggle to tap accurately. **Recommendation**: Increase touch target to 48x48px (includes padding around 24px checkbox icon). Also, the primary 'Submit' button at 36px height is smaller than the 'Cancel' button at 44px—this inverts the importance hierarchy."
+
+**Specification Mode Example**:
+> **Typographic Scale**:
+> - H1 (Page Title): 32px / 2rem / 700 weight
+> - H2 (Section): 24px / 1.5rem / 600 weight
+> - H3 (Subsection): 20px / 1.25rem / 600 weight
+> - Body: 16px / 1rem / 400 weight
+> - Caption: 14px / 0.875rem / 400 weight
+>
+> **Button Sizing (Mobile)**:
+> - Primary: 48px height, 16px horizontal padding, full-width on mobile
+> - Secondary: 44px height, 16px horizontal padding
+> - Min touch target: 44x44pt with 8pt spacing
+
+#### Cross-Platform Considerations
+
+- **Mobile**: Larger touch targets (44-48pt), larger body text (16px+)
+- **Web**: Flexible sizing, responsive scaling (use rem units)
+- **Desktop**: Can use smaller targets (mouse precision), but don't go below 24px
+- **Game**: Depends on input method (gamepad = larger, mouse = smaller)
+
+
+### Dimension 3: SPACING
+
+**Purpose:** White space creates relationships and breathing room
+
+Spacing (margins, padding, line height) groups related elements and separates distinct sections. White space isn't wasted space—it's essential for readability and comprehension.
+
+#### Evaluation Questions
+
+1. **Are related items grouped with less space between them?**
+   - Gestalt principle of proximity
+   - Tight spacing = "these belong together"
+
+2. **Is there adequate breathing room around content?**
+   - Cramped layouts feel overwhelming
+   - Generous padding improves focus
+
+3. **Is spacing consistent?**
+   - 8px or 4px base unit recommended
+   - Avoid random values (13px here, 18px there)
+
+4. **Is line height comfortable for reading?**
+   - Body text: 1.4-1.6x font size
+   - Headings: 1.2-1.3x font size
+   - Tight line height (<1.3) = cramped
+
+5. **Is line length appropriate?**
+   - 45-75 characters per line (optimal readability)
+   - Wider = eyes lose place, narrower = choppy
+
+#### Patterns (Good Examples)
+
+**8px Grid System**:
+- All spacing in multiples of 8px (8, 16, 24, 32, 40, 48...)
+- Or 4px for tighter control (4, 8, 12, 16, 20, 24...)
+- **Result**: Consistent rhythm, easier to maintain
+
+**Grouping Related Content**:
+- Form label + input: 4px gap
+- Input + helper text: 4px gap
+- Form field groups: 16px gap
+- Form sections: 32px gap
+- **Result**: Clear relationships, scannable structure
+
+**Padding for Breathing Room**:
+- Card padding: 24px all sides
+- Button padding: 12px vertical, 24px horizontal
+- Container padding: 16-24px (mobile), 32-48px (desktop)
+- **Result**: Content doesn't feel cramped
+
+**Line Height for Readability**:
+- Body text (16px): line-height 1.5 = 24px (comfortable reading)
+- Headings (32px): line-height 1.2 = 38px (tighter, more impact)
+- Code blocks: line-height 1.6 = 25.6px (extra space for legibility)
+- **Result**: Easy to read, eyes don't jump lines
+
+**Line Length**:
+- Desktop: max-width 70ch (70 characters, ~600px for 16px text)
+- Mobile: Full width okay (narrow screen limits length naturally)
+- **Result**: Comfortable reading pace
+
+#### Anti-Patterns (Problematic Examples)
+
+**Cramming Content** ❌:
+- No padding inside cards
+- Text touches edges
+- Feels suffocating, hard to focus
+- **Fix**: Add 16-24px padding
+
+**Inconsistent Spacing** ❌:
+- Some sections: 13px gap
+- Other sections: 18px gap
+- Others: 22px gap
+- No pattern = feels chaotic
+- **Fix**: Use 8px or 4px grid, stick to multiples
+
+**Insufficient Line Height** ❌:
+- Body text with line-height: 1.0
+- Lines touch, hard to read, feels cramped
+- **Fix**: 1.4-1.6 for body text
+
+**Too Much Space** ❌:
+- Excessive padding (64px on mobile cards)
+- Wastes screen real estate
+- Requires excessive scrolling
+- **Fix**: 16-24px padding on mobile, 24-32px on desktop
+
+**Wrong Grouping** ❌:
+- Form label far from input (24px gap)
+- Input close to next label (8px gap)
+- User can't tell which label belongs to which input
+- **Fix**: Label + input tight (4-8px), input + next label loose (24px+)
+
+**Line Length Too Wide** ❌:
+- Full-width paragraphs on 1920px desktop
+- ~200 characters per line
+- Eyes lose place, skipping lines
+- **Fix**: max-width 70ch or ~600-800px
+
+#### Practical Application
+
+**Critique Mode Example**:
+> "Your article layout has spacing issues (Dimension 3). The body text has line-height: 1.2, which makes multi-paragraph reading uncomfortable—lines feel cramped. Also, the paragraph spacing (8px) is less than the line spacing within paragraphs, violating proximity principles. **Recommendation**: Increase line-height to 1.5 (24px for 16px text) and paragraph spacing to 24px (1.5x line height). Additionally, limit line length to 70ch (~600px) to prevent overly wide reading."
+
+**Specification Mode Example**:
+> **Spacing System (8px base unit)**:
+> - XS: 8px (tight grouping, label + input)
+> - S: 16px (related elements, list items)
+> - M: 24px (section spacing, card padding)
+> - L: 32px (major sections)
+> - XL: 48px (page sections)
+> - XXL: 64px (hero sections)
+>
+> **Typography Spacing**:
+> - Body text: 16px font, 24px line-height (1.5)
+> - Paragraphs: 24px bottom margin
+> - Headings: 32px top margin (section break), 16px bottom margin
+> - Max line length: 70ch (~600px at 16px)
+>
+> **Component Padding**:
+> - Cards: 24px all sides (mobile), 32px (desktop)
+> - Buttons: 12px vertical, 24px horizontal
+> - Form inputs: 12px vertical, 16px horizontal
+
+#### Cross-Platform Considerations
+
+- **Mobile**: Tighter spacing (16-24px padding), less margin (maximize content)
+- **Web**: Responsive spacing (increase padding on larger screens)
+- **Desktop**: More generous spacing (32-48px padding), wider margins
+- **Game**: Depends on genre (minimalist HUD vs rich RPG menus)
+
+
+### Dimension 4: COLOR
+
+**Purpose:** Meaning, emotion, brand identity, and accessibility
+
+Color conveys semantic meaning (red = error, green = success), sets emotional tone, reinforces brand, and must be accessible to all users.
+
+#### Evaluation Questions
+
+1. **Does color have semantic meaning?**
+   - Red = error, danger, stop
+   - Green = success, go, safe
+   - Yellow/orange = warning, caution
+   - Blue = information, trust
+
+2. **Does text meet contrast ratios?**
+   - WCAG AA: 4.5:1 for normal text, 3:1 for large text (18px+ or 14px+ bold)
+   - WCAG AAA: 7:1 for normal text, 4.5:1 for large text
+   - Use tools: WebAIM Contrast Checker, Stark, Figma plugins
+
+3. **Is design colorblind-safe?**
+   - Don't rely on color alone (use icons, labels, patterns)
+   - Test with colorblind simulators (Chromatic Vision Simulator)
+   - Most common: Red-green colorblindness (8% of men)
+
+4. **Is palette intentional and limited?**
+   - 3-5 main colors (not counting neutrals)
+   - Too many colors = visual chaos
+   - Each color has purpose
+
+5. **Does color support brand identity?**
+   - Primary brand color used consistently
+   - Secondary colors complement brand
+   - Color reinforces brand recognition
+
+#### Patterns (Good Examples)
+
+**Semantic Color System**:
+- Error: #D32F2F (red) with ⚠️ icon
+- Success: #388E3C (green) with ✓ checkmark
+- Warning: #F57C00 (orange) with ⚠️ icon
+- Info: #1976D2 (blue) with ℹ️ icon
+- **Result**: Color + icon = accessible, clear meaning
+
+**Limited Intentional Palette**:
+- Primary: #0066CC (brand blue, CTAs)
+- Secondary: #6C757D (neutral gray, secondary actions)
+- Success: #28A745 (green, confirmations)
+- Error: #DC3545 (red, errors)
+- Neutrals: #000, #333, #666, #999, #CCC, #F5F5F5, #FFF
+- **Result**: Cohesive, not overwhelming
+
+**High Contrast Text**:
+- Dark text on light: #212121 on #FFFFFF = 16:1 contrast (excellent)
+- Light text on dark: #FFFFFF on #1A1A1A = 15:1 contrast (excellent)
+- Muted text: #666666 on #FFFFFF = 5.7:1 (passes AA, good for secondary text)
+- **Result**: Readable, accessible
+
+**Colorblind-Safe Design**:
+- Status indicators: Green ✓ + "Success", Red ✗ + "Error"
+- Charts: Use patterns + colors (stripes, dots, solids)
+- Links: Underlined + colored (not color alone)
+- **Result**: Works for 100% of users
+
+**Brand-Consistent Color**:
+- Primary brand color (#FF6B35 orange) on all CTAs
+- Secondary brand color (#004E89 blue) on headers
+- Neutrals for body content
+- **Result**: Strong brand recognition
+
+#### Anti-Patterns (Problematic Examples)
+
+**Low Contrast Text** ❌:
+- Light gray text (#CCCCCC) on white (#FFFFFF)
+- Contrast ratio: 1.6:1 (fails WCAG, unreadable)
+- **Fix**: Darken to #757575 for 4.5:1 ratio
+
+**Color as Sole Indicator** ❌:
+- Red items = errors, green items = success (no icons/labels)
+- Colorblind users can't distinguish
+- **Fix**: Add icons and text labels
+
+**Rainbow Explosion** ❌:
+- 10+ colors in interface
+- No clear system, visually chaotic
+- **Fix**: Limit to 3-5 main colors + neutrals
+
+**Inaccessible Button Colors** ❌:
+- Light blue (#6CB4EE) button with white text (#FFFFFF)
+- Contrast: 2.4:1 (fails WCAG 3:1 minimum for UI components)
+- **Fix**: Darken button to #0066CC for 4.5:1+ contrast
+
+**Conflicting Color Meanings** ❌:
+- Red for both "Delete" and "Primary CTA"
+- Confuses semantic meaning
+- **Fix**: Reserve red for destructive/error, use brand color for CTAs
+
+**No Visual Hierarchy** ❌:
+- All text same color (pure black)
+- No distinction between headers, body, meta
+- **Fix**: Use color variations (black headers, dark gray body, light gray meta)
+
+#### Practical Application
+
+**Critique Mode Example**:
+> "Your form design has color accessibility issues (Dimension 4). The error messages use red text (#FF0000) without any accompanying icon—colorblind users can't distinguish errors from normal text. Also, the placeholder text (#BBBBBB) on white has only 2.5:1 contrast, failing WCAG AA. **Recommendation**: Add ⚠️ icons to error messages and change error text to #D32F2F with an icon. Darken placeholder text to #757575 for 4.5:1 contrast. Additionally, the 'Submit' button (#8BC34A light green) with white text has only 2.7:1 contrast—darken to #388E3C for 4.5:1."
+
+**Specification Mode Example**:
+> **Color System**:
+> - Primary (CTA): #0066CC (brand blue, 4.8:1 with white text)
+> - Secondary (actions): #6C757D (neutral gray)
+> - Success: #388E3C (green, 4.5:1 with white text) + ✓ icon
+> - Error: #D32F2F (red, 5.5:1 with white text) + ⚠️ icon
+> - Warning: #F57C00 (orange, 4.5:1 with white text) + ⚠️ icon
+> - Info: #1976D2 (blue, 4.6:1 with white text) + ℹ️ icon
+>
+> **Text Colors**:
+> - Primary text: #212121 on #FFFFFF (16:1 contrast)
+> - Secondary text: #666666 on #FFFFFF (5.7:1 contrast)
+> - Disabled text: #999999 on #FFFFFF (2.8:1, intentionally low)
+> - Link text: #0066CC (4.8:1, underlined)
+>
+> **Colorblind-Safe**:
+> - All status indicators: Color + icon + text label
+> - Links: Color + underline
+> - Charts: Patterns (stripes, dots) + color
+> - Tested with Chromatic Vision Simulator
+
+#### Cross-Platform Considerations
+
+- **Mobile**: High contrast critical (outdoor viewing, sunlight glare)
+- **Web**: Test with browser high-contrast modes
+- **Desktop**: Color-calibrated displays vary—design for worst case
+- **Game**: Art style determines palette, but HUD must be high contrast
+
+
+### Dimension 5: TYPOGRAPHY
+
+**Purpose:** Readability, hierarchy, and tone through type choices
+
+Typography affects readability (can users read it?), hierarchy (what's important?), and tone (formal vs casual, modern vs traditional).
+
+#### Evaluation Questions
+
+1. **Are font sizes distinguishable?**
+   - At least 2px difference between levels
+   - Clear visual distinction (not 16px vs 17px)
+
+2. **Is line height comfortable?**
+   - Body text: 1.4-1.6x font size
+   - Headings: 1.2-1.3x font size
+   - Code/monospace: 1.5-1.6x
+
+3. **Is line length appropriate?**
+   - 45-75 characters per line (optimal)
+   - Use max-width or container constraints
+
+4. **Are font weights used intentionally?**
+   - Regular (400) for body text
+   - Bold (600-700) for headings and emphasis
+   - Light (300) sparingly (can reduce readability)
+
+5. **Is font pairing harmonious?**
+   - Limit to 1-2 font families
+   - Pair serif + sans-serif, or use single family with varied weights
+
+6. **Is text readable at intended size?**
+   - Mobile: 16px+ body text (prevents auto-zoom on iOS)
+   - Desktop: 14px+ body text
+   - Avoid text below 12px (inaccessible)
+
+#### Patterns (Good Examples)
+
+**Modular Type Scale**:
+- H1: 32px / 2rem / 700 weight / 1.2 line-height
+- H2: 24px / 1.5rem / 600 weight / 1.3 line-height
+- H3: 20px / 1.25rem / 600 weight / 1.3 line-height
+- Body: 16px / 1rem / 400 weight / 1.5 line-height
+- Caption: 14px / 0.875rem / 400 weight / 1.4 line-height
+- **Result**: Clear hierarchy, each level distinct
+
+**Comfortable Line Height**:
+- Body text (16px): line-height 1.5 = 24px
+- Headings (32px): line-height 1.2 = 38.4px
+- **Result**: Easy to read, no line jumping
+
+**Font Pairing**:
+- Headings: Montserrat (sans-serif, geometric, modern)
+- Body: Open Sans (sans-serif, neutral, readable)
+- **Result**: Harmonious, not competing
+
+**Or Single Family**:
+- All text: Inter (variable font)
+- Headings: 600-700 weight
+- Body: 400 weight
+- Meta: 400 weight, 14px size
+- **Result**: Unified, consistent
+
+**Appropriate Weights**:
+- Headers: 600-700 (bold, attention-grabbing)
+- Body: 400 (regular, readable)
+- Emphasis: 600 or italic
+- De-emphasis: 400 with lighter color
+- **Result**: Weight reinforces hierarchy
+
+#### Anti-Patterns (Problematic Examples)
+
+**Tiny Text** ❌:
+- 12px body text on mobile
+- Forces zooming, poor accessibility
+- **Fix**: 16px minimum on mobile, 14px minimum on desktop
+
+**Insufficient Line Height** ❌:
+- 16px text with line-height: 1.0 = 16px
+- Lines touch, cramped, hard to read
+- **Fix**: 1.4-1.6 for body text (22-26px for 16px font)
+
+**Too Many Fonts** ❌:
+- Headings: Playfair Display (serif)
+- Body: Roboto (sans-serif)
+- Buttons: Raleway (sans-serif)
+- Captions: Lato (sans-serif)
+- **Result**: Visual chaos, no cohesion
+- **Fix**: 1-2 font families maximum
+
+**Insufficient Size Distinction** ❌:
+- H2: 17px, Body: 16px (only 1px difference)
+- H2 looks like emphasized body text, not heading
+- **Fix**: At least 2px difference, preferably 1.5x multiplier (24px for H2)
+
+**Inappropriate Weights** ❌:
+- Light weight (300) for body text
+- Harder to read, especially at small sizes
+- **Fix**: Regular (400) for body, reserve light for large display text
+
+**Line Length Too Wide** ❌:
+- 100+ characters per line on desktop
+- Eyes lose place, re-reading lines
+- **Fix**: max-width: 70ch (~600-700px)
+
+#### Practical Application
+
+**Critique Mode Example**:
+> "Your article typography has readability issues (Dimension 5). The body text is 14px with line-height 1.2 (16.8px), which feels cramped for long-form reading. Additionally, the line length exceeds 100 characters at desktop widths—users will lose their place. The H2 headings at 18px are only 4px larger than body text, making the hierarchy weak. **Recommendation**: Increase body text to 16px with 1.5 line-height (24px), constrain line length to max-width: 70ch, and increase H2 to 24px (1.5x body size) with 600 weight."
+
+**Specification Mode Example**:
+> **Typography System**:
+> - Font Family: Inter (variable font, sans-serif)
+> - Base Size: 16px (1rem)
+>
+> **Type Scale**:
+> - H1: 32px / 2rem / 700 weight / 1.2 line-height / 32px bottom margin
+> - H2: 24px / 1.5rem / 600 weight / 1.3 line-height / 24px bottom margin
+> - H3: 20px / 1.25rem / 600 weight / 1.3 line-height / 16px bottom margin
+> - Body: 16px / 1rem / 400 weight / 1.5 line-height / 24px paragraph margin
+> - Caption: 14px / 0.875rem / 400 weight / 1.4 line-height
+> - Code: 14px / 0.875rem / 400 weight / 1.6 line-height / monospace font
+>
+> **Constraints**:
+> - Max line length: 70ch (~600px at 16px)
+> - Min body size: 16px mobile, 14px desktop
+> - Line height: 1.5 for body, 1.2-1.3 for headings
+
+#### Cross-Platform Considerations
+
+- **Mobile**: 16px+ body text (prevents iOS auto-zoom), tighter line height okay (1.4)
+- **Web**: Responsive type scaling, use rem units
+- **Desktop**: Can use slightly smaller text (14px), but test readability
+- **Game**: Depends on viewing distance (couch = larger text, desk = standard)
+
+
+### Dimension 6: LAYOUT FLOW
+
+**Purpose:** Guide visual path through content
+
+Layout flow determines how users scan the interface. Good flow guides attention to important elements in logical order. Poor flow creates confusion and missed information.
+
+#### Evaluation Questions
+
+1. **What's the natural reading pattern?**
+   - F-pattern (content-heavy, scanning): Left-to-right, top-to-bottom, focusing on left edge
+   - Z-pattern (action-focused): Top-left → top-right → diagonal → bottom-left → bottom-right
+   - Gutenberg diagram: Top-left (primary) → top-right (strong) → bottom-left (weak) → bottom-right (terminal)
+
+2. **Is there a clear entry point?**
+   - Where do users' eyes land first?
+   - Is it intentional?
+
+3. **Does eye naturally flow to important elements?**
+   - Primary action in natural eye path?
+   - Supporting content where users expect it?
+
+4. **Is reading order logical?**
+   - Top-to-bottom, left-to-right (in LTR languages)
+   - Related items close together
+   - Sequential steps in order
+
+5. **Are there visual roadblocks?**
+   - Large images blocking flow
+   - Competing focal points disrupting path
+
+#### Patterns (Good Examples)
+
+**F-Pattern for Content Pages**:
+```
+[Header Navigation Bar]
+[H1 Title____________]
+[Body paragraph______]
+[H2 Subheading_______]
+[Body paragraph______]
+[Image] [Caption_____]
+```
+- Users scan left edge (headings)
+- Scan top horizontal (title, nav)
+- Primary content on left, supporting on right
+- **Result**: Efficient scanning, easy to find information
+
+**Z-Pattern for Landing Pages**:
+```
+[Logo]           [Nav Links] [CTA Button]
+         ↘
+    [Hero Headline]
+         ↘
+[Feature]  [Feature]  [Feature]
+    ↘
+[Secondary CTA]
+```
+- Top-left (logo) → top-right (CTA)
+- Diagonal to hero message
+- Bottom CTA as final action
+- **Result**: Guided path to conversion
+
+**Gutenberg Diagram for Forms**:
+```
+[Primary Optical Area]     [Strong Fallow Area]
+ Field Labels               Helper Text
+ Input Fields               Validation Messages
+
+[Weak Fallow Area]         [Terminal Area]
+ Optional Fields            Submit Button
+ Secondary Actions          Cancel Link
+```
+- Top-left: Essential fields (name, email)
+- Top-right: Helper text, instructions
+- Bottom-left: Optional fields
+- Bottom-right: Submit (terminal action)
+- **Result**: Natural progression, clear end point
+
+**Card Grid Layout**:
+```
+[Card] [Card] [Card]
+[Card] [Card] [Card]
+```
+- Equal visual weight
+- Left-to-right, top-to-bottom reading
+- Clear grid structure
+- **Result**: Scannable, organized
+
+**Single-Column Mobile Layout**:
+```
+[Image]
+[Heading]
+[Body text]
+[CTA Button]
+[Supporting Info]
+```
+- Top-to-bottom flow
+- Most important content first
+- Primary action before secondary
+- **Result**: Clear priority, minimal cognitive load
+
+#### Anti-Patterns (Problematic Examples)
+
+**Competing Focal Points** ❌:
+- Large hero image on left
+- Large form on right
+- User doesn't know where to look first
+- **Fix**: Establish clear primary element (size, contrast, position)
+
+**Burying Primary Action** ❌:
+- Critical "Submit" button at bottom of long form
+- Users might not scroll to find it
+- **Fix**: Sticky footer with submit button, or repeat at top and bottom
+
+**Ignoring Natural Reading Patterns** ❌:
+- Important content in bottom-left (weak fallow area)
+- Users scan top-left first, miss key information
+- **Fix**: Move critical content to primary optical area (top-left)
+
+**Visual Roadblocks** ❌:
+- Full-width banner image mid-page
+- Breaks reading flow, users think page ended
+- **Fix**: Constrain image width, or ensure clear continuation cues below
+
+**Illogical Order** ❌:
+- Step 1, Step 3, Step 2 in visual order
+- Confusing, breaks mental model
+- **Fix**: Visual order = logical order (top-to-bottom = 1, 2, 3)
+
+**No Clear Entry Point** ❌:
+- Homepage with 10 equal-sized elements
+- User doesn't know where to start
+- **Fix**: Create clear hierarchy (one large hero, smaller supporting elements)
+
+#### Practical Application
+
+**Critique Mode Example**:
+> "Your landing page has layout flow issues (Dimension 6). The primary CTA button ('Start Free Trial') is positioned in the bottom-left corner, which is the weak fallow area in the Gutenberg diagram—users' eyes naturally skip this region. Additionally, the large testimonial image in the center creates a visual roadblock, breaking the natural Z-pattern flow from hero to CTA. **Recommendation**: Move the primary CTA to the top-right (Z-pattern terminus) or bottom-right (terminal area). Reduce testimonial image size and position it as supporting content on the left or right rail to avoid blocking the main flow."
+
+**Specification Mode Example**:
+> **Layout Flow (Z-Pattern Landing Page)**:
+> - **Top-left (Primary Optical Area)**: Logo + product name
+> - **Top-right (Strong Fallow Area)**: Navigation links + primary CTA button
+> - **Center (Diagonal)**: Hero headline (48px bold) + subheading (20px) + supporting image
+> - **Middle**: Three feature cards in horizontal row (equal visual weight)
+> - **Bottom-right (Terminal Area)**: Secondary CTA ("Learn More" button)
+>
+> **Visual Flow Path**:
+> 1. Logo (brand recognition)
+> 2. Primary CTA (top-right, high contrast)
+> 3. Hero headline (large scale, center)
+> 4. Feature cards (scan left-to-right)
+> 5. Secondary CTA (final action)
+>
+> **Grid Structure**:
+> - Desktop: 12-column grid, hero spans 8 columns, image 4 columns
+> - Mobile: Single column, top-to-bottom (logo → headline → image → CTA)
+
+#### Cross-Platform Considerations
+
+- **Mobile**: Single-column layout (natural top-to-bottom flow), critical actions in thumb zone
+- **Web**: F-pattern for content, Z-pattern for landing pages, responsive reflow
+- **Desktop**: Multi-column layouts okay (larger screens), still honor reading patterns
+- **Game**: Depends on genre—HUD elements follow expected positions (health top-left, map corner)
+
+
+## Cross-Platform Visual Considerations
+
+### Mobile-Specific
+
+- **Contrast**: Higher contrast needed (outdoor viewing, sunlight)
+- **Scale**: Larger touch targets (44x44pt iOS, 48x48dp Android), 16px+ body text
+- **Spacing**: Tighter spacing okay (maximize content), 16-24px padding
+- **Color**: High contrast critical, test in bright sunlight
+- **Typography**: 16px+ to prevent iOS auto-zoom
+- **Layout**: Single-column flow, thumb-friendly placement
+
+**Reference**: lyra/ux-designer/mobile-design-patterns for platform-specific details
+
+### Web Application
+
+- **Contrast**: Standard ratios work, test with browser zoom (200%)
+- **Scale**: Flexible sizing (rem units), responsive scaling
+- **Spacing**: Responsive (increase padding on larger screens)
+- **Color**: Test with high-contrast mode, colorblind simulators
+- **Typography**: Fluid type scaling, max-width for readability
+- **Layout**: Multi-column on desktop, single-column mobile
+
+**Reference**: lyra/ux-designer/web-application-design for responsive patterns
+
+### Desktop Software
+
+- **Contrast**: Standard, but test with OS dark modes
+- **Scale**: Smaller targets okay (mouse precision), but 24px+ minimum
+- **Spacing**: More generous (32-48px padding), wider margins
+- **Color**: Support light/dark themes
+- **Typography**: 14px+ body text, allow user font size adjustment
+- **Layout**: Multi-column, panels, customizable workspaces
+
+**Reference**: lyra/ux-designer/desktop-software-design for desktop patterns
+
+### Game UI
+
+- **Contrast**: Extremely high contrast (readability during action)
+- **Scale**: Depends on input (gamepad = larger, mouse = smaller)
+- **Spacing**: Minimal (maximize game view), but don't cram
+- **Color**: Must work with game palette, colorblind modes essential
+- **Typography**: Bold, clear fonts (readable at distance, during action)
+- **Layout**: Corners for HUD, center for critical alerts
+
+**Reference**: lyra/ux-designer/game-ui-design for game-specific patterns
+
+
+## Practical Application Steps
+
+### Step 1: Identify Primary User Goal
+
+Before evaluating visual design, understand what users are trying to accomplish on this screen.
+
+**Questions**:
+- What's the primary task? (e.g., sign in, read article, complete purchase)
+- What's the most important information? (e.g., price, error message, next step)
+- What action should user take? (e.g., click CTA, read content, enter data)
+
+### Step 2: Evaluate All 6 Dimensions Systematically
+
+Work through each dimension in order, taking notes:
+
+1. **Contrast**: Does visual weight match importance?
+2. **Scale**: Are sizes appropriate for hierarchy and usability?
+3. **Spacing**: Does white space group related items and provide breathing room?
+4. **Color**: Is palette accessible, meaningful, and intentional?
+5. **Typography**: Is text readable and hierarchical?
+6. **Layout Flow**: Does visual path guide users to important elements?
+
+### Step 3: Identify Friction Points
+
+Note where dimensions conflict:
+- High contrast but poor color contrast (dimension 1 vs 4)
+- Large scale but cramped spacing (dimension 2 vs 3)
+- Good hierarchy but poor layout flow (dimension 1 vs 6)
+
+### Step 4: Prioritize Fixes by User Impact
+
+**Critical (P0)**: Accessibility failures, unusable interfaces
+- Text contrast below 4.5:1
+- Touch targets below 44px on mobile
+- Color as sole indicator (colorblind fail)
+
+**High (P1)**: Usability issues, confusing hierarchy
+- Primary action not prominent
+- Inconsistent spacing
+- Poor typography (cramped, tiny)
+
+**Medium (P2)**: Suboptimal but functional
+- Could use more breathing room
+- Minor inconsistencies
+- Aesthetic improvements
+
+### Step 5: Provide Actionable Recommendations
+
+**Critique Mode**:
+- Identify specific issue with dimension reference
+- Explain user impact
+- Suggest concrete fix with rationale
+
+**Specification Mode**:
+- Provide exact values (colors, sizes, spacing)
+- Include contrast ratios, sizing units
+- Specify responsive behavior
+
+
+## Visual Design Pattern Library
+
+### Button Design
+
+**Primary Button**:
+- Background: High-contrast brand color (#0066CC)
+- Text: White (#FFFFFF, 7:1 contrast)
+- Size: 48px height mobile, 44px desktop
+- Padding: 12px vertical, 24px horizontal
+- Border-radius: 4-8px
+- Font: 16px, 600 weight
+
+**Secondary Button**:
+- Background: Transparent or light gray (#F5F5F5)
+- Text: Brand color (#0066CC, 4.8:1 contrast)
+- Border: 1px solid #0066CC
+- Size: 44px height
+- Padding: 12px vertical, 24px horizontal
+
+**States**: Default, hover (+shadow/darken), active (depressed), disabled (gray, cursor not-allowed)
+
+### Card Design
+
+- Background: White (#FFFFFF)
+- Border: 1px solid #E0E0E0 or subtle shadow
+- Padding: 24px all sides (mobile), 32px (desktop)
+- Border-radius: 8px
+- Spacing: 16px between cards (mobile), 24px (desktop)
+
+### Form Design
+
+- Label: 14px, 600 weight, 4px above input
+- Input: 16px text, 44px height, 12px padding, 4px border-radius
+- Helper text: 14px, gray (#666666), 4px below input
+- Error: Red (#D32F2F) with icon, 14px, 4px below input
+- Spacing: 16px between fields, 32px between sections
+
+### Typography Hierarchy
+
+- H1: 32px / 700 weight / 1.2 line-height (page title)
+- H2: 24px / 600 weight / 1.3 line-height (sections)
+- H3: 20px / 600 weight / 1.3 line-height (subsections)
+- Body: 16px / 400 weight / 1.5 line-height
+- Caption: 14px / 400 weight / 1.4 line-height (meta)
+
+
+## Red Flags & Anti-Patterns Catalog
+
+### Critical Issues (Fix Immediately)
+
+1. **Text contrast below 4.5:1**: Accessibility failure, many users can't read
+2. **Color as sole indicator**: Colorblind users miss information
+3. **Touch targets below 44px**: Frustrating on mobile, accessibility issue
+4. **Body text below 14px**: Unreadable, especially mobile/older users
+5. **Line height below 1.3**: Cramped, hard to read
+6. **Primary action not prominent**: Users can't find key task
+
+### High-Priority Issues
+
+7. **Inconsistent spacing**: Feels chaotic, unprofessional
+8. **Too many colors**: Visual overwhelm, no hierarchy
+9. **Competing focal points**: User doesn't know where to look
+10. **Poor font pairing**: Visual discord, amateurish
+11. **Line length over 100 characters**: Users lose place, re-read
+12. **Tiny secondary text (<12px)**: Hard to read, especially disclaimers
+
+### Medium-Priority Issues
+
+13. **Insufficient padding**: Feels cramped, less breathing room
+14. **Weak hierarchy**: All elements similar size/weight
+15. **Inappropriate button size**: Size doesn't match importance
+16. **Ignoring platform conventions**: Feels foreign to users
+17. **Low contrast on non-text**: UI components below 3:1
+18. **Excessive white space**: Wastes screen real estate
+
+
+## Related Skills
+
+**Core UX Skills**:
+- **lyra/ux-designer/accessibility-and-inclusive-design**: Color contrast, typography readability, visual accessibility requirements (WCAG 2.1 AA)
+- **lyra/ux-designer/interaction-design-patterns**: Visual feedback for interactions, button states, visual affordances
+- **lyra/ux-designer/ux-fundamentals**: Core principles (progressive disclosure, aesthetic & minimalist design, visual hierarchy concepts)
+
+**Platform Extensions**:
+- **lyra/ux-designer/mobile-design-patterns**: Platform-specific visual conventions (iOS HIG vs Material Design), mobile constraints
+- **lyra/ux-designer/web-application-design**: Responsive design patterns, complex data visualization
+- **lyra/ux-designer/desktop-software-design**: Desktop visual conventions, themes (light/dark mode)
+- **lyra/ux-designer/game-ui-design**: Visual coherence with game art style, HUD design for readability
+
+**Cross-Faction**:
+- **muna/technical-writer/clarity-and-style**: Writing clear UI copy and microcopy that supports visual hierarchy
diff --git a/skills/using-ux-designer/web-application-design.md b/skills/using-ux-designer/web-application-design.md
new file mode 100644
index 0000000..cfe03cf
--- /dev/null
+++ b/skills/using-ux-designer/web-application-design.md
@@ -0,0 +1,1993 @@
+
+# Web Application Design
+
+## Overview
+
+This skill provides **The Web Application Usability Framework**, a systematic 4-dimension methodology for designing complex web applications, SaaS tools, dashboards, and admin panels. Use this when designing data-heavy interfaces, workflow-driven tools, or multi-platform responsive web applications.
+
+**Core Principle**: Web applications serve power users who need speed, clarity, and flexibility. Success means presenting complex data clearly, enabling efficient workflows through keyboard shortcuts and bulk actions, adapting gracefully across devices, and ensuring core functionality works even in degraded conditions.
+
+**Focus**: Complex data displays, keyboard-driven workflows, responsive design (mobile to desktop), and progressive enhancement for reliability.
+
+## When to Use This Skill
+
+**Use this skill when:**
+- Designing web applications, SaaS tools, or admin panels
+- Working with complex data displays (tables, charts, dashboards)
+- Building tools for power users or enterprise environments
+- Implementing responsive web designs across mobile, tablet, and desktop
+- User mentions: "web app", "dashboard", "SaaS", "admin panel", "data table", "keyboard shortcuts", "bulk actions"
+
+**Don't use this skill for:**
+- Marketing websites or landing pages (simpler content-focused design, not workflow-driven)
+- Mobile-native apps (use `lyra/ux-designer/mobile-design-patterns`)
+- Desktop-native software (use `lyra/ux-designer/desktop-software-design`)
+- Simple forms or single-purpose pages (use `lyra/ux-designer/interaction-design-patterns`)
+
+
+## The Web Application Usability Framework
+
+A systematic 4-dimension evaluation model for web application design:
+
+1. **DATA CLARITY** - Tables, charts, dashboards, real-time updates, export
+2. **WORKFLOW EFFICIENCY** - Keyboard shortcuts, bulk actions, inline editing, command palette
+3. **RESPONSIVE ADAPTATION** - Mobile <768px, tablet 768-1024px, desktop >1024px
+4. **PROGRESSIVE ENHANCEMENT** - Core content works without JS/CSS, graceful degradation
+
+Evaluate designs by examining each dimension systematically, ensuring data is understandable, workflows are fast, interfaces adapt across devices, and functionality degrades gracefully.
+
+
+## Dimension 1: DATA CLARITY
+
+**Purpose:** Present complex data in an understandable, scannable, actionable way
+
+Users come to web applications to work with data—view it, understand it, act on it. Poor data presentation creates cognitive overload and slows decision-making. Clear data visualization, sortable tables, and meaningful empty states are essential.
+
+### Evaluation Questions
+
+1. **Can users understand data at a glance?**
+   - Visual hierarchy guides the eye to important metrics
+   - Charts match data type (trends → line, comparison → bar)
+   - Numbers formatted appropriately (1,234 vs 1234, $1.2M vs $1,234,567)
+
+2. **Are tables sortable and filterable?**
+   - Column headers clickable for sorting (ascending/descending)
+   - Filter controls above table or in column headers
+   - Search functionality for large datasets
+   - Pagination or infinite scroll for performance
+
+3. **Do visualizations match data relationships?**
+   - Line charts: Trends over time
+   - Bar charts: Comparisons between categories
+   - Pie charts: Part-to-whole (use sparingly, max 5 slices)
+   - Scatter plots: Correlations between variables
+
+4. **Are empty states helpful and actionable?**
+   - Explain why empty ("No results found", "You haven't created any projects yet")
+   - Provide next action (CTA: "Create your first project")
+   - Show illustration or helpful tips
+
+5. **Is real-time data clearly indicated?**
+   - Visual indicator (pulsing dot, "Live" badge)
+   - Timestamp ("Updated 2 seconds ago")
+   - Smooth updates (no jarring content shifts)
+
+### Tables with Sorting and Filtering
+
+**Pattern: Sortable Table Headers**
+
+```html
+<!-- Table Structure -->
+<table>
+  <thead>
+    <tr>
+      <th>
+        <button class="sort-header" data-column="name">
+          Name
+          <span class="sort-icon">↕</span>
+        </button>
+      </th>
+      <th>
+        <button class="sort-header" data-column="date">
+          Date Created
+          <span class="sort-icon">↓</span> <!-- Active: descending -->
+        </button>
+      </th>
+      <th>Status</th>
+    </tr>
+  </thead>
+  <tbody>
+    <!-- Data rows -->
+  </tbody>
+</table>
+```
+
+**Sorting States:**
+- **Unsorted:** ↕ (double arrow, neutral gray)
+- **Ascending:** ↑ (up arrow, brand color)
+- **Descending:** ↓ (down arrow, brand color)
+
+**Interaction:**
+- Click header: Toggle sort (unsorted → ascending → descending → ascending)
+- Keyboard: Tab to header, Enter/Space to sort
+- Visual feedback: Icon changes, column highlighted
+
+**Filter Controls:**
+
+```html
+<!-- Filters Above Table -->
+<div class="table-filters">
+  <input type="search" placeholder="Search by name..." />
+  <select>
+    <option value="">All Statuses</option>
+    <option value="active">Active</option>
+    <option value="inactive">Inactive</option>
+  </select>
+  <button>Clear Filters</button>
+</div>
+```
+
+**Pagination:**
+- Bottom of table: "Showing 1-25 of 487 results"
+- Page controls: « Previous | 1 2 3 ... 20 | Next »
+- Items per page: Dropdown (25, 50, 100)
+- Performance: Only load visible rows (virtual scrolling for 1000+ rows)
+
+**Row Selection for Bulk Actions:**
+
+```html
+<table>
+  <thead>
+    <tr>
+      <th>
+        <input type="checkbox" id="select-all" aria-label="Select all rows" />
+      </th>
+      <th>Name</th>
+      <th>Status</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <input type="checkbox" name="row-select" value="123" />
+      </td>
+      <td>Project Alpha</td>
+      <td>Active</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+**Selection Feedback:**
+- Selected row: Background color change (light blue, 10% opacity)
+- Bulk action bar appears: "3 items selected | Delete | Archive | Export"
+- "Select all" checkbox states: Unchecked, Checked, Indeterminate (some selected)
+
+### Data Visualization Best Practices
+
+**Line Charts (Trends Over Time):**
+- **Use for:** Time-series data, progress tracking, historical trends
+- **Best practices:**
+  - X-axis: Time (dates, hours)
+  - Y-axis: Value (starts at 0 unless all values in narrow range)
+  - Max 5 lines per chart (more = unreadable)
+  - Legend with colors, or direct labels on lines
+  - Tooltips on hover: "Aug 15, 2024: 1,234 users"
+
+**Bar Charts (Comparisons Between Categories):**
+- **Use for:** Comparing quantities across categories
+- **Best practices:**
+  - Horizontal bars: Better for long category names
+  - Vertical bars: Better for time-based categories (months)
+  - Sort by value (descending) unless chronological
+  - Space between bars: 20-40% of bar width
+  - Value labels on bars or at end
+
+**Pie Charts (Part-to-Whole Relationships):**
+- **Use sparingly:** Only when showing parts of 100%
+- **Max 5 slices:** More slices = hard to compare
+- **Alternative:** Donut chart (center shows total)
+- **Better alternative:** Horizontal bar chart (easier to compare)
+- **Labels:** Percentage + category name
+
+**Dashboard Hierarchy (F-Pattern Layout):**
+
+```
+┌─────────────────────────────────────────────────┐
+│  [Most Important Metric]   [Primary Action]     │  ← Top row: Critical
+├──────────────────┬──────────────────┬───────────┤
+│  Metric Card     │  Metric Card     │  Chart    │  ← Second row: Important
+├──────────────────┴──────────────────┴───────────┤
+│                                                  │
+│  Detailed Table or Secondary Chart              │  ← Below fold: Details
+│                                                  │
+└─────────────────────────────────────────────────┘
+```
+
+**F-Pattern Scanning:**
+- **Top-left:** Most important metric (users scan here first)
+- **Top-right:** Primary action (CTA, create, export)
+- **Left edge:** Vertical scan (labels, categories)
+- **Horizontal scans:** Decreasing attention as user scrolls down
+
+**Metric Cards:**
+- Value (large, bold): "1,234"
+- Label (smaller, gray): "Active Users"
+- Change indicator: "↑ 12% vs last week" (green for positive, red for negative)
+- Sparkline (optional): Tiny trend chart (last 7 days)
+
+### Progressive Disclosure for Complex Data
+
+**Pattern: Summary Cards → Detail Views**
+
+```html
+<!-- Summary Card (Collapsed) -->
+<div class="summary-card">
+  <h3>Project Alpha</h3>
+  <p>Status: Active | 12 tasks remaining</p>
+  <button class="expand-btn">View Details →</button>
+</div>
+
+<!-- Detail View (Expanded) -->
+<div class="detail-view">
+  <h3>Project Alpha</h3>
+  <div class="metadata">
+    <p>Created: Aug 1, 2024</p>
+    <p>Owner: Jane Smith</p>
+    <p>Budget: $50,000</p>
+  </div>
+  <table>
+    <!-- Detailed task list -->
+  </table>
+  <button class="collapse-btn">Hide Details ↑</button>
+</div>
+```
+
+**When to Use:**
+- Large datasets: Show 5-10 items, "Load more" or pagination
+- Complex records: Show summary, expand for full details
+- Nested data: Accordion or tree view
+
+**Interaction:**
+- Click to expand: Smooth height animation (300ms ease-out)
+- Keyboard: Tab to button, Enter/Space to toggle
+- Icon: ▶ (collapsed) → ▼ (expanded)
+
+### Real-Time Updates
+
+**WebSocket for Live Data:**
+- **Use for:** Stock prices, live dashboards, chat, collaborative editing
+- **Pattern:** Establish WebSocket connection on page load, update DOM on message
+- **Visual indicator:** "Live" badge (pulsing green dot), "Connected" status
+
+**Polling for Updates:**
+- **Use for:** Less time-critical updates (notifications, status checks)
+- **Interval:** 60 seconds typical (balance freshness vs server load)
+- **Pattern:** setInterval(fetchUpdates, 60000)
+
+**Visual Indicators:**
+- **Pulsing dot:** Live connection (CSS animation, 2s pulse)
+- **Timestamp:** "Updated 2 seconds ago" (relative time, updates every second)
+- **Flash on update:** Brief highlight (yellow background, fades after 2s)
+
+**Smooth Content Updates:**
+- Don't shift layout abruptly (causes disorientation)
+- Animate new items in (slide down or fade in, 200ms)
+- If sorting changes, animate reordering (swap positions smoothly)
+
+### Export Functionality
+
+**Export Options:**
+
+**CSV for Data Analysis:**
+- All rows or filtered/selected rows
+- All columns or visible columns only
+- Filename: "projects_export_2024-08-15.csv"
+
+**PDF for Reports:**
+- Formatted for printing (headers, footers, page numbers)
+- Charts rendered as images
+- Logo and branding
+
+**Copy to Clipboard:**
+- Selected cells or entire table
+- Tab-separated values (paste into Excel/Sheets)
+- Confirmation toast: "Copied 10 rows to clipboard"
+
+**Pattern: Export Dropdown**
+
+```html
+<div class="export-dropdown">
+  <button>Export ▼</button>
+  <ul class="dropdown-menu">
+    <li><button>Export to CSV</button></li>
+    <li><button>Export to PDF</button></li>
+    <li><button>Copy to Clipboard</button></li>
+  </ul>
+</div>
+```
+
+
+## Dimension 2: WORKFLOW EFFICIENCY
+
+**Purpose:** Enable power users to work at maximum speed with minimal friction
+
+Web application users are often power users who perform repetitive tasks daily. Keyboard shortcuts, bulk actions, inline editing, and command palettes dramatically improve efficiency for these users.
+
+### Evaluation Questions
+
+1. **Can power users complete tasks without touching the mouse?**
+   - Keyboard shortcuts for common actions
+   - Tab navigation through all interactive elements
+   - Focus indicators visible and high-contrast
+
+2. **Are bulk actions available for repetitive tasks?**
+   - Select multiple items (checkboxes)
+   - "Select all" option
+   - Bulk actions: Delete, Archive, Export, Tag, Assign
+
+3. **Does inline editing reduce modal dialogs?**
+   - Click to edit cells in tables
+   - Auto-save on blur
+   - No modal for simple edits
+
+4. **Is there an autosave mechanism?**
+   - Draft saved every 30 seconds
+   - Visual indicator: "Saving...", "All changes saved"
+   - No "lost work" anxiety
+
+5. **Are contextual actions easily accessible?**
+   - Right-click context menus
+   - Hover actions on table rows
+   - Quick actions on cards
+
+### Keyboard Shortcuts
+
+**Essential Shortcuts (Cross-Platform):**
+
+```
+Cmd/Ctrl+S: Save
+Cmd/Ctrl+F: Search/Find (open search modal or focus search input)
+Cmd/Ctrl+Z: Undo
+Cmd/Ctrl+Shift+Z: Redo
+Cmd/Ctrl+K: Command palette (universal action search)
+Cmd/Ctrl+/: Show keyboard shortcuts panel
+```
+
+**Navigation Shortcuts:**
+
+```
+Tab: Next field/element
+Shift+Tab: Previous field/element
+Arrow keys: Navigate lists, tables, calendar cells
+Enter: Submit form, activate button, open selected item
+Esc: Close modal, cancel edit, clear search
+```
+
+**Table Navigation:**
+
+```
+Arrow Up/Down: Previous/next row
+Arrow Left/Right: Previous/next column (if cell-focused)
+Space: Select/deselect row (checkbox)
+Enter: Open detail view for selected row
+```
+
+**Application-Specific Shortcuts:**
+
+```
+G then I: Go to Inbox (Gmail-style navigation)
+C: Compose new (email, message, post)
+/: Focus search (common in many apps)
+?: Show keyboard shortcuts help
+```
+
+**Discoverability Strategies:**
+
+1. **Tooltips with Shortcuts:**
+   - Button tooltip: "Save (Cmd+S)"
+   - Show shortcut in gray, smaller text
+
+2. **Onboarding Hints:**
+   - First-time user: "Pro tip: Press Cmd+K to quickly find anything"
+   - Dismissable, don't show again after 3 views
+
+3. **Keyboard Shortcuts Panel:**
+   - Triggered by Cmd+/ or ? key
+   - Modal with categorized shortcuts (Navigation, Editing, Actions)
+   - Searchable
+
+**Implementation:**
+
+```javascript
+// Global keyboard listener
+document.addEventListener('keydown', (e) => {
+  // Cmd+S or Ctrl+S: Save
+  if ((e.metaKey || e.ctrlKey) && e.key === 's') {
+    e.preventDefault();
+    saveDocument();
+  }
+
+  // Cmd+K or Ctrl+K: Command palette
+  if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+    e.preventDefault();
+    openCommandPalette();
+  }
+});
+```
+
+### Bulk Actions
+
+**Pattern: Select Multiple Items, Act on All**
+
+```html
+<!-- Table with Bulk Selection -->
+<table>
+  <thead>
+    <tr>
+      <th>
+        <input type="checkbox" id="select-all" />
+      </th>
+      <th>Name</th>
+      <th>Status</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><input type="checkbox" name="item" value="1" /></td>
+      <td>Item 1</td>
+      <td>Active</td>
+    </tr>
+    <tr>
+      <td><input type="checkbox" name="item" value="2" /></td>
+      <td>Item 2</td>
+      <td>Inactive</td>
+    </tr>
+  </tbody>
+</table>
+
+<!-- Bulk Action Bar (appears when items selected) -->
+<div class="bulk-action-bar" hidden>
+  <span class="selection-count">3 items selected</span>
+  <button class="bulk-delete">Delete</button>
+  <button class="bulk-archive">Archive</button>
+  <button class="bulk-export">Export</button>
+  <button class="bulk-tag">Add Tag</button>
+  <button class="deselect-all">Clear Selection</button>
+</div>
+```
+
+**Bulk Action Behavior:**
+
+1. **Select items:** Click checkboxes or Shift+Click for range selection
+2. **Bulk action bar appears:** Slides in from top or bottom
+3. **Click action:** Confirmation modal for destructive actions (delete)
+4. **Process:** Show progress if >10 items ("Deleting 47 items... 23/47")
+5. **Feedback:** Toast notification "3 items deleted" or "Export complete"
+6. **Undo option:** "3 items deleted. Undo?" (5-second window)
+
+**"Select All" Checkbox States:**
+- **Unchecked:** No items selected
+- **Checked:** All visible items selected
+- **Indeterminate:** Some items selected (shows dash/minus icon)
+
+**Selection Shortcuts:**
+- Cmd+A: Select all (focus table first)
+- Shift+Click: Select range (click first, Shift+Click last)
+- Cmd+Click: Toggle individual selection (add/remove from selection)
+
+### Inline Editing
+
+**Pattern: Click to Edit, Auto-Save on Blur**
+
+```html
+<!-- Table Cell (View Mode) -->
+<td class="editable-cell" data-field="name" data-id="123">
+  <span class="cell-value">Project Alpha</span>
+  <button class="edit-icon" aria-label="Edit name">✏️</button>
+</td>
+
+<!-- Table Cell (Edit Mode) -->
+<td class="editable-cell editing">
+  <input type="text" value="Project Alpha" class="cell-input" />
+  <button class="save-btn">✓</button>
+  <button class="cancel-btn">✕</button>
+</td>
+```
+
+**Inline Edit Interaction:**
+
+1. **Enter edit mode:**
+   - Click cell or edit icon
+   - Double-click cell
+   - Keyboard: Tab to cell, Enter to edit
+
+2. **Edit value:**
+   - Input field focused, text selected
+   - Type new value
+   - Validation inline (if applicable)
+
+3. **Save:**
+   - Click save button
+   - Press Enter
+   - Blur (click outside) triggers auto-save
+   - API request in background
+
+4. **Cancel:**
+   - Click cancel button
+   - Press Esc
+   - Revert to original value
+
+5. **Feedback:**
+   - Saving: Spinner or "Saving..." text
+   - Success: Brief green border flash, "Saved"
+   - Error: Red border, error message, revert to original
+
+**Auto-Save Indicators:**
+- Icon: ⏳ (saving), ✓ (saved), ⚠ (error)
+- Text: "Saving...", "All changes saved", "Failed to save"
+- Position: Top-right corner or inline with edited field
+
+**When NOT to Use Inline Editing:**
+- Complex fields (multi-line text, rich text editor → use modal or dedicated page)
+- Multiple related fields (edit form in modal or expand row)
+- Destructive actions (delete → confirmation modal)
+
+### Command Palette
+
+**Pattern: Cmd+K Opens Search for All Actions**
+
+```html
+<!-- Command Palette Modal -->
+<div class="command-palette-modal">
+  <input
+    type="search"
+    placeholder="Search for actions, pages, or data..."
+    class="command-search"
+    autofocus
+  />
+  <ul class="command-results">
+    <li class="result-item">
+      <span class="result-icon">📄</span>
+      <span class="result-title">Create New Project</span>
+      <span class="result-shortcut">Cmd+N</span>
+    </li>
+    <li class="result-item">
+      <span class="result-icon">🔍</span>
+      <span class="result-title">Search Projects</span>
+      <span class="result-shortcut">Cmd+F</span>
+    </li>
+    <li class="result-item selected">
+      <span class="result-icon">⚙️</span>
+      <span class="result-title">Settings</span>
+    </li>
+  </ul>
+</div>
+```
+
+**Command Palette Features:**
+
+- **Search:** Type to filter actions, pages, recent items
+- **Keyboard navigation:** Arrow keys to select, Enter to execute
+- **Shortcuts shown:** Display keyboard shortcut if available
+- **Recents:** Show recently used actions at top
+- **Categories:** Actions, Pages, Projects, Settings
+- **Fuzzy search:** "crnw" matches "Create New Project"
+
+**What to Include:**
+- Navigation: All pages/sections
+- Actions: Create, Export, Delete, Settings
+- Recent items: Recently viewed projects, documents
+- Search results: Data from tables, lists
+
+**Examples:**
+- Slack: Cmd+K (Quick switcher - channels, DMs, files)
+- VS Code: Cmd+Shift+P (Command palette - all editor actions)
+- Linear: Cmd+K (Create issue, search, navigate)
+
+### Contextual Actions
+
+**Pattern: Right-Click Context Menu**
+
+```html
+<!-- Table Row -->
+<tr class="table-row" data-id="123">
+  <td>Project Alpha</td>
+  <td>Active</td>
+  <td>
+    <!-- Optional: Three-dot menu for touch/mobile -->
+    <button class="row-menu-btn" aria-label="More actions">⋮</button>
+  </td>
+</tr>
+
+<!-- Context Menu (appears on right-click) -->
+<ul class="context-menu" style="top: 200px; left: 300px;">
+  <li><button>Open</button></li>
+  <li><button>Edit</button></li>
+  <li><button>Duplicate</button></li>
+  <li class="divider"></li>
+  <li><button class="danger">Delete</button></li>
+</ul>
+```
+
+**Context Menu Behavior:**
+
+- **Trigger:** Right-click on row, card, or item
+- **Position:** Appears at mouse cursor position
+- **Keyboard:** Shift+F10 or Menu key (if available)
+- **Close:** Click outside, press Esc, select action
+- **Actions:** Open, Edit, Duplicate, Archive, Delete (dangerous actions at bottom, red)
+
+**Touch/Mobile Alternative:**
+- Three-dot menu button (⋮) visible on mobile
+- Tap to show action dropdown or bottom sheet
+- Right-click not available on touch devices
+
+**Hover Actions (Desktop):**
+
+```html
+<!-- Card with Hover Actions -->
+<div class="card">
+  <h3>Project Alpha</h3>
+  <p>12 tasks remaining</p>
+
+  <!-- Actions appear on hover (desktop only) -->
+  <div class="hover-actions">
+    <button aria-label="Edit">✏️</button>
+    <button aria-label="Archive">📦</button>
+    <button aria-label="Delete">🗑️</button>
+  </div>
+</div>
+```
+
+**CSS for Hover Actions:**
+
+```css
+.hover-actions {
+  opacity: 0;
+  transition: opacity 150ms ease-out;
+}
+
+.card:hover .hover-actions {
+  opacity: 1;
+}
+
+.card:focus-within .hover-actions {
+  opacity: 1; /* Also show on keyboard focus */
+}
+```
+
+### Undo/Redo
+
+**Implementation Guidance:**
+
+**Keyboard Shortcuts:**
+- Cmd+Z / Ctrl+Z: Undo
+- Cmd+Shift+Z / Ctrl+Shift+Z: Redo (or Cmd+Y / Ctrl+Y)
+
+**State Management:**
+- Maintain history stack of actions
+- Max history: 20-50 actions (memory constraint)
+- Persist across page refresh (localStorage)
+
+**Visual Feedback:**
+- Toast notification: "Undo: Deleted 3 items"
+- Menu items: "Undo Delete" (shows last action)
+- Disabled state: Gray out if no undo/redo available
+
+**What Actions to Track:**
+- Destructive: Delete, archive, remove
+- Edits: Text changes, status updates
+- Bulk actions: All bulk operations
+- Don't track: Navigation, search, filter (non-destructive)
+
+**Undo Toast Pattern:**
+
+```html
+<!-- Toast with Undo -->
+<div class="toast success">
+  <span>3 items deleted</span>
+  <button class="undo-btn">Undo</button>
+</div>
+```
+
+- Duration: 5 seconds (enough time to undo)
+- Auto-dismiss: After 5s (or user clicks undo)
+- Position: Bottom-center or top-right
+
+### Autosave
+
+**Pattern: Save Draft Every 30 Seconds**
+
+```javascript
+let autosaveTimer;
+let isDirty = false; // Track if content changed
+
+// Mark as dirty on user input
+contentField.addEventListener('input', () => {
+  isDirty = true;
+  clearTimeout(autosaveTimer);
+  autosaveTimer = setTimeout(autosave, 30000); // 30 seconds
+});
+
+async function autosave() {
+  if (!isDirty) return;
+
+  updateStatus('Saving...');
+  try {
+    await saveDraft();
+    updateStatus('All changes saved');
+    isDirty = false;
+  } catch (error) {
+    updateStatus('Failed to save. Retry in 60s.');
+    autosaveTimer = setTimeout(autosave, 60000); // Retry
+  }
+}
+```
+
+**Autosave Indicators:**
+
+- **Saving:** "Saving..." (gray, spinner icon)
+- **Saved:** "All changes saved" (green, checkmark, fades after 2s)
+- **Error:** "Failed to save. Trying again..." (red, warning icon)
+- **Position:** Top-right, below header, or inline with content
+
+**Best Practices:**
+- Save after 30 seconds of inactivity (not every keystroke)
+- Save on blur (user navigates away)
+- Debounce: Wait for user to stop typing
+- Conflict resolution: Server timestamp wins, or show merge UI
+
+**Manual Save:**
+- Still provide "Save" button (Cmd+S)
+- Immediate save, not delayed
+- Feedback: "Saved successfully"
+
+
+## Dimension 3: RESPONSIVE ADAPTATION
+
+**Purpose:** Provide optimal experience across all screen sizes (mobile, tablet, desktop)
+
+Web applications must work on phones, tablets, and desktops. Layout, navigation, and interaction patterns must adapt. Mobile users need simplified views and touch targets; desktop users need dense information and keyboard shortcuts.
+
+### Evaluation Questions
+
+1. **Does the layout adapt gracefully from mobile to desktop?**
+   - Mobile: Single column, simplified
+   - Tablet: Two columns, condensed
+   - Desktop: Multi-column, full features
+
+2. **Are touch targets appropriately sized on mobile?**
+   - Mobile: 48x48px minimum
+   - Desktop: 32x32px acceptable (mouse precision)
+
+3. **Do complex features have mobile alternatives?**
+   - Desktop: Hover actions, right-click menus
+   - Mobile: Tap menus, swipe actions, bottom sheets
+
+4. **Is the mobile experience functional (not just hidden)?**
+   - Don't hide critical features behind mobile breakpoint
+   - Simplify, don't remove
+   - Provide alternative interactions
+
+### Breakpoints
+
+**Standard Breakpoints:**
+
+```css
+/* Mobile: <768px */
+@media (max-width: 767px) {
+  /* Single column, stacked navigation, simplified tables */
+}
+
+/* Tablet: 768-1024px */
+@media (min-width: 768px) and (max-width: 1024px) {
+  /* Two columns, condensed nav, partial tables */
+}
+
+/* Desktop: >1024px */
+@media (min-width: 1025px) {
+  /* Multi-column, persistent nav, full features */
+}
+```
+
+### Mobile (<768px)
+
+**Layout:**
+- **Single column:** Content stacks vertically
+- **Full-width:** Cards, buttons, inputs span full width (minus padding)
+- **Padding:** 16px left/right margins
+
+**Navigation:**
+- **Hamburger menu:** Three-line icon, opens drawer navigation
+- **Bottom tabs:** 3-5 items for primary navigation (if app-like)
+- **Sticky header:** Fixed top navigation (collapses on scroll optional)
+
+**Tables:**
+- **Option 1: Horizontal scroll** (preserve structure, scroll left/right)
+- **Option 2: Hide columns** (show critical columns only, "View details" for rest)
+- **Option 3: Card view** (stack data vertically, each row becomes card)
+- **Option 4: Accordion rows** (tap to expand full details)
+
+**Touch Targets:**
+- **Minimum:** 48x48px (finger-sized)
+- **Spacing:** 8px between targets
+- **Buttons:** Full-width or large (minimum 48px height)
+
+**Information Density:**
+- **Reduced:** Show essential data, hide secondary info
+- **Progressive disclosure:** "Show more" buttons
+- **Simplified charts:** Single metric cards instead of complex multi-line charts
+
+**Mobile-Specific Patterns:**
+- Tap instead of hover (no hover state on mobile)
+- Swipe gestures (swipe to delete, pull to refresh)
+- Bottom sheets instead of modals (easier thumb reach)
+
+### Tablet (768-1024px)
+
+**Layout:**
+- **Two-column:** Sidebar + content, or split view
+- **Grid:** 2-3 columns for cards
+- **Flexible:** Adapt to portrait (narrower) vs landscape (wider)
+
+**Navigation:**
+- **Condensed sidebar:** Icons + labels (collapsed width)
+- **Icon nav:** Top nav with icons and text
+- **Tabs:** Horizontal tabs for sections
+
+**Tables:**
+- **Partial columns:** Show more columns than mobile, hide non-critical
+- **Horizontal scroll:** If all columns needed
+- **Responsive breakpoints:** Adjust column visibility at 768px and 1024px
+
+**Touch Targets:**
+- **Still touch-friendly:** 48x48px (tablets are touch)
+- **Hybrid:** Support touch and mouse (some tablets have trackpads)
+
+**Information Density:**
+- **Medium:** More than mobile, less than desktop
+- **Two-column cards:** Side-by-side instead of stacked
+
+### Desktop (>1024px)
+
+**Layout:**
+- **Multi-column:** 3+ columns, sidebars, panels
+- **Persistent navigation:** Sidebar always visible, or top nav
+- **Wider content:** Max-width 1400-1600px, centered
+
+**Navigation:**
+- **Full sidebar:** Expanded with icons + labels
+- **Top nav with dropdowns:** Mega-menus for complex hierarchies
+- **Breadcrumbs:** Show navigation path
+
+**Tables:**
+- **All columns visible:** Full table with all data
+- **Sortable:** Column headers clickable
+- **Hover states:** Row highlights on hover, actions appear
+
+**Mouse/Keyboard Interactions:**
+- **Hover:** Tooltips, action buttons, previews
+- **Right-click:** Context menus
+- **Keyboard shortcuts:** Full keyboard support
+- **Focus indicators:** Visible for keyboard navigation
+
+**Information Density:**
+- **High:** Show all data, charts, metrics
+- **Multi-pane:** Master-detail views (list + detail side-by-side)
+- **Dense tables:** More rows per page (25-50)
+
+**Desktop-Specific Patterns:**
+- Hover to reveal actions
+- Drag-and-drop reordering
+- Resizable panels (drag divider to adjust width)
+- Multi-select with Shift+Click, Cmd+Click
+
+### Responsive Patterns
+
+**Mobile-First CSS:**
+
+```css
+/* Base styles (mobile <768px) */
+.container {
+  padding: 16px;
+}
+
+.card {
+  width: 100%;
+  margin-bottom: 16px;
+}
+
+.sidebar {
+  display: none; /* Hidden on mobile, hamburger menu instead */
+}
+
+/* Tablet (768px+) */
+@media (min-width: 768px) {
+  .container {
+    display: grid;
+    grid-template-columns: 200px 1fr; /* Sidebar + content */
+    padding: 24px;
+  }
+
+  .sidebar {
+    display: block; /* Show sidebar */
+  }
+
+  .card {
+    width: calc(50% - 12px); /* Two columns */
+  }
+}
+
+/* Desktop (1025px+) */
+@media (min-width: 1025px) {
+  .container {
+    grid-template-columns: 250px 1fr 300px; /* Sidebar + content + right panel */
+    max-width: 1600px;
+    margin: 0 auto;
+  }
+
+  .card {
+    width: calc(33.33% - 16px); /* Three columns */
+  }
+}
+```
+
+### Responsive Navigation
+
+**Mobile: Hamburger Menu → Drawer**
+
+```html
+<!-- Mobile Navigation -->
+<header class="mobile-header">
+  <button class="hamburger-btn" aria-label="Open menu">☰</button>
+  <h1>App Name</h1>
+</header>
+
+<nav class="drawer-nav" hidden>
+  <ul>
+    <li><a href="/dashboard">Dashboard</a></li>
+    <li><a href="/projects">Projects</a></li>
+    <li><a href="/settings">Settings</a></li>
+  </ul>
+</nav>
+```
+
+**Tablet: Icon Nav with Labels**
+
+```html
+<!-- Tablet Navigation (Condensed Sidebar) -->
+<nav class="sidebar-nav condensed">
+  <ul>
+    <li>
+      <a href="/dashboard">
+        <span class="icon">📊</span>
+        <span class="label">Dashboard</span>
+      </a>
+    </li>
+    <li>
+      <a href="/projects">
+        <span class="icon">📁</span>
+        <span class="label">Projects</span>
+      </a>
+    </li>
+  </ul>
+</nav>
+```
+
+**Desktop: Full Sidebar**
+
+```html
+<!-- Desktop Navigation (Full Sidebar) -->
+<nav class="sidebar-nav full">
+  <ul>
+    <li class="nav-item active">
+      <a href="/dashboard">
+        <span class="icon">📊</span>
+        <span class="label">Dashboard</span>
+        <span class="badge">3</span>
+      </a>
+    </li>
+    <li class="nav-item">
+      <a href="/projects">
+        <span class="icon">📁</span>
+        <span class="label">Projects</span>
+      </a>
+    </li>
+  </ul>
+</nav>
+```
+
+### Responsive Tables
+
+**Option 1: Horizontal Scroll (Preserve Structure)**
+
+```css
+/* Mobile: Scroll horizontally to see all columns */
+.table-container {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
+}
+
+table {
+  min-width: 600px; /* Force horizontal scroll */
+}
+```
+
+**Option 2: Hide Columns (Show Critical Only)**
+
+```css
+/* Mobile: Hide non-critical columns */
+@media (max-width: 767px) {
+  .column-created-date,
+  .column-last-updated {
+    display: none;
+  }
+}
+
+/* Desktop: Show all columns */
+@media (min-width: 1025px) {
+  .column-created-date,
+  .column-last-updated {
+    display: table-cell;
+  }
+}
+```
+
+**Option 3: Card View (Stack Data Vertically)**
+
+```html
+<!-- Mobile: Cards instead of table rows -->
+<div class="card" data-id="123">
+  <h3>Project Alpha</h3>
+  <p>Status: <span class="badge">Active</span></p>
+  <p>Created: Aug 1, 2024</p>
+  <button>View Details</button>
+</div>
+
+<!-- Desktop: Traditional table -->
+<table>
+  <tr>
+    <td>Project Alpha</td>
+    <td><span class="badge">Active</span></td>
+    <td>Aug 1, 2024</td>
+    <td><button>View Details</button></td>
+  </tr>
+</table>
+```
+
+**Option 4: Accordion Rows (Tap to Expand)**
+
+```html
+<!-- Mobile: Tap row to expand details -->
+<div class="table-row collapsed">
+  <div class="row-summary">
+    <span class="name">Project Alpha</span>
+    <span class="status">Active</span>
+    <button class="expand-btn">▼</button>
+  </div>
+  <div class="row-details" hidden>
+    <p>Created: Aug 1, 2024</p>
+    <p>Owner: Jane Smith</p>
+    <p>Budget: $50,000</p>
+  </div>
+</div>
+```
+
+### Responsive Charts
+
+**Mobile: Simplified Charts**
+
+- **Single metric:** Large number with sparkline
+- **Simple bar chart:** 3-5 bars maximum
+- **Avoid:** Multi-line charts (hard to read on small screen)
+
+**Desktop: Full Detail Charts**
+
+- **Multi-line charts:** Up to 5 lines
+- **Complex visualizations:** Scatter plots, heat maps
+- **Tooltips:** Hover for detailed data
+
+**Responsive Chart Pattern:**
+
+```css
+/* Mobile: Smaller height, simplified */
+.chart-container {
+  height: 200px;
+}
+
+/* Desktop: Larger, more detail */
+@media (min-width: 1025px) {
+  .chart-container {
+    height: 400px;
+  }
+}
+```
+
+### Touch vs Hover
+
+**Mobile (Touch):**
+- **No hover states:** All affordances must be visible
+- **Tap actions:** Single tap to activate
+- **Long press:** Context menu (500ms hold)
+- **Swipe:** Swipe to delete, swipe to reveal actions
+- **No right-click:** Use long-press or visible menu button
+
+**Desktop (Mouse + Hover):**
+- **Hover states:** Actions appear on hover, tooltips, previews
+- **Click:** Left-click to activate
+- **Right-click:** Context menu
+- **Cursor changes:** Pointer for links, grab for draggable
+- **Keyboard focus:** Visible focus indicators
+
+**Responsive Hover Pattern:**
+
+```css
+/* Desktop: Show actions on hover */
+@media (min-width: 1025px) {
+  .card-actions {
+    opacity: 0;
+    transition: opacity 150ms;
+  }
+
+  .card:hover .card-actions {
+    opacity: 1;
+  }
+}
+
+/* Mobile: Always show actions (no hover) */
+@media (max-width: 767px) {
+  .card-actions {
+    opacity: 1; /* Always visible */
+  }
+}
+```
+
+
+## Dimension 4: PROGRESSIVE ENHANCEMENT
+
+**Purpose:** Ensure core functionality works in all conditions (slow networks, JavaScript disabled, older browsers)
+
+Users access web apps under varying conditions: slow 3G networks, JavaScript blocked by corporate firewalls, older browsers. Progressive enhancement ensures core content and actions work even when conditions are degraded.
+
+### Evaluation Questions
+
+1. **Does content load if JavaScript fails?**
+   - Core HTML content visible
+   - Server-side rendering for critical content
+   - Graceful degradation for interactive features
+
+2. **Are core actions available without JavaScript?**
+   - Forms submit to server (full page reload)
+   - Links work (not JavaScript-only routing)
+   - No "JavaScript required" errors
+
+3. **Does the page render in a usable state without CSS?**
+   - Semantic HTML structure
+   - Logical source order (header → nav → content → footer)
+   - Text-based fallbacks for icons
+
+4. **Is there graceful degradation for older browsers?**
+   - Feature detection (not browser detection)
+   - Polyfills for missing features
+   - Fallbacks for unsupported CSS
+
+### Enhancement Layers
+
+**Layer 1: Core HTML (Works Everywhere)**
+
+Semantic HTML with forms, links, and headings. Content is accessible and functional with zero JavaScript or CSS.
+
+```html
+<!-- Core HTML: Form submits to server -->
+<form action="/projects/create" method="POST">
+  <label for="project-name">Project Name</label>
+  <input type="text" id="project-name" name="name" required />
+
+  <label for="project-status">Status</label>
+  <select id="project-status" name="status">
+    <option value="active">Active</option>
+    <option value="inactive">Inactive</option>
+  </select>
+
+  <button type="submit">Create Project</button>
+</form>
+
+<!-- Core HTML: Links work without JavaScript -->
+<nav>
+  <a href="/dashboard">Dashboard</a>
+  <a href="/projects">Projects</a>
+  <a href="/settings">Settings</a>
+</nav>
+```
+
+**Layer 2: CSS Enhancement (Visual Hierarchy)**
+
+Add visual hierarchy, layout, spacing, and responsive design. Page looks professional and organized.
+
+```css
+/* CSS: Visual hierarchy */
+.form-field {
+  margin-bottom: 16px;
+}
+
+label {
+  display: block;
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+input, select {
+  width: 100%;
+  padding: 12px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: 16px;
+}
+
+button {
+  background: #0066cc;
+  color: white;
+  padding: 12px 24px;
+  border: none;
+  border-radius: 4px;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+button:hover {
+  background: #0052a3;
+}
+```
+
+**Layer 3: JavaScript Optimization (Faster Feedback)**
+
+Add client-side validation, AJAX requests (no page reload), smooth animations, and interactive features.
+
+```javascript
+// JavaScript: Client-side validation (faster feedback)
+form.addEventListener('submit', async (e) => {
+  e.preventDefault(); // Prevent full page reload
+
+  // Validate
+  if (!nameInput.value) {
+    showError('Project name is required');
+    return;
+  }
+
+  // AJAX submit
+  const response = await fetch('/projects/create', {
+    method: 'POST',
+    body: new FormData(form)
+  });
+
+  if (response.ok) {
+    showSuccess('Project created!');
+    // Smooth redirect or update UI
+  } else {
+    showError('Failed to create project. Try again.');
+  }
+});
+```
+
+**Progressive Enhancement Strategy:**
+
+1. Build core HTML (works without JS/CSS)
+2. Add CSS (visual hierarchy, responsive)
+3. Add JavaScript (better UX, faster feedback)
+4. Test with JS disabled, CSS disabled, slow network
+
+### Forms Without JavaScript
+
+**Pattern: Server-Side Validation, Full Page Submission**
+
+```html
+<!-- Form submits to server, no JavaScript required -->
+<form action="/projects/create" method="POST">
+  <!-- Server renders error messages if validation fails -->
+  <?php if (isset($errors['name'])): ?>
+    <div class="error-message"><?= $errors['name'] ?></div>
+  <?php endif; ?>
+
+  <label for="name">Project Name</label>
+  <input
+    type="text"
+    id="name"
+    name="name"
+    value="<?= htmlspecialchars($submitted_name ?? '') ?>"
+    required
+  />
+
+  <button type="submit">Create Project</button>
+</form>
+```
+
+**Server-Side Flow:**
+1. User submits form
+2. Server validates input
+3. If errors: Render form with error messages, pre-fill submitted values
+4. If success: Redirect to success page or show confirmation
+
+**Enhancement with JavaScript:**
+- Client-side validation (instant feedback, no round-trip)
+- AJAX submission (no page reload)
+- Loading spinner (better perceived performance)
+
+### Content-First Loading
+
+**Priority: Above-Fold Content → Critical Resources → Non-Critical Assets**
+
+```html
+<!-- Critical inline CSS for above-fold content -->
+<head>
+  <style>
+    /* Inline critical CSS (above-fold styles) */
+    body { font-family: sans-serif; margin: 0; }
+    .header { background: #333; color: white; padding: 16px; }
+    .main-content { max-width: 1200px; margin: 0 auto; padding: 16px; }
+  </style>
+
+  <!-- Defer non-critical CSS -->
+  <link rel="preload" href="/styles/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'" />
+  <noscript><link rel="stylesheet" href="/styles/main.css" /></noscript>
+</head>
+
+<body>
+  <!-- Above-fold content loads first -->
+  <header class="header">
+    <h1>Dashboard</h1>
+  </header>
+
+  <main class="main-content">
+    <h2>Your Projects</h2>
+    <!-- Critical content here -->
+  </main>
+
+  <!-- Defer non-critical JavaScript -->
+  <script src="/scripts/main.js" defer></script>
+</body>
+```
+
+**Loading Priority:**
+
+1. **HTML (0ms):** Structure and content
+2. **Critical CSS (inline, 0ms):** Above-fold styles
+3. **Critical JS (deferred):** Loads after HTML parsed
+4. **Non-critical CSS (lazy, 1-2s):** Below-fold styles
+5. **Non-critical assets (3-5s):** Analytics, ads, social widgets
+
+### Graceful Degradation
+
+**Pattern: Feature Detection, Fallbacks for Missing Capabilities**
+
+```javascript
+// Feature detection (not browser detection)
+if ('IntersectionObserver' in window) {
+  // Use IntersectionObserver for lazy loading
+  const observer = new IntersectionObserver(lazyLoad);
+  images.forEach(img => observer.observe(img));
+} else {
+  // Fallback: Load all images immediately
+  images.forEach(img => {
+    img.src = img.dataset.src;
+  });
+}
+
+// CSS Grid fallback
+@supports (display: grid) {
+  .container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@supports not (display: grid) {
+  .container {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .container > * {
+    flex: 0 0 calc(33.33% - 16px);
+  }
+}
+```
+
+**Polyfills for Older Browsers:**
+
+```javascript
+// Conditionally load polyfills
+if (!('fetch' in window)) {
+  // Load fetch polyfill for IE11
+  loadScript('/polyfills/fetch.js');
+}
+
+if (!('Promise' in window)) {
+  // Load Promise polyfill
+  loadScript('/polyfills/promise.js');
+}
+```
+
+**No-JavaScript Fallback:**
+
+```html
+<noscript>
+  <div class="noscript-warning">
+    <p>JavaScript is disabled. Some features may not work.</p>
+    <p>Core functionality is still available.</p>
+  </div>
+</noscript>
+```
+
+### Performance Budgets
+
+**Target Metrics (Google Lighthouse):**
+
+- **First Contentful Paint (FCP):** <1.8 seconds
+- **Largest Contentful Paint (LCP):** <2.5 seconds
+- **Time to Interactive (TTI):** <3.8 seconds
+- **Total Blocking Time (TBT):** <300ms
+- **Cumulative Layout Shift (CLS):** <0.1
+
+**Bundle Size Budgets:**
+
+- **Total JavaScript:** <200KB gzipped
+- **Total CSS:** <50KB gzipped
+- **Critical CSS (inline):** <14KB (fits in first TCP packet)
+- **Images:** WebP format, responsive sizes, lazy loading
+
+**Optimization Strategies:**
+
+- Code splitting (load only what's needed)
+- Tree shaking (remove unused code)
+- Minification and compression (gzip, Brotli)
+- CDN for static assets
+- Browser caching (long cache headers for versioned assets)
+
+
+## Web-Specific Design Patterns
+
+### Navigation Patterns
+
+**Persistent Top Nav:**
+
+```html
+<nav class="top-nav">
+  <div class="logo">App Name</div>
+  <ul class="nav-links">
+    <li><a href="/dashboard">Dashboard</a></li>
+    <li><a href="/projects">Projects</a></li>
+    <li><a href="/reports">Reports</a></li>
+  </ul>
+  <div class="user-menu">
+    <button>User Name ▼</button>
+  </div>
+</nav>
+```
+
+**Sidebar Nav:**
+
+```html
+<aside class="sidebar">
+  <nav>
+    <ul>
+      <li class="active"><a href="/dashboard">📊 Dashboard</a></li>
+      <li><a href="/projects">📁 Projects</a></li>
+      <li><a href="/settings">⚙️ Settings</a></li>
+    </ul>
+  </nav>
+</aside>
+```
+
+**Breadcrumbs:**
+
+```html
+<nav class="breadcrumbs" aria-label="Breadcrumb">
+  <ol>
+    <li><a href="/">Home</a></li>
+    <li><a href="/projects">Projects</a></li>
+    <li aria-current="page">Project Alpha</li>
+  </ol>
+</nav>
+```
+
+**Mega-Menu (Complex Hierarchies):**
+
+```html
+<nav class="mega-menu">
+  <button class="menu-trigger">Products ▼</button>
+  <div class="mega-menu-panel">
+    <div class="menu-column">
+      <h3>Category 1</h3>
+      <ul>
+        <li><a href="/product-a">Product A</a></li>
+        <li><a href="/product-b">Product B</a></li>
+      </ul>
+    </div>
+    <div class="menu-column">
+      <h3>Category 2</h3>
+      <ul>
+        <li><a href="/product-c">Product C</a></li>
+        <li><a href="/product-d">Product D</a></li>
+      </ul>
+    </div>
+  </div>
+</nav>
+```
+
+### Feedback Mechanisms
+
+**Toast Notifications:**
+
+```html
+<!-- Toast: Brief, auto-dismiss message -->
+<div class="toast success">
+  <span class="icon">✓</span>
+  <span class="message">Project created successfully</span>
+  <button class="close-btn" aria-label="Dismiss">✕</button>
+</div>
+```
+
+**Position:** Top-right or bottom-center
+**Duration:** 3-5 seconds, auto-dismiss
+**Types:** Success (green), Error (red), Warning (yellow), Info (blue)
+
+**Inline Validation:**
+
+```html
+<!-- Error state -->
+<div class="form-field error">
+  <label for="email">Email</label>
+  <input type="email" id="email" value="invalid-email" aria-invalid="true" />
+  <span class="error-message">Please enter a valid email address</span>
+</div>
+
+<!-- Success state -->
+<div class="form-field success">
+  <label for="username">Username</label>
+  <input type="text" id="username" value="johndoe" />
+  <span class="success-message">✓ Username available</span>
+</div>
+```
+
+**Loading States:**
+
+```html
+<!-- Button loading state -->
+<button class="btn loading" disabled>
+  <span class="spinner"></span>
+  Saving...
+</button>
+
+<!-- Skeleton screen (loading placeholder) -->
+<div class="skeleton-card">
+  <div class="skeleton-header"></div>
+  <div class="skeleton-text"></div>
+  <div class="skeleton-text short"></div>
+</div>
+```
+
+**Error Pages:**
+
+```html
+<!-- 404 Error Page -->
+<div class="error-page">
+  <h1>404</h1>
+  <h2>Page Not Found</h2>
+  <p>The page you're looking for doesn't exist or has been moved.</p>
+  <a href="/dashboard" class="btn primary">Go to Dashboard</a>
+</div>
+
+<!-- 500 Error Page -->
+<div class="error-page">
+  <h1>500</h1>
+  <h2>Something Went Wrong</h2>
+  <p>We're working to fix the issue. Please try again later.</p>
+  <button onclick="location.reload()">Retry</button>
+</div>
+```
+
+### Layout Patterns
+
+**F-Pattern Scanning:**
+
+Users scan web pages in an F-shaped pattern: horizontal scan at top, second horizontal scan lower, then vertical scan on left.
+
+**Design Implications:**
+- **Top-left:** Logo, app name
+- **Top-right:** Primary action, user menu
+- **Left edge:** Navigation, filters
+- **Top horizontal:** Important metrics, key actions
+
+**Fixed Headers:**
+
+```css
+.header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background: white;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.main-content {
+  margin-top: 64px; /* Header height */
+}
+```
+
+**Sticky CTAs (Call-to-Action):**
+
+```css
+.sticky-cta {
+  position: sticky;
+  bottom: 0;
+  background: white;
+  padding: 16px;
+  box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
+  z-index: 100;
+}
+```
+
+**Modals:**
+
+```html
+<!-- Modal Dialog -->
+<div class="modal-overlay">
+  <div class="modal" role="dialog" aria-labelledby="modal-title">
+    <div class="modal-header">
+      <h2 id="modal-title">Confirm Delete</h2>
+      <button class="close-btn" aria-label="Close">✕</button>
+    </div>
+    <div class="modal-body">
+      <p>Are you sure you want to delete this project?</p>
+    </div>
+    <div class="modal-footer">
+      <button class="btn secondary">Cancel</button>
+      <button class="btn danger">Delete</button>
+    </div>
+  </div>
+</div>
+```
+
+**Modal Best Practices:**
+- Backdrop click to close (or not, for critical modals)
+- Esc key to close
+- Focus trap (Tab cycles within modal)
+- Focus first input on open
+- Restore focus to trigger element on close
+
+### Search Patterns
+
+**Autocomplete:**
+
+```html
+<div class="search-autocomplete">
+  <input
+    type="search"
+    placeholder="Search projects..."
+    aria-autocomplete="list"
+    aria-controls="search-results"
+  />
+  <ul id="search-results" role="listbox">
+    <li role="option">Project Alpha</li>
+    <li role="option">Project Beta</li>
+    <li role="option">Project Gamma</li>
+  </ul>
+</div>
+```
+
+**Filters:**
+
+```html
+<div class="search-filters">
+  <input type="search" placeholder="Search..." />
+
+  <select name="status">
+    <option value="">All Statuses</option>
+    <option value="active">Active</option>
+    <option value="inactive">Inactive</option>
+  </select>
+
+  <select name="owner">
+    <option value="">All Owners</option>
+    <option value="me">My Projects</option>
+    <option value="team">Team Projects</option>
+  </select>
+
+  <button class="filter-btn">Apply Filters</button>
+  <button class="clear-btn">Clear</button>
+</div>
+```
+
+**Advanced Search:**
+
+```html
+<form class="advanced-search">
+  <div class="search-row">
+    <select name="field">
+      <option value="name">Name</option>
+      <option value="description">Description</option>
+    </select>
+    <select name="operator">
+      <option value="contains">Contains</option>
+      <option value="equals">Equals</option>
+      <option value="starts_with">Starts with</option>
+    </select>
+    <input type="text" name="value" />
+  </div>
+  <button class="add-criteria">+ Add Criteria</button>
+  <button type="submit">Search</button>
+</form>
+```
+
+**Search Results:**
+
+```html
+<div class="search-results">
+  <div class="results-header">
+    <span class="results-count">487 results for "alpha"</span>
+    <select name="sort">
+      <option value="relevance">Relevance</option>
+      <option value="date">Date</option>
+      <option value="name">Name</option>
+    </select>
+  </div>
+
+  <div class="result-item">
+    <h3><a href="/projects/123">Project Alpha</a></h3>
+    <p>Description with <mark>alpha</mark> highlighted...</p>
+    <span class="meta">Created Aug 1, 2024 • Owner: Jane Smith</span>
+  </div>
+</div>
+```
+
+
+## Anti-Patterns
+
+### Priority 0 (Critical - Never Do)
+
+**1. Hiding essential features behind hamburger menu on desktop:**
+- **Problem:** Desktop has plenty of space, hiding nav reduces discoverability
+- **Impact:** Users don't explore features, lower engagement
+- **Fix:** Persistent sidebar or top nav on desktop (>1024px)
+
+**2. No keyboard navigation support:**
+- **Problem:** Excludes keyboard-only users, WCAG fail
+- **Impact:** Accessibility violation, legal risk
+- **Fix:** All interactive elements accessible via Tab, Enter, Space, Arrow keys
+
+**3. Forms that break without JavaScript:**
+- **Problem:** Core functionality requires JS, fails in degraded conditions
+- **Impact:** Users can't complete tasks, frustrated
+- **Fix:** Forms submit to server, work without JS (progressive enhancement)
+
+**4. Blocking entire interface during one operation:**
+- **Problem:** Full-page spinner, can't do anything else
+- **Impact:** Poor UX, feels slow and clunky
+- **Fix:** Inline loading states, allow parallel tasks
+
+### Priority 1 (High - Avoid)
+
+**5. Tables without sorting or filtering:**
+- **Problem:** Users can't find data in large tables
+- **Impact:** Inefficient, forces manual scanning
+- **Fix:** Sortable column headers, filter controls above table
+
+**6. No mobile-responsive design:**
+- **Problem:** Desktop layout shrunk to mobile, tiny text and targets
+- **Impact:** Unusable on mobile, high bounce rate
+- **Fix:** Mobile-first responsive design, 48px touch targets, simplified layouts
+
+**7. Slow load times (>5 seconds to interactive):**
+- **Problem:** Users wait, may leave before page loads
+- **Impact:** High bounce rate, poor perceived performance
+- **Fix:** Code splitting, lazy loading, performance budgets (TTI <3.8s)
+
+**8. No autosave for long forms:**
+- **Problem:** Users lose work if browser crashes or accidental navigation
+- **Impact:** Frustration, lost time, negative sentiment
+- **Fix:** Autosave draft every 30 seconds, "All changes saved" indicator
+
+### Priority 2 (Medium - Be Cautious)
+
+**9. Over-reliance on hover states:**
+- **Problem:** Mobile has no hover, features inaccessible
+- **Impact:** Mobile users can't access actions
+- **Fix:** Always provide tap alternative, show actions on mobile
+
+**10. Complex keyboard shortcuts without discoverability:**
+- **Problem:** Users don't know shortcuts exist
+- **Impact:** Features unused, efficiency gains missed
+- **Fix:** Keyboard shortcuts panel (Cmd+/), tooltips show shortcuts
+
+**11. Too many modals:**
+- **Problem:** Modal fatigue, interrupts flow
+- **Impact:** Annoying, slows users down
+- **Fix:** Inline editing, slide-out panels, bottom sheets (fewer modals)
+
+**12. Dense dashboards without hierarchy:**
+- **Problem:** Too much information, no visual priority
+- **Impact:** Cognitive overload, users don't know where to look
+- **Fix:** F-pattern layout, clear visual hierarchy, progressive disclosure
+
+
+## Practical Application
+
+### Workflow 1: New Dashboard Design
+
+**Step 1: Research User Needs**
+- Interview users: What metrics matter most?
+- Identify top 3 actions (create, export, filter)
+- Understand workflows (daily check-ins, weekly reports)
+
+**Step 2: Wireframe Layout**
+- Sketch F-pattern: Important metrics top-left, actions top-right
+- Plan card hierarchy: Primary metrics (large), secondary (smaller)
+- Include: Real-time updates, filters, export
+
+**Step 3: Prioritize Data**
+- Most important metric: Large, top-left (e.g., "Active Users: 1,234")
+- Change indicators: ↑ 12% (green for positive)
+- Trend chart: Line chart (last 30 days)
+- Detailed table: Below fold, sortable and filterable
+
+**Step 4: Responsive Breakpoints**
+- Desktop (>1024px): Multi-column grid (3-4 metric cards per row)
+- Tablet (768-1024px): Two columns
+- Mobile (<768px): Single column, stacked cards
+
+**Step 5: Test with Real Data**
+- Empty state: "No data yet. Connect your account to get started."
+- Loading state: Skeleton cards while fetching
+- Error state: "Failed to load. Retry?"
+- Real data: Verify hierarchy and scannability
+
+### Workflow 2: Enterprise Admin Panel
+
+**Step 1: Understand Workflows**
+- Map user tasks: Create users, manage permissions, view logs
+- Identify repetitive actions: Bulk user imports, role assignments
+- Define power user needs: Keyboard shortcuts, command palette
+
+**Step 2: Design Keyboard Shortcuts**
+- Cmd+K: Command palette (quick access to all actions)
+- Cmd+N: Create new user
+- Cmd+F: Search/filter users
+- Document shortcuts in help panel (Cmd+/)
+
+**Step 3: Implement Bulk Actions**
+- Table with checkboxes: Select multiple users
+- Bulk action bar: "5 users selected | Delete | Deactivate | Export"
+- Confirmation modal: "Delete 5 users? This cannot be undone."
+- Undo option: Toast "5 users deleted. Undo?"
+
+**Step 4: Responsive Adaptation**
+- Desktop: Full table (all columns), persistent sidebar nav
+- Tablet: Hide secondary columns, condensed nav
+- Mobile: Card view (user cards), hamburger menu
+- Test: Ensure critical actions available on all screen sizes
+
+**Step 5: Progressive Enhancement**
+- Core: Form submits to server (create user without JS)
+- Enhanced: AJAX form submission (no page reload)
+- Optimized: Inline validation, auto-complete for roles
+
+### Workflow 3: Data-Heavy Application
+
+**Step 1: Choose Data Visualization**
+- Time-series: Line chart (revenue over time)
+- Comparisons: Bar chart (sales by region)
+- Part-to-whole: Donut chart (market share by product)
+- Avoid: Pie charts with >5 slices (use bar chart instead)
+
+**Step 2: Design Sortable Tables**
+- Column headers: Clickable, sort icons (↕ ↑ ↓)
+- Filter controls: Above table (search, status dropdown)
+- Pagination: "Showing 1-50 of 1,234" (50 per page on desktop)
+- Row selection: Checkboxes for bulk export
+
+**Step 3: Add Filtering**
+- Search: By name, description
+- Dropdowns: Status, category, owner
+- Date range: Created date, updated date
+- Clear filters: "Clear all" button
+
+**Step 4: Export Options**
+- CSV: All rows (or filtered/selected)
+- PDF: Formatted report with charts
+- Copy: Selected cells to clipboard
+
+**Step 5: Real-Time Updates**
+- WebSocket connection: Live price updates
+- Visual indicator: "Live" badge (pulsing green)
+- Smooth updates: Flash yellow on change (fades after 2s)
+- Timestamp: "Updated 3 seconds ago"
+
+### Workflow 4: SaaS Tool Redesign
+
+**Step 1: Analyze Pain Points**
+- User feedback: "Too many clicks to complete tasks"
+- Analytics: High bounce on multi-step forms
+- Support tickets: "How do I edit this?"
+
+**Step 2: Simplify Workflows**
+- Reduce steps: Combine create + configure into one page
+- Inline editing: Click to edit, no modal
+- Autosave: No manual save button, auto-save on blur
+
+**Step 3: Add Inline Editing**
+- Table cells: Click to edit, Enter to save, Esc to cancel
+- Visual feedback: Border highlights, "Saving..." indicator
+- Error handling: Red border, error message, revert on fail
+
+**Step 4: Implement Command Palette**
+- Trigger: Cmd+K
+- Search: All actions, pages, recent items
+- Keyboard nav: Arrow keys to select, Enter to execute
+- Fuzzy search: "crproj" matches "Create Project"
+
+**Step 5: Test Efficiency Gains**
+- Measure: Time to complete tasks (before vs after)
+- User testing: Watch power users use keyboard shortcuts
+- Analytics: Track command palette usage, inline edit adoption
+- Iterate: Add more shortcuts based on user behavior
+
+
+## Related Skills
+
+**Core Lyra Skills:**
+- **`lyra/ux-designer/visual-design-foundations`**: Visual hierarchy for dashboards, typography for dense data, color for status indicators
+- **`lyra/ux-designer/information-architecture`**: Navigation structure for complex apps, IA for multi-level hierarchies
+- **`lyra/ux-designer/interaction-design-patterns`**: Keyboard shortcuts, button states, feedback patterns, loading states
+- **`lyra/ux-designer/accessibility-and-inclusive-design`**: Keyboard navigation, screen reader support, WCAG compliance for web apps
+- **`lyra/ux-designer/user-research-and-validation`**: Usability testing for workflows, A/B testing for dashboards
+
+**Platform Skills:**
+- **`lyra/ux-designer/mobile-design-patterns`**: Mobile-responsive considerations (<768px breakpoint), touch targets, gestures
+- **`lyra/ux-designer/desktop-software-design`**: Keyboard-first workflows, power user patterns, dense information displays
+
+**Cross-Faction:**
+- **`muna/technical-writer/clarity-and-style`**: Microcopy for UI, error messages, empty states
+- **`ordis/security-architect/secure-authentication-patterns`**: Auth flows for SaaS, session management, secure forms
+
+
+## Additional Resources
+
+**Web Application Standards:**
+- Material Design for Web: https://m3.material.io/develop/web
+- Apple Human Interface Guidelines (Web): https://developer.apple.com/design/human-interface-guidelines/designing-for-the-web
+- Microsoft Fluent UI: https://developer.microsoft.com/en-us/fluentui
+
+**Performance Standards:**
+- Google Lighthouse: FCP <1.8s, LCP <2.5s, TTI <3.8s
+- Web Vitals: https://web.dev/vitals/
+- Performance budgets: <200KB JS gzipped, <50KB CSS gzipped
+
+**Responsive Design:**
+- Breakpoints: Mobile <768px, Tablet 768-1024px, Desktop >1024px
+- Touch targets: 48x48px minimum (mobile)
+- Mobile-first CSS: Base styles mobile, enhance with media queries
+
+**Accessibility Standards:**
+- WCAG 2.1 AA: Keyboard navigation, focus indicators, 4.5:1 contrast
+- ARIA: Proper roles, labels, live regions for dynamic content
+- Keyboard shortcuts: Document in accessible help panel
+
+**Data Visualization:**
+- Line charts: Trends over time
+- Bar charts: Comparisons between categories
+- Pie/donut charts: Part-to-whole (max 5 slices)
+- Tables: Sortable, filterable, paginated
+
+**Keyboard Shortcuts:**
+- Essential: Cmd+S (save), Cmd+F (find), Cmd+K (command palette)
+- Navigation: Tab, Arrow keys, Enter, Esc
+- Platform conventions: Cmd (Mac), Ctrl (Windows/Linux)
+
+**Progressive Enhancement:**
+- Layer 1: Core HTML (semantic, accessible)
+- Layer 2: CSS (visual hierarchy, responsive)
+- Layer 3: JavaScript (client-side validation, AJAX)
+- Test: Disable JS, disable CSS, slow network