opentui

Name: opentui
Author: msmps

bymsmps· 1 skill

Installs

53k

Stars

224

Forks

How to install opentui?

msmps/opentui-skill/opentui

$npx -y skills add msmps/opentui-skill --skill opentui

Installs into the current project.

›Prefer a prompt? Paste this to your agent

Use this skill

Run `npx skills use "https://github.com/msmps/opentui-skill" --skill "msmps/opentui-skill/opentui"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.

Use the whole pack

Use the skills in "https://github.com/msmps/opentui-skill" that are relevant to the current task. Run `npx skills add "https://github.com/msmps/opentui-skill"` and select the relevant skills, then follow their instructions.

Files · 1

View on GitHub

SKILL.md

1	# OpenTUI Platform Skill
2
3	Consolidated skill for building terminal user interfaces with OpenTUI. Use decision trees below to find the right framework and components, then load detailed references.
4
5	## Critical Rules
6
7	Follow these rules in all OpenTUI code:
8
9	1. Use `create-tui` for new projects. See framework `REFERENCE.md` quick starts.
10	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.
11	3. Never call `process.exit()` directly. Use `renderer.destroy()` (see `core/gotchas.md`).
12	4. Text styling requires nested tags in React/Solid. Use modifier elements, not props (see `components/text-display.md`).
13
14	## How to Use This Skill
15
16	### Reference File Structure
17
18	Framework references follow a 5-file pattern. Cross-cutting concepts are single-file guides.
19
20	Each framework in `./references/<framework>/` contains:
21
22	\| File \| Purpose \| When to Read \|
23	\|------\|---------\|--------------\|
24	\| `REFERENCE.md` \| Overview, when to use, quick start \| Always read first \|
25	\| `api.md` \| Runtime API, components, hooks \| Writing code \|
26	\| `configuration.md` \| Setup, tsconfig, bundling \| Configuring a project \|
27	\| `patterns.md` \| Common patterns, best practices \| Implementation guidance \|
28	\| `gotchas.md` \| Pitfalls, limitations, debugging \| Troubleshooting \|
29
30	Cross-cutting concepts in `./references/<concept>/` have `REFERENCE.md` as the entry point.
31
32	### Reading Order
33
34	1. Start with `REFERENCE.md` for your chosen framework
35	2. Then read additional files relevant to your task:
36	- Building components -> `api.md` + `components/<category>.md`
37	- Setting up project -> `configuration.md`
38	- Layout/positioning -> `layout/REFERENCE.md`
39	- Keyboard/input handling -> `keyboard/REFERENCE.md`
40	- Layered keybindings/commands -> `keymap/REFERENCE.md`
41	- Animations -> `animation/REFERENCE.md`
42	- Troubleshooting -> `gotchas.md` + `testing/REFERENCE.md`
43
44	### Example Paths
45
46	```
47	./references/react/REFERENCE.md # Start here for React
48	./references/react/api.md # React components and hooks
49	./references/solid/configuration.md # Solid project setup
50	./references/components/inputs.md # Input, Textarea, Select docs
51	./references/core/gotchas.md # Core debugging tips
52	```
53
54	### Runtime Notes
55
56	OpenTUI runs on Bun and uses Zig for native builds. Read `./references/core/gotchas.md` for runtime requirements and build guidance.
57
58	## Quick Decision Trees
59
60	### "Which framework should I use?"
61
62	```
63	Which framework?
64	├─ I want full control, maximum performance, no framework overhead
65	│ └─ core/ (imperative API)
66	├─ I know React, want familiar component patterns
67	│ └─ react/ (React reconciler)
68	├─ I want fine-grained reactivity, optimal re-renders
69	│ └─ solid/ (Solid reconciler)
70	└─ I'm building a library/framework on top of OpenTUI
71	└─ core/ (imperative API)
72	```
73
74	### "I need to display content"
75
76	```
77	Display content?
78	├─ Plain or styled text -> components/text-display.md
79	├─ Container with borders/background -> components/containers.md
80	├─ Scrollable content area -> components/containers.md (scrollbox)
81	├─ Standalone scrollbar -> components/containers.md (scrollbar)
82	├─ ASCII art banner/title -> components/text-display.md (ascii-font)
83	├─ QR code -> components/text-display.md (qr-code, @opentui/qrcode)
84	├─ Data table with borders/wrapping -> components/code-diff.md (TextTable)
85	├─ Code with syntax highlighting -> components/code-diff.md
86	├─ Diff viewer (unified/split, hunk nav) -> components/code-diff.md
87	├─ Line numbers with diagnostics -> components/code-diff.md
88	└─ Markdown content (streaming) -> components/code-diff.md (markdown)
89	```
90
91	### "I need user input"
92
93	```
94	User input?
95	├─ Single-line text field -> components/inputs.md (input)
96	├─ Multi-line text editor -> components/inputs.md (textarea)
97	├─ Select from a list (vertical) -> components/inputs.md (select)
98	├─ Tab-based selection (horizontal) -> components/inputs.md (tab-select)
99	├─ Value slider -> components/inputs.md (slider)
100	├─ Declarative/layered keybindings -> keymap/REFERENCE.md (@opentui/keymap)
101	└─ Custom keyboard shortcuts -> keyboard/REFERENCE.md
102	```
103
104	### "I need layout/positioning"
105
106	```
107	Layout?
108	├─ Flexbox-style layouts (row, column, wrap) -> layout/REFERENCE.md
109	├─ Absolute positioning -> layout/patterns.md
110	├─ Responsive to terminal size -> layout/patterns.md
111	├─ Centering content -> layout/patterns.md
112	└─ Complex nested layouts -> layout/patterns.md
113	```
114
115	### "I need animations"
116
117	```
118	Animations?
119	├─ Timeline-based animations -> animation/REFERENCE.md
120	├─ Easing functions -> animation/REFERENCE.md
121	├─ Property transitions -> animation/REFERENCE.md
122	└─ Looping animations -> animation/REFERENCE.md
123	```
124
125	### "I need to handle input"
126
127	```
128	Input handling?
129	├─ Keyboard events (keypress, release) -> keyboard/REFERENCE.md
130	├─ Layered bindings, commands, leader keys -> keymap/REFERENCE.md
131	├─ Focus management -> keyboard/REFERENCE.md
132	├─ Paste events -> keyboard/REFERENCE.md
133	├─ Mouse events -> components/containers.md
134	├─ Text selection & copy-on-select -> keyboard/REFERENCE.md (selection)
135	└─ Clipboard (OSC 52) -> keyboard/REFERENCE.md (clipboard)
136	```
137
138	### "I need to test my TUI"
139
140	```
141	Testing?
142	├─ Snapshot testing -> testing/REFERENCE.md
143	├─ Interaction testing -> testing/REFERENCE.md
144	├─ Test renderer setup -> testing/REFERENCE.md
145	└─ Debugging tests -> testing/REFERENCE.md
146	```
147
148	### "I need platform capabilities (audio, notifications, SSH)"
149
150	```
151	Platform capability?
152	├─ Play sound / native audio -> core/api.md (Audio)
153	├─ Desktop notifications (OSC 9/777/99) -> core/api.md (triggerNotification)
154	├─ Custom stdin/stdout (PTY, xterm.js) -> core/api.md (createCliRenderer)
155	└─ Serve a TUI over SSH -> core/REFERENCE.md (@opentui/ssh)
156	```
157
158	### "I need to debug/troubleshoot"
159
160	```
161	Troubleshooting?
162	├─ Runtime errors, crashes -> <framework>/gotchas.md
163	├─ Layout issues -> layout/REFERENCE.md + layout/patterns.md
164	├─ Input/focus issues -> keyboard/REFERENCE.md
165	└─ Repro + regression tests -> testing/REFERENCE.md
166	```
167
168	### Troubleshooting Index
169
170	- Terminal cleanup, crashes -> `core/gotchas.md`
171	- Text styling not applying -> `components/text-display.md`
172	- Input focus/shortcuts -> `keyboard/REFERENCE.md`
173	- Layout misalignment -> `layout/REFERENCE.md`
174	- Flaky snapshots -> `testing/REFERENCE.md`
175
176	For component naming differences and text modifiers, see `components/REFERENCE.md`.
177
178	## Product Index
179
180	### Frameworks
181	\| Framework \| Entry File \| Description \|
182	\|-----------\|------------\|-------------\|
183	\| Core \| `./references/core/REFERENCE.md` \| Imperative API, all primitives \|
184	\| React \| `./references/react/REFERENCE.md` \| React reconciler for declarative TUI \|
185	\| Solid \| `./references/solid/REFERENCE.md` \| SolidJS reconciler for declarative TUI \|
186
187	### Cross-Cutting Concepts
188	\| Concept \| Entry File \| Description \|
189	\|---------\|------------\|-------------\|
190	\| Layout \| `./references/layout/REFERENCE.md` \| Yoga/Flexbox layout system \|
191	\| Components \| `./references/components/REFERENCE.md` \| Component reference by category \|
192	\| Keyboard \| `./references/keyboard/REFERENCE.md` \| Low-level keyboard input handling \|
193	\| Keymap \| `./references/keymap/REFERENCE.md` \| Declarative layered keybindings (`@opentui/keymap`) \|
194	\| Animation \| `./references/animation/REFERENCE.md` \| Timeline-based animations \|
195	\| Testing \| `./references/testing/REFERENCE.md` \| Test renderer and snapshots \|
196
197	### Component Categories
198	\| Category \| Entry File \| Components \|
199	\|----------\|------------\|------------\|
200	\| Text & Display \| `./references/components/text-display.md` \| text, ascii-font, styled text, qr-code \|
201	\| Containers \| `./references/components/containers.md` \| box, scrollbox, scrollbar, borders \|
202	\| Inputs \| `./references/components/inputs.md` \| input, textarea, select, tab-select, slider \|
203	\| Code & Diff \| `./references/components/code-diff.md` \| code, line-number, diff, markdown, text-table \|
204
205	### Additional Packages
206	\| Package \| Description \| Docs \|
207	\|---------\|-------------\|------\|
208	\| `@opentui/keymap` \| Layered keybinding/command engine (Bun or Node, no FFI) \| `./references/keymap/REFERENCE.md` \|
209	\| `@opentui/qrcode` \| QR code component \| `./references/components/text-display.md` \|
210	\| `@opentui/ssh` \| Serve a TUI over SSH \| `./references/core/REFERENCE.md` \|
211	\| `@opentui/three` \| Three.js WebGPU renderer (formerly `core/src/3d`) \| upstream `packages/three` \|
212	\| `@opentui/examples` \| Runnable examples (formerly `core/src/examples`) \| upstream `packages/examples` \|
213
214	Core also ships a native Audio engine and OSC desktop notifications — see `./references/core/api.md`.
215
216	## Resources
217
218	Repository: https://github.com/anomalyco/opentui
219	Core Docs: https://github.com/anomalyco/opentui/tree/main/packages/core/docs
220	Examples: https://github.com/anomalyco/opentui/tree/main/packages/examples/src
221	Awesome List: https://github.com/msmps/awesome-opentui

6 picks

Type

Run `npx skills use "https://github.com/msmps/opentui-skill" --skill "msmps/opentui-skill/opentui"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.

Use the skills in "https://github.com/msmps/opentui-skill" that are relevant to the current task. Run `npx skills add "https://github.com/msmps/opentui-skill"` and select the relevant skills, then follow their instructions.

opentui

How to install opentui?

Related

opentui

How to install opentui?

Related