opentui-design

# OpenTUI Design Skill ## Description Comprehensive toolkit for designing and implementing CLI applications with OpenTUI and SolidJS. ## When to Use - Building new CLI screens or components with OpenTUI - Debugging input handling issues - Implementing screen navigation - Handling mouse events and limitations - Optimizing CLI performance ## Key References - `input-handling.md` - Key input patterns and propagation prevention - `mouse-handling.md` - Mouse events and Selection API limitations - `opentui-gotchas.md` - Common issues and workarounds - `component-patterns.md` - Component structure and composition - `multi-screen-navigation.md` - Screen transition patterns - `state-management.md` - SolidJS state patterns - `hooks-guide.md` - OpenTUI hooks reference - `performance-optimization.md` - Performance best practices - `responsive-layout.md` - Terminal layout patterns - `testing-patterns.md` - Testing CLI components ## Critical Knowledge ### Key Propagation Prevention When navigating between screens with Enter key, the same keypress can propagate to the new screen. Always use: 1. `key.preventDefault()` at the source 2. Initial frame delay at the destination 3. `focused` prop control on interactive elements ### SolidJS Reactivity Never destructure props - always access via `props.xxx` to maintain reactivity. ### Mouse Limitations OpenTUI's Selection API (`useSelectionHandler`) does not reliably work. Set `useMouse: false` to allow OS-level copy, but this disables wheel scroll. --- > Converted and distributed by [TomeVault](https://tomevault.io/claim/akiojin) — claim your Tome and manage your conversions. <!-- tomevault:4.0:skill_md:2026-04-13 -->