Agent skill · design visual · pedronauck
tui-design
Use this skill when designing terminal user interfaces, creating TUI layouts, choosing TUI color schemes, implementing keyboard navigation, building terminal dashboards, or working with any TUI framework. Activates on mentions of TUI design, terminal UI, Ratatui layout, Ink components, Textual widgets, Bubbletea views, terminal color palette, keybinding design, panel layout, split panes, terminal dashboard, box-drawing characters, sparklines, progress bars, modal dialogs, focus management, or terminal accessibility.
Why this skill is useful
Provides specific design patterns and layout paradigms for terminal user interfaces that the AI wouldn't reliably generate on its own.
What it needs
About 7k tokens when loaded. Last updated 2026-08-01. 564 stars on the source repository.
What this skill does
TUI Design System Design around the user's repeated action, the data they must keep in view, and the terminal capabilities actually available. Keep input responsive under slow I/O and make selection, focus, and operation state explicit. Primary documentation checked: 2026-09-04. Framework APIs change; use the project's versions. Follow the project's visual identity (SilkCircuit Neon for Bliss's personal tools) rather than treating an example palette as a universal theme. Choose the Layout from the Work Work Layout Useful invariant ---------------------------------------- ------------------------------------ --------------------------------------------------------- Browse related lists and details Persistent multi-panel Stable panel roles and visible focus Navigate a hierarchy Miller columns or drill-down stack Back restores selection and scroll position Monitor changing measurements Widget dashboard Labels, units, freshness, and a path to details Edit requests, queries, or configuration Sidebar, editor, results Keep editing state when switching panels Select a value for a shell command Inline picker or overlay Return a clean value and preserve shell scrollback Read logs or events Fixed controls plus virtualized list Follow mode is explicit; scrolling back stops auto-follow Read app-patterns.md for examples and tradeoffs. Read visual-catalog.md only when selecting glyphs, borders, charts, or indicators. Responsive Behavior Use constraints and content priorities. Keep the selected item visible while collapsing secondary panels; preserve state when they reappear. Recompute layout on resize without treating a zero-sized transient area as an error. Clamp scrolling after filtering, deletion, or a smaller viewport. Test narrow, ordinary, and wide layouts, including rapid resizing. The minimum usable size follows the task; 80x24 is a useful test case, not permission to disable a picker that would work in 40 columns. A size message should retain quit and recovery input. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills pedronauck/tui-design