// Comprehensive OpenTUI skill for building terminal user interfaces. Covers the core imperative API, React reconciler, and Solid reconciler. Use for any TUI development task including components, layout, keyboard handling, animations, and testing.
| name | opentui |
| description | Comprehensive OpenTUI skill for building terminal user interfaces. Covers the core imperative API, React reconciler, and Solid reconciler. Use for any TUI development task including components, layout, keyboard handling, animations, and testing. |
| metadata | {"references":"core, react, solid"} |
Consolidated skill for building terminal user interfaces with OpenTUI. Use decision trees below to find the right framework and components, then load detailed references.
Follow these rules in all OpenTUI code:
create-tui for new projects. See framework REFERENCE.md quick starts.create-tui options must come before arguments. bunx create-tui -t react my-app works, bunx create-tui my-app -t react does NOT.process.exit() directly. Use renderer.destroy() (see core/gotchas.md).components/text-display.md).Framework references follow a 5-file pattern. Cross-cutting concepts are single-file guides.
Each framework in ./references/<framework>/ contains:
| File | Purpose | When to Read |
|---|---|---|
REFERENCE.md | Overview, when to use, quick start | Always read first |
api.md | Runtime API, components, hooks | Writing code |
configuration.md | Setup, tsconfig, bundling | Configuring a project |
patterns.md | Common patterns, best practices | Implementation guidance |
gotchas.md | Pitfalls, limitations, debugging | Troubleshooting |
Cross-cutting concepts in ./references/<concept>/ have REFERENCE.md as the entry point.
REFERENCE.md for your chosen frameworkapi.md + components/<category>.mdconfiguration.mdlayout/REFERENCE.mdgotchas.md + testing/REFERENCE.md./references/react/REFERENCE.md # Start here for React
./references/react/api.md # React components and hooks
./references/solid/configuration.md # Solid project setup
./references/components/inputs.md # Input, Textarea, Select docs
./references/core/gotchas.md # Core debugging tips
OpenTUI runs on Bun and uses Zig for native builds. Read ./references/core/gotchas.md for runtime requirements and build guidance.
Which framework?
├─ I want full control, maximum performance, no framework overhead
│ └─ core/ (imperative API)
├─ I know React, want familiar component patterns
│ └─ react/ (React reconciler)
├─ I want fine-grained reactivity, optimal re-renders
│ └─ solid/ (Solid reconciler)
└─ I'm building a library/framework on top of OpenTUI
└─ core/ (imperative API)
Display content?
├─ Plain or styled text -> components/text-display.md
├─ Container with borders/background -> components/containers.md
├─ Scrollable content area -> components/containers.md (scrollbox)
├─ ASCII art banner/title -> components/text-display.md (ascii-font)
├─ Code with syntax highlighting -> components/code-diff.md
├─ Diff viewer (unified/split) -> components/code-diff.md
└─ Line numbers with diagnostics -> components/code-diff.md
User input?
├─ Single-line text field -> components/inputs.md (input)
├─ Multi-line text editor -> components/inputs.md (textarea)
├─ Select from a list (vertical) -> components/inputs.md (select)
├─ Tab-based selection (horizontal) -> components/inputs.md (tab-select)
└─ Custom keyboard shortcuts -> keyboard/REFERENCE.md
Layout?
├─ Flexbox-style layouts (row, column, wrap) -> layout/REFERENCE.md
├─ Absolute positioning -> layout/patterns.md
├─ Responsive to terminal size -> layout/patterns.md
├─ Centering content -> layout/patterns.md
└─ Complex nested layouts -> layout/patterns.md
Animations?
├─ Timeline-based animations -> animation/REFERENCE.md
├─ Easing functions -> animation/REFERENCE.md
├─ Property transitions -> animation/REFERENCE.md
└─ Looping animations -> animation/REFERENCE.md
Input handling?
├─ Keyboard events (keypress, release) -> keyboard/REFERENCE.md
├─ Focus management -> keyboard/REFERENCE.md
├─ Paste events -> keyboard/REFERENCE.md
├─ Mouse events -> components/containers.md
└─ Text selection -> components/text-display.md
Testing?
├─ Snapshot testing -> testing/REFERENCE.md
├─ Interaction testing -> testing/REFERENCE.md
├─ Test renderer setup -> testing/REFERENCE.md
└─ Debugging tests -> testing/REFERENCE.md
Troubleshooting?
├─ Runtime errors, crashes -> <framework>/gotchas.md
├─ Layout issues -> layout/REFERENCE.md + layout/patterns.md
├─ Input/focus issues -> keyboard/REFERENCE.md
└─ Repro + regression tests -> testing/REFERENCE.md
core/gotchas.mdcomponents/text-display.mdkeyboard/REFERENCE.mdlayout/REFERENCE.mdtesting/REFERENCE.mdFor component naming differences and text modifiers, see components/REFERENCE.md.
| Framework | Entry File | Description |
|---|---|---|
| Core | ./references/core/REFERENCE.md | Imperative API, all primitives |
| React | ./references/react/REFERENCE.md | React reconciler for declarative TUI |
| Solid | ./references/solid/REFERENCE.md | SolidJS reconciler for declarative TUI |
| Concept | Entry File | Description |
|---|---|---|
| Layout | ./references/layout/REFERENCE.md | Yoga/Flexbox layout system |
| Components | ./references/components/REFERENCE.md | Component reference by category |
| Keyboard | ./references/keyboard/REFERENCE.md | Keyboard input handling |
| Animation | ./references/animation/REFERENCE.md | Timeline-based animations |
| Testing | ./references/testing/REFERENCE.md | Test renderer and snapshots |
| Category | Entry File | Components |
|---|---|---|
| Text & Display | ./references/components/text-display.md | text, ascii-font, styled text |
| Containers | ./references/components/containers.md | box, scrollbox, borders |
| Inputs | ./references/components/inputs.md | input, textarea, select, tab-select |
| Code & Diff | ./references/components/code-diff.md | code, line-number, diff |
Repository: https://github.com/anomalyco/opentui Core Docs: https://github.com/anomalyco/opentui/tree/main/packages/core/docs Examples: https://github.com/anomalyco/opentui/tree/main/packages/core/src/examples Awesome List: https://github.com/msmps/awesome-opentui