vue-tui

name	vue-tui
description	Terminal Vue UI development and review for @simon_he/vue-tui. Use when implementing, debugging, testing, documenting, or reviewing vue-tui terminal components, dialogs, inputs, transcripts, keyboard and pointer interactions, render planes, scheduler invalidation, cell-width layout, theming, createTerminalApp tests, or CLI consumer integration patterns.

Vue TUI

Overview

Use this skill to build and review @simon_he/vue-tui terminal components with the patterns proven by the package itself and by CLI consumers such as best-agent's dimsdk UI.

Workflow

1. Start with data. Search the package and consumer examples before changing behavior: rg "TDialog|TInput|TTranscriptView|createTerminalApp|invalidatePlane|events.dispatch" src test examples /Users/Simon/Github/best-agent/apps/cli/src /Users/Simon/Github/best-agent/apps/cli/test.
2. Identify the layer you are touching: src/core, src/events, src/runtime, src/cli, src/vue, src/renderer, test, docs, or examples. Keep changes in that layer unless the behavior truly crosses boundaries.
3. Design terminal UI in cells. Compute x, y, w, and h as integer cells; use vue-tui text utilities for width, slicing, wrapping, and sanitization.
4. Preserve render-plane behavior. Use TRenderPlane, TRenderLayer, render.invalidatePlane(...), scheduler plane invalidation, and dirty-row APIs consistently with nearby code.
5. Treat focus, keyboard capture, pointer capture, and selection as public behavior. Modal and input components should own the keys they handle and prevent leakage to background widgets.