opentui — Claude Code skill: OpenTUI reference

Q: How to install opentui in Claude Code?

Run `npx skills add anomalyco/opentui --skill content -a claude-code`, then reference the path `.claude/skills/content/SKILL.md` in your agent config.

What opentui does

The skill provides the agent with the full OpenTUI reference — a library for building terminal UIs. It covers packages @opentui/core, @opentui/react, @opentui/solid, @opentui/keymap for keyboard bindings, @opentui/ssh for remote sessions, @opentui/qrcode and @opentui/three for rendering Three.js scenes. Documented components include Text, Input, Image, embedded terminal and QR code, clipboard and audio APIs, animation, testing, and standalone executable build.

The skill routes by intent: getting-started, react, core, components, keyboard, deployment. For each /docs/<slug> URL it points to docs/<slug>.mdx in the repository. This lets the agent quickly find the right section by keyword or task. It accounts for versions: if the project uses an older @opentui/core, the skill will suggest checking release notes before using a newer API.

One limitation: @opentui/three works only in Bun. Layout rules target terminals — no gaps between panels, dense arrangement instead of browser card spacing.

What it helps with

look up OpenTUI API and component documentation
navigate OpenTUI package structure
check OpenTUI version compatibility in a project
find React and Solid component examples for terminals
learn how to set up an SSH server or keymap in OpenTUI

Example prompts for the agent

How do I create a terminal UI with OpenTUI React?
Show me an OpenTUI Input component example
What's needed for an OpenTUI SSH server?

How to install opentui

1Skills CLI (Vercel)

npx skills add anomalyco/opentui --skill opentui -a claude-code

npx skills add anomalyco/opentui --skill content -a claude-code

2Manually: put the files in place

~/.claude/skills/content/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/content/

1Skills CLI (Vercel)

npx skills add anomalyco/opentui --skill content -a codex

2Manually: put the files in place

.agents/skills/content/SKILL.md

For all projects use ~/.agents/skills/

1Skills CLI (Vercel)

npx skills add anomalyco/opentui --skill content -a cursor

2Manually: put the files in place

.cursor/skills/content/SKILL.md

Cursor also reads .agents/skills/ and .claude/skills/

1GitHub CLI

gh skill install anomalyco/opentui content

2Manually: put the files in place

.github/skills/content/SKILL.md

1Skills CLI (Vercel)

npx skills add anomalyco/opentui --skill content -a gemini-cli

2Platform CLI

gemini skills install https://github.com/anomalyco/opentui --path packages/web/src/content

Manually: put the files in place

.devin/skills/content/SKILL.md

The legacy .windsurf/skills/ path still works

Skills CLI (Vercel)

npx skills add anomalyco/opentui --skill content -a opencode

Questions about opentui

How to install opentui in Claude Code?

Run npx skills add anomalyco/opentui --skill content -a claude-code, then reference the path .claude/skills/content/SKILL.md in your agent config.

What does the opentui skill do?

It gives the agent the OpenTUI reference: documentation for Core, React and Solid bindings, components, clipboard and audio APIs, testing and deployment. The OpenTUI packages themselves are installed separately.

Are all OpenTUI packages included in the skill?

The skill is documentation; you install packages in your project separately. It covers @opentui/core, @opentui/react, @opentui/solid, @opentui/keymap, @opentui/ssh, @opentui/qrcode and @opentui/three (Bun only).

Source text

SKILL.md · MIT

---
name: opentui
description: Build terminal UIs with OpenTUI. Covers Core, frameworks, components, application APIs, testing, extensions, integrations, deployment, and public API lookup.
---

# 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

- `/docs` maps to `docs/getting-started.mdx`.
- `/docs/components` maps to `docs/components/overview.mdx`.
- Every other `/docs/<slug>` URL maps to `docs/<slug>.mdx` relative to this skill root.
- From the repository root, prepend `packages/web/src/content/` to each source path.
- `/docs/releases/<version>` maps to `docs/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`](docs/core-concepts/renderer.mdx): use imperative renderables and events with `createCliRenderer()`.
- [`@opentui/react`](docs/bindings/react.mdx): use React components, JSX, and hooks with `createRoot()`.
- [`@opentui/solid`](docs/bindings/solid.mdx): use Solid components, JSX, and signals with `render()`.
- [`@opentui/keymap`](docs/keymap/overview.mdx): centralize keyboard bindings and named commands across views.
  The package supports focus-scoped layers, configurable shortcuts, and multi-key sequences.
  Start with `createDefaultOpenTuiKeymap()` from `@opentui/keymap/opentui`.
  Use `@opentui/keymap/react` or `@opentui/keymap/solid` for providers and hooks.
  [Direct keyboard events](docs/core-concepts/keyboard.mdx) or component-local bindings are enough for simple local input.
- [`@opentui/ssh`](docs/reference/ssh.mdx): serve a terminal UI to standard SSH clients without a local app installation.
  Import `createServer()` 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`](docs/reference/qr-encoder.mdx): encode QR matrices, terminal text, or SVG, or display a
  `QRCodeRenderable`. For JSX, use `registerQRCode()` from `@opentui/qrcode/react` or `@opentui/qrcode/solid`. See the
  [QR code component](docs/components/qr-code.mdx).
- [`@opentui/three`](docs/reference/three.mdx): render Three.js WebGPU scenes in the terminal with `ThreeRenderable`.
  This integration supports only Bun. Before you choose it, check its runtime and dependency requirements.

See [Package entry points](docs/reference/package-entrypoints.mdx) for the full list of public imports.
The list includes testing, addons, host adapters, and runtime-module maps.
Use the [API and symbol index](docs/reference/api-index.mdx) 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.mdx`
- `docs/getting-started/quickstart.mdx`
- `docs/getting-started/runtime-support.mdx`
- `docs/bindings/react.mdx`
- `docs/bindings/solid.mdx`
- `docs/core-concepts/renderer.mdx`
- `docs/core-concepts/layout.mdx`
- `docs/core-concepts/keyboard.mdx`
- `docs/components/overview.mdx`
- `docs/components/text.mdx`
- `docs/components/input.mdx`
- `docs/components/image.mdx`
- `docs/components/embedded-terminal.mdx`
- `docs/core-concepts/clipboard.mdx`
- `docs/core-concepts/audio.mdx`
- `docs/application-apis/audio-streaming.mdx`
- `docs/application-apis/audio-capture.mdx`
- `docs/application-apis/animation.mdx`
- `docs/core-concepts/testing.mdx`
- `docs/test-and-debug/troubleshooting.mdx`
- `docs/plugins/slots.mdx`
- `docs/extend/runtime-plugins.mdx`
- `docs/keymap/overview.mdx`
- `docs/reference/ssh.mdx`
- `docs/reference/three.mdx`
- `docs/reference/qr-encoder.mdx`
- `docs/native/overview.mdx`
- `docs/ship/deploy.mdx`
- `docs/reference/standalone-executables.mdx`
- `docs/reference/api-index.mdx`
- `docs/reference/package-entrypoints.mdx`
- `docs/reference/env-vars.mdx`
- `docs/reference/native-image.mdx`

## Working rules

- Read an entry page first, then read the narrower canonical page for the task.
- Read the sibling `docs/**/*.mdx` files directly. Do not copy their prose into this file.
- Use canonical `/docs` URLs for references between documentation pages.
  For links in this file, use the corresponding relative `docs/**/*.mdx` paths.

opentui — Claude Code skill: OpenTUI reference, how to install

What opentui does

What it helps with

Example prompts for the agent

How to install opentui

Similar

Questions about opentui

Source text

See also