PixelPilot: Instructions file for GitHub Copilot

UI/UX User Flow Diagrams

Generate Mermaid user flow diagrams from natural language descriptions. Visualize user journeys, conversion funnels, and navigation paths.

---

OVERVIEW

This skill converts natural language descriptions into Mermaid flowchart diagrams. Use it to:

• Document user journeys before implementation
• Visualize conversion funnels
• Plan navigation architecture
• Communicate flows to stakeholders

---

INPUT FORMAT

Describe the flow in plain language:

• Use → or "then" to indicate sequence
• Use | or "or" to indicate branches
• Use (condition) to indicate decision points

Examples

"checkout: cart → address → payment → confirmation"
"login: email → (valid?) → dashboard | error"
"onboarding: welcome → profile → preferences → complete"

---

OUTPUT FORMAT

Standard Flow (Mermaid)

flowchart LR
    A[Cart] --> B[Address]
    B --> C[Payment]
    C --> D[Confirmation]

Flow with Decisions

flowchart TD
    A[Start] --> B{Valid User?}
    B -->|Yes| C[Dashboard]
    B -->|No| D[Login Page]
    D --> E[Enter Credentials]
    E --> B

---

FLOW PATTERNS

1. Linear Flow (Checkout)

Input: "checkout: cart → shipping → payment → review → confirmation"

Output:

flowchart LR
    subgraph Checkout Flow
        A[🛒 Cart] --> B[📦 Shipping]
        B --> C[💳 Payment]
        C --> D[📋 Review]
        D --> E[✅ Confirmation]
    end

2. Branching Flow (Authentication)

Input: "auth: login page → (has account?) → sign in form | sign up form → (valid?) → dashboard | show error"

Output:

flowchart TD
    A[Login Page] --> B{Has Account?}
    B -->|Yes| C[Sign In Form]
    B -->|No| D[Sign Up Form]
    C --> E{Valid?}
    D --> E
    E -->|Yes| F[Dashboard]
    E -->|No| G[Show Error]
    G --> C

3. Multi-Step Form (Onboarding)

Input: "onboarding: welcome → personal info → company → team invite → complete"

Output:

flowchart LR
    subgraph Onboarding
        direction LR
        A[1. Welcome] --> B[2. Personal Info]
        B --> C[3. Company]
        C --> D[4. Team Invite]
        D --> E[5. Complete]
    end
    
    style A fill:#4D8EFF,color:#fff
    style E fill:#1A7F37,color:#fff