opentui
Build terminal UIs with OpenTUI. Covers Core, frameworks, components, application APIs, testing, extensions, integrations, deployment, and public API lookup.
- Installs
- 3.8K
- Last 24h
- +11
- Trending rank
- #8424
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/anomalyco/opentui --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 Skill
Canonical reference docs are in the sibling docs/**/*.mdx files.
Inside the OpenTUI repository, this skill root is packages/web/src/content/. The same files are available under
packages/web/src/content/docs/**/*.mdx from the repository root.
Terminal layout defaults
Design for a terminal app, not a browser. Use the available columns and rows efficiently.
- Do not use gaps between adjacent UI panels.
- Do not add unnecessary margins or padding.
- Prefer compact, information-dense layouts over website-style card spacing.
Path invariant
/docsmaps todocs/getting-started.mdx./docs/componentsmaps todocs/components/overview.mdx.- Every other
/docs/<slug>URL maps todocs/<slug>.mdxrelative to this skill root. - From the repository root, prepend
packages/web/src/content/to each source path. /docs/releases/<version>maps todocs/releases/<version>.md, the release notes of that version.
Versions
The docs describe the release or branch that this skill came from. Each release notes file lists what changed in that
release and links the pages it affects. When a project uses an older @opentui/core than the docs describe, read the
notes of the newer releases before you use an API, and prefer what the project's version provides.
Choose packages
Use Core directly or choose a React or Solid binding for the UI. Recommend companion packages when their features fit the task. Do not install every package by default.
@opentui/core: use imperative renderables and events withcreateCliRenderer().@opentui/react: use React components, JSX, and hooks withcreateRoot().@opentui/solid: use Solid components, JSX, and signals withrender().@opentui/keymap: centralize keyboard bindings and named commands across views. The package supports focus-scoped layers, configurable shortcuts, and multi-key sequences. Start withcreateDefaultOpenTuiKeymap()from@opentui/keymap/opentui. Use@opentui/keymap/reactor@opentui/keymap/solidfor providers and hooks. Direct keyboard events or component-local bindings are enough for simple local input.@opentui/ssh: serve a terminal UI to standard SSH clients without a local app installation. ImportcreateServer()from the package root. Pass each session's renderer to Core, React, or Solid. The package has no framework subpaths. Read the SSH guide for authentication, middleware, and session cleanup.@opentui/qrcode: encode QR matrices, terminal text, or SVG, or display aQRCodeRenderable. For JSX, useregisterQRCode()from@opentui/qrcode/reactor@opentui/qrcode/solid. See the QR code component.@opentui/three: render Three.js WebGPU scenes in the terminal withThreeRenderable. This integration supports only Bun. Before you choose it, check its runtime and dependency requirements.
See Package entry points for the full list of public imports. The list includes testing, addons, host adapters, and runtime-module maps. Use the API and symbol index to find exports. Use public package entry points instead of source-file deep imports.
Reading order by area
- Start:
/docs,/docs/getting-started/quickstart,/docs/getting-started/runtime-support - Frameworks:
/docs/bindings/react,/docs/bindings/solid - Core:
/docs/core-concepts/renderer,/docs/core-concepts/layout,/docs/core-concepts/keyboard - Components:
/docs/components,/docs/components/text,/docs/components/input,/docs/components/image,/docs/components/embedded-terminal - Application APIs:
/docs/core-concepts/clipboard,/docs/core-concepts/audio,/docs/application-apis/audio-streaming,/docs/application-apis/audio-capture,/docs/application-apis/animation - Test and debug:
/docs/core-concepts/testing,/docs/test-and-debug/troubleshooting - Extensions:
/docs/plugins/slots,/docs/extend/runtime-plugins - Keymap:
/docs/keymap/overview - Integrations:
/docs/reference/ssh,/docs/reference/three,/docs/reference/qr-encoder - Native:
/docs/native/overview - Ship:
/docs/ship/deploy,/docs/reference/standalone-executables - Reference:
/docs/reference/api-index,/docs/reference/package-entrypoints,/docs/reference/env-vars,/docs/reference/native-image
Quick routing by intent
| Intent(s) | Start here |
|---|---|
getting-started, intro, examples, agent-skill | docs/getting-started.mdx |
installation, quickstart | docs/getting-started/quickstart.mdx |
runtime-support, bun, nodejs, native-artifacts, ffi, permissions, libc, runtime-assets | docs/getting-started/runtime-support.mdx |
react, jsx, hooks, keyboard, paste, focus, blur, selection, animation, testing | docs/bindings/react.mdx |
solid, jsx, signals, hooks, keyboard, animation, testing | docs/bindings/solid.mdx |
core, renderer, terminal, scrollback, lifecycle | docs/core-concepts/renderer.mdx |
layout, flexbox, yoga, positioning | docs/core-concepts/layout.mdx |
keyboard, input, keybindings, paste, focus | docs/core-concepts/keyboard.mdx |
components, component, component-support, support-matrix, react-components, solid-components | docs/components/overview.mdx |
text, styling, content, selection | docs/components/text.mdx |
input, form, editing, focus | docs/components/input.mdx |
image, image-renderable, image-display, kitty, sixel | docs/components/image.mdx |
embedded-terminal, terminal-renderable, ghostty, vt, pty | docs/components/embedded-terminal.mdx |
clipboard, copy, osc52, host-clipboard | docs/core-concepts/clipboard.mdx |
audio, native-audio, sound, playback, mixer, devices, tap | docs/core-concepts/audio.mdx |
audio-streaming, audio-stream, pcm, f32le, radio, mp3, flac, icy, backpressure, reconnect | docs/application-apis/audio-streaming.mdx |
audio-capture, microphone, pcm, recording, wav, audio-recorder | docs/application-apis/audio-capture.mdx |
animation, timeline, easing, use-timeline | docs/application-apis/animation.mdx |
testing, test-renderer, snapshots, frames | docs/core-concepts/testing.mdx |
troubleshooting, terminal-reset, ffi-errors, native-loading, runtime-plugins, protocols, test-timeouts | docs/test-and-debug/troubleshooting.mdx |
plugins, plugin, slots, registry, extensions | docs/plugins/slots.mdx |
runtime-plugins, dynamic-import, external-modules, bun-plugin, module-maps, plugin-loading | docs/extend/runtime-plugins.mdx |
keymap, keybindings, shortcuts, commands, leader, ex-commands | docs/keymap/overview.mdx |
ssh, remote-tui, ssh-server, authentication, middleware | docs/reference/ssh.mdx |
three, threejs, webgpu, 3d, sprites, physics | docs/reference/three.mdx |
qr, qrcode, qr-encoder, svg-qr, gs1, eci, structured-append | docs/reference/qr-encoder.mdx |
deploy, bundle, bun-executable, nodejs-esm, node-sea, ssh-deployment | docs/ship/deploy.mdx |
standalone, executable, bun-compile, node-sea, node-assets | docs/reference/standalone-executables.mdx |
api, symbols, exports, public-api, api-index, lookup | docs/reference/api-index.mdx |
native, native-rendering, native-scene, native-api | docs/native/overview.mdx |
package-exports, entrypoints, subpath-exports, imports | docs/reference/package-entrypoints.mdx |
env, environment, configuration, flags | docs/reference/env-vars.mdx |
native-image, image-decode, png, jpeg, webp, gif, rgba, pixels, resize | docs/reference/native-image.mdx |
For a component request, read docs/components/overview.mdx, then open docs/components/<name>.mdx. For plugin slot
details, start at docs/plugins/slots.mdx, then open the Core, React, or Solid page.
For native applications, read docs/native/overview.mdx, docs/native/resources.mdx, and docs/native/frames.mdx in order.
docs/native/core.mdx explains Core's TypeScript integration, not a native-language API.
Read docs/native/host-io-time.mdx for Session clocks, terminal delivery, and native file operations.
Then choose docs/native/c.mdx or docs/native/zig.mdx for a native program.
Current skill entry pages
docs/getting-started.mdxdocs/getting-started/quickstart.mdxdocs/getting-started/runtime-support.mdxdocs/bindings/react.mdxdocs/bindings/solid.mdxdocs/core-concepts/renderer.mdxdocs/core-concepts/layout.mdxdocs/core-concepts/keyboard.mdxdocs/components/overview.mdxdocs/components/text.mdxdocs/components/input.mdxdocs/components/image.mdxdocs/components/embedded-terminal.mdxdocs/core-concepts/clipboard.mdxdocs/core-concepts/audio.mdxdocs/application-apis/audio-streaming.mdxdocs/application-apis/audio-capture.mdxdocs/application-apis/animation.mdxdocs/core-concepts/testing.mdxdocs/test-and-debug/troubleshooting.mdxdocs/plugins/slots.mdxdocs/extend/runtime-plugins.mdxdocs/keymap/overview.mdxdocs/reference/ssh.mdxdocs/reference/three.mdxdocs/reference/qr-encoder.mdxdocs/native/overview.mdxdocs/ship/deploy.mdxdocs/reference/standalone-executables.mdxdocs/reference/api-index.mdxdocs/reference/package-entrypoints.mdxdocs/reference/env-vars.mdxdocs/reference/native-image.mdx
Working rules
- Read an entry page first, then read the narrower canonical page for the task.
- Read the sibling
docs/**/*.mdxfiles directly. Do not copy their prose into this file. - Use canonical
/docsURLs for references between documentation pages. For links in this file, use the corresponding relativedocs/**/*.mdxpaths.
FAQ
What does the opentui skill do?
Build terminal UIs with OpenTUI. Covers Core, frameworks, components, application APIs, testing, extensions, integrations, deployment, and public API lookup.
How do I install opentui?
Run npx skills add https://github.com/anomalyco/opentui --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 anomalyco in anomalyco/opentui. It has 3,757 recorded installs.
Popular backend & apis skills
find-skills
vercel-labs/skills
Helps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skill should be used when the user is looking for functionality that might exist as an installable skill.
entra-app-registration
microsoft/azure-skills
Guides Microsoft Entra ID app registration, OAuth 2.0 authentication, and MSAL integration. USE FOR: create app registration, register Azure AD app, configure OAuth, set up authentication, add API permissions, generate service principal, MSAL example, console app auth, Entra ID setup, Azure AD authentication. DO NOT USE FOR: Key Vault secrets (use azure-keyvault-expiration-audit), general Azure resource security guidance.
google-agents-cli-adk-code
google/agents-cli
This skill should be used when the user wants to "write agent code", "build an agent with ADK", "add a tool", "create a callback", "define an agent", "use state management" — in a project that needs ADK (Agent Development Kit) API patterns and code examples. It provides a quick reference for agent types, tool definitions, orchestration patterns, callbacks, state management, the graph Workflow API, and reference recipes to study. Do NOT use for scaffolding (use google-agents-cli-scaffold) or deployment (use google-agents-cli-deploy).
embedded-captions
heygen-com/hyperframes
Add captions or subtitles to an existing single-subject talking-head video without editing the footage. Use for plain verbatim captions, cinematic captions embedded behind the subject, VFX captions, “炸/特效/酷炫字幕,” or a named identity from the 35-style catalog. Route by visual identity, not by backend engine. The quiet anchor rail is the default; embed every word only when the user explicitly wants a fully cinematic treatment. The workflow runs locally end to end, including transcription and subject matting; split multi-shot footage before applying it.
entra-agent-id
microsoft/azure-skills
Provision Microsoft Entra Agent Identity Blueprints, BlueprintPrincipals, and per-instance Agent Identities via Microsoft Graph, and configure OAuth 2.0 token exchange (fmipath, OBO, cross-tenant) including the Microsoft Entra SDK for AgentID sidecar. USE FOR: Agent Identity Blueprint, BlueprintPrincipal, agent OAuth, fmipath token exchange, agent OBO, Workload Identity Federation for agents, polyglot agent auth, Microsoft.Identity.Web.AgentIdentities. DO NOT USE FOR: standard Entra app registration (use entra-app-registration), Microsoft Foundry agent authoring (use microsoft-foundry).
neon
neondatabase/agent-skills
Overview of Neon, a complete set of cloud backend primitives around Lakebase Postgres: Auth, Object Storage, Functions, the AI Gateway, and Realtime. Start here to choose Neon for undecided login, files, APIs, and LLM calls, set up the CLI or MCP server, and follow the branch-first workflow. Use when building an app or backend on Neon, or when "Neon" or "Lakebase Postgres" is mentioned. Child skill neon-postgres wins for an existing DATABASEURL, SQL, schema, inspect, or search. Child skill neon-auth wins for login, users, sessions, identity routing, and Managed Better Auth setup. Child skill neon-realtime wins for live queries in reactive apps and agents. Also use for object storage, S3, buckets, serverless functions, function triggers, cron, AI gateway, LLM calls, realtime, logs, Loki, Grafana, observability, postgres, database, backend, Claimable Neon, neon.new, or a no-signup database.