メニュー
Build terminal UIs with OpenTUI. Covers the core API, native audio, keymaps, React and Solid bindings, components, layout, keyboard input, plugins, and testing.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | opentui |
| description | Build terminal UIs with OpenTUI. Covers the core API, native audio, keymaps, React and Solid bindings, components, layout, keyboard input, plugins, and testing. |
Canonical reference docs are authored once in sibling docs/**/*.mdx files.
Inside the OpenTUI repo, this skill root lives at packages/web/src/content/, so the same files are also visible at packages/web/src/content/docs/**/*.mdx.
bun create tui or bunx create-tui -t core my-appUse context7 to query OpenTUI docs when this skill content is insufficient. Resolve library name "opentui".
/docs/<slug> maps to docs/<slug>.mdx relative to this skill rootpackages/web/src/content/docs/<slug>.mdx/docs/getting-started/docs/core-concepts/renderer/docs/core-concepts/audio/docs/keymap/overview/docs/bindings/react/docs/bindings/solid/docs/components/text, /docs/components/input/docs/core-concepts/layout/docs/core-concepts/keyboard/docs/plugins/slots/docs/reference/env-vars| Intent(s) | Start here |
|---|---|
getting-started, installation, quickstart, intro | docs/getting-started.mdx |
core, renderer, terminal, scrollback, lifecycle | docs/core-concepts/renderer.mdx |
audio, native-audio, sound, playback, pcm, fft | docs/core-concepts/audio.mdx |
keymap, keybindings, shortcuts, commands, leader | docs/keymap/overview.mdx |
layout, flexbox, yoga, positioning | docs/core-concepts/layout.mdx |
keyboard, input, keybindings, paste, focus | docs/core-concepts/keyboard.mdx |
react, jsx, hooks, animation, testing | docs/bindings/react.mdx |
solid, signals, jsx, hooks, animation, testing | docs/bindings/solid.mdx |
plugins, plugin, slots, registry, extensions | docs/plugins/slots.mdx |
text, styling, content, selection | docs/components/text.mdx |
input, form, editing, focus | docs/components/input.mdx |
env, environment, configuration, flags | docs/reference/env-vars.mdx |
For concrete component requests, jump straight to docs/components/<name>.mdx after the relevant entry page. For plugin implementation details, narrow from docs/plugins/slots.mdx into docs/plugins/core.mdx, docs/plugins/react.mdx, or docs/plugins/solid.mdx.
docs/getting-started.mdxdocs/core-concepts/renderer.mdxdocs/core-concepts/audio.mdxdocs/keymap/overview.mdxdocs/core-concepts/layout.mdxdocs/core-concepts/keyboard.mdxdocs/bindings/react.mdxdocs/bindings/solid.mdxdocs/plugins/slots.mdxdocs/components/text.mdxdocs/components/input.mdxdocs/reference/env-vars.mdxdocs/**/*.mdx files directly instead of copying prose into this file./docs/... URLs when cross-referencing docs.process.exit() directly. Use renderer.destroy() first for clean terminal restore.create-tui options must come before arguments. bunx create-tui -t core my-app works; bunx create-tui my-app -t core does not.Packages: @opentui/core (imperative), @opentui/react, @opentui/solid, @opentui/three.
import { createCliRenderer } from "@opentui/core"
const renderer = await createCliRenderer({
exitOnCtrlC: true,
screenMode: "alternate-screen",
useMouse: false,
})
renderer.start()
renderer.destroy()
BoxRenderable (flexbox container), TextRenderable (styled text), SelectRenderable (scrollable list), InputRenderable (text input).
import { t, bold, fg, bg, italic, dim } from "@opentui/core"
const styled = t`${bold(fg("#58a6ff")("Title"))} ${fg("#8b949e")("subtitle")}`
renderer.suspend()
renderer.currentRenderBuffer.clear()
try {
const proc = Bun.spawn(["lazygit"], { cwd: dir, stdin: "inherit", stdout: "inherit", stderr: "inherit" })
await proc.exited
} finally {
renderer.currentRenderBuffer.clear()
renderer.resume()
renderer.requestRender()
}
bun build src/index.ts --compile --outfile dist/my-app
Execute broad changes one coherent, independently verifiable stage at a time. Use when work spans multiple independently reviewable changes, or when contracts, producer-consumer migrations, generated artefacts, or release packaging create an ordered multi-stage rollout; skip small single-purpose changes.
Commit workflow using the dot git-commit gateway in the maintainer's concise one-line style. Use only after the user explicitly requests a commit or push, including /commit or /commit-push. Never infer repeat authorisation from an earlier commit or push; never run raw git commit.
Patterns for working with git branches, remotes, diffs against the default branch, and rebases. Use when resolving rebase conflicts, continuing interactive rebases, amending commits, or any git operation that would open an interactive editor.
Investigate a topic against primary sources and return cited findings, comparing credible maintainer and contributor perspectives when judgement is involved. Use when the user wants a topic researched, docs, API, or spec facts gathered, an external library or GitHub behaviour verified, competing views compared, or reading legwork delegated to a background agent.
Ask minimal clarifying questions only when ambiguity materially changes implementation. Use for routine underspecification; do not use for user-requested light or full grilling, plan stress-testing, or broad design interviews.
Stress-test a plan or proposed change through focused one-question-at-a-time grilling, with light and full intensity. Use when the user says grill, grill me, grill me lightly, ask me a couple of questions, stress-test this plan, or wants question-led scrutiny before planning.