Initial commit

2025-11-30 08:59:35 +08:00
commit ef4a32d395
14 changed files with 14167 additions and 0 deletions
--- a/skills/using-ux-designer/SKILL.md
+++ 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
--- a/skills/using-ux-designer/accessibility-and-inclusive-design.md
+++ b/skills/using-ux-designer/accessibility-and-inclusive-design.md
--- a/skills/using-ux-designer/desktop-software-design.md
+++ b/skills/using-ux-designer/desktop-software-design.md
--- a/skills/using-ux-designer/game-ui-design.md
+++ b/skills/using-ux-designer/game-ui-design.md
--- a/skills/using-ux-designer/information-architecture.md
+++ 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
--- a/skills/using-ux-designer/interaction-design-patterns.md
+++ b/skills/using-ux-designer/interaction-design-patterns.md
--- a/skills/using-ux-designer/mobile-design-patterns.md
+++ b/skills/using-ux-designer/mobile-design-patterns.md
--- a/skills/using-ux-designer/user-research-and-validation.md
+++ b/skills/using-ux-designer/user-research-and-validation.md
--- a/skills/using-ux-designer/ux-fundamentals.md
+++ 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)
--- a/skills/using-ux-designer/visual-design-foundations.md
+++ 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
--- a/skills/using-ux-designer/web-application-design.md
+++ b/skills/using-ux-designer/web-application-design.md