Designing TUIs

Use this skill to turn conversation, screenshots, or existing .tui files into practical terminal UI designs and runnable framework code. Two routes are available depending on the use case.

Trigger for welcome screens, dashboards, wizards, CLI launch screens, tool panels, lazygit/k9s/btop-style layouts, pane descriptions, or terminal UI visuals even when the user does not say “TUI”.

Architecture: Dual-Route Design

Default route:  Screenshot/Description → 3-Phase Decomposition → Framework Code → Preview/Compare/Iterate
Advanced route: Screenshot/Description → 3-Phase Decomposition → .tui Schema → Schema→Code Converter → Framework Code

Default Route (Screenshot → Code)

Preferred for most tasks. TUI's simplicity (no Z-axis overlap, ~20 component types, strict orthogonal grid layout) means the intermediate schema layer has low marginal benefit. Direct code generation is faster with no precision loss.

Advanced Route (Screenshot → Schema → Code)