rendering-layout-performance
Installation
SKILL.md
TUI Rendering, Layout, Performance, and Alternate Screen Lifecycle
Use this skill when a TUI draws incorrectly, flickers, wastes CPU, mishandles resize, corrupts scrollback, or needs a robust rendering architecture.
Rendering principles
- Render from state. The view should be a pure projection of current state and terminal dimensions.
- Batch writes. Build a frame, diff or queue updates, then flush once. Avoid many small writes.
- Minimize terminal control churn. Repeated style resets, cursor moves, and full clears are expensive and visible over remote links.
- Throttle high-frequency sources. Coalesce logs, metrics, mouse motion, resize storms, and progress updates.
- Define frame ownership. A full-screen renderer owns the screen while active; background output goes elsewhere.
Layout rules
- Compute layout from
widthandheightevery frame or on every resize event. - Establish minimum usable dimensions and render a clear small-screen message below that threshold.
- Prefer constraints, flex, grid, splits, or framework layout primitives over magic coordinates.
- Keep focus, selection, viewport offset, and cursor position in UI state.
- Test narrow, wide, tall, tiny, and odd terminal sizes.