@skillkit/tui 1.3.1 → 1.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +129 -29
- package/dist/index.d.ts +61 -10
- package/dist/index.js +1023 -297
- package/dist/index.js.map +1 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,57 +1,157 @@
|
|
|
1
1
|
# @skillkit/tui
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://www.npmjs.com/package/@skillkit/tui)
|
|
4
|
+
[](https://opensource.org/licenses/Apache-2.0)
|
|
5
|
+
|
|
6
|
+
**Interactive terminal UI for SkillKit** - browse, install, translate, and manage skills visually in your terminal.
|
|
4
7
|
|
|
5
8
|
## Installation
|
|
6
9
|
|
|
7
10
|
```bash
|
|
8
11
|
npm install @skillkit/tui
|
|
12
|
+
# or
|
|
13
|
+
npm install -g skillkit # includes TUI
|
|
9
14
|
```
|
|
10
15
|
|
|
11
|
-
##
|
|
12
|
-
|
|
13
|
-
- **Browse Skills**: Discover skills from the marketplace
|
|
14
|
-
- **Smart Recommendations**: Project-aware skill suggestions
|
|
15
|
-
- **Skill Translation**: Convert between agent formats
|
|
16
|
-
- **Context Management**: View and sync project context
|
|
17
|
-
- **Keyboard Navigation**: Fast, intuitive controls
|
|
18
|
-
|
|
19
|
-
## Usage
|
|
20
|
-
|
|
21
|
-
```typescript
|
|
22
|
-
import { startTUI } from '@skillkit/tui';
|
|
23
|
-
|
|
24
|
-
// Launch the interactive TUI
|
|
25
|
-
await startTUI();
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
Or via CLI:
|
|
16
|
+
## Quick Start
|
|
29
17
|
|
|
30
18
|
```bash
|
|
31
19
|
skillkit ui
|
|
20
|
+
# or just
|
|
21
|
+
skillkit
|
|
32
22
|
```
|
|
33
23
|
|
|
24
|
+
## Features
|
|
25
|
+
|
|
26
|
+
- **Browse Skills**: Explore 33+ skill repositories with search and filtering
|
|
27
|
+
- **Smart Recommendations**: See project-aware skill suggestions with match scores
|
|
28
|
+
- **Cross-Agent Translation**: Convert skills between any of 17 agent formats
|
|
29
|
+
- **Context Management**: View detected stack and sync to all agents
|
|
30
|
+
- **Multi-Agent Install**: Install skills to multiple agents at once
|
|
31
|
+
- **Responsive Design**: Adapts to any terminal size
|
|
32
|
+
|
|
34
33
|
## Screens
|
|
35
34
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
-
|
|
42
|
-
-
|
|
43
|
-
-
|
|
35
|
+
### Home
|
|
36
|
+
Overview of your project and quick actions. Shows detected agents, installed skills count, and navigation hints.
|
|
37
|
+
|
|
38
|
+
### Browse (b)
|
|
39
|
+
Explore available skills from curated repositories. Features:
|
|
40
|
+
- Search skills with `/`
|
|
41
|
+
- Filter by tags
|
|
42
|
+
- View skill details
|
|
43
|
+
- One-key installation
|
|
44
|
+
|
|
45
|
+
### Recommend (r)
|
|
46
|
+
AI-powered skill suggestions based on your project:
|
|
47
|
+
- Analyzes your package.json, configs, and file structure
|
|
48
|
+
- Shows match percentage for each skill
|
|
49
|
+
- Explains why skills are recommended
|
|
50
|
+
- Filter by minimum score
|
|
51
|
+
|
|
52
|
+
### Translate (t)
|
|
53
|
+
Convert skills between agent formats:
|
|
54
|
+
- Select source skill
|
|
55
|
+
- Choose target agent(s)
|
|
56
|
+
- Preview translation
|
|
57
|
+
- Apply with confirmation
|
|
58
|
+
|
|
59
|
+
### Context (c)
|
|
60
|
+
View and manage project context:
|
|
61
|
+
- Detected languages and frameworks
|
|
62
|
+
- Found testing tools and databases
|
|
63
|
+
- Installed agents
|
|
64
|
+
- Sync context to all agents
|
|
65
|
+
|
|
66
|
+
### Installed (l)
|
|
67
|
+
Manage your installed skills:
|
|
68
|
+
- View all installed skills
|
|
69
|
+
- Enable/disable skills
|
|
70
|
+
- Remove skills
|
|
71
|
+
- Update from source
|
|
72
|
+
|
|
73
|
+
### Sync (s)
|
|
74
|
+
Sync skills across agents:
|
|
75
|
+
- Select target agents
|
|
76
|
+
- Preview changes
|
|
77
|
+
- Apply sync
|
|
78
|
+
|
|
79
|
+
### Settings (,)
|
|
80
|
+
Configure SkillKit:
|
|
81
|
+
- Default agent
|
|
82
|
+
- Auto-sync settings
|
|
83
|
+
- Skill directories
|
|
44
84
|
|
|
45
85
|
## Keyboard Shortcuts
|
|
46
86
|
|
|
47
87
|
| Key | Action |
|
|
48
88
|
|-----|--------|
|
|
49
|
-
|
|
|
50
|
-
| `
|
|
89
|
+
| `h` | Home screen |
|
|
90
|
+
| `b` | Browse skills |
|
|
91
|
+
| `r` | Recommendations |
|
|
92
|
+
| `t` | Translate skills |
|
|
93
|
+
| `c` | Context management |
|
|
94
|
+
| `l` | List installed |
|
|
95
|
+
| `s` | Sync skills |
|
|
96
|
+
| `,` | Settings |
|
|
97
|
+
| `↑/↓` | Navigate lists |
|
|
98
|
+
| `Enter` | Select / Confirm |
|
|
99
|
+
| `/` | Search |
|
|
100
|
+
| `m` | Multi-select mode |
|
|
51
101
|
| `Tab` | Switch focus |
|
|
102
|
+
| `Esc` | Go back |
|
|
52
103
|
| `?` | Help |
|
|
53
104
|
| `q` | Quit |
|
|
54
105
|
|
|
106
|
+
## Programmatic Usage
|
|
107
|
+
|
|
108
|
+
```typescript
|
|
109
|
+
import { startTUI, TUIOptions } from '@skillkit/tui';
|
|
110
|
+
|
|
111
|
+
// Launch with defaults
|
|
112
|
+
await startTUI();
|
|
113
|
+
|
|
114
|
+
// Launch with options
|
|
115
|
+
await startTUI({
|
|
116
|
+
projectPath: './my-project',
|
|
117
|
+
initialScreen: 'browse',
|
|
118
|
+
theme: 'dark',
|
|
119
|
+
});
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
## Architecture
|
|
123
|
+
|
|
124
|
+
Built with:
|
|
125
|
+
- **Ink** - React for CLIs
|
|
126
|
+
- **React** - Component architecture
|
|
127
|
+
- **@skillkit/core** - Core functionality
|
|
128
|
+
|
|
129
|
+
```
|
|
130
|
+
src/
|
|
131
|
+
├── app.tsx # Main app component
|
|
132
|
+
├── screens/ # Screen components
|
|
133
|
+
│ ├── Home.tsx
|
|
134
|
+
│ ├── Browse.tsx
|
|
135
|
+
│ ├── Recommend.tsx
|
|
136
|
+
│ ├── Translate.tsx
|
|
137
|
+
│ ├── Context.tsx
|
|
138
|
+
│ └── ...
|
|
139
|
+
├── components/ # Reusable UI components
|
|
140
|
+
│ ├── SkillCard.tsx
|
|
141
|
+
│ ├── AgentSelector.tsx
|
|
142
|
+
│ └── ...
|
|
143
|
+
└── hooks/ # React hooks
|
|
144
|
+
├── useSkills.ts
|
|
145
|
+
├── useContext.ts
|
|
146
|
+
└── ...
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
## Terminal Requirements
|
|
150
|
+
|
|
151
|
+
- Minimum: 80x24 characters
|
|
152
|
+
- Recommended: 120x40 characters
|
|
153
|
+
- Supports: True Color, 256 colors, basic ANSI
|
|
154
|
+
|
|
55
155
|
## Documentation
|
|
56
156
|
|
|
57
157
|
Full documentation: https://github.com/rohitg00/skillkit
|
package/dist/index.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as react from 'react';
|
|
3
|
-
import { ScoredSkill, ProjectProfile } from '@skillkit/core';
|
|
3
|
+
import { ScoredSkill, ProjectProfile, Learning, Observation, MemoryStatus } from '@skillkit/core';
|
|
4
4
|
|
|
5
|
-
type Screen = 'home' | 'browse' | 'installed' | 'sync' | 'settings' | 'recommend' | 'translate' | 'context';
|
|
5
|
+
type Screen = 'home' | 'browse' | 'installed' | 'sync' | 'settings' | 'recommend' | 'translate' | 'context' | 'workflow' | 'execute' | 'history' | 'marketplace' | 'memory';
|
|
6
6
|
declare function App(): react_jsx_runtime.JSX.Element;
|
|
7
7
|
|
|
8
8
|
interface SidebarProps {
|
|
@@ -61,47 +61,77 @@ interface HomeProps {
|
|
|
61
61
|
}
|
|
62
62
|
declare function Home({ cols, rows }: HomeProps): react_jsx_runtime.JSX.Element;
|
|
63
63
|
|
|
64
|
+
interface Props$b {
|
|
65
|
+
cols?: number;
|
|
66
|
+
rows?: number;
|
|
67
|
+
}
|
|
68
|
+
declare function Browse({ rows }: Props$b): react_jsx_runtime.JSX.Element;
|
|
69
|
+
|
|
70
|
+
interface Props$a {
|
|
71
|
+
cols?: number;
|
|
72
|
+
rows?: number;
|
|
73
|
+
}
|
|
74
|
+
declare function Installed({ rows }: Props$a): react_jsx_runtime.JSX.Element;
|
|
75
|
+
|
|
76
|
+
interface Props$9 {
|
|
77
|
+
cols?: number;
|
|
78
|
+
rows?: number;
|
|
79
|
+
}
|
|
80
|
+
declare function Sync({ rows }: Props$9): react_jsx_runtime.JSX.Element;
|
|
81
|
+
|
|
82
|
+
interface Props$8 {
|
|
83
|
+
cols?: number;
|
|
84
|
+
rows?: number;
|
|
85
|
+
}
|
|
86
|
+
declare function Settings({}: Props$8): react_jsx_runtime.JSX.Element;
|
|
87
|
+
|
|
88
|
+
interface Props$7 {
|
|
89
|
+
cols?: number;
|
|
90
|
+
rows?: number;
|
|
91
|
+
}
|
|
92
|
+
declare function Recommend({ rows }: Props$7): react_jsx_runtime.JSX.Element;
|
|
93
|
+
|
|
64
94
|
interface Props$6 {
|
|
65
95
|
cols?: number;
|
|
66
96
|
rows?: number;
|
|
67
97
|
}
|
|
68
|
-
declare function
|
|
98
|
+
declare function Translate({ rows }: Props$6): react_jsx_runtime.JSX.Element;
|
|
69
99
|
|
|
70
100
|
interface Props$5 {
|
|
71
101
|
cols?: number;
|
|
72
102
|
rows?: number;
|
|
73
103
|
}
|
|
74
|
-
declare function
|
|
104
|
+
declare function Context({ rows }: Props$5): react_jsx_runtime.JSX.Element;
|
|
75
105
|
|
|
76
106
|
interface Props$4 {
|
|
77
107
|
cols?: number;
|
|
78
108
|
rows?: number;
|
|
79
109
|
}
|
|
80
|
-
declare function
|
|
110
|
+
declare function Memory({ rows }: Props$4): react_jsx_runtime.JSX.Element;
|
|
81
111
|
|
|
82
112
|
interface Props$3 {
|
|
83
113
|
cols?: number;
|
|
84
114
|
rows?: number;
|
|
85
115
|
}
|
|
86
|
-
declare function
|
|
116
|
+
declare function Workflow({ rows }: Props$3): react_jsx_runtime.JSX.Element;
|
|
87
117
|
|
|
88
118
|
interface Props$2 {
|
|
89
119
|
cols?: number;
|
|
90
120
|
rows?: number;
|
|
91
121
|
}
|
|
92
|
-
declare function
|
|
122
|
+
declare function Execute({ rows }: Props$2): react_jsx_runtime.JSX.Element;
|
|
93
123
|
|
|
94
124
|
interface Props$1 {
|
|
95
125
|
cols?: number;
|
|
96
126
|
rows?: number;
|
|
97
127
|
}
|
|
98
|
-
declare function
|
|
128
|
+
declare function History({ rows }: Props$1): react_jsx_runtime.JSX.Element;
|
|
99
129
|
|
|
100
130
|
interface Props {
|
|
101
131
|
cols?: number;
|
|
102
132
|
rows?: number;
|
|
103
133
|
}
|
|
104
|
-
declare function
|
|
134
|
+
declare function Marketplace({ rows }: Props): react_jsx_runtime.JSX.Element;
|
|
105
135
|
|
|
106
136
|
interface UseSkillsResult {
|
|
107
137
|
skills: SkillItem[];
|
|
@@ -163,6 +193,21 @@ interface UseRecommendResult {
|
|
|
163
193
|
}
|
|
164
194
|
declare function useRecommend(projectPath?: string): UseRecommendResult;
|
|
165
195
|
|
|
196
|
+
interface UseMemoryResult {
|
|
197
|
+
learnings: Learning[];
|
|
198
|
+
observations: Observation[];
|
|
199
|
+
status: MemoryStatus | null;
|
|
200
|
+
loading: boolean;
|
|
201
|
+
error: string | null;
|
|
202
|
+
isGlobal: boolean;
|
|
203
|
+
setIsGlobal: (isGlobal: boolean) => void;
|
|
204
|
+
refresh: () => void;
|
|
205
|
+
search: (query: string) => Learning[];
|
|
206
|
+
deleteLearning: (id: string) => boolean;
|
|
207
|
+
deleteObservation: (id: string) => boolean;
|
|
208
|
+
}
|
|
209
|
+
declare function useMemory(): UseMemoryResult;
|
|
210
|
+
|
|
166
211
|
declare const colors: {
|
|
167
212
|
primary: string;
|
|
168
213
|
secondary: string;
|
|
@@ -181,9 +226,15 @@ declare const symbols: {
|
|
|
181
226
|
check: string;
|
|
182
227
|
star: string;
|
|
183
228
|
spinner: string[];
|
|
229
|
+
arrowUp: string;
|
|
230
|
+
arrowDown: string;
|
|
231
|
+
success: string;
|
|
232
|
+
error: string;
|
|
233
|
+
warning: string;
|
|
234
|
+
info: string;
|
|
184
235
|
};
|
|
185
236
|
declare const logo = "\n\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2557 \u2588\u2588\u2557\u2588\u2588\u2557\u2588\u2588\u2557 \u2588\u2588\u2557 \u2588\u2588\u2557 \u2588\u2588\u2557\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\n\u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D\u2588\u2588\u2551 \u2588\u2588\u2554\u255D\u2588\u2588\u2551\u2588\u2588\u2551 \u2588\u2588\u2551 \u2588\u2588\u2551 \u2588\u2588\u2554\u255D\u2588\u2588\u2551\u255A\u2550\u2550\u2588\u2588\u2554\u2550\u2550\u255D\n\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2554\u255D \u2588\u2588\u2551\u2588\u2588\u2551 \u2588\u2588\u2551 \u2588\u2588\u2588\u2588\u2588\u2554\u255D \u2588\u2588\u2551 \u2588\u2588\u2551\n\u255A\u2550\u2550\u2550\u2550\u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2588\u2588\u2557 \u2588\u2588\u2551\u2588\u2588\u2551 \u2588\u2588\u2551 \u2588\u2588\u2554\u2550\u2588\u2588\u2557 \u2588\u2588\u2551 \u2588\u2588\u2551\n\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2551\u2588\u2588\u2551 \u2588\u2588\u2557\u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2551 \u2588\u2588\u2557\u2588\u2588\u2551 \u2588\u2588\u2551\n\u255A\u2550\u2550\u2550\u2550\u2550\u2550\u255D\u255A\u2550\u255D \u255A\u2550\u255D\u255A\u2550\u255D\u255A\u2550\u2550\u2550\u2550\u2550\u2550\u255D\u255A\u2550\u2550\u2550\u2550\u2550\u2550\u255D\u255A\u2550\u255D \u255A\u2550\u255D\u255A\u2550\u255D \u255A\u2550\u255D\n";
|
|
186
237
|
|
|
187
238
|
declare function startTUI(): Promise<void>;
|
|
188
239
|
|
|
189
|
-
export { App, Browse, Context, Header, Home, Installed, Recommend, type Screen, SearchInput, Settings, Sidebar, type SkillItem, SkillList, StatusBar, Sync, Translate, colors, logo, startTUI, symbols, useKeyboard, useListNavigation, useMarketplace, useRecommend, useSkills };
|
|
240
|
+
export { App, Browse, Context, Execute, Header, History, Home, Installed, Marketplace, Memory, Recommend, type Screen, SearchInput, Settings, Sidebar, type SkillItem, SkillList, StatusBar, Sync, Translate, Workflow, colors, logo, startTUI, symbols, useKeyboard, useListNavigation, useMarketplace, useMemory, useRecommend, useSkills };
|