ui-brand

Instruction file imported from dadijoebaseline/FLOWSENSE (.github/instructions/ui-brand.instructions.md). Copyright stays with the author.

<ui_patterns>

Visual patterns for user-facing GSD output. Orchestrators @-reference this file.

Stage Banners

Use for major workflow transitions.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 GSD ► {STAGE NAME}
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Stage names (uppercase):

• QUESTIONING
• RESEARCHING
• DEFINING REQUIREMENTS
• CREATING ROADMAP
• PLANNING PHASE {N}
• EXECUTING WAVE {N}
• VERIFYING
• PHASE {N} COMPLETE ✓
• MILESTONE COMPLETE 🎉

Checkpoint Boxes

User action required. 62-character width.

╔══════════════════════════════════════════════════════════════╗
║  CHECKPOINT: {Type}                                          ║
╚══════════════════════════════════════════════════════════════╝

{Content}

──────────────────────────────────────────────────────────────
→ {ACTION PROMPT}
──────────────────────────────────────────────────────────────

Types:

• CHECKPOINT: Verification Required → → Type "approved" or describe issues
• CHECKPOINT: Decision Required → → Select: option-a / option-b
• CHECKPOINT: Action Required → → Type "done" when complete

Status Symbols

✓  Complete / Passed / Verified
✗  Failed / Missing / Blocked
◆  In Progress
○  Pending
⚡ Auto-approved
⚠  Warning
🎉 Milestone complete (only in banner)

Progress Display

Phase/milestone level:

Progress: ████████░░ 80%

Task level:

Tasks: 2/4 complete

Plan level:

Plans: 3/5 complete

Spawning Indicators

◆ Spawning researcher...

◆ Spawning 4 researchers in parallel...
  → Stack research
  → Features research
  → Architecture research
  → Pitfalls research

✓ Researcher complete: STACK.md written

Next Up Block

Always at end of major completions.

───────────────────────────────────────────────────────────────

## ▶ Next Up

**{Identifier}: {Name}** — {one-line description}

`{copy-paste command}`

<sub>`/clear` first → fresh context window</sub>

───────────────────────────────────────────────────────────────

**Also available:**
- `/alternative-1.md` — description
- `/alternative-2.md` — description

───────────────────────────────────────────────────────────────

Error Box

╔══════════════════════════════════════════════════════════════╗
║  ERROR                                                       ║
╚══════════════════════════════════════════════════════════════╝

{Error description}

**To fix:** {Resolution steps}

Tables

| Phase | Status | Plans | Progress |
|-------|--------|-------|----------|
| 1     | ✓      | 3/3   | 100%     |
| 2     | ◆      | 1/4   | 25%      |
| 3     | ○      | 0/2   | 0%       |

Anti-Patterns

• Varying box/banner widths
• Mixing banner styles (===, ---, ***)
• Skipping GSD ► prefix in banners
• Random emoji (🚀, ✨, 💫)
• Missing Next Up block after completions

</ui_patterns>