claude-code-templates 1.26.4 → 1.28.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/bin/create-claude-config.js +1 -0
- package/components/sandbox/docker/Dockerfile +38 -0
- package/components/sandbox/docker/README.md +453 -0
- package/components/sandbox/docker/docker-launcher.js +184 -0
- package/components/sandbox/docker/execute.js +251 -0
- package/components/sandbox/docker/package.json +26 -0
- package/package.json +2 -1
- package/src/index.js +294 -24
- package/src/skill-dashboard-web/index.html +326 -0
- package/src/skill-dashboard-web/script.js +445 -0
- package/src/skill-dashboard-web/styles.css +3469 -0
- package/src/skill-dashboard.js +441 -0
|
@@ -0,0 +1,326 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Claude Code Skills Dashboard</title>
|
|
7
|
+
<link rel="stylesheet" href="styles.css">
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<div class="app-container">
|
|
11
|
+
<!-- Sidebar Navigation -->
|
|
12
|
+
<aside class="sidebar" id="sidebar">
|
|
13
|
+
<div class="sidebar-header">
|
|
14
|
+
<div class="sidebar-logo">
|
|
15
|
+
<span class="logo-icon">🎯</span>
|
|
16
|
+
<span class="logo-text">Skills Manager</span>
|
|
17
|
+
</div>
|
|
18
|
+
<button class="sidebar-toggle" id="sidebarToggle" aria-label="Toggle sidebar">
|
|
19
|
+
<span class="toggle-icon">☰</span>
|
|
20
|
+
</button>
|
|
21
|
+
</div>
|
|
22
|
+
|
|
23
|
+
<div class="sidebar-stats">
|
|
24
|
+
<div class="sidebar-stat">
|
|
25
|
+
<span class="stat-number" id="sidebarTotalSkills">-</span>
|
|
26
|
+
<span class="stat-text">Total Skills</span>
|
|
27
|
+
</div>
|
|
28
|
+
<div class="sidebar-stat">
|
|
29
|
+
<span class="stat-number" id="sidebarPersonalSkills">-</span>
|
|
30
|
+
<span class="stat-text">Personal</span>
|
|
31
|
+
</div>
|
|
32
|
+
</div>
|
|
33
|
+
|
|
34
|
+
<div class="sidebar-section">
|
|
35
|
+
<div class="sidebar-section-header">
|
|
36
|
+
<span class="section-title">Filter by Source</span>
|
|
37
|
+
</div>
|
|
38
|
+
<div class="source-filters">
|
|
39
|
+
<button class="source-filter-btn active" data-filter="all">
|
|
40
|
+
All Sources
|
|
41
|
+
</button>
|
|
42
|
+
<button class="source-filter-btn" data-filter="personal">
|
|
43
|
+
Personal
|
|
44
|
+
</button>
|
|
45
|
+
<button class="source-filter-btn" data-filter="project">
|
|
46
|
+
Project
|
|
47
|
+
</button>
|
|
48
|
+
<button class="source-filter-btn" data-filter="plugin">
|
|
49
|
+
Plugin
|
|
50
|
+
</button>
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
|
|
54
|
+
<div class="sidebar-footer">
|
|
55
|
+
<a href="https://docs.claude.com/en/docs/agents-and-tools/agent-skills" target="_blank" class="sidebar-link">
|
|
56
|
+
<span class="link-icon">📚</span>
|
|
57
|
+
<span class="link-text">Skills Documentation</span>
|
|
58
|
+
</a>
|
|
59
|
+
<a href="https://aitmpl.com/skills" target="_blank" class="sidebar-link">
|
|
60
|
+
<span class="link-icon">🔍</span>
|
|
61
|
+
<span class="link-text">Browse Skills</span>
|
|
62
|
+
</a>
|
|
63
|
+
</div>
|
|
64
|
+
</aside>
|
|
65
|
+
|
|
66
|
+
<!-- Main Content Area -->
|
|
67
|
+
<main class="main-content">
|
|
68
|
+
<!-- Top Bar -->
|
|
69
|
+
<header class="top-bar">
|
|
70
|
+
<div class="top-bar-left">
|
|
71
|
+
<h1 class="page-title">
|
|
72
|
+
<span class="title-icon">🧠</span>
|
|
73
|
+
<span id="currentViewName">All Skills</span>
|
|
74
|
+
</h1>
|
|
75
|
+
<div class="breadcrumb" id="breadcrumb"></div>
|
|
76
|
+
</div>
|
|
77
|
+
<div class="top-bar-right">
|
|
78
|
+
<div class="search-box">
|
|
79
|
+
<span class="search-icon">🔍</span>
|
|
80
|
+
<input
|
|
81
|
+
type="text"
|
|
82
|
+
id="skillSearch"
|
|
83
|
+
placeholder="Search skills..."
|
|
84
|
+
class="search-input"
|
|
85
|
+
>
|
|
86
|
+
</div>
|
|
87
|
+
<div class="view-controls">
|
|
88
|
+
<button class="refresh-btn" id="refreshBtn" title="Refresh data">
|
|
89
|
+
<span class="refresh-icon">🔄</span>
|
|
90
|
+
</button>
|
|
91
|
+
<button class="view-btn active" data-view="grid" title="Grid view">
|
|
92
|
+
<span class="view-icon">▦</span>
|
|
93
|
+
</button>
|
|
94
|
+
<button class="view-btn" data-view="list" title="List view">
|
|
95
|
+
<span class="view-icon">☰</span>
|
|
96
|
+
</button>
|
|
97
|
+
</div>
|
|
98
|
+
</div>
|
|
99
|
+
</header>
|
|
100
|
+
|
|
101
|
+
<!-- Filters Bar -->
|
|
102
|
+
<div class="filters-bar">
|
|
103
|
+
<div class="filter-group">
|
|
104
|
+
<button class="filter-chip active" data-filter="all">
|
|
105
|
+
All Skills
|
|
106
|
+
<span class="chip-badge" id="countAll">0</span>
|
|
107
|
+
</button>
|
|
108
|
+
<button class="filter-chip" data-filter="personal">
|
|
109
|
+
<span class="status-dot personal"></span>
|
|
110
|
+
Personal
|
|
111
|
+
<span class="chip-badge" id="countPersonal">0</span>
|
|
112
|
+
</button>
|
|
113
|
+
<button class="filter-chip" data-filter="project">
|
|
114
|
+
<span class="status-dot project"></span>
|
|
115
|
+
Project
|
|
116
|
+
<span class="chip-badge" id="countProject">0</span>
|
|
117
|
+
</button>
|
|
118
|
+
<button class="filter-chip" data-filter="plugin">
|
|
119
|
+
<span class="status-dot plugin"></span>
|
|
120
|
+
Plugin
|
|
121
|
+
<span class="chip-badge" id="countPlugin">0</span>
|
|
122
|
+
</button>
|
|
123
|
+
</div>
|
|
124
|
+
<div class="sort-controls">
|
|
125
|
+
<label for="sortSelect" class="sort-label">Sort by:</label>
|
|
126
|
+
<select id="sortSelect" class="sort-select">
|
|
127
|
+
<option value="name">Name</option>
|
|
128
|
+
<option value="files">File Count</option>
|
|
129
|
+
<option value="modified">Last Modified</option>
|
|
130
|
+
</select>
|
|
131
|
+
</div>
|
|
132
|
+
</div>
|
|
133
|
+
|
|
134
|
+
<!-- Skills Grid/List -->
|
|
135
|
+
<div class="skills-container" id="skillsContainer">
|
|
136
|
+
<div class="content-loading">
|
|
137
|
+
<div class="spinner-large"></div>
|
|
138
|
+
<p class="loading-text">Loading skills...</p>
|
|
139
|
+
</div>
|
|
140
|
+
</div>
|
|
141
|
+
|
|
142
|
+
<!-- Empty State -->
|
|
143
|
+
<div class="empty-state-container" id="emptyState" style="display: none;">
|
|
144
|
+
<div class="empty-state">
|
|
145
|
+
<div class="empty-icon">🎯</div>
|
|
146
|
+
<h2 class="empty-title">No skills found</h2>
|
|
147
|
+
<p class="empty-description" id="emptyDescription">
|
|
148
|
+
Try adjusting your filters or search terms
|
|
149
|
+
</p>
|
|
150
|
+
<button class="btn-primary" id="clearFiltersBtn" style="display: none;">
|
|
151
|
+
Clear Filters
|
|
152
|
+
</button>
|
|
153
|
+
</div>
|
|
154
|
+
</div>
|
|
155
|
+
</main>
|
|
156
|
+
</div>
|
|
157
|
+
|
|
158
|
+
<!-- Skill Detail Modal -->
|
|
159
|
+
<div class="modal-overlay" id="skillModal">
|
|
160
|
+
<div class="modal-container skill-modal">
|
|
161
|
+
<div class="modal-header">
|
|
162
|
+
<div class="modal-title-section">
|
|
163
|
+
<h2 class="modal-title" id="modalSkillName">Skill Name</h2>
|
|
164
|
+
<div class="modal-badges">
|
|
165
|
+
<span class="source-badge" id="modalSourceBadge">Personal</span>
|
|
166
|
+
</div>
|
|
167
|
+
</div>
|
|
168
|
+
<button class="modal-close" id="closeModal" aria-label="Close modal">
|
|
169
|
+
✕
|
|
170
|
+
</button>
|
|
171
|
+
</div>
|
|
172
|
+
|
|
173
|
+
<div class="modal-body">
|
|
174
|
+
<!-- Skills Loading Levels -->
|
|
175
|
+
<div class="skill-levels-section">
|
|
176
|
+
<h3 class="section-title">
|
|
177
|
+
<span class="section-icon">📊</span>
|
|
178
|
+
Progressive Context Loading
|
|
179
|
+
</h3>
|
|
180
|
+
<p class="section-description">
|
|
181
|
+
Skills load content in three levels, minimizing context usage while maximizing flexibility
|
|
182
|
+
</p>
|
|
183
|
+
|
|
184
|
+
<div class="loading-levels">
|
|
185
|
+
<!-- Level 1: Metadata -->
|
|
186
|
+
<div class="level-card level-1" data-level="1">
|
|
187
|
+
<div class="level-header">
|
|
188
|
+
<div class="level-number">1</div>
|
|
189
|
+
<div class="level-info">
|
|
190
|
+
<div class="level-title">METADATA</div>
|
|
191
|
+
<div class="level-timing">Always loaded (at startup)</div>
|
|
192
|
+
</div>
|
|
193
|
+
<div class="level-cost">~100 tokens</div>
|
|
194
|
+
</div>
|
|
195
|
+
<div class="level-content">
|
|
196
|
+
<div class="level-description">
|
|
197
|
+
Name and description from YAML frontmatter for Skill discovery
|
|
198
|
+
</div>
|
|
199
|
+
<div class="metadata-display">
|
|
200
|
+
<div class="metadata-field">
|
|
201
|
+
<span class="field-label">name:</span>
|
|
202
|
+
<span class="field-value" id="metadataName">-</span>
|
|
203
|
+
</div>
|
|
204
|
+
<div class="metadata-field">
|
|
205
|
+
<span class="field-label">description:</span>
|
|
206
|
+
<span class="field-value" id="metadataDescription">-</span>
|
|
207
|
+
</div>
|
|
208
|
+
<div class="metadata-field" id="metadataToolsField" style="display: none;">
|
|
209
|
+
<span class="field-label">allowed-tools:</span>
|
|
210
|
+
<div class="field-value-chips" id="metadataTools"></div>
|
|
211
|
+
</div>
|
|
212
|
+
</div>
|
|
213
|
+
</div>
|
|
214
|
+
</div>
|
|
215
|
+
|
|
216
|
+
<!-- Flow Arrow -->
|
|
217
|
+
<div class="level-arrow">
|
|
218
|
+
<div class="arrow-connector"></div>
|
|
219
|
+
<div class="arrow-label">When Skill triggers on relevant context</div>
|
|
220
|
+
</div>
|
|
221
|
+
|
|
222
|
+
<!-- Level 2: Instructions -->
|
|
223
|
+
<div class="level-card level-2" data-level="2">
|
|
224
|
+
<div class="level-header">
|
|
225
|
+
<div class="level-number">2</div>
|
|
226
|
+
<div class="level-info">
|
|
227
|
+
<div class="level-title">INSTRUCTIONS</div>
|
|
228
|
+
<div class="level-timing">When Skill is triggered</div>
|
|
229
|
+
</div>
|
|
230
|
+
<div class="level-cost"><5k tokens</div>
|
|
231
|
+
</div>
|
|
232
|
+
<div class="level-content">
|
|
233
|
+
<div class="level-description">
|
|
234
|
+
SKILL.md body with procedural knowledge, workflows, and guidance
|
|
235
|
+
</div>
|
|
236
|
+
<div class="instructions-display">
|
|
237
|
+
<div class="file-item">
|
|
238
|
+
<span class="file-icon">📄</span>
|
|
239
|
+
<span class="file-name">SKILL.md</span>
|
|
240
|
+
<span class="file-meta" id="level2FileSize">-</span>
|
|
241
|
+
</div>
|
|
242
|
+
</div>
|
|
243
|
+
</div>
|
|
244
|
+
</div>
|
|
245
|
+
|
|
246
|
+
<!-- Flow Arrow -->
|
|
247
|
+
<div class="level-arrow">
|
|
248
|
+
<div class="arrow-connector"></div>
|
|
249
|
+
<div class="arrow-label">As files are referenced or executed</div>
|
|
250
|
+
</div>
|
|
251
|
+
|
|
252
|
+
<!-- Level 3+: Resources -->
|
|
253
|
+
<div class="level-card level-3" data-level="3">
|
|
254
|
+
<div class="level-header">
|
|
255
|
+
<div class="level-number">3+</div>
|
|
256
|
+
<div class="level-info">
|
|
257
|
+
<div class="level-title">RESOURCES & CODE</div>
|
|
258
|
+
<div class="level-timing">Loaded as needed</div>
|
|
259
|
+
</div>
|
|
260
|
+
<div class="level-cost">Effectively unlimited</div>
|
|
261
|
+
</div>
|
|
262
|
+
<div class="level-content">
|
|
263
|
+
<div class="level-description">
|
|
264
|
+
Additional markdown files, executable scripts, and reference materials
|
|
265
|
+
</div>
|
|
266
|
+
<div class="resources-display" id="resourcesDisplay">
|
|
267
|
+
<div class="resource-category" id="instructionsCategory" style="display: none;">
|
|
268
|
+
<div class="category-header">
|
|
269
|
+
<span class="category-icon">📝</span>
|
|
270
|
+
<span class="category-name">Instructions</span>
|
|
271
|
+
<span class="category-count" id="instructionsCount">0</span>
|
|
272
|
+
</div>
|
|
273
|
+
<div class="category-description">Additional markdown files with specialized guidance and workflows</div>
|
|
274
|
+
<div class="category-files" id="instructionsFiles"></div>
|
|
275
|
+
</div>
|
|
276
|
+
<div class="resource-category" id="codeCategory" style="display: none;">
|
|
277
|
+
<div class="category-header">
|
|
278
|
+
<span class="category-icon">💻</span>
|
|
279
|
+
<span class="category-name">Code</span>
|
|
280
|
+
<span class="category-count" id="codeCount">0</span>
|
|
281
|
+
</div>
|
|
282
|
+
<div class="category-description">Executable scripts that Claude runs via bash without loading into context</div>
|
|
283
|
+
<div class="category-files" id="codeFiles"></div>
|
|
284
|
+
</div>
|
|
285
|
+
<div class="resource-category" id="resourcesCategory" style="display: none;">
|
|
286
|
+
<div class="category-header">
|
|
287
|
+
<span class="category-icon">📋</span>
|
|
288
|
+
<span class="category-name">Resources</span>
|
|
289
|
+
<span class="category-count" id="resourcesCount">0</span>
|
|
290
|
+
</div>
|
|
291
|
+
<div class="category-description">Reference materials like schemas, API docs, templates, and examples</div>
|
|
292
|
+
<div class="category-files" id="resourcesFiles"></div>
|
|
293
|
+
</div>
|
|
294
|
+
<div class="empty-resources" id="emptyResources">
|
|
295
|
+
<span class="empty-icon">📭</span>
|
|
296
|
+
<span class="empty-text">No additional resources</span>
|
|
297
|
+
</div>
|
|
298
|
+
</div>
|
|
299
|
+
</div>
|
|
300
|
+
</div>
|
|
301
|
+
</div>
|
|
302
|
+
</div>
|
|
303
|
+
</div>
|
|
304
|
+
|
|
305
|
+
<div class="modal-footer">
|
|
306
|
+
<div class="modal-meta">
|
|
307
|
+
<span class="meta-item">
|
|
308
|
+
<span class="meta-label">Total Files:</span>
|
|
309
|
+
<span class="meta-value" id="modalFileCount">-</span>
|
|
310
|
+
</span>
|
|
311
|
+
<span class="meta-item">
|
|
312
|
+
<span class="meta-label">Last Modified:</span>
|
|
313
|
+
<span class="meta-value" id="modalLastModified">-</span>
|
|
314
|
+
</span>
|
|
315
|
+
<span class="meta-item">
|
|
316
|
+
<span class="meta-label">Source:</span>
|
|
317
|
+
<span class="meta-value" id="modalSource">-</span>
|
|
318
|
+
</span>
|
|
319
|
+
</div>
|
|
320
|
+
</div>
|
|
321
|
+
</div>
|
|
322
|
+
</div>
|
|
323
|
+
|
|
324
|
+
<script src="script.js"></script>
|
|
325
|
+
</body>
|
|
326
|
+
</html>
|