opentui

Q: How do I install opentui?

Run npx skills add https://github.com/msmps/opentui-skill --skill opentui in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/opentui/ (personal) or .claude/skills/opentui/ (project).

by msmpsFrontend & Design

OpenTUI skill for building terminal user interfaces with the Core, React, or Solid APIs. Use for any TUI task including components, layout, keyboard and keymap handling, animations, and testing.

Installs: 64.5K
Last 24h: +10
Trending rank: #8691
Security: Pass

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/msmps/opentui-skill --skill opentui

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads opentui automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

Security audits

Independent scans of the skill's instructions and bundled files.

Gen Agent Trust Hub PassSAFE ·This skill contains documentation and usage patterns for the OpenTUI framework, designed for building terminal user interfaces across Core, React, and SolidJS. The analysis confirmed that the skill provides legitimate development guidance; no malicious code, persistence mechanisms, or obfuscation were detected. Findings are limited to standard platform capabilities and recommended scaffolding tools.

Socket PassNo alerts

Snyk PassLOW ·Risk: LOW · No issues

Runlayer PassLOW ·1/26 files flagged

ZeroLeaks PassNONE ·Score: 93/100 · 2 sections analyzed

SKILL.md

The instructions your agent reads when the skill is triggered.

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:

Use 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.
Never call process.exit() directly. Use renderer.destroy() (see core/gotchas.md).
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

Start with REFERENCE.md for your chosen framework
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
- Layered keybindings/commands -> keymap/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)
├─ Standalone scrollbar -> components/containers.md (scrollbar)
├─ ASCII art banner/title -> components/text-display.md (ascii-font)
├─ PNG/JPEG/WebP/GIF image -> components/text-display.md (image)
├─ First-draw diagnostic -> components/text-display.md (time-to-first-draw)
├─ QR code -> components/text-display.md (qr-code, @opentui/qrcode)
├─ Embedded child terminal/VT output -> components/containers.md (Core only)
├─ Data table with borders/wrapping -> components/code-diff.md (TextTable)
├─ Code with syntax highlighting -> components/code-diff.md
├─ Diff viewer (unified/split, hunk nav) -> 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) -> components/inputs.md (select)
├─ Tab-based selection (horizontal) -> components/inputs.md (tab-select)
├─ Value slider -> components/inputs.md (slider)
├─ Declarative/layered keybindings -> keymap/REFERENCE.md (@opentui/keymap)
└─ Custom keyboard shortcuts -> keyboard/REFERENCE.md

"I need layout/positioning"

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

"I need animations"

Animations?
├─ Timeline-based animations -> animation/REFERENCE.md
├─ Easing functions -> animation/REFERENCE.md
├─ Property transitions -> animation/REFERENCE.md
└─ Looping animations -> animation/REFERENCE.md

"I need to handle input"

Input handling?
├─ Keyboard events (keypress, release) -> keyboard/REFERENCE.md
├─ Layered bindings, commands, leader keys -> keymap/REFERENCE.md
├─ Focus management -> keyboard/REFERENCE.md
├─ Paste events -> keyboard/REFERENCE.md
├─ Mouse events -> components/containers.md
├─ Text selection & copy-on-select -> keyboard/REFERENCE.md (selection)
└─ Host/terminal clipboard service or OSC 52 -> keyboard/REFERENCE.md (clipboard)

"I need to test my TUI"

Testing?
├─ Snapshot testing -> testing/REFERENCE.md
├─ Interaction testing -> testing/REFERENCE.md
├─ Test renderer setup -> testing/REFERENCE.md
└─ Debugging tests -> testing/REFERENCE.md

"I need platform capabilities (audio, images, clipboard, notifications, SSH)"

Platform capability?
├─ Play loaded sound or MP3/FLAC stream -> core/api.md (Audio)
├─ Capture microphone PCM / record WAV -> core/api.md (Audio)
├─ Decode, transform, or display images -> components/text-display.md (image)
├─ Read/write host or terminal clipboard -> keyboard/REFERENCE.md (clipboard)
├─ Desktop notifications (OSC 9/777/99) -> core/api.md (triggerNotification)
├─ Custom stdin/stdout (PTY, xterm.js) -> core/api.md (createCliRenderer)
└─ Serve a TUI over SSH -> core/REFERENCE.md (@opentui/ssh)

"I need to debug/troubleshoot"

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

Troubleshooting Index

Terminal cleanup, crashes -> core/gotchas.md
Text styling not applying -> components/text-display.md
Input focus/shortcuts -> keyboard/REFERENCE.md
Layout misalignment -> layout/REFERENCE.md
Flaky snapshots -> testing/REFERENCE.md

For component naming differences and text modifiers, see components/REFERENCE.md.

Product Index

Frameworks

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

Cross-Cutting Concepts

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`	Low-level keyboard input handling
Keymap	`./references/keymap/REFERENCE.md`	Declarative layered keybindings (`@opentui/keymap`)
Animation	`./references/animation/REFERENCE.md`	Timeline-based animations
Testing	`./references/testing/REFERENCE.md`	Test renderer and snapshots

Component Categories

Category	Entry File	Components
Text & Display	`./references/components/text-display.md`	text, ascii-font, image, time-to-first-draw, styled text, qr-code
Containers	`./references/components/containers.md`	box, scrollbox, scrollbar, embedded-terminal, borders
Inputs	`./references/components/inputs.md`	input, textarea, select, tab-select, slider
Code & Diff	`./references/components/code-diff.md`	code, line-number, diff, markdown, text-table

Additional Packages

Package	Description	Docs
`@opentui/keymap`	Layered keybinding/command engine (Bun or Node, no FFI)	`./references/keymap/REFERENCE.md`
`@opentui/qrcode`	QR code component	`./references/components/text-display.md`
`@opentui/ssh`	Serve a TUI over SSH	`./references/core/REFERENCE.md`
`@opentui/three`	Three.js WebGPU renderer (formerly `core/src/3d`)	upstream `packages/three`
`@opentui/examples`	Runnable examples (formerly `core/src/examples`)	upstream `packages/examples`

Core also ships loaded/streaming/captured Audio, native images, host and terminal clipboard services, and OSC desktop notifications.

Resources

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/examples/src Awesome List: https://github.com/msmps/awesome-opentui

FAQ

What does the opentui skill do?

OpenTUI skill for building terminal user interfaces with the Core, React, or Solid APIs. Use for any TUI task including components, layout, keyboard and keymap handling, animations, and testing.

How do I install opentui?

Run npx skills add https://github.com/msmps/opentui-skill --skill opentui in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/opentui/ (personal) or .claude/skills/opentui/ (project).

Which AI agents can use opentui?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is opentui safe to install?

Security partners have reviewed it: Gen Agent Trust Hub passed; Socket passed; Snyk passed; Runlayer passed; ZeroLeaks passed. As with any skill, read the SKILL.md and bundled scripts before installing.

Who maintains opentui?

It is published by msmps in msmps/opentui-skill. It has 64,464 recorded installs.

Source

msmps/opentui-skill $View on skills.sh

Works with

Claude CodeCodexCursorGitHub CopilotGemini CLIWindsurfClineOpenCodeRoo CodeGooseAmpKiro

Files 27 · 239.5 KB

SKILL.md9.8 KB
references/animation/REFERENCE.md7.4 KB
references/components/code-diff.md9.2 KB
references/components/containers.md10.8 KB
references/components/inputs.md12.5 KB
references/components/REFERENCE.md5.2 KB
references/components/text-display.md11.0 KB
references/core/api.md19.3 KB
references/core/configuration.md6.3 KB
references/core/gotchas.md8.3 KB
references/core/patterns.md8.6 KB
references/core/REFERENCE.md5.8 KB
references/keyboard/REFERENCE.md15.8 KB
references/keymap/REFERENCE.md4.7 KB
references/layout/patterns.md8.3 KB
references/layout/REFERENCE.md6.1 KB
references/react/api.md8.2 KB
references/react/configuration.md5.9 KB
references/react/gotchas.md8.3 KB
references/react/patterns.md9.7 KB
references/react/REFERENCE.md4.5 KB
references/solid/api.md9.5 KB
references/solid/configuration.md5.7 KB
references/solid/gotchas.md7.8 KB

+3 more files

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

Frontend & Design1M installs

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs

opentui

Install

Install

Describe the task

Review the result

Security audits

SKILL.md

OpenTUI Platform Skill

Critical Rules

How to Use This Skill

Reference File Structure

Reading Order

Example Paths

Runtime Notes

Quick Decision Trees

"Which framework should I use?"

"I need to display content"

"I need user input"

"I need layout/positioning"

"I need animations"

"I need to handle input"

"I need to test my TUI"

"I need platform capabilities (audio, images, clipboard, notifications, SSH)"

"I need to debug/troubleshoot"

Troubleshooting Index

Product Index

Frameworks

Cross-Cutting Concepts

Component Categories

Additional Packages

Resources

FAQ

Popular frontend & design skills

setup-matt-pocock-skills

frontend-design

hyperframes-animation

prototype

hyperframes-core

vercel-react-best-practices