From 3fe5bd57b2f5e2ab565f8f9a0fe37c54869ad06c Mon Sep 17 00:00:00 2001 From: Leo Miranda Date: Wed, 28 Jan 2026 20:10:59 +0000 Subject: [PATCH] Add "branding/visual-spec" --- branding%2Fvisual-spec.-.md | 163 ++++++++++++++++++++++++++++++++++++ 1 file changed, 163 insertions(+) create mode 100644 branding%2Fvisual-spec.-.md diff --git a/branding%2Fvisual-spec.-.md b/branding%2Fvisual-spec.-.md new file mode 100644 index 0000000..dd7678e --- /dev/null +++ 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