opentui
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.
- Installs
- 73
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/connorads/dotfiles --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.
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-tuifor new projects. See frameworkREFERENCE.mdquick starts. create-tuioptions must come before arguments.bunx create-tui -t react my-appworks,bunx create-tui my-app -t reactdoes NOT.- Never call
process.exit()directly. Userenderer.destroy()(seecore/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.mdfor 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 - Animations ->
animation/REFERENCE.md - Troubleshooting ->
gotchas.md+testing/REFERENCE.md
- Building components ->
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) -> components/inputs.md (select)
├─ Tab-based selection (horizontal) -> components/inputs.md (tab-select)
└─ 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
├─ Focus management -> keyboard/REFERENCE.md
├─ Paste events -> keyboard/REFERENCE.md
├─ Mouse events -> components/containers.md
├─ Text selection & copy-on-select -> keyboard/REFERENCE.md (selection)
└─ Clipboard (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 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 | Keyboard input handling |
| 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, 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, markdown, text-table |
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/core/src/examples Awesome List: https://github.com/msmps/awesome-opentui
FAQ
What does the opentui skill do?
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.
How do I install opentui?
Run npx skills add https://github.com/connorads/dotfiles --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?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains opentui?
It is published by connorads in connorads/dotfiles. It has 73 recorded installs.
More from connorads/dotfiles
web-animation-design
connorads/dotfiles
Design and implement web animations that feel natural and purposeful. Use this skill proactively whenever the user asks questions about animations, motion, easing, timing, duration, springs, transitions, or animation performance. This includes questions about how to animate specific UI elements, which easing to use, animation best practices, or accessibility considerations for motion. Triggers on: easing, ease-out, ease-in, ease-in-out, cubic-bezier, bounce, spring physics, keyframes, transform, opacity, fade, slide, scale, hover effects, microinteractions, Framer Motion, React Spring, GSAP, CSS transitions, entrance/exit animations, page transitions, stagger, will-change, GPU acceleration, prefers-reduced-motion, modal/dropdown/tooltip/popover/drawer animations, gesture animations, drag interactions, button press feel, feels janky, make it smooth.
firecrawl
connorads/dotfiles
Search, scrape, and interact with the web via the Firecrawl CLI. Use this skill whenever the user wants to search the web, find articles, research a topic, look something up online, scrape a webpage, grab content from a URL, get data from a website, crawl documentation, download a site, or interact with pages that need clicks or logins. Also use when they say "fetch this page", "pull the content from", "get the page at https://", or reference external websites. This provides real-time web search with full page content and interact capabilities — beyond what Claude can do natively with built-in tools. Do NOT trigger for local file operations, git commands, deployments, or code editing tasks.
dependency-updater
connorads/dotfiles
Smart dependency management for any language. Auto-detects project type, applies safe updates automatically, prompts for major versions, diagnoses and fixes dependency issues.
payload-cms
connorads/dotfiles
Use when working with Payload CMS projects (payload.config.ts, collections, fields, hooks, access control, Payload API). Triggers on tasks involving: collection definitions, field configurations, hooks, access control, database queries, custom endpoints, authentication, file uploads, drafts/versions, live preview, or plugin development. Also use when debugging validation errors, security issues, relationship queries, transactions, or hook behavior.
hetzner-server
connorads/dotfiles
Create and manage Hetzner Cloud servers. Use when creating VPS/cloud servers, managing Hetzner infrastructure, or setting up dev/remote servers. Requires hcloud CLI.
homebrew-cask-authoring
connorads/dotfiles
Open the skill to read its SKILL.md instructions.
Popular frontend & design skills
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-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.
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.
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.
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.
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.