dimitrigilbert/ai-skills
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.
5 skills
This skill helps you scaffold OpenTUI projects with templates, examples, and best practices to accelerate learning and production-ready setups.
This skill helps you sculpt authentic human-sounding writing by removing AI markers and injecting personality during review, editing, or creation.
This skill provides expert OpenTUI core development guidance, enabling you to build, style, animate, and debug terminal UIs with vanilla TypeScript.
This skill helps AI agents interact with OpenRouter's unified API to choose models, stream responses, call tools, and handle errors efficiently.
This skill helps you create, verify, and improve AGENTS.md files with progressive disclosure and concise root guidance.
