Tui Design
Apply proven terminal UI layout and interaction patterns—multi-panel, dashboards, keybinding UX—when designing your own TUI with the agent.
Overview
tui-design is an agent skill most often used in Build (also Ship review) that supplies real-world TUI layout and interaction patterns for designing terminal apps.
Install
npx skills add https://github.com/hyperb1iss/hyperskills --skill tui-designWhat is this skill?
- Pattern gallery organized by design precedent (persistent multi-panel, real-time dashboard, and more)
- lazygit analysis: five left panels plus right detail, contextual keybinding footer, popup overlays
- lazydocker variant: master list with live ASCII resource graphs in detail tabs
- Emphasizes spatial memory, command transparency, and progressive disclosure for complex workflows
- lazygit reference layout: 5 left panels plus right detail column
- lazydocker reference: master list left with tabbed detail including live ASCII graphs
Adoption & trust: 788 installs on skills.sh; 13 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are building a TUI but lack precedents for panels, focus, keybindings, and live data layouts that feel as polished as lazygit or lazydocker.
Who is it for?
Indie devs shipping CLI or internal terminal tools who want gallery-quality interaction design before writing layout code.
Skip if: Web or native mobile GUI work, or teams that only need API/backend design with no terminal surface.
When should I use this skill?
Designing or refining a terminal UI and needing real-world pattern precedents from exceptional TUI applications.
What do I get? / Deliverables
Your agent recommends pattern-backed layout and UX decisions—multi-panel persistence, contextual actions, overlays, and transparency—that you can implement in your chosen TUI framework.
- Panel topology recommendation
- Interaction and keybinding UX notes
- Pattern references tied to user workflows
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Build is where CLI and agent-facing TUIs are designed and implemented; this skill is reference architecture for that UI layer. Frontend subphase covers layout, focus model, and interaction design even when the surface is terminal-native rather than web.
Where it fits
Choose a persistent five-panel git layout versus a two-pane dashboard before scaffolding gocui views.
Shape an agent control TUI with overlay confirmations so long workflows do not destroy spatial context.
Audit whether your TUI exposes contextual actions and command transparency like the gallery exemplars.
How it compares
Use as a design pattern reference, not a component library—pair with your framework skill when you need actual widgets and code.
Common Questions / FAQ
Who is tui-design for?
Solo builders and small teams creating terminal UIs for git, Docker, agents, or ops tools who want analyzed examples instead of guessing layout.
When should I use tui-design?
During Build when designing TUI structure; during Ship review when evaluating usability of an existing terminal app; whenever you need inspiration for panels, dashboards, or keybinding UX.
Is tui-design safe to install?
It is documentation-only pattern analysis with no prescribed network calls; still review the Security Audits panel on this page like any community skill.
SKILL.md
READMESKILL.md - Tui Design
# TUI App Design Patterns Gallery Real-world design analysis of exceptional TUI applications, organized by the pattern they exemplify. Use for inspiration and precedent when designing your own TUI. --- ## Persistent Multi-Panel Pattern ### lazygit — The Gold Standard **Framework:** Go (gocui fork) | **Layout:** 5 left panels + right detail The defining multi-panel TUI. All views (status, files, branches, commits, stash) remain visible simultaneously. The left column acts as a selector; the right column shows context for the selected item. **Key innovations:** - **Contextual keybinding footer** — available actions update as focus changes. Goal: zero memorization. - **Popup layering** — confirmation dialogs and commit editors appear as overlays without losing spatial context. - **Command transparency** — shows the actual git commands being executed under the hood. - **Guided multi-step workflows** — interactive rebase, conflict resolution use progressive disclosure through confirmations. **Why it works:** Users build spatial memory. Branches are _always_ top-left, commits are _always_ middle-left. No navigation required to see the full picture. ### lazydocker — Real-Time Dashboard Variant **Framework:** Go (gocui) | **Layout:** Master list (left) + detail tabs (right) Two-pane horizontal split. Left switches between Docker objects; right shows live detail with tabs for logs, stats, config. Live ASCII resource graphs render directly in the detail pane. **Key innovation:** Docker Compose awareness — auto-groups containers into "Services" and "Standalone." The layout adapts to project structure. ### oxker — Single-Screen Everything **Framework:** Rust (Ratatui) | **Layout:** All panels always visible Containers list, logs, CPU charts, memory charts, and port mappings visible simultaneously. No tabs, no drill-down. Click-sortable column headers bring spreadsheet interaction to the terminal. **Key innovation:** Mixed input — full keyboard AND mouse support. Neither forced; both first-class. --- ## Drill-Down Stack Pattern ### k9s — Command-Mode Navigation **Framework:** Go (tcell/tview) | **Navigation:** Enter descends, Esc ascends, `:resource` jumps The Kubernetes TUI. An infinite drill-down through resources: cluster → namespace → deployment → pod → container → logs. **Key innovations:** - **`:resource` command mode** — type `:pods`, `:deployments` to jump directly. The TUI equivalent of a URL bar. - **XRay mode** — unique tree visualization showing a resource and all its related resources across types. - **Pulse view** — heads-up display of cluster health metrics. - **Context-aware skins** — different color schemes per Kubernetes cluster. Production is visually distinct from staging. Safety through color. **Why it works:** The command-mode (`:`) plus drill-down (Enter/Esc) creates two navigation dimensions — direct jumps for known targets, exploration for discovery. ### diskonaut — Spatial Treemap **Framework:** Rust (tui-rs) | **Navigation:** Arrow keys select blocks, Enter drills in The entire terminal fills with rectangles proportional to file/directory size. A genuine treemap visualization in text mode. **Key innovations:** - **Progressive scanning** — treemap builds in real-time as filesystem scan progresses. Explore already-scanned regions while scanning continues. - **Zoom levels** — `+`/`-` reveal smaller files that appear as `x` at default zoom. - **Deletion tracking** — inline delete with cumulative freed-space counter. **Why it works:** Spatial reasoning. You literally _see_ which files are largest by their visual area. No need to compare numbers. --- ## Miller Columns Pattern ### yazi — Async-First File Management **Framework:** Rust (Ratatui + Tokio) | **Layout:** 3 columns: parent / current / preview The modern file manager. Miller columns with async I/O for never-blocking navigation. **Key innovations:** - **Inline image previews** — renders images directly in terminal via auto-