@skillkit/tui

@skillkit/tui

Interactive terminal UI for SkillKit - browse, install, translate, and manage skills visually in your terminal.

Requirements

• Bun runtime (>=1.2.0) - Required for OpenTUI rendering
• Terminal with 80x24 minimum (120x40 recommended)

Install Bun: https://bun.sh

Installation

npm install -g skillkit

Quick Start

# Launch TUI with Bun
bun skillkit ui

# Or via pnpm in monorepo
pnpm ui

Features

• Monochromatic Design - Clean B&W theme with colored accents
• Animated UI - Smooth entrance animations and transitions
• Browse Skills - Explore skill repositories with search and filtering
• Smart Recommendations - AI-powered skill suggestions with match scores
• Cross-Agent Translation - Convert skills between 32 agent formats
• Team Collaboration - Share and sync skills across teams
• Responsive Design - Adapts to any terminal size

Keyboard Shortcuts

Navigation

Key	Screen
h	Home
b	Browse skills
m	Marketplace
r	Recommendations
i	Installed skills
s	Sync settings

Actions

Key	Screen
t	Translate skills
w	Workflows
x	Execute
n	Plan
y	History

Team & Config

Key	Screen
a	Team
c	Context
e	Memory
p	Plugins
o	Methodology
,	Settings

Global

Key	Action
/	Help screen
esc	Go back / Home
q	Quit
j/k	Navigate lists
enter	Select item

Screens Overview

• Home - Dashboard with stats, detected agents, and features
• Browse - Search and explore skill repositories
• Marketplace - Curated skill marketplace with popularity metrics
• Recommend - AI-powered suggestions based on your project
• Installed - Manage installed skills (enable/disable/remove)
• Sync - Sync skills across multiple agents
• Translate - Convert skills between agent formats
• Workflow - Manage and execute automation workflows
• Execute - Run skills with checkpoints
• Plan - Structured plan creation and execution
• Team - Share skills and bundles with team members
• Context - View detected stack and project context
• Memory - Session memory and learnings
• Plugins - Plugin management
• Methodology - Development methodology frameworks
• Settings - Configure SkillKit preferences

Programmatic Usage

import { startTUI } from '@skillkit/tui';

await startTUI();

Architecture

Built with:

• OpenTUI - High-performance terminal UI framework
• React - Component architecture
• @skillkit/core - Core functionality

src/
├── index.tsx         # Entry point and startTUI
├── App.tsx           # Main app component
├── screens/          # Screen components
│   ├── Home.tsx
│   ├── Browse.tsx
│   ├── Help.tsx
│   └── ...
├── components/       # Reusable UI components
│   ├── Sidebar.tsx
│   ├── Splash.tsx
│   └── ...
├── state/            # State types and navigation
├── theme/            # Colors and symbols
└── utils/            # Helper functions

Documentation

Full documentation: https://github.com/rohitg00/skillkit

License

Apache-2.0