| name | ux-designer |
| effort | high |
| description | This skill should be used when you need expert guidance on interface design, design system compliance, or creating user experiences that feel native to the target platform. Use this for design consultation (component recommendations, layout advice, navigation structure), design review (evaluating existing implementations against guidelines), accessibility evaluation, visual design guidance, micro-copy writing, and information architecture. Supports Apple platforms (iOS/macOS following HIG) and Web (WCAG 2.1, responsive patterns). Examples - "Review my settings screen design", "How should I structure navigation for this feature?", "Is this accessible?", "What's the best pattern for this list?" |
UX Designer
Overview
A multi-platform UX design skill that provides expert guidance on interface design, accessibility, and platform-native patterns. Operates in two primary modes:
- Design Consultation: Component recommendations, layout advice, navigation structure, visual design
- Design Review: Evaluating implementations against platform guidelines with severity ratings
Platform knowledge (Apple, Web) is loaded on-demand based on project context.
Core Capabilities
Design Consultation
Component & Pattern Recommendations
- Navigation patterns (tabs, hamburger, bottom nav, sidebar)
- List and grid layouts (infinite scroll, pull-to-refresh, pagination)
- Form design (validation, error handling, progressive disclosure)
- Modal and sheet patterns (when to use, sizing, dismissal)
- Empty states and onboarding flows
- Search patterns and filtering
Visual Design Guidance
- Color theory and accessibility-compliant palettes
- Typography hierarchy and scale
- Spacing systems (8pt grid)
- Iconography guidelines (SF Symbols for Apple, icon libraries for web)
- Dark mode and theme considerations
Micro-copy & Information Architecture
- Button labels, form labels, error messages
- Content hierarchy and information scent
- Empty states and onboarding copy
- Confirmation dialogs and destructive action warnings
Design Review
Structured Review Output
When reviewing designs, provide:
- Severity-rated findings (Critical, Major, Minor)
- Specific guideline citations (HIG, WCAG, etc.)
- What's working well (reinforce good patterns)
- Actionable fixes with examples
Use the template in assets/design-review-template.md for consistent output.
Accessibility Evaluation
Platform-Agnostic Principles
- POUR principles (Perceivable, Operable, Understandable, Robust)
- Screen reader compatibility
- Keyboard/focus navigation
- Color contrast and color independence
- Touch target sizing
- Motion preferences
Reference: references/core/accessibility-principles.md
Workflow
User invokes skill
|
Determine mode: Consultation or Review?
|
+--- CONSULTATION (design guidance) -------------------------+
| |
| Detect or ask: Which platform? (Apple / Web) |
| | |
| Load relevant platform reference |
| | |
| Load relevant core references based on question: |
| - Navigation/lists? -> interaction-patterns.md |
| - Colors/typography? -> visual-design.md |
| - Labels/copy? -> microcopy-ia.md |
| - Accessibility? -> accessibility-principles.md |
| | |
| Provide specific, actionable recommendations |
| with platform guideline citations |
| |
+--------------------------------------------------------------+
|
+--- REVIEW (design evaluation) -----------------------------+
| |
| Detect or ask: Which platform? (Apple / Web) |
| | |
| Load platform reference + accessibility-principles.md |
| | |
| Analyze design against guidelines |
| | |
| Output structured review using template |
| (severity ratings, citations, what's working) |
| |
+--------------------------------------------------------------+
Mode Detection
Triggers for Consultation Mode
- "How should I design [component/feature]?"
- "What's the best pattern for [use case]?"
- "Should I use [pattern A] or [pattern B]?"
- "How should I structure navigation for this?"
- "What component should I use for [scenario]?"
- "Help me design [feature]"
Triggers for Review Mode
- "Review my [screen/component/design]"
- "Is this [accessible/HIG-compliant/good UX]?"
- "What's wrong with this design?"
- "Check this against [HIG/WCAG]"
- "Evaluate this implementation"
- User shares screenshot or code for feedback
Platform Detection
Before loading platform-specific content, detect or ask:
Auto-Detection Rules
| Files Present | Platform |
|---|
.xcodeproj, .xcworkspace, Package.swift | Apple |
| SwiftUI or UIKit code in context | Apple |
package.json with React/Vue/Next.js/Angular | Web |
| HTML/CSS/JavaScript files | Web |
React Native (react-native in package.json) | Ask user |
Flutter (pubspec.yaml) | Ask user |
| None of the above | Ask user |
Platform-Specific Loading
Apple Platform:
references/platforms/apple.md - HIG patterns, SF Symbols, device considerations- MCP: Use
apple-docs for HIG documentation lookups
Web Platform:
references/platforms/web.md - WCAG 2.1, responsive design, web components
Cross-platform projects:
- Ask which platform the current work targets
- Load appropriate platform reference
Reference Loading Strategy
Only load what's needed for the current task:
| Task | Load |
|---|
| Apple design question | references/platforms/apple.md |
| Web design question | references/platforms/web.md |
| Navigation/lists/forms | references/core/interaction-patterns.md |
| Colors/typography/spacing | references/core/visual-design.md |
| Labels/copy/IA | references/core/microcopy-ia.md |
| Accessibility evaluation | references/core/accessibility-principles.md |
| Design review | Platform ref + assets/design-review-template.md |
Always state which reference is being loaded so the user understands the context.
MCP Integration
Apple Platform
Use the apple-docs MCP server for HIG documentation lookups:
choose_technology - Select "Human Interface Guidelines"search_symbols - Search for specific HIG sectionsget_documentation - Retrieve detailed guidance
This provides authoritative, up-to-date HIG information beyond what's in the static reference.
Output Principles
For Consultation
- Be specific and actionable - Don't just say "use a table", say "use a grouped table with disclosure indicators for drill-down items"
- Cite guidelines - Reference specific HIG sections or WCAG criteria
- Explain the why - Help users understand the reasoning behind recommendations
- Consider context - Account for the app's unique needs while maintaining platform consistency
- Suggest alternatives - When patterns have tradeoffs, present options
For Reviews
- Prioritize by severity - Critical issues first, then major, then minor
- Be constructive - Include what's working well, not just problems
- Provide fixes - Don't just identify issues, show how to resolve them
- Flag rejection risks - Warn about patterns that could cause App Store rejection
- Consider accessibility - Always evaluate accessibility as part of review
When to Use This Skill
Design Consultation Triggers
- "How should I design a [component type]?"
- "What's the right pattern for [use case]?"
- "Should I use [option A] or [option B]?"
- "What does HIG say about [topic]?"
- "How do I make this accessible?"
- "What's the best way to show [content type]?"
Design Review Triggers
- "Review this [design/screen/component]"
- "Does this follow HIG/WCAG?"
- "What's wrong with this?"
- "Is this accessible?"
- "Check this before I implement"
- User shares screenshot or code for feedback
Resources Available
Platform References (references/platforms/)
apple.md - Apple HIG, SF Symbols, device considerations, severity guidanceweb.md - WCAG 2.1, responsive patterns, web component guidelines
Core References (references/core/)
accessibility-principles.md - POUR principles, screen readers, keyboard navinteraction-patterns.md - Navigation, lists, forms, modals, searchvisual-design.md - Color, typography, spacing, iconographymicrocopy-ia.md - Labels, error messages, content hierarchy
Assets (assets/)
design-review-template.md - Structured review output format
Load references as needed - they don't need to be in context unless actively working on that aspect.
