davila7--claude-code-templates/cli-tool/SKILLS_DASHBOARD.md

🎯 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

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

// 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:

---
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