skills.rest
warpdotdev
warpdotdevOFFICIAL
Explore all skills by this author →
WebsiteGitHub

tui-ui-guidelines

Guides writing Warp headless TUI UI code with the cell-grid TuiElement library.

64.7k|5.5k|Updated Jul 8, 2021
Search Tags:#Rust#keybindings#tui# styling#terminal ui#Warp#element composition
One-click install
npx skills add https://github.com/warpdotdev/warp --skill tui-ui-guidelines
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tui-ui-guidelines
Source: https://github.com/warpdotdev/warp/tree/main/.agents/skills/tui-ui-guidelines
Command: npx skills add https://github.com/warpdotdev/warp --skill tui-ui-guidelines

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Developers working on Warp's headless TUI front-end risk incorrectly applying GUI assumptions (pixels, GPU/WGSL rendering, mouse-pixel hit-testing) to a cell-grid terminal UI, leading to broken layouts and inconsistent styling.

Core Features & Use Cases

  • TuiElement API Reference: Documents the layout, render, cursor_position, present, and dispatch_event methods of the cell-grid element trait in crates/warpui_core.
  • Composition Vocabulary: Covers layout containers (TuiFlex, TuiContainer, TuiConstrainedBox), content elements (TuiText), and event handling (TuiEventHandler, TuiChildView).
  • Semantic Styling Guidance: Directs use of TuiUiBuilder semantic style helpers instead of hardcoded ANSI colors that wash out on light terminal themes.
  • Use Case: When adding a new screen to the Warp TUI, read this Skill first to learn the correct element composition patterns, keybinding registration conventions, and how to verify changes with ./script/run-tui.

Quick Start

Read the tui-ui-guidelines skill before starting any UI work in crates/warp_tui and follow its TuiElement composition and styling rules.

Frequently Asked Questions about tui-ui-guidelines

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I write UI code for Warp's headless TUI?▼

Implement the TuiElement trait from crates/warpui_core/src/elements/tui, which measures itself via layout and paints into a cell buffer via render. Compose screens with TuiFlex containers and TuiText content elements, always terminating elements with .finish().

What is the difference between Warp TUI and GUI element libraries?▼

The TUI uses a cell-grid TuiElement vocabulary with integer geometry, while the GUI uses pixel-based Element/View types with GPU/WGSL rendering. They share the Entity/model core, actions system, theming, and feature flags, but GUI pixel assumptions do not apply to the TUI.

How do I style text in a terminal UI without hardcoding colors?▼

Use TuiUiBuilder::from_app(app) and request semantic styles like primary_text_style(), muted_text_style(), or error_text_style(). Raw ANSI colors like Color::White are tuned for dark backgrounds and wash out on light terminal themes.

How do keybindings work in the Warp TUI?▼

Each TUI view module exposes an init(app) function that registers bindings, aggregated in crates/warp_tui/src/keybindings.rs. Fixed bindings use the tui group tag, user-remappable ones use a tui: prefix, and GUI bindings never fire in TUI contexts.

How do I verify a TUI change in Warp?▼

Build and run the TUI with ./script/run-tui and observe the output in an interactive terminal. The tui-verify-change skill covers end-to-end verification, and the tui-testing skill covers writing and running TUI tests.

Related Skills

Explore More Software Engineering Skills→
EvaLokEvaLok
1

rust-tooling

Create Rust crates, define dependencies, and build shell wrappers.

Community
Intermediate
gtpgg1013gtpgg1013

team-tui

Run parallel TUI component, hook, and integration tests during team verify.

Community
Advanced
MeowLynxSeaMeowLynxSea
342

yororen-ui-user

Generate ready-to-run Rust desktop GUI code using Yororen UI and gpui.

Community
Intermediate
Wike-CHIWike-CHI
2

desktop-control

Automate mouse, keyboard, and window operations with OpenCV-based image matching.

Community
Advanced