wehub-resource-sync
253 lines
6.3 KiB
Markdown
253 lines
6.3 KiB
Markdown
# 🎯 Skills Dashboard - Modern Flow Visualization
|
|
|
|
## Overview
|
|
|
|
The Skills Dashboard provides an elegant, modern interface to view and explore Claude Code Skills with an interactive progressive context loading visualization.
|
|
|
|
## Features
|
|
|
|
### 🎨 Modern Flow Diagram
|
|
|
|
The dashboard features a revolutionary **3-layer progressive context loading visualization** that shows exactly how skills load their context:
|
|
|
|
#### Layer 1: MAIN CONTEXT (🟠 Coral)
|
|
- **Always Loaded** - Badge with solid border
|
|
- Contains `SKILL.md` - the core skill definition
|
|
- Displayed with file icon and size
|
|
- Always expanded by default
|
|
|
|
#### Layer 2: SKILL DISCOVERY (🟢 Green)
|
|
- **Loaded on Demand** - Badge with dashed border
|
|
- Contains referenced documentation files (API.md, EXAMPLES.md, etc.)
|
|
- Tree view with clickable file nodes
|
|
- Shows when context triggers loading
|
|
|
|
#### Layer 3: SUPPORTING RESOURCES (🟣 Purple)
|
|
- **Progressive Loading** - Badge with dashed border
|
|
- Contains scripts, templates, and utilities
|
|
- Organized by folder (scripts/, templates/)
|
|
- Files accessed/executed directly as needed
|
|
|
|
### 🌊 Animated Flow Arrows
|
|
|
|
Between each layer, animated flow arrows show:
|
|
- Gradient line with pulse animation
|
|
- Descriptive labels explaining the trigger
|
|
- Bouncing arrow head indicating direction
|
|
|
|
### 🌲 Interactive File Tree
|
|
|
|
**Features:**
|
|
- Expandable/collapsible layers (click header)
|
|
- Folder grouping with file counts
|
|
- File type icons (📄, 🐍, 📜, 📁, 📋)
|
|
- File sizes displayed
|
|
- Click to view file content
|
|
- Hover effects with color-coded borders
|
|
|
|
### 🎭 Visual Design
|
|
|
|
**Color System:**
|
|
- Main Context: Coral (#ff9b7a) - warm, inviting
|
|
- Skill Discovery: Green (#56d364) - fresh, dynamic
|
|
- Progressive: Purple (#a371f7) - advanced, mysterious
|
|
|
|
**Typography:**
|
|
- Headers: System font stack
|
|
- File names: Monospace (SF Mono, Monaco)
|
|
- Numbers: Circular badges with borders
|
|
|
|
**Effects:**
|
|
- Smooth transitions (150-350ms)
|
|
- Gradient backgrounds
|
|
- Shadow elevations
|
|
- Pulse animations on arrows
|
|
- Hover state transformations
|
|
|
|
## Usage
|
|
|
|
### Launch Dashboard
|
|
|
|
```bash
|
|
# From CLI tool directory
|
|
npm start -- --skills-manager
|
|
|
|
# Or globally
|
|
npx claude-code-templates --skills-manager
|
|
|
|
# Opens browser at http://localhost:3337
|
|
```
|
|
|
|
### Navigate Skills
|
|
|
|
1. **Browse Skills** - Grid or list view of all installed skills
|
|
2. **Filter** - By source (Personal/Project/Plugin)
|
|
3. **Search** - Find skills by name or description
|
|
4. **Click Skill** - Opens detailed modal with flow diagram
|
|
|
|
### Explore Skill Details
|
|
|
|
**In the modal:**
|
|
- View skill description and allowed tools
|
|
- See progressive loading flow diagram
|
|
- Expand/collapse layers
|
|
- Click files to view content
|
|
- Navigate file tree structure
|
|
|
|
## Technical Implementation
|
|
|
|
### Backend (`src/skill-dashboard.js`)
|
|
- Express server on port 3337
|
|
- Scans `~/.claude/skills/` and `.claude/skills/`
|
|
- Parses YAML frontmatter
|
|
- Categorizes files by loading strategy
|
|
- Provides REST API endpoints
|
|
|
|
### Frontend (`src/skill-dashboard-web/`)
|
|
- Vanilla JavaScript (no frameworks)
|
|
- Responsive CSS with CSS Grid
|
|
- Interactive layer toggles
|
|
- File tree with folder grouping
|
|
- Real-time file content loading
|
|
|
|
### API Endpoints
|
|
|
|
```
|
|
GET /api/skills - List all skills
|
|
GET /api/skills/:name - Get skill details
|
|
GET /api/skills/:name/file/* - Get file content
|
|
GET /api/summary - Statistics
|
|
```
|
|
|
|
## Example Skills
|
|
|
|
The implementation includes test skills demonstrating all features:
|
|
|
|
### 1. test-skill
|
|
Basic skill with:
|
|
- SKILL.md
|
|
- reference.md (on demand)
|
|
- scripts/helper.py (progressive)
|
|
|
|
### 2. pdf-processing
|
|
Real-world skill with:
|
|
- SKILL.md
|
|
- FORMS.md (on demand)
|
|
|
|
### 3. advanced-test
|
|
Comprehensive skill with:
|
|
- SKILL.md
|
|
- API.md, EXAMPLES.md, QUICKSTART.md (on demand)
|
|
- scripts/process.py, validate.py, helper.sh (progressive)
|
|
- templates/config.json, report.md (progressive)
|
|
|
|
## Architecture Highlights
|
|
|
|
### File Categorization Logic
|
|
|
|
```javascript
|
|
// Files are automatically categorized based on:
|
|
1. SKILL.md → Always Loaded (main context)
|
|
2. Referenced .md files → On Demand (skill discovery)
|
|
3. scripts/, templates/ → Progressive (supporting resources)
|
|
```
|
|
|
|
### Progressive Loading Strategy
|
|
|
|
The visualization mirrors Claude Code's actual loading behavior:
|
|
1. **Main Context**: Loaded when skill is invoked
|
|
2. **Skill Discovery**: Loaded when referenced in conversation
|
|
3. **Progressive**: Accessed/executed directly as needed
|
|
|
|
### Responsive Design
|
|
|
|
- Desktop: Full 3-column layout with sidebar
|
|
- Tablet: 2-column with collapsible sidebar
|
|
- Mobile: Single column, full-width cards
|
|
|
|
## Best Practices
|
|
|
|
### Creating Effective Skills
|
|
|
|
**For optimal visualization:**
|
|
1. Put core instructions in SKILL.md
|
|
2. Reference documentation with markdown links
|
|
3. Organize scripts in `scripts/` folder
|
|
4. Place templates in `templates/` folder
|
|
|
|
**Example SKILL.md:**
|
|
```markdown
|
|
---
|
|
name: my-skill
|
|
description: Does amazing things
|
|
allowed-tools: Read, Write
|
|
---
|
|
|
|
# My Skill
|
|
|
|
Instructions here.
|
|
|
|
For details, see [API.md](API.md).
|
|
```
|
|
|
|
### Folder Structure
|
|
|
|
```
|
|
my-skill/
|
|
├── SKILL.md # Always loaded
|
|
├── API.md # On demand
|
|
├── EXAMPLES.md # On demand
|
|
├── scripts/ # Progressive
|
|
│ ├── process.py
|
|
│ └── validate.py
|
|
└── templates/ # Progressive
|
|
├── config.json
|
|
└── report.md
|
|
```
|
|
|
|
## Performance
|
|
|
|
- **Fast Loading**: Skills cached in memory
|
|
- **Lazy Content**: File content loaded on demand
|
|
- **Efficient Rendering**: Virtual scrolling for large lists
|
|
- **Minimal Bundle**: No external dependencies
|
|
|
|
## Browser Compatibility
|
|
|
|
- Chrome/Edge 90+
|
|
- Firefox 88+
|
|
- Safari 14+
|
|
- Mobile browsers (iOS Safari, Chrome Mobile)
|
|
|
|
## Keyboard Shortcuts
|
|
|
|
| Key | Action |
|
|
|-----|--------|
|
|
| `Esc` | Close modal |
|
|
| `Enter` | Expand/collapse focused layer |
|
|
| `/` | Focus search |
|
|
|
|
## Future Enhancements
|
|
|
|
Potential improvements:
|
|
- [ ] Skill dependency graph
|
|
- [ ] Live preview of skill execution
|
|
- [ ] Skill templates generator
|
|
- [ ] Performance metrics per skill
|
|
- [ ] Export skill as template
|
|
- [ ] Dark/light theme toggle
|
|
|
|
## Credits
|
|
|
|
Built with ❤️ for Claude Code Templates
|
|
- Modern CSS Grid layout
|
|
- Vanilla JavaScript for maximum performance
|
|
- Inspired by VSCode file explorer
|
|
- Progressive context loading visualization
|
|
|
|
---
|
|
|
|
**Version**: 1.0.0
|
|
**Port**: 3337
|
|
**License**: Same as claude-code-templates
|