opentui-projects_skill

This skill helps you scaffold OpenTUI projects with templates, examples, and best practices to accelerate learning and production-ready setups.

TypeScript

0

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill dimitrigilbert/ai-skills --skill opentui-projects

SKILL.md10.5 KB

Overview

This skill provides expert assistance for scaffolding OpenTUI projects, selecting templates, and exploring examples and learning paths. It helps you bootstrap apps, build reusable components, and follow best practices for terminal UI development with TypeScript. Use it to accelerate project setup, pick appropriate templates, and learn progressive skills from beginner to advanced.

How this skill works

I guide you through quick-start commands (create-tui), manual project structure, and recommended tsconfig/package.json settings. I show template code for minimal apps, CLI tools, dashboards, forms, and components (Button, Modal) and explain how to run official examples. I also provide curated learning paths and practical best-practice recommendations to prepare projects for production.

When to use it

When you need a fast project scaffold or want to use create-tui to bootstrap an app.
When choosing a template (minimal, CLI, dashboard, form, editor, game) for a specific use case.
When building reusable components like buttons, modals, or layout groups.
When learning OpenTUI incrementally via structured beginner→advanced paths.
When exploring example apps to copy patterns or run demos locally.

Best practices

Organize src into clear folders: app, components, hooks, stores, utils, types.
Keep components single-responsibility and compose complex UI from small pieces.
Define clear TypeScript props interfaces and use strict tsconfig for safety.
Memoize expensive computations and optimize list rendering to reduce re-renders.
Provide error handling and test components with realistic data before production.

Example use cases

Create a minimal hello-world terminal UI to learn core renderables and layout.
Build a CLI tool with menu and boxed sections using BoxRenderable and TextRenderable.
Assemble a multi-panel dashboard combining GroupRenderable and BoxRenderable.
Create a form-based data entry app with InputRenderable, focus management and submit handling.
Develop reusable UI primitives (Button, Modal) and export getRenderable() for composition.

FAQ

Use the recommended command: bun create tui my-app or npm create tui my-app, optionally passing --template <name> like dashboard or form-app.

What core files should I include in a manual setup?

At minimum include package.json, tsconfig.json, and src/main.tsx plus folders for components and utils. Use createCliRenderer and createRoot in main.tsx to bootstrap the app.

Which template is best for building an interactive form?

Use the form-app template. It demonstrates InputRenderable, layout with GroupRenderable, focus handling, and a submit control.