tools-only 🎯 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
# From CLI tool directory
npm start -- --skills-manager
# Or globally
npx claude-code-templates --skills-manager
# Opens browser at http://localhost:3337
Navigate Skills
- Browse Skills - Grid or list view of all installed skills
- Filter - By source (Personal/Project/Plugin)
- Search - Find skills by name or description
- 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
// 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:
- Main Context: Loaded when skill is invoked
- Skill Discovery: Loaded when referenced in conversation
- 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:
- Put core instructions in SKILL.md
- Reference documentation with markdown links
- Organize scripts in
scripts/folder - Place templates in
templates/folder
Example SKILL.md:
---
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