# Tui Design

> TUI Design System for Egregore slash commands. Use when designing or modifying any command's terminal output to ensure visual consistency. Triggers on: TUI, terminal output, box drawing, command output formatting, sigils, section markers. Do NOT use for browser rendering (use dark-mode) or external prose (use egregore-voice).

- Skill: `egregore-labs/tui-design-2` (Agent Skill)
- Install (CLI): `npx skillmds@latest add egregore-labs/tui-design-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/egregore-labs/tui-design-2/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: egregore-labs (https://skillmd.com/u/egregore-labs)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/egregore-labs/tui-design-2

---


# TUI Design System

## Voice Complex

This skill governs TERMINAL RENDERING — structural, not tonal.
Shared aesthetic: voice-bedrock (`.claude/rules/voice-bedrock.md`).
For product voice in command output prose: `product-voice` skill.
For browser visual output: `dark-mode` skill.
For ASCII diagrams in explanations: `visual-explain` skill.

## When to invoke

User says: "TUI", "terminal output", "box drawing", "command output formatting", "sigils", "section markers", or is designing/modifying any slash command's terminal output.
Not this: browser rendering → `dark-mode` · external prose → `egregore-voice`

## 1. Brand Elements

### Command Headers

**`/activity` is the flagship** — it gets the full branded header with org name:
```
{ORG_NAME} EGREGORE ✦ ACTIVITY DASHBOARD
```
Read org name from `jq -r '.org_name' egregore.json`. The `✦` star is reserved exclusively for the activity dashboard and Egregore-wide branding.

**Other commands get sigil + command name only** — no org name:

| Command | Header | Sigil Meaning |
|---------|--------|---------------|
| `/activity` | `{ORG_NAME} EGREGORE ✦ ACTIVITY DASHBOARD` | The star — awareness, the full field |
| `/ask` | `? ASK` | The question — direct, clear inquiry |
| `/reflect` | `◎ REFLECTION` | The eye — looking inward, seeing clearly |
| `/deep-reflect` | `◈ DEEP REFLECT` | The faceted eye — looking inward with structure |
| `/handoff` | `⇌ HANDOFF` | The bridge — passing context between minds |
| `/quest` | `⚑ QUEST` | The flag — planting direction in unknown territory |
| `/todo` | `□ TODO` | The checkbox — actionable items, personal intent |
| `/archive` | `◇ ARCHIVE` | The diamond — crystallized pattern, refined and preserved |
| `/eval` | `⊕ EVAL` | The crosshair — measuring, comparing, calibrating |

### Section Markers

Used within all TUI boxes to prefix items by category:

- `●` Action items / things needing attention
- `✓` Completed / received / done items
- `→` Navigation pointers (what to do next, entry points)
- `◦` Informational items (sessions, quests, neutral data)
- `⚑` Quests
- `⇌` Handoffs (in activity action items)
- `◎` Reflections
- `□` Todos (in activity dashboard)
- `★` Priority marker (todo items with priority >= 2)
- `◉` Artifacts (in handoff summaries)

## 2. Box Drawing Rules

### Line Patterns (CRITICAL)

LLMs cannot count character widths. Do NOT draw boxes freehand. Instead, produce exactly 4 line patterns. All commands use 72-char outer width (N = 70 fill characters).

1. **Top**: `┌` + 70×`─` + `┐`
2. **Separator**: `├` + 70×`─` + `┤`
3. **Content**: `│` + 2 spaces + text + pad to 68 text chars + `│`
4. **Bottom**: `└` + 70×`─` + `┘`

Characters: `┌` top-left, `─` horizontal, `┐` top-right, `│` vertical, `├` left-tee, `┤` right-tee, `└` bottom-left, `┘` bottom-right.

**Separator lines are always identical** — copy-paste the same 72-char string every time. Content lines have ONLY the outer `│` as borders. Pad every content line with trailing spaces so the closing `│` lands at position 72.

**Header separator**: always use `├───┤` between header row and content.

**Section dividers**: use `├───┤` between logical groups. No sub-boxes — never use `┌─┐`/`└─┘` inside the outer frame. LLMs cannot reliably align nested borders.

### Layout

All commands use full-width, single-column, stacked sections. No column splits — they cause truncation and render poorly. Content flows top-to-bottom with section headers separating groups.

## 3. Width Standards

- **All commands**: ~72 characters outer width
- All content lines must have matching left and right `│` borders

## 4. Content Formatting

### Session Lines (Compact)
```
Feb 07  Topic description
```
Date is always `Mon DD` format, right-padded to 6 chars. Topic follows after 2 spaces.

### Team Session Lines
```
Feb 07  oz: Topic description
```
Person name prefixed with colon separator.

### Numbered Action Items
```
[1] Description of actionable thing
[2] ⇌ Handoff from ali: blog styling (yesterday)
```
Numbers in brackets. Use section markers after the bracket for typed items.

### Status Confirmations
```
✓ Saved to knowledge/decisions/2026-02-08-...
✓ Indexed in knowledge graph
✓ Auto-saved
```

### Progress Steps
```
[1/5] ✓ Conversation file
[2/5] ✓ Index updated
[3/5] ✓ Session → knowledge graph
[4/5] ✓ Pushed + PR created
[5/5] ✓ Oz notified
```

### Linked Items
```
◦ Quest: research-agent
◦ Project: egregore
```

### Entry Points
```
→ memory/knowledge/decisions/2026-02-07-defensibility-...
→ memory/knowledge/decisions/2026-02-07-business-model.md
```

### Truncation
- Topics longer than 35 chars in column layouts get `...` suffix
- File paths: shorten to last 2 segments when possible
- Never break mid-word

## 5. Section Visibility Rules

- **Empty sections are omitted entirely** — no placeholder text, no "none yet", no empty boxes
- **Single action item still gets the action items box** — consistency over minimalism
- **Section headers only appear when their section has content**

## 6. Edge Cases

| Scenario | Handling |
|----------|----------|
| No sessions yet | Show Projects section instead (first-timer experience) |
| Neo4j down | File-based fallback, simpler layout, no columns |
| Single action item | Still show action items box |
| No team activity | Omit TEAM section |
| Very long org name | Truncate at 20 chars in activity header |
| No quests | Omit quests section |
| No PRs | Omit PRs section |
| No action items + no answers | Omit both sections, go straight to columns |

## 7. Anti-Patterns

- **Avoid sub-boxes entirely** — use `├───┤` flat dividers instead (LLMs can't count widths for nested borders)
- **Never use tables** with `│` column separator AND sub-boxes in the same section (pick one)
- **Never show empty section headers** — omit the entire section
- **Never use raw file paths** in TUI output — use `→` pointer with shortened path
- **Never break box characters** across lines — each line must have valid left/right borders
- **Never use the `✦` star** outside `/activity` header
- **Never include org name** in non-activity command headers
- **Never use emoji** in TUI boxes (sigils and markers only)

## 8. AskUserQuestion Integration

When a command's TUI includes interactive follow-up (like `/activity` numbered items):

1. Display the full TUI box first
2. Add footer text inside the box: `Type a number to act, or keep working.`
3. Use AskUserQuestion with options matching the numbered items
4. Include a "Skip" option for non-action

## 9. Color and Emphasis

Terminal output is monospace plain text. Emphasis is structural only:
- Section headers: ALL CAPS
- Sigils and markers provide visual weight
- Sub-boxes create grouping
- Indentation creates hierarchy
- No bold, italic, or color codes in the markdown instruction files