claude-code-templates
Version:
CLI tool to setup Claude Code configurations with framework-specific commands, automation hooks and MCP Servers for your projects
327 lines (310 loc) • 16.7 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Claude Code Skills Dashboard</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="app-container">
<!-- Sidebar Navigation -->
<aside class="sidebar" id="sidebar">
<div class="sidebar-header">
<div class="sidebar-logo">
<span class="logo-icon">🎯</span>
<span class="logo-text">Skills Manager</span>
</div>
<button class="sidebar-toggle" id="sidebarToggle" aria-label="Toggle sidebar">
<span class="toggle-icon">☰</span>
</button>
</div>
<div class="sidebar-stats">
<div class="sidebar-stat">
<span class="stat-number" id="sidebarTotalSkills">-</span>
<span class="stat-text">Total Skills</span>
</div>
<div class="sidebar-stat">
<span class="stat-number" id="sidebarPersonalSkills">-</span>
<span class="stat-text">Personal</span>
</div>
</div>
<div class="sidebar-section">
<div class="sidebar-section-header">
<span class="section-title">Filter by Source</span>
</div>
<div class="source-filters">
<button class="source-filter-btn active" data-filter="all">
All Sources
</button>
<button class="source-filter-btn" data-filter="personal">
Personal
</button>
<button class="source-filter-btn" data-filter="project">
Project
</button>
<button class="source-filter-btn" data-filter="plugin">
Plugin
</button>
</div>
</div>
<div class="sidebar-footer">
<a href="https://docs.claude.com/en/docs/agents-and-tools/agent-skills" target="_blank" class="sidebar-link">
<span class="link-icon">📚</span>
<span class="link-text">Skills Documentation</span>
</a>
<a href="https://aitmpl.com/skills" target="_blank" class="sidebar-link">
<span class="link-icon">🔍</span>
<span class="link-text">Browse Skills</span>
</a>
</div>
</aside>
<!-- Main Content Area -->
<main class="main-content">
<!-- Top Bar -->
<header class="top-bar">
<div class="top-bar-left">
<h1 class="page-title">
<span class="title-icon">🧠</span>
<span id="currentViewName">All Skills</span>
</h1>
<div class="breadcrumb" id="breadcrumb"></div>
</div>
<div class="top-bar-right">
<div class="search-box">
<span class="search-icon">🔍</span>
<input
type="text"
id="skillSearch"
placeholder="Search skills..."
class="search-input"
>
</div>
<div class="view-controls">
<button class="refresh-btn" id="refreshBtn" title="Refresh data">
<span class="refresh-icon">🔄</span>
</button>
<button class="view-btn active" data-view="grid" title="Grid view">
<span class="view-icon">▦</span>
</button>
<button class="view-btn" data-view="list" title="List view">
<span class="view-icon">☰</span>
</button>
</div>
</div>
</header>
<!-- Filters Bar -->
<div class="filters-bar">
<div class="filter-group">
<button class="filter-chip active" data-filter="all">
All Skills
<span class="chip-badge" id="countAll">0</span>
</button>
<button class="filter-chip" data-filter="personal">
<span class="status-dot personal"></span>
Personal
<span class="chip-badge" id="countPersonal">0</span>
</button>
<button class="filter-chip" data-filter="project">
<span class="status-dot project"></span>
Project
<span class="chip-badge" id="countProject">0</span>
</button>
<button class="filter-chip" data-filter="plugin">
<span class="status-dot plugin"></span>
Plugin
<span class="chip-badge" id="countPlugin">0</span>
</button>
</div>
<div class="sort-controls">
<label for="sortSelect" class="sort-label">Sort by:</label>
<select id="sortSelect" class="sort-select">
<option value="name">Name</option>
<option value="files">File Count</option>
<option value="modified">Last Modified</option>
</select>
</div>
</div>
<!-- Skills Grid/List -->
<div class="skills-container" id="skillsContainer">
<div class="content-loading">
<div class="spinner-large"></div>
<p class="loading-text">Loading skills...</p>
</div>
</div>
<!-- Empty State -->
<div class="empty-state-container" id="emptyState" style="display: none;">
<div class="empty-state">
<div class="empty-icon">🎯</div>
<h2 class="empty-title">No skills found</h2>
<p class="empty-description" id="emptyDescription">
Try adjusting your filters or search terms
</p>
<button class="btn-primary" id="clearFiltersBtn" style="display: none;">
Clear Filters
</button>
</div>
</div>
</main>
</div>
<!-- Skill Detail Modal -->
<div class="modal-overlay" id="skillModal">
<div class="modal-container skill-modal">
<div class="modal-header">
<div class="modal-title-section">
<h2 class="modal-title" id="modalSkillName">Skill Name</h2>
<div class="modal-badges">
<span class="source-badge" id="modalSourceBadge">Personal</span>
</div>
</div>
<button class="modal-close" id="closeModal" aria-label="Close modal">
✕
</button>
</div>
<div class="modal-body">
<!-- Skills Loading Levels -->
<div class="skill-levels-section">
<h3 class="section-title">
<span class="section-icon">📊</span>
Progressive Context Loading
</h3>
<p class="section-description">
Skills load content in three levels, minimizing context usage while maximizing flexibility
</p>
<div class="loading-levels">
<!-- Level 1: Metadata -->
<div class="level-card level-1" data-level="1">
<div class="level-header">
<div class="level-number">1</div>
<div class="level-info">
<div class="level-title">METADATA</div>
<div class="level-timing">Always loaded (at startup)</div>
</div>
<div class="level-cost">~100 tokens</div>
</div>
<div class="level-content">
<div class="level-description">
Name and description from YAML frontmatter for Skill discovery
</div>
<div class="metadata-display">
<div class="metadata-field">
<span class="field-label">name:</span>
<span class="field-value" id="metadataName">-</span>
</div>
<div class="metadata-field">
<span class="field-label">description:</span>
<span class="field-value" id="metadataDescription">-</span>
</div>
<div class="metadata-field" id="metadataToolsField" style="display: none;">
<span class="field-label">allowed-tools:</span>
<div class="field-value-chips" id="metadataTools"></div>
</div>
</div>
</div>
</div>
<!-- Flow Arrow -->
<div class="level-arrow">
<div class="arrow-connector"></div>
<div class="arrow-label">When Skill triggers on relevant context</div>
</div>
<!-- Level 2: Instructions -->
<div class="level-card level-2" data-level="2">
<div class="level-header">
<div class="level-number">2</div>
<div class="level-info">
<div class="level-title">INSTRUCTIONS</div>
<div class="level-timing">When Skill is triggered</div>
</div>
<div class="level-cost"><5k tokens</div>
</div>
<div class="level-content">
<div class="level-description">
SKILL.md body with procedural knowledge, workflows, and guidance
</div>
<div class="instructions-display">
<div class="file-item">
<span class="file-icon">📄</span>
<span class="file-name">SKILL.md</span>
<span class="file-meta" id="level2FileSize">-</span>
</div>
</div>
</div>
</div>
<!-- Flow Arrow -->
<div class="level-arrow">
<div class="arrow-connector"></div>
<div class="arrow-label">As files are referenced or executed</div>
</div>
<!-- Level 3+: Resources -->
<div class="level-card level-3" data-level="3">
<div class="level-header">
<div class="level-number">3+</div>
<div class="level-info">
<div class="level-title">RESOURCES & CODE</div>
<div class="level-timing">Loaded as needed</div>
</div>
<div class="level-cost">Effectively unlimited</div>
</div>
<div class="level-content">
<div class="level-description">
Additional markdown files, executable scripts, and reference materials
</div>
<div class="resources-display" id="resourcesDisplay">
<div class="resource-category" id="instructionsCategory" style="display: none;">
<div class="category-header">
<span class="category-icon">📝</span>
<span class="category-name">Instructions</span>
<span class="category-count" id="instructionsCount">0</span>
</div>
<div class="category-description">Additional markdown files with specialized guidance and workflows</div>
<div class="category-files" id="instructionsFiles"></div>
</div>
<div class="resource-category" id="codeCategory" style="display: none;">
<div class="category-header">
<span class="category-icon">💻</span>
<span class="category-name">Code</span>
<span class="category-count" id="codeCount">0</span>
</div>
<div class="category-description">Executable scripts that Claude runs via bash without loading into context</div>
<div class="category-files" id="codeFiles"></div>
</div>
<div class="resource-category" id="resourcesCategory" style="display: none;">
<div class="category-header">
<span class="category-icon">📋</span>
<span class="category-name">Resources</span>
<span class="category-count" id="resourcesCount">0</span>
</div>
<div class="category-description">Reference materials like schemas, API docs, templates, and examples</div>
<div class="category-files" id="resourcesFiles"></div>
</div>
<div class="empty-resources" id="emptyResources">
<span class="empty-icon">📭</span>
<span class="empty-text">No additional resources</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="modal-meta">
<span class="meta-item">
<span class="meta-label">Total Files:</span>
<span class="meta-value" id="modalFileCount">-</span>
</span>
<span class="meta-item">
<span class="meta-label">Last Modified:</span>
<span class="meta-value" id="modalLastModified">-</span>
</span>
<span class="meta-item">
<span class="meta-label">Source:</span>
<span class="meta-value" id="modalSource">-</span>
</span>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>