dev-swarm-stage-ux

Stage 05 - UX Design

Design the user experience including visual design system, wireframes, user flows, responsive guidelines, and accessibility requirements to create a cohesive and user-centered product interface.

When to Use This Skill

• User asks to start stage 05 (ux)
• User wants to create wireframes or design system
• User asks about UI design, accessibility, or responsive design

Your Roles in This Skill

See dev-swarm/docs/general-dev-stage-rule.md for role selection guidance.

Role Communication

See dev-swarm/docs/general-dev-stage-rule.md for the required role announcement format.

Pre-Stage Check

Before starting, verify previous stages:

1. Check if 00-init-ideas/ through 04-prd/ folders have content (not just .gitkeep)
2. If any previous stage is empty and has no SKIP.md:
   • Ask user: "Stage {XX} is not complete. Would you like to skip it or start from that stage first?"

Instructions

Step 1: Context Review

Read all files to understand the project:

• ideas.md
• 00-init-ideas/*.md through 04-prd/*.md - All markdown files

Step 2: Create Stage Proposal

General Rules: See dev-swarm/docs/general-dev-stage-rule.md → "Create Stage Proposal Rules" section.

If this stage is skipped (has SKIP.md), execute the next non-skipped stage's agent skill. Otherwise, create the file 05-ux/README.md with the following content:

2.1 Stage Goal

Brief the goal in 2-3 paragraphs:

• What this stage aims to achieve
• Why UX design is critical for product success and user adoption
• How this builds upon previous stages (personas, MVP scope, PRD)
• What deliverables will be produced

2.2 File Selection

Select files from these options based on project needs:

Design System:

• design-system-guide.md - Color palette, typography, spacing, and button styles
• design-ui-preview.html - Sample HTML/CSS/JS page demonstrating the design system

Wireframes & Layouts:

• wireframe_descriptions.md - Textual descriptions of UI layout for each key screen

User Flows & Navigation:

• user-flows/ - User navigation flow diagrams

Responsive & Accessibility:

• responsive-design.md - Guidelines for how UI adapts across screen sizes
• accessibility.md - Accessibility requirements following WCAG guidelines

For each selected file, provide:

• Short description
• Why it's essential for this project
• Key information it should include

2.3 Request User Approval

Ask user: "Please check the Stage Proposal in 05-ux/README.md. Update it directly or tell me how to update it."

Step 3: Execute Stage Plan

Once user approves 05-ux/README.md:

3.1 Create All Planned Files

Create each file listed in the approved README:

• For .md files: Write comprehensive content based on personas, MVP requirements, and PRD
• For diagram folders: Follow dev-swarm/docs/mermaid-diagram-guide.md to create related diagrams files
• For .html files: Create functional preview pages demonstrating the design system with css/js as needed

Quality Guidelines:

• Base design decisions on user personas and their needs
• Align UX with MVP features defined in stage 03
• Ensure all user flows support functional requirements from stage 04
• Accessibility must meet WCAG 2.1 AA standards at minimum

3.2 Request User Approval for Files

After creating all files:

• Provide a summary of what was created
• Highlight key design decisions and rationale
• Ask: "Please review the UX design files. You can update or delete files, or let me know how to modify them."

Step 4: Finalize Stage

Once user approves all files:

4.1 Documentation Finalization

• Sync 05-ux/README.md to remove any deleted files
• Ensure all files are complete and well-formatted
• Check that all diagrams render correctly
• Validate HTML preview displays correctly

4.2 Prepare for Next Stage

• Summarize key design decisions for reference in architecture stage
• Note any technical constraints discovered during UX design

4.3 Announce Completion

Inform user:

• "Stage 05 (UX Design) is complete"
• Summary of deliverables created
• Key design decisions made
• "Ready to proceed to Stage 06 (Architecture) when you are"

Stage Completion Rules

See dev-swarm/docs/general-dev-stage-rule.md for stage completion, commit, and skip rules.

Key Principles

• Base design on user personas and needs
• Ensure accessibility compliance
• Keep design consistent across all screens
• Support smooth transition to architecture design