设计与多媒体

tui-design

hyperb1iss/hyperskills

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.

  • 1294 次安装
  • 36 星标
  • 收录于

安装命令

npx skills add https://github.com/hyperb1iss/hyperskills --skill tui-design

SKILL.md

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 the maintainer'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.