claude-code-templates 1.27.0 → 1.28.0

package/bin/create-claude-config.js

@@ -59,6 +59,7 @@ program
   .option('--agents', 'launch Claude Code agents dashboard (opens directly to conversations)')
   .option('--chats-mobile', 'launch mobile-first chats interface (AI-optimized for mobile devices)')
   .option('--plugins', 'launch Plugin Dashboard to view marketplaces, installed plugins, and permissions')
+  .option('--skills', 'launch Skills Dashboard to view and explore installed Claude Code Skills')
   .option('--tunnel', 'enable Cloudflare Tunnel for remote access (use with --analytics or --chats)')
   .option('--verbose', 'enable verbose logging for debugging and development')
   .option('--health-check, --health, --check, --verify', 'run comprehensive health check to verify Claude Code setup')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-templates",
-  "version": "1.27.0",
+  "version": "1.28.0",
   "description": "CLI tool to setup Claude Code configurations with framework-specific commands, automation hooks and MCP Servers for your projects",
   "main": "src/index.js",
   "bin": {

package/src/index.js

@@ -16,11 +16,48 @@ const { runAnalytics } = require('./analytics');
 const { startChatsMobile } = require('./chats-mobile');
 const { runHealthCheck } = require('./health-check');
 const { runPluginDashboard } = require('./plugin-dashboard');
+const { runSkillDashboard } = require('./skill-dashboard');
 const { trackingService } = require('./tracking-service');
 const { createGlobalAgent, listGlobalAgents, removeGlobalAgent, updateGlobalAgent } = require('./sdk/global-agent-manager');
 const SessionSharing = require('./session-sharing');
 const ConversationAnalyzer = require('./analytics/core/ConversationAnalyzer');
 
+/**
+ * Get platform-appropriate Python command candidates
+ * Returns array of commands to try in order
+ * @returns {string[]} Array of Python commands to try
+ */
+function getPlatformPythonCandidates() {
+  if (process.platform === 'win32') {
+    // Windows: Try py launcher (PEP 397) first, then python, then python3
+    return ['py', 'python', 'python3'];
+  } else {
+    // Unix/Linux/Mac: Try python3 first, then python
+    return ['python3', 'python'];
+  }
+}
+
+/**
+ * Replace python3 commands with platform-appropriate Python command in configuration
+ * Windows typically uses 'python' or 'py', while Unix/Linux uses 'python3'
+ * @param {Object} config - Configuration object to process
+ * @returns {Object} Processed configuration with platform-appropriate Python commands
+ */
+function replacePythonCommands(config) {
+  if (!config || typeof config !== 'object') {
+    return config;
+  }
+
+  // On Windows, replace python3 with python for better compatibility
+  if (process.platform === 'win32') {
+    const configString = JSON.stringify(config);
+    const replacedString = configString.replace(/python3\s/g, 'python ');
+    return JSON.parse(replacedString);
+  }
+
+  return config;
+}
+
 async function showMainMenu() {
   console.log('');
   
@@ -213,6 +250,14 @@ async function createClaudeConfig(options = {}) {
     return;
   }
 
+  // Handle skills dashboard
+  if (options.skills) {
+    trackingService.trackCommandExecution('skills');
+    trackingService.trackAnalyticsDashboard({ page: 'skills', source: 'command_line' });
+    await runSkillDashboard(options);
+    return;
+  }
+
   // Handle chats dashboard (now points to mobile chats interface)
   if (options.chats) {
     trackingService.trackCommandExecution('chats', { tunnel: options.tunnel || false });
@@ -692,7 +737,10 @@ async function installIndividualSetting(settingName, targetDir, options) {
     }
     
     const settingConfigText = await response.text();
-    const settingConfig = JSON.parse(settingConfigText);
+    let settingConfig = JSON.parse(settingConfigText);
+
+    // Replace python3 with platform-appropriate command for Windows compatibility
+    settingConfig = replacePythonCommands(settingConfig);
 
     // Check if there are additional files to download (e.g., Python scripts)
     const additionalFiles = {};
@@ -1021,7 +1069,10 @@ async function installIndividualHook(hookName, targetDir, options) {
     }
     
     const hookConfigText = await response.text();
-    const hookConfig = JSON.parse(hookConfigText);
+    let hookConfig = JSON.parse(hookConfigText);
+
+    // Replace python3 with platform-appropriate command for Windows compatibility
+    hookConfig = replacePythonCommands(hookConfig);
 
     // Check if there are additional files to download (e.g., Python scripts for hooks)
     const additionalFiles = {};
@@ -3158,21 +3209,30 @@ async function executeE2BSandbox(options, targetDir) {
           check.on('error', () => resolve(false));
         });
       };
-      
-      // Check for Python 3.11 first, fallback to python3
-      let pythonCmd = 'python3';
+
+      // Try to find Python 3.11 first (recommended for E2B)
+      let pythonCmd = null;
       const python311Available = await checkPythonVersion('python3.11');
       if (python311Available) {
         pythonCmd = 'python3.11';
         console.log(chalk.blue('✓ Using Python 3.11 (recommended for E2B)'));
       } else {
-        console.log(chalk.yellow('⚠ Python 3.11 not found, using python3 (may have package restrictions)'));
+        // Fall back to platform-appropriate Python commands
+        console.log(chalk.yellow('⚠ Python 3.11 not found, trying platform defaults...'));
+        const candidates = getPlatformPythonCandidates();
+
+        for (const candidate of candidates) {
+          if (await checkPythonVersion(candidate)) {
+            pythonCmd = candidate;
+            console.log(chalk.blue(`✓ Using ${candidate} for E2B`));
+            break;
+          }
+        }
       }
-      
-      // Verify chosen Python version works
-      const pythonAvailable = await checkPythonVersion(pythonCmd);
-      if (!pythonAvailable) {
-        pythonSpinner.fail('Python 3 not found');
+
+      // Verify we found a working Python installation
+      if (!pythonCmd) {
+        pythonSpinner.fail('Python not found');
         console.log(chalk.red('❌ Python 3.11+ is required for E2B sandbox'));
         console.log(chalk.yellow('💡 Please install Python 3.11+ and try again'));
         console.log(chalk.blue('   Visit: https://python.org/downloads'));

package/src/skill-dashboard-web/index.html

@@ -0,0 +1,326 @@
+<!DOCTYPE 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">&lt;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>