跳到主内容
智客 ZICQ
EN 登录 / 注册

技能库 智客分类：Agent 工作流 opentui

Opentui

OpenTUI技能用于与Core,React,或Solid API构建终端用户界面. 用于任何TUI任务,包括组件,布局,键盘和按键映射处理,动画,以及测试.

64591 安装量

官方网址：skills.sh

技能介绍

先看中文介绍；官方 description 原文单独保留，不改写 SKILL.md。

做什么

OpenTUI技能用于与Core,React,或Solid API构建终端用户界面. 用于任何TUI任务,包括组件,布局,键盘和按键映射处理,动画,以及测试.

何时用

,快速开始 ** 总是读第一 ** QQ

代理如何加载

按 Agent Skills 渐进披露：启动时只加载 name 与 description（约 100 token）；任务匹配后才读入整份 SKILL.md 正文；scripts/、references/、assets/ 仅在需要时再读。 本文件正文结构：OpenTUI Platform Skill、Critical Rules、How to Use This Skill、Reference File Structure、Reading Order、Example Paths。 其中含规范建议的小节：输入输出示例。

文件分析

文件分析：除 SKILL.md 外，正文引用了 references/react/REFERENCE.md、references/react/api.md、references/solid/configuration.md、references/components/inputs.md、references/core/gotchas.md、references/core/REFERENCE.md，属于带资源的技能包，这些文件按需再读。

官方 description（原文）

OpenTUI skill for building terminal user interfaces with the Core, React, or Solid APIs. Use for any TUI task including components, layout, keyboard and keymap handling, animations, and testing.

OpenTUI Platform SkillCritical RulesHow to Use This SkillReference File StructureReading OrderExample PathsRuntime NotesQuick Decision Trees"Which framework should I use?""I need to display content""I need user input""I need layout/positioning"

来源分类：skills.sh agent-skill

来源与网址

市场来源：skills.sh

GitHub 完整包

开源榜 Skill 分类

SKILL.md 与 Agent 调用

官方规范 ↗
name
opentui
description
OpenTUI skill for building terminal user interfaces with the Core, React, or Solid APIs. Use for any TUI task including components, layout, keyboard and keymap handling, animations, and testing.
  1. 发现技能客户端向 Agent 提供名称与描述目录。
  2. 匹配与调用用户指定或任务匹配后，载入 SKILL.md 指令。
  3. 按需加载按步骤读取参考文档、使用脚本与素材。
指令中引用的文件 · 10
  • references/react/REFERENCE.md
  • references/react/api.md
  • references/solid/configuration.md
  • references/components/inputs.md
  • references/core/gotchas.md
  • references/core/REFERENCE.md
  • references/solid/REFERENCE.md
  • references/layout/REFERENCE.md
  • references/components/REFERENCE.md
  • references/keyboard/REFERENCE.md

以下路径提取自原文；文件是否齐全请以来源仓库中的完整目录为准。

具体调用语法与可用工具以目标 Agent 客户端为准。 查看调用机制说明 ↗

安装这个技能

Skills CLI ↗

先选择目标 Agent 和安装范围，保留技能包的附属文件，安装后检查客户端能否发现该技能。

该技能引用了附属文件，请从来源获取完整目录；仅复制 SKILL.md 可能缺少依赖。

交给 Agent 安装

复制安装指令给支持 Agent Skills 的代理，确认其中的目标目录与客户端匹配。

把 Agent Skill「opentui」安装到我的项目：SKILL.md 原文与官方 description 见 https://zicq.com/zh/skills/skl-bd223b466b8f57e2-Opentui.html
请存为 .cursor/skills/opentui/SKILL.md 或 .claude/skills/opentui/SKILL.md，frontmatter 的 name 与 description 保持原样，不要改写。
该技能还带 scripts/、references/、assets/ 等文件，请从 https://github.com/msmps/opentui-skill 取完整目录，不要只建一个 SKILL.md。

GitHub 完整包 ↗

终端安装 · Skills CLI

需要 Node.js 与 npx。先查看仓库技能列表，确认实际名称。

npx skills add 'https://github.com/msmps/opentui-skill' --list

npx skills add 'https://github.com/msmps/opentui-skill' --skill 'opentui'

CLI 会交互选择目标 Agent，默认安装到项目；用户级安装使用 -g。先通过查看命令核对仓库内容，再用 npx skills list 检查已安装技能。

阅读排版
--- name: opentui description: OpenTUI skill for building terminal user interfaces with the Core, React, or Solid APIs. Use for any TUI task including components, layout, keyboard and keymap handling, animations, and testing. metadata: references: core, react, solid, components, layout, keyboard, keymap, animation, testing --- # 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:** 1. **Use `create-tui` for new projects.** See framework `REFERENCE.md` quick starts. 2. **`create-tui` options must come before arguments.** `bunx create-tui -t react my-app` works, `bunx create-tui my-app -t react` does NOT. 3. **Never call `process.exit()` directly.** Use `renderer.destroy()` (see `core/gotchas.md`). 4. **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//` 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//` have `REFERENCE.md` as the entry point. ### Reading Order 1. Start with `REFERENCE.md` for your chosen framework 2. Then read additional files relevant to your task: - Building components -> `api.md` + `components/.md` - Setting up project -> `configuration.md` - Layout/positioning -> `layout/REFERENCE.md` - Keyboard/input handling -> `keyboard/REFERENCE.md` - Layered keybindings/commands -> `keymap/REFERENCE.md` - Animations -> `animation/REFERENCE.md` - Troubleshooting -> `gotchas.md` + `testing/REFERENCE.md` ### 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) ├─ Standalone scrollbar -> components/containers.md (scrollbar) ├─ ASCII art banner/title -> components/text-display.md (ascii-font) ├─ PNG/JPEG/WebP/GIF image -> components/text-display.md (image) ├─ First-draw diagnostic -> components/text-display.md (time-to-first-draw) ├─ QR code -> components/text-display.md (qr-code, @opentui/qrcode) ├─ Embedded child terminal/VT output -> components/containers.md (Core only) ├─ Data table with borders/wrapping -> components/code-diff.md (TextTable) ├─ Code with syntax highlighting -> components/code-diff.md ├─ Diff viewer (unified/split, hunk nav) -> 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) ├─ Value slider -> components/inputs.md (slider) ├─ Declarative/layered keybindings -> keymap/REFERENCE.md (@opentui/keymap) └─ 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 ├─ Layered bindings, commands, leader keys -> keymap/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) └─ Host/terminal clipboard service or 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 platform capabilities (audio, images, clipboard, notifications, SSH)" ``` Platform capability? ├─ Play loaded sound or MP3/FLAC stream -> core/api.md (Audio) ├─ Capture microphone PCM / record WAV -> core/api.md (Audio) ├─ Decode, transform, or display images -> components/text-display.md (image) ├─ Read/write host or terminal clipboard -> keyboard/REFERENCE.md (clipboard) ├─ Desktop notifications (OSC 9/777/99) -> core/api.md (triggerNotification) ├─ Custom stdin/stdout (PTY, xterm.js) -> core/api.md (createCliRenderer) └─ Serve a TUI over SSH -> core/REFERENCE.md (@opentui/ssh) ``` ### "I need to debug/troubleshoot" ``` Troubleshooting? ├─ Runtime errors, crashes -> /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` | Low-level keyboard input handling | | Keymap | `./references/keymap/REFERENCE.md` | Declarative layered keybindings (`@opentui/keymap`) | | 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, image, time-to-first-draw, styled text, qr-code | | Containers | `./references/components/containers.md` | box, scrollbox, scrollbar, embedded-terminal, borders | | Inputs | `./references/components/inputs.md` | input, textarea, select, tab-select, slider | | Code & Diff | `./references/components/code-diff.md` | code, line-number, diff, markdown, text-table | ### Additional Packages | Package | Description | Docs | |---------|-------------|------| | `@opentui/keymap` | Layered keybinding/command engine (Bun or Node, no FFI) | `./references/keymap/REFERENCE.md` | | `@opentui/qrcode` | QR code component | `./references/components/text-display.md` | | `@opentui/ssh` | Serve a TUI over SSH | `./references/core/REFERENCE.md` | | `@opentui/three` | Three.js WebGPU renderer (formerly `core/src/3d`) | upstream `packages/three` | | `@opentui/examples` | Runnable examples (formerly `core/src/examples`) | upstream `packages/examples` | Core also ships loaded/streaming/captured **Audio**, native **images**, host and terminal **clipboard** services, and OSC desktop **notifications**. ## 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/examples/src **Awesome List**: https://github.com/msmps/awesome-opentui

相关技能

Agent 工作流

Skill Creator

创造有效技能指南。 当用户想创造出新的技能(或更新现有的技能),以专业知识,工作流程,或工具集成来扩展克洛德的能力时,应该使用这种技能.

Agent 工作流

Clawdhub

使用ClawdHub CLI搜索,安装,更新并发布从taladhub.com的代理技能. 需要获取苍蝇上的新技能时使用,将安装的技能同步到最新版本或特定版本,或者发布 npm-instainddhub CLI 的新/更新的技能文件夹.

Agent 工作流

Agent Team Orchestration

管弦乐团多代理团队,任务设定周期,交接协议,审查工作流程. 使用时间: (1)建立2+特派员队伍,具有不同专业,(2)确定任务路线和生命周期(收录框_ spec_建设_审查_完成),(3)在特派员之间制定交接协议,(4)建立审查和质量关口,(5)管理特派员之间的交流和文物共享.

Agent 工作流

Superpowers

Spec-first,TDD,子代理驱动的软件开发工作流程. 当:(1)构建任何新功能或应用——触发脑暴_计划_子代理执行回路,(2)调试出一个bug或测试失败——触发系统性的根起过程,(3)用户说"让我们构建","帮助我计划","我想添加X",或"这个被打破",(4)完成一个功…