Opentui
Scaffold and implement terminal UIs with OpenTUI’s imperative core, React reconciler, or Solid reconciler from one consolidated skill.
Overview
OpenTUI is an agent skill for the Build phase that guides terminal UI development across OpenTUI core, React, and Solid reconcilers.
Install
npx skills add https://github.com/msmps/opentui-skill --skill opentuiWhat is this skill?
- Decision trees route tasks across core imperative API, React reconciler, and Solid reconciler reference packs.
- Four critical rules: create-tui for new projects, flag order for bunx create-tui, renderer.destroy() instead of process.
- Per-framework 5-file reference pattern—REFERENCE.md, api.md, configuration.md, and topic guides including gotchas.
- Covers components, layout, keyboard handling, animations, and testing for TUI development.
- Metadata references split across core, react, and solid deep-dive paths.
- 5-file reference pattern per framework
- 4 critical rules called out in Critical Rules section
Adoption & trust: 32.5k installs on skills.sh; 213 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You need a structured terminal UI but OpenTUI’s three stacks and exit/styling rules are easy to get wrong without curated references.
Who is it for?
Developers building interactive CLIs, internal tools, or agent dashboards in the terminal with Bun and OpenTUI.
Skip if: Browser-only React apps, curses-only legacy stacks with no OpenTUI adoption, or one-off printf debugging with no real UI.
When should I use this skill?
Any TUI development task with OpenTUI—components, layout, keyboard handling, animations, testing—including picking core vs React vs Solid.
What do I get? / Deliverables
You ship a correctly scaffolded TUI with the chosen reconciler, following documented APIs, layout patterns, and safe shutdown behavior.
- Scaffolded OpenTUI app or feature module
- TUI components with correct shutdown and text styling
Recommended Skills
Journey fit
Build is canonical because the skill guides implementation of runnable TUI applications and components, not launch or ops work. Frontend covers layout, keyboard handling, animations, and component trees—even when rendered in the terminal rather than the browser.
How it compares
Terminal UI framework skill package—distinct from generic CLI argument parsers or web component libraries.
Common Questions / FAQ
Who is opentui for?
Solo builders implementing TUIs who want one skill to navigate OpenTUI core, React, and Solid paths with shared gotchas and reference layout.
When should I use opentui?
Use during build when scaffolding with create-tui, wiring keyboard and layout, styling text in reconcilers, or testing any OpenTUI-based terminal app.
Is opentui safe to install?
It is documentation-heavy procedural knowledge; review the Security Audits panel on this page before running bundled scripts or bunx scaffolds in CI.
SKILL.md
READMESKILL.md - Opentui
# OpenTUI Platform Skill Consolidated skill for building terminal user interfaces with OpenTUI. Use decision trees below to find the right framework and components, then load detailed references. ## Critical Rules **Follow these rules in all OpenTUI code:** 1. **Use `create-tui` for new projects.** See framework `REFERENCE.md` quick starts. 2. **`create-tui` options must come before arguments.** `bunx create-tui -t react my-app` works, `bunx create-tui my-app -t react` does NOT. 3. **Never call `process.exit()` directly.** Use `renderer.destroy()` (see `core/gotchas.md`). 4. **Text styling requires nested tags in React/Solid.** Use modifier elements, not props (see `components/text-display.md`). ## How to Use This Skill ### Reference File Structure 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. ### Reading Order 1. Start with `REFERENCE.md` for your chosen framework 2. Then read additional files relevant to your task: - Building components -> `api.md` + `components/<category>.md` - Setting up project -> `configuration.md` - Layout/positioning -> `layout/REFERENCE.md` - Keyboard/input handling -> `keyboard/REFERENCE.md` - Animations -> `animation/REFERENCE.md` - Troubleshooting -> `gotchas.md` + `testing/REFERENCE.md` ### Example Paths ``` ./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 ``` ### Runtime Notes OpenTUI runs on Bun and uses Zig for native builds. Read `./references/core/gotchas.md` for runtime requirements and build guidance. ## Quick Decision Trees ### "Which framework should I use?" ``` 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) ``` ### "I need to display content" ``` 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) ├─ Data table with borders/wrapping -> components/code-diff.md (TextTable) ├─ Code with syntax highlighting -> components/code-diff.md ├─ Diff viewer (unified/split) -> components/code-diff.md ├─ Line numbers with diagnostics -> components/code-diff.md └─ Markdown content (streaming) -> components/code-diff.md (markdown) ``` ### "I need user input" ``` User input? ├─ Single-line text field -> components/inputs.md (input) ├─ Multi-line text editor -> components/inputs.md (textarea) ├─ Select from a list (vertical) -> compon