npx skills add https://github.com/msmps/opentui-skill --skill opentui用于构建 OpenTUI 终端用户界面的综合技能。使用下面的决策树来找到合适的框架和组件，然后加载详细的参考文档。
在所有 OpenTUI 代码中遵循这些规则：
create-tui。 参见框架 REFERENCE.md 中的快速入门。create-tui 的选项必须在参数之前。 bunx create-tui -t react my-app 有效，bunx create-tui my-app -t react 无效。process.exit()。 使用 renderer.destroy()（参见 core/gotchas.md）。广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者，精准高效
components/text-display.md）。框架参考遵循 5 文件模式。跨领域概念是单文件指南。
./references/<framework>/ 中的每个框架包含：
| 文件 | 用途 | 何时阅读 |
|---|---|---|
REFERENCE.md | 概述、使用时机、快速入门 | 始终首先阅读 |
api.md | 运行时 API、组件、钩子 | 编写代码时 |
configuration.md | 设置、tsconfig、打包 | 配置项目时 |
patterns.md | 常见模式、最佳实践 | 实施指导 |
gotchas.md | 陷阱、限制、调试 | 故障排除时 |
./references/<concept>/ 中的跨领域概念以 REFERENCE.md 作为入口点。
REFERENCE.md 开始api.md + components/<category>.mdconfiguration.mdlayout/REFERENCE.mdkeyboard/REFERENCE.mdanimation/REFERENCE.mdgotchas.md + testing/REFERENCE.md./references/react/REFERENCE.md # 从这里开始使用 React
./references/react/api.md # React 组件和钩子
./references/solid/configuration.md # Solid 项目设置
./references/components/inputs.md # Input、Textarea、Select 文档
./references/core/gotchas.md # 核心调试技巧
OpenTUI 运行在 Bun 上，并使用 Zig 进行原生构建。有关运行时要求和构建指导，请阅读 ./references/core/gotchas.md。
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)
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)
├─ 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)
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
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
Animations?
├─ Timeline-based animations -> animation/REFERENCE.md
├─ Easing functions -> animation/REFERENCE.md
├─ Property transitions -> animation/REFERENCE.md
└─ Looping animations -> animation/REFERENCE.md
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 -> components/text-display.md
Testing?
├─ Snapshot testing -> testing/REFERENCE.md
├─ Interaction testing -> testing/REFERENCE.md
├─ Test renderer setup -> testing/REFERENCE.md
└─ Debugging tests -> testing/REFERENCE.md
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
core/gotchas.mdcomponents/text-display.mdkeyboard/REFERENCE.mdlayout/REFERENCE.mdtesting/REFERENCE.md关于组件命名差异和文本修饰符，请参见 components/REFERENCE.md。
| 框架 | 入口文件 | 描述 |
|---|---|---|
| Core | ./references/core/REFERENCE.md | 命令式 API，所有原语 |
| React | ./references/react/REFERENCE.md | 用于声明式 TUI 的 React 协调器 |
| Solid | ./references/solid/REFERENCE.md | 用于声明式 TUI 的 SolidJS 协调器 |
| 概念 | 入口文件 | 描述 |
|---|---|---|
| Layout | ./references/layout/REFERENCE.md | Yoga/Flexbox 布局系统 |
| Components | ./references/components/REFERENCE.md | 按类别划分的组件参考 |
| Keyboard | ./references/keyboard/REFERENCE.md | 键盘输入处理 |
| Animation | ./references/animation/REFERENCE.md | 基于时间线的动画 |
| Testing | ./references/testing/REFERENCE.md | 测试渲染器和快照 |
| 类别 | 入口文件 | 组件 |
|---|---|---|
| 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 |
仓库 : https://github.com/anomalyco/opentui 核心文档 : https://github.com/anomalyco/opentui/tree/main/packages/core/docs 示例 : https://github.com/anomalyco/opentui/tree/main/packages/core/src/examples Awesome 列表 : https://github.com/msmps/awesome-opentui
每周安装量
1.7K
仓库
GitHub Stars
189
首次出现
Jan 20, 2026
安全审计
安装于
opencode1.5K
codex1.4K
github-copilot1.3K
gemini-cli1.3K
amp1.2K
kimi-cli1.2K
Consolidated skill for building terminal user interfaces with OpenTUI. Use decision trees below to find the right framework and components, then load detailed references.
Follow these rules in all OpenTUI code:
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.process.exit() directly. Use renderer.destroy() (see core/gotchas.md).components/text-display.md).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 |
Cross-cutting concepts in ./references/<concept>/ have REFERENCE.md as the entry point.
REFERENCE.md for your chosen frameworkapi.md + components/<category>.mdconfiguration.mdlayout/REFERENCE.mdkeyboard/REFERENCE.mdanimation/REFERENCE.mdgotchas.md + testing/REFERENCE.md./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
OpenTUI runs on Bun and uses Zig for native builds. Read ./references/core/gotchas.md for runtime requirements and build guidance.
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)
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)
├─ 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)
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
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
Animations?
├─ Timeline-based animations -> animation/REFERENCE.md
├─ Easing functions -> animation/REFERENCE.md
├─ Property transitions -> animation/REFERENCE.md
└─ Looping animations -> animation/REFERENCE.md
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 -> components/text-display.md
Testing?
├─ Snapshot testing -> testing/REFERENCE.md
├─ Interaction testing -> testing/REFERENCE.md
├─ Test renderer setup -> testing/REFERENCE.md
└─ Debugging tests -> testing/REFERENCE.md
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
core/gotchas.mdcomponents/text-display.mdkeyboard/REFERENCE.mdlayout/REFERENCE.mdtesting/REFERENCE.mdFor component naming differences and text modifiers, see components/REFERENCE.md.
| 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 |
| 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 |
| 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 |
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
Weekly Installs
1.7K
Repository
GitHub Stars
189
First Seen
Jan 20, 2026
Security Audits
Gen Agent Trust HubWarnSocketPassSnykPass
Installed on
opencode1.5K
codex1.4K
github-copilot1.3K
gemini-cli1.3K
amp1.2K
kimi-cli1.2K
React 组合模式指南：Vercel 组件架构最佳实践，提升代码可维护性
102,200 周安装
| Pitfalls, limitations, debugging |
| Troubleshooting |
| Test renderer and snapshots |