michsindlinger/specwright/templates/skills/ux-patterns-definition
specwright/templates/skills/ux-patterns-definition/SKILL.md
UX pattern definition guidance for navigation, user flows, interactions, and accessibility
$ install --global
skillsauthnpx skillsauth add michsindlinger/specwright specwright/templates/skills/ux-patterns-definitionInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 17, 2026, 9:30 AM4.3s1 file scanned
SKILL.md
- description:
- UX pattern definition guidance for navigation, user flows, interactions, and accessibility
- globs:
- []
- alwaysApply:
- false
UX Patterns Definition Skill
Project: [PROJECT_NAME] Generated: [DATE] Purpose: Guide for defining UX patterns including navigation, user flows, interactions, and accessibility
When to Use
This skill guides you when defining UX patterns for:
- UX pattern definition in
/plan-product - Frontend architecture planning
- Interaction design decisions
Quick Reference
UX Definition Process
- Analyze Product Type: Determine application category and user context
- Select Navigation Pattern: Match to product complexity and user mental model
- Define User Flows: Map key workflows from entry to completion
- Choose Interaction Patterns: Buttons, forms, drag-drop, gestures
- Define Feedback Patterns: Loading, success, error, empty states
- Set Accessibility Level: WCAG target and specific requirements
- Document in ux-patterns.md: Fill template with approved patterns
UX Patterns are COMPLETE when
- [ ] Navigation pattern selected with rationale
- [ ] Key user flows mapped (3-5 primary flows)
- [ ] Interaction patterns defined for common actions
- [ ] Feedback patterns specified for all states
- [ ] Mobile considerations documented (if applicable)
- [ ] Accessibility level and requirements set
Detailed Guidance
Navigation Patterns
Pattern Selection Guide
| Product Type | Recommended Pattern | Why | |-------------|--------------------|----| | Dashboard/Admin | Sidebar navigation | Many sections, quick switching, persistent context | | Content/Blog | Top navigation bar | Linear content, few top-level sections | | E-commerce | Mega menu + breadcrumbs | Deep category hierarchy, wayfinding | | Mobile-first app | Bottom tab bar | Thumb-reachable, limited primary destinations | | Documentation | Sidebar + table of contents | Hierarchical content, in-page navigation | | Social/Feed | Top tabs + infinite scroll | Content-first, few navigation levels | | Multi-step tool | Wizard/stepper | Sequential process, progress tracking | | Settings/Config | Vertical tabs or accordion | Grouped options, scannable categories |
Navigation Principles
- Max 7 top-level items (Miller's Law)
- 3-click rule: Any content reachable in 3 clicks
- Consistent placement: Navigation stays in same position across pages
- Current state visible: Active item always highlighted
- Mobile-first: Design navigation for smallest screen first
User Flow Design
Flow Mapping Template
For each key flow, document:
Flow: [Name]
Entry Point: [Where user starts]
Steps:
1. [Action] → [What user sees]
2. [Action] → [What user sees]
3. [Action] → [What user sees]
Success State: [What happens on completion]
Error States: [What can go wrong at each step]
Alternative Paths: [Shortcuts or alternate routes]
Common Flow Patterns
| Flow Type | Pattern | Key Considerations | |-----------|---------|-------------------| | Onboarding | Progressive disclosure | Don't overwhelm, show value early | | Authentication | Single-page or modal | Minimize friction, support social login | | Data Entry | Step-by-step wizard | Validate inline, save progress | | Search & Filter | Faceted search | Instant results, clear filter state | | CRUD Operations | List → Detail → Edit | Consistent patterns across entities | | Checkout | Linear wizard | Progress bar, minimal distractions |
Interaction Patterns
Buttons & Actions
| Action Type | Pattern | Example | |------------|---------|---------| | Primary | Solid, prominent | "Save", "Submit", "Create" | | Secondary | Outlined or subdued | "Cancel", "Back", "Skip" | | Destructive | Red/warning color, confirmation | "Delete", "Remove" | | Inline | Icon button or text link | Edit, duplicate, share |
Principles:
- One primary action per view
- Destructive actions require confirmation
- Button labels describe the action ("Save Changes" not "OK")
Forms & Input
| Pattern | When to Use | |---------|------------| | Inline validation | Real-time feedback as user types | | On-blur validation | Validate when user leaves field | | Submit validation | Simple forms with few fields | | Multi-step form | > 6 fields, logical groupings | | Auto-save | Long forms, collaborative editing |
Principles:
- Labels above inputs (not placeholder-only)
- Error messages next to the field, not at top
- Required fields marked, optional fields noted
- Logical tab order
Data Display
| Pattern | When to Use | |---------|------------| | Table | Structured data, comparison, sorting needed | | Card grid | Visual items, variable content length | | List | Sequential items, scannable titles | | Timeline | Chronological events | | Kanban | Status-based workflow |
Feedback Patterns
State Coverage
Every view should handle these states:
| State | Pattern | Example | |-------|---------|---------| | Loading | Skeleton screens or spinner | Content placeholders with animation | | Empty | Illustration + CTA | "No projects yet. Create your first project." | | Success | Toast/snackbar notification | "Changes saved successfully" (auto-dismiss) | | Error | Inline message or toast | "Failed to save. Please try again." (with retry) | | Partial | Progress indicator | "Uploading 3 of 7 files..." | | Offline | Banner notification | "You're offline. Changes will sync when connected." |
Notification Hierarchy
Critical (blocks user): Modal dialog — requires action
Important (needs attention): Banner/alert — persistent until dismissed
Informational (nice to know): Toast/snackbar — auto-dismiss after 5s
Background (status update): Badge/indicator — passive display
Mobile Considerations
Responsive Patterns
| Desktop Pattern | Mobile Equivalent | |----------------|-------------------| | Sidebar navigation | Bottom tab bar or hamburger menu | | Multi-column layout | Single column, stacked | | Hover states | Long-press or tap actions | | Right-click context menu | Swipe actions or action sheet | | Data tables | Card list or horizontal scroll | | Modal dialogs | Full-screen sheets |
Touch Targets
- Minimum: 44x44px (Apple HIG) / 48x48dp (Material)
- Comfortable: 48x48px with 8px spacing
- Primary actions: Bottom of screen (thumb zone)
Accessibility Guidelines (WCAG)
Level Selection
| Level | Requirements | When to Choose | |-------|-------------|---------------| | A (Minimum) | Basic accessibility | Internal tools, MVP | | AA (Standard) | Good accessibility | Most web applications, recommended default | | AAA (Enhanced) | Maximum accessibility | Government, healthcare, education |
Key Requirements (AA)
| Category | Requirement | |----------|------------| | Color | 4.5:1 contrast ratio for text, 3:1 for large text | | Keyboard | All functionality accessible via keyboard | | Screen Reader | Proper ARIA labels, semantic HTML, alt text | | Focus | Visible focus indicators, logical focus order | | Motion | Respect prefers-reduced-motion, no auto-play | | Forms | Associated labels, error identification, suggestions | | Navigation | Skip links, consistent navigation, page titles |
Interactive Decision Template
When presenting UX recommendations to the user:
Based on your [product type] targeting [audience], I recommend:
**Navigation:** [Pattern] — [rationale]
**Key Flows:** [Top 3 flows identified]
**Interactions:** [Primary patterns]
**Feedback:** [Approach]
**Accessibility:** WCAG [Level] — [rationale]
Would you like to:
1. Approve and proceed
2. Discuss alternatives for any pattern
3. Adjust the accessibility level
Template Reference
Use template: specwright/templates/product/ux-patterns-template.md
Hybrid lookup:
- TRY:
specwright/templates/product/ux-patterns-template.md(project) - FALLBACK:
~/.specwright/templates/product/ux-patterns-template.md(global)
Related Skills
michsindlinger/session-handoff
tools
VerifiedTrustedCommunity
Session Handoff: Erstellt eine vollständige Zusammenfassung der aktuellen Session für einen sauberen Kontextwechsel. NUR bei explizitem Aufruf (/session-handoff). NICHT automatisch auslösen. Geeignet wenn der User die Session resetten will, den Kontext aufräumen will, oder bei ~120k Tokens angelangt ist.
1SKILL.mdUpdated Jun 5, 2026
michsindlinger/pre-mortem
development
VerifiedTrustedCommunity
Pre-Mortem Risk Analysis: Strukturierte Prospective-Hindsight-Übung um launch-blocking Risiken vor Commitment aufzudecken. Team stellt sich vor, das Produkt sei 14 Tage nach Launch gefloppt, und arbeitet rückwärts. Klassifiziert Risiken in Tigers (echt), Paper Tigers (hypothetisch), Elephants (unausgesprochen). Nutze diesen Skill vor Build-Commitment, bei zu hoher Stakeholder-Confidence, vor Major-Releases, oder wenn das Team vage Sorgen nicht artikulieren kann. Trigger: /pre-mortem, 'pre-mortem', 'risk analysis', 'was könnte schiefgehen', 'risiken vor launch'.
1SKILL.mdUpdated Jun 5, 2026
michsindlinger/specwright/templates/skills/atomicity-validator
testing
VerifiedTrustedCommunity
Six-Sigma Atomicity Validator for create-spec stories
1SKILL.mdUpdated May 21, 2026
michsindlinger/specwright/templates/skills/testing-strategies
development
VerifiedTrustedCommunity
--- name: [PROJECT]-testing-strategies description: [PROJECT] testing patterns and quality assurance strategies globs: ["**/*.{test,spec}.{ts,js,java,py,rb}", "**/test/**/*", "**/tests/**/*"] --- # Testing Strategies > **Template for project-specific testing strategies skill** > Fill in [CUSTOMIZE] sections with your project's testing stack and patterns **Project**: [PROJECT NAME] **Last Updated**: [DATE] --- ## Testing Philosophy **Coverage Target**: [CUSTOMIZE: 80% / 85% / 90%] **Testin
1SKILL.mdUpdated Apr 17, 2026