msmps/opentui-skill
Overview
This skill provides a consolidated OpenTUI reference for building terminal user interfaces using the core imperative API, the React reconciler, and the Solid reconciler. It guides framework selection, components, layout, keyboard handling, animations, and testing workflows. The content is organized into concise reference documents and decision trees to reach solutions quickly.
How this skill works
The skill inspects development intent (imperative core, React-style, or Solid-style) and directs you to the correct framework reference and implementation patterns. It outlines where to find runtime APIs, configuration tips, layout patterns, keyboard handling, animation primitives, and testing approaches. It also surfaces runtime gotchas and debugging steps for Bun/Zig environments.
When to use it
- Starting a new TUI project and choosing a framework (core, React, or Solid)
- Building or composing UI components: text, containers, inputs, code viewers
- Implementing layout and responsive terminal positioning
- Handling keyboard, focus, mouse, and paste events
- Adding animations or timeline-based transitions
- Writing snapshot and interaction tests for TUIs
Best practices
- Start new projects with the provided project generator and ensure CLI options come before positional arguments
- Prefer the core imperative API for low-level control or when building libraries, use React/Solid reconcilers for declarative components
- Never terminate the process directly; use the renderer lifecycle to destroy and cleanup
- Compose text styles with nested modifier elements for React/Solid rather than passing style props
- Follow the framework-specific configuration and bundling notes to avoid runtime issues on Bun/Zig
Example use cases
- Create a fast single-file CLI tool with the core API for minimal runtime overhead
- Build a React-style TUI app with declarative components and familiar hooks
- Implement a Solid-based dashboard for fine-grained reactivity and optimal renders
- Compose complex layouts: flexbox-style rows/columns, absolute positioning, and responsive terminal sizing
- Add timeline-based animations for menus, loaders, or attention states and test them with snapshot + interaction tests
FAQ
Choose core for maximum control and library work, React if you want familiar component patterns, and Solid for fine-grained reactivity and minimal re-renders.
How do I avoid process-level crashes and ensure terminal cleanup?
Do not call process.exit() directly; use the renderer destroy/cleanup lifecycle to restore terminal state and free resources.
Where should I look for keyboard and focus handling details?
Consult the keyboard and input references for keypress/release events, focus management, paste handling, and custom shortcut patterns.
