Add "branding/visual-spec"

2026-01-28 20:10:59 +00:00
parent 0b7637e124
commit 3fe5bd57b2
1 changed files with 163 additions and 0 deletions
--- a/branding%2Fvisual-spec.-.md
+++ b/branding%2Fvisual-spec.-.md
@@ -0,0 +1,163 @@
+# Visual Branding Specification
+
+Central specification for plugin visual output in leo-claude-mktplace.
+
+**Version:** 1.0.0
+**Created:** 2026-01-28
+
+---
+
+## Design Principles
+
+1. **Immediate Recognition** - Users should instantly know which plugin is running
+2. **Phase Awareness** - For projman, users should see which sprint phase they're in
+3. **Progress Visibility** - Sprint execution shows real-time progress
+4. **Hierarchy Clarity** - Nested plugin calls are visually distinct from primary calls
+5. **Professional Appearance** - Consistent, clean visual output
+
+---
+
+## Box Drawing Characters
+
+### Double-Line (Projman Only)
+
+```
+╔══════════════════════════════════════════════════════════════════╗
+║  Content here                                                     ║
+╚══════════════════════════════════════════════════════════════════╝
+```
+
+Characters:
+- Top-left: `╔` (U+2554)
+- Top-right: `╗` (U+2557)
+- Bottom-left: `╚` (U+255A)
+- Bottom-right: `╝` (U+255D)
+- Horizontal: `═` (U+2550)
+- Vertical: `║` (U+2551)
+
+### Single-Line (All Other Plugins)
+
+```
+┌──────────────────────────────────────────────────────────────────┐
+│  Content here                                                     │
+└──────────────────────────────────────────────────────────────────┘
+```
+
+Characters:
+- Top-left: `┌` (U+250C)
+- Top-right: `┐` (U+2510)
+- Bottom-left: `└` (U+2514)
+- Bottom-right: `┘` (U+2518)
+- Horizontal: `─` (U+2500)
+- Vertical: `│` (U+2502)
+
+---
+
+## Width Specification
+
+| Element | Width |
+|---------|-------|
+| Outer box | 70 characters |
+| Inner content | 66 characters (after `║  ` and `  ║`) |
+| Indented nested box | 66 characters outer (2-space indent) |
+| Progress bar | 30 characters |
+
+---
+
+## Progress Bar Characters
+
+- Filled: `█` (U+2588 - Full Block)
+- Empty: `░` (U+2591 - Light Shade)
+
+**Calculation:**
+```
+filled_chars = round(percentage * 30 / 100)
+empty_chars = 30 - filled_chars
+bar = '█' * filled_chars + '░' * empty_chars
+```
+
+---
+
+## Header Refresh Triggers
+
+Headers should refresh (be re-displayed) when:
+
+### Projman
+- At start of command execution
+- Phase transitions (planning → execution → closing)
+- Batch completion during parallel execution
+- Before generating execution prompts
+- In final summary output
+
+### Other Plugins
+- At start of command execution
+- After significant operations (scan complete, analysis done)
+- In final summary output
+
+---
+
+## Trigger Source Labels
+
+When a plugin is invoked by something other than direct user command:
+
+| Source | Display Format |
+|--------|----------------|
+| User direct | (no parenthetical - clean header) |
+| Hook | `(triggered by: hook)` |
+| Another plugin | `(triggered by: projman)` |
+| CLAUDE.md instruction | `(triggered by: claude.md)` |
+| Agent delegation | `(triggered by: orchestrator)` |
+
+**Example:**
+```
+  ┌────────────────────────────────────────────────────────────────┐
+  │  🔒 CODE-SENTINEL · Security Scan (triggered by: hook)          │
+  └────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## Nested Call Indentation
+
+When one plugin calls another, the secondary plugin's header is:
+- Indented by **2 spaces**
+- Uses single-line box (even if called by projman)
+- Includes trigger source
+
+```
+╔══════════════════════════════════════════════════════════════════╗
+║  📋 PROJMAN                                                       ║
+║  ⚡ SPRINT EXECUTION                                              ║
+║  Sprint 6: Visual Branding                                        ║
+╚══════════════════════════════════════════════════════════════════╝
+
+  ┌────────────────────────────────────────────────────────────────┐
+  │  🔒 CODE-SENTINEL · Security Scan (triggered by: projman)       │
+  └────────────────────────────────────────────────────────────────┘
+  
+  [security scan output here]
+  
+  ┌────────────────────────────────────────────────────────────────┐
+  │  ✓ CODE-SENTINEL · Complete                                     │
+  └────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## Phase Transition Indicator
+
+When projman transitions between phases:
+
+```
+═══════════════════════════════════════════════════════════════════
+  🎯 PLANNING ──────▶ ⚡ EXECUTION
+═══════════════════════════════════════════════════════════════════
+```
+
+---
+
+## Related Pages
+
+- [[branding/plugin-registry]] - Plugin icons and display names
+- [[branding/header-templates]] - Copy-paste header templates
+- [[branding/progress-templates]] - Sprint progress block templates