zhongwei/gh-tachyon-beep-skillpacks-plugins-lyra-ux-designer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Zhongwei Li
2025-11-30 08:59:35 +08:00
commit ef4a32d395
14 changed files with 14167 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

341
skills/using-ux-designer/SKILL.md Normal file
View File

@@ -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