@skillkit/tui

@skillkit/tui

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

Installation

npm install @skillkit/tui
# or
npm install -g skillkit  # includes TUI

Quick Start

skillkit ui
# or just
skillkit

Features

• Browse Skills: Explore 33+ skill repositories with search and filtering
• Smart Recommendations: See project-aware skill suggestions with match scores
• Cross-Agent Translation: Convert skills between any of 17 agent formats
• Context Management: View detected stack and sync to all agents
• Multi-Agent Install: Install skills to multiple agents at once
• Responsive Design: Adapts to any terminal size

Screens

Home

Overview of your project and quick actions. Shows detected agents, installed skills count, and navigation hints.

Browse (b)

Explore available skills from curated repositories. Features:

• Search skills with /
• Filter by tags
• View skill details
• One-key installation

Recommend (r)

AI-powered skill suggestions based on your project:

• Analyzes your package.json, configs, and file structure
• Shows match percentage for each skill
• Explains why skills are recommended
• Filter by minimum score

Translate (t)

Convert skills between agent formats:

• Select source skill
• Choose target agent(s)
• Preview translation
• Apply with confirmation

Context (c)

View and manage project context:

• Detected languages and frameworks
• Found testing tools and databases
• Installed agents
• Sync context to all agents

Installed (l)

Manage your installed skills:

• View all installed skills
• Enable/disable skills
• Remove skills
• Update from source

Sync (s)

Sync skills across agents:

• Select target agents
• Preview changes
• Apply sync

Settings (,)

Configure SkillKit:

• Default agent
• Auto-sync settings
• Skill directories

Keyboard Shortcuts

Key	Action
h	Home screen
b	Browse skills
r	Recommendations
t	Translate skills
c	Context management
l	List installed
s	Sync skills
,	Settings
↑/↓	Navigate lists
Enter	Select / Confirm
/	Search
m	Multi-select mode
Tab	Switch focus
Esc	Go back
?	Help
q	Quit

Programmatic Usage

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

// Launch with defaults
await startTUI();

// Launch with options
await startTUI({
  projectPath: './my-project',
  initialScreen: 'browse',
  theme: 'dark',
});

Architecture

Built with:

• Ink - React for CLIs
• React - Component architecture
• @skillkit/core - Core functionality

src/
├── app.tsx           # Main app component
├── screens/          # Screen components
│   ├── Home.tsx
│   ├── Browse.tsx
│   ├── Recommend.tsx
│   ├── Translate.tsx
│   ├── Context.tsx
│   └── ...
├── components/       # Reusable UI components
│   ├── SkillCard.tsx
│   ├── AgentSelector.tsx
│   └── ...
└── hooks/            # React hooks
    ├── useSkills.ts
    ├── useContext.ts
    └── ...

Terminal Requirements

• Minimum: 80x24 characters
• Recommended: 120x40 characters
• Supports: True Color, 256 colors, basic ANSI

Documentation

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

License

Apache-2.0