opentui_skill

Overview

This skill provides expert guidance for OpenTUI core development using the imperative API with vanilla TypeScript. It focuses on component creation, layout with Yoga, input handling, styling, animations, and debugging to build fast, accessible terminal UIs. Use it when you need low-level control and performance without a framework layer.

How this skill works

I inspect common OpenTUI primitives like BoxRenderable, TextRenderable, GroupRenderable, InputRenderable, SelectRenderable, ScrollBoxRenderable, and CodeRenderable, and explain how to compose them. I demonstrate layout via Yoga properties, wiring keyboard and component events, applying color and style objects, orchestrating Timeline animations, and enabling in-terminal debugging overlays. Examples use createCliRenderer and show event loops, lifecycle, and render triggers.

When to use it

• Building a terminal UI with vanilla TypeScript and OpenTUI core
• Creating custom low-level components or layouts with Yoga flexbox
• Implementing keyboard-driven input, forms, and focus management
• Animating style and color transitions with Timeline
• Debugging render cycles and in-terminal console overlays

Best practices

• Compose small renderables (Text/Box/Group) and keep each component single-responsibility
• Drive layout with Yoga styles and explicit width/height to avoid layout thrash
• Listen for renderer "key" events for global shortcuts and component events for local input
• Call renderer.render() inside animation onUpdate hooks to apply visual updates
• Use Color objects or parseColor for consistent theming and avoid recreating colors per frame

Example use cases

• Create a centered form: GroupRenderable with column flex, BoxRenderable for fields, InputRenderable for text entry and submit handling
• Build a scrollable log viewer: ScrollBoxRenderable hosting dynamic TextRenderable lines and keyboard scroll bindings
• Implement an interactive dropdown: SelectRenderable with keyboard navigation and change/submit handlers
• Animate a status panel: Timeline transitions for backgroundColor and borderStyle with onUpdate rendering
• Expose a debug overlay: attach consoleOverlay() so console.log appears inside the terminal UI