claude-code-templates 1.22.0 → 1.22.2

package/README.md

@@ -38,6 +38,7 @@ npx claude-code-templates@latest --health-check
 | **Commands** | Custom slash commands for development tasks | `/generate-tests`, `/check-file`, `/optimize-bundle` |
 | **Agents** | AI specialists for specific domains | API security audit, React performance, database optimization |
 | **MCPs** | External service integrations | GitHub, databases, development tools |
+| **Skills** | Modular capabilities with progressive disclosure | PDF processing, algorithmic art, MCP builder |
 | **Analytics** | Real-time monitoring dashboard | Live session tracking, usage statistics, exports |
 
 ## 🛠️ Supported Technologies
@@ -95,6 +96,61 @@ npx claude-code-templates@latest --remove-agent customer-support
 
 The agents use the Claude Code SDK internally to provide specialized AI assistance with domain-specific knowledge and best practices.
 
+## 🎨 Skills (Anthropic Format)
+
+Install modular capabilities that Claude loads dynamically using Anthropic's progressive disclosure pattern:
+
+```bash
+# Install individual skills
+npx claude-code-templates@latest --skill pdf-processing-pro
+npx claude-code-templates@latest --skill algorithmic-art
+npx claude-code-templates@latest --skill mcp-builder
+
+# Install multiple skills
+npx claude-code-templates@latest --skill pdf-anthropic,docx,xlsx,pptx
+```
+
+### Featured Skills
+
+#### 🎨 Creative & Design
+- **algorithmic-art** - Create generative art using p5.js with seeded randomness
+- **canvas-design** - Design beautiful visual art in .png and .pdf formats
+- **slack-gif-creator** - Create animated GIFs optimized for Slack
+
+#### 💻 Development & Technical
+- **mcp-builder** - Guide for creating high-quality MCP servers
+- **artifacts-builder** - Build complex HTML artifacts with React and Tailwind
+- **webapp-testing** - Test local web applications using Playwright
+- **skill-creator** - Guide for creating effective skills
+
+#### 📄 Document Processing
+- **pdf-processing-pro** - Production-ready PDF toolkit (forms, tables, OCR)
+- **pdf-anthropic** - Anthropic's comprehensive PDF manipulation toolkit
+- **docx** - Create, edit, and analyze Word documents
+- **xlsx** - Create, edit, and analyze Excel spreadsheets
+- **pptx** - Create, edit, and analyze PowerPoint presentations
+
+#### 🏢 Enterprise & Communication
+- **brand-guidelines** - Apply Anthropic's official brand guidelines
+- **internal-comms** - Write internal communications (reports, newsletters, FAQs)
+- **theme-factory** - Style artifacts with professional themes
+
+### Skills Architecture
+
+Skills follow Anthropic's progressive disclosure pattern:
+- **Metadata** - Always loaded (name, description)
+- **Instructions** - Loaded when skill is triggered
+- **Resources** - Reference files loaded only when needed
+- **Scripts** - Execute without loading code into context
+
+### Attribution
+
+Skills from [anthropics/skills](https://github.com/anthropics/skills):
+- **Open Source** (Apache 2.0): algorithmic-art, mcp-builder, skill-creator, artifacts-builder, and more
+- **Source-Available** (Reference): docx, pdf-anthropic, pptx, xlsx
+
+See [ANTHROPIC_ATTRIBUTION.md](cli-tool/components/skills/ANTHROPIC_ATTRIBUTION.md) for complete license information.
+
 ## 📖 Documentation
 
 **[📚 Complete Documentation](https://docs.aitmpl.com/)** - Comprehensive guides, examples, and API reference

package/bin/create-claude-config.js

@@ -67,6 +67,7 @@ program
   .option('--mcp <mcp>', 'install specific MCP component (supports comma-separated values)')
   .option('--setting <setting>', 'install specific setting component (supports comma-separated values)')
   .option('--hook <hook>', 'install specific hook component (supports comma-separated values)')
+  .option('--skill <skill>', 'install specific skill component (supports comma-separated values)')
   .option('--workflow <workflow>', 'install workflow from hash (#hash) OR workflow YAML (base64 encoded) when used with --agent/--command/--mcp')
   .option('--prompt <prompt>', 'execute the provided prompt in Claude Code after installation or in sandbox')
   .option('--create-agent <agent>', 'create a global agent accessible from anywhere (e.g., customer-support)')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-templates",
-  "version": "1.22.0",
+  "version": "1.22.2",
   "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": {
@@ -32,7 +32,11 @@
     "dev:unlink": "npm unlink -g claude-code-templates",
     "pretest:commands": "npm run dev:link",
     "analytics:start": "node src/analytics.js",
-    "analytics:test": "npm run test:analytics"
+    "analytics:test": "npm run test:analytics",
+    "security-audit": "node src/security-audit.js",
+    "security-audit:ci": "node src/security-audit.js --ci",
+    "security-audit:verbose": "node src/security-audit.js --verbose",
+    "security-audit:json": "node src/security-audit.js --json --output=security-report.json"
   },
   "keywords": [
     "claude",
@@ -67,6 +71,7 @@
     "express": "^4.18.2",
     "fs-extra": "^11.1.1",
     "inquirer": "^8.2.6",
+    "js-yaml": "^4.1.0",
     "open": "^8.4.2",
     "ora": "^5.4.1",
     "uuid": "^11.1.0",

package/src/analytics-web/chats_mobile.html

@@ -1576,20 +1576,20 @@
             async loadMoreMessages(conversationId, isInitialLoad = false) {
                 const chatMessages = document.getElementById('chatMessages');
                 if (!chatMessages) return;
-                
+
                 // Prevent concurrent loading
                 if (this.messagesPagination.isLoading || !this.messagesPagination.hasMore) {
                     return;
                 }
-                
+
                 // Ensure we're loading for the correct conversation
                 if (this.messagesPagination.conversationId !== conversationId) {
                     return;
                 }
-                
+
                 try {
                     this.messagesPagination.isLoading = true;
-                    
+
                     if (isInitialLoad) {
                         // Show loading state for initial load
                         chatMessages.innerHTML = `
@@ -1604,16 +1604,16 @@
                         // Show loading indicator at top for infinite scroll
                         this.showMessagesLoadingIndicator(true);
                     }
-                    
+
                     // Fetch paginated messages from the server
                     const response = await fetch(`/api/conversations/${conversationId}/messages?page=${this.messagesPagination.currentPage}&limit=${this.messagesPagination.limit}`);
-                    
+
                     if (!response.ok) {
                         throw new Error(`HTTP error! status: ${response.status}`);
                     }
-                    
+
                     const messagesData = await response.json();
-                    
+
                     if (messagesData && messagesData.messages) {
                         // Update pagination state - handle both paginated and non-paginated responses
                         if (messagesData.pagination) {
@@ -1625,24 +1625,25 @@
                             this.messagesPagination.hasMore = false;
                             this.messagesPagination.currentPage = 1;
                         }
-                        
+
                         // Get existing messages or initialize
                         let existingMessages = this.loadedMessages.get(conversationId) || [];
-                        
+
                         if (isInitialLoad) {
                             // For initial load, replace all messages (newest messages first)
                             existingMessages = messagesData.messages;
+                            // Render all messages for initial load
+                            this.renderCachedMessages(existingMessages, false);
                         } else {
                             // For infinite scroll, prepend older messages to the beginning
                             existingMessages = [...messagesData.messages, ...existingMessages];
+                            // Render ONLY the new messages (not all accumulated messages)
+                            this.renderCachedMessages(messagesData.messages, true);
                         }
-                        
+
                         // Cache the combined messages
                         this.loadedMessages.set(conversationId, existingMessages);
-                        
-                        // Render messages
-                        this.renderCachedMessages(existingMessages, !isInitialLoad);
-                        
+
                         // Setup scroll listener for infinite scroll (only on initial load)
                         if (isInitialLoad) {
                             this.setupMessagesScrollListener(conversationId);
@@ -1655,7 +1656,7 @@
                             // Update status based on conversation state
                             this.analyzeConversationStatus(existingMessages);
                         }
-                        
+
                     } else if (isInitialLoad) {
                         chatMessages.innerHTML = `
                             <div class="no-messages-found">

package/src/console-bridge.js

@@ -338,12 +338,12 @@ class ConsoleBridge extends EventEmitter {
       if (Math.random() > 0.7) { // Simulate occasional prompts
         this.handleDetectedPrompt(`Read file
 
-  Search(pattern: "(?:Yes|No|yes|no)(?:,\\s*and\\s*don't\\s*ask\\s*again)?", path: 
-  "../../../../../../../.claude/projects/-Users-danipower-Proyectos-Github-claude-code-templates", include: "*.jsonl")
+  Search(pattern: "(?:Yes|No|yes|no)(?:,\\s*and\\s*don't\\s*ask\\s*again)?", path:
+  "../../../../../../../.claude/projects/-Users-username-Projects-project-name", include: "*.jsonl")
 
 Do you want to proceed?
 ❯ 1. Yes
-  2. Yes, and add /Users/danipower/.claude/projects/-Users-danipower-Proyectos-Github-claude-code-templates as a working directory for this session
+  2. Yes, and add ~/.claude/projects/-Users-username-Projects-project-name as a working directory for this session
   3. No, and tell Claude what to do differently (esc)`);
       }
       

package/src/index.js

@@ -129,7 +129,7 @@ async function createClaudeConfig(options = {}) {
   }
   
   // Handle multiple components installation (new approach)
-  if (options.agent || options.command || options.mcp || options.setting || options.hook) {
+  if (options.agent || options.command || options.mcp || options.setting || options.hook || options.skill) {
     // If --workflow is used with components, treat it as YAML
     if (options.workflow) {
       options.yaml = options.workflow;
@@ -1391,6 +1391,166 @@ async function getAvailableAgentsFromGitHub() {
   }
 }
 
+async function installIndividualSkill(skillName, targetDir, options) {
+  console.log(chalk.blue(`💡 Installing skill: ${skillName}`));
+
+  try {
+    // Skills can be in format: "skill-name" or "category/skill-name"
+    // Extract the actual skill name (last part of the path)
+    const skillBaseName = skillName.includes('/') ? skillName.split('/').pop() : skillName;
+
+    // Skills always use SKILL.md as the main file (Anthropic standard)
+    // Format: skills/category/skill-name/SKILL.md
+    const githubUrl = `https://raw.githubusercontent.com/davila7/claude-code-templates/main/cli-tool/components/skills/${skillName}/SKILL.md`;
+
+    console.log(chalk.gray(`📥 Downloading from GitHub (main branch)...`));
+
+    const response = await fetch(githubUrl);
+    if (!response.ok) {
+      if (response.status === 404) {
+        console.log(chalk.red(`❌ Skill "${skillName}" not found`));
+        console.log(chalk.yellow('💡 Tip: Use format "category/skill-name" (e.g., creative-design/algorithmic-art)'));
+        console.log(chalk.yellow('Available categories: creative-design, development, document-processing, enterprise-communication'));
+        return false;
+      }
+      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+    }
+
+    const skillContent = await response.text();
+
+    // Check if there are additional files to download (e.g., referenced .md files, scripts, reference)
+    const additionalFiles = {};
+
+    // 1. Look for references to additional files like [FORMS.md](FORMS.md) or [reference](./reference/)
+    const referencePattern = /\[([A-Z_]+\.md)\]\(\1\)|\[.*?\]\(\.\/([a-z_]+)\/\)/g;
+    let match;
+
+    while ((match = referencePattern.exec(skillContent)) !== null) {
+      const referencedFile = match[1] || match[2];
+      const referencedUrl = githubUrl.replace('SKILL.md', referencedFile);
+
+      try {
+        console.log(chalk.gray(`📥 Downloading referenced file: ${referencedFile}...`));
+        const refResponse = await fetch(referencedUrl);
+        if (refResponse.ok) {
+          const refContent = await refResponse.text();
+          additionalFiles[`.claude/skills/${skillBaseName}/${referencedFile}`] = {
+            content: refContent,
+            executable: false
+          };
+          console.log(chalk.green(`✓ Found referenced file: ${referencedFile}`));
+        }
+      } catch (error) {
+        // Referenced file is optional, continue if not found
+        console.log(chalk.gray(`  (Referenced file ${referencedFile} not found, continuing...)`));
+      }
+    }
+
+    // 2. Try to download common directories (scripts/, reference/) from GitHub API
+    const githubApiUrl = `https://api.github.com/repos/davila7/claude-code-templates/contents/cli-tool/components/skills/${skillName}`;
+
+    try {
+      const dirResponse = await fetch(githubApiUrl, {
+        headers: {
+          'Accept': 'application/vnd.github.v3+json',
+          'User-Agent': 'claude-code-templates'
+        }
+      });
+
+      if (dirResponse.ok) {
+        const dirContents = await dirResponse.json();
+
+        // Find directories (scripts, reference, templates)
+        for (const item of dirContents) {
+          if (item.type === 'dir' && ['scripts', 'reference', 'templates'].includes(item.name)) {
+            console.log(chalk.gray(`📂 Found directory: ${item.name}/`));
+
+            // Fetch directory contents recursively
+            const subdirResponse = await fetch(item.url, {
+              headers: {
+                'Accept': 'application/vnd.github.v3+json',
+                'User-Agent': 'claude-code-templates'
+              }
+            });
+
+            if (subdirResponse.ok) {
+              const subdirContents = await subdirResponse.json();
+
+              for (const file of subdirContents) {
+                if (file.type === 'file') {
+                  try {
+                    const fileResponse = await fetch(file.download_url);
+                    if (fileResponse.ok) {
+                      const fileContent = await fileResponse.text();
+                      const isExecutable = file.name.endsWith('.py') || file.name.endsWith('.sh');
+
+                      additionalFiles[`.claude/skills/${skillBaseName}/${item.name}/${file.name}`] = {
+                        content: fileContent,
+                        executable: isExecutable
+                      };
+                      console.log(chalk.green(`✓ Downloaded: ${item.name}/${file.name}`));
+                    }
+                  } catch (err) {
+                    console.log(chalk.gray(`  (Could not download ${item.name}/${file.name})`));
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    } catch (error) {
+      // GitHub API access optional, continue if not available
+      console.log(chalk.gray(`  (Could not access GitHub API for directory listing)`));
+    }
+
+    // Create .claude/skills/skill-name directory (Anthropic standard structure)
+    const skillsDir = path.join(targetDir, '.claude', 'skills');
+    const skillSubDir = path.join(skillsDir, skillBaseName);
+    await fs.ensureDir(skillSubDir);
+
+    // Always use SKILL.md as filename (Anthropic standard)
+    const targetFile = path.join(skillSubDir, 'SKILL.md');
+
+    // Write the main skill file
+    await fs.writeFile(targetFile, skillContent, 'utf8');
+
+    // Write any additional files
+    for (const [filePath, fileData] of Object.entries(additionalFiles)) {
+      const fullPath = path.join(targetDir, filePath);
+      await fs.ensureDir(path.dirname(fullPath));
+      await fs.writeFile(fullPath, fileData.content, 'utf8');
+
+      if (fileData.executable) {
+        await fs.chmod(fullPath, '755');
+      }
+    }
+
+    if (!options.silent) {
+      console.log(chalk.green(`✅ Skill "${skillName}" installed successfully!`));
+      console.log(chalk.cyan(`📁 Installed to: ${path.relative(targetDir, targetFile)}`));
+      if (Object.keys(additionalFiles).length > 0) {
+        console.log(chalk.cyan(`📄 Additional files: ${Object.keys(additionalFiles).length}`));
+      }
+      console.log(chalk.cyan(`📦 Downloaded from: ${githubUrl}`));
+    }
+
+    // Track successful skill installation
+    trackingService.trackDownload('skill', skillName, {
+      installation_type: 'individual_skill',
+      target_directory: path.relative(process.cwd(), targetDir),
+      source: 'github_main',
+      has_additional_files: Object.keys(additionalFiles).length > 0
+    });
+
+    return true;
+
+  } catch (error) {
+    console.log(chalk.red(`❌ Error installing skill: ${error.message}`));
+    return false;
+  }
+}
+
 /**
  * Install multiple components with optional YAML workflow
  */
@@ -1403,7 +1563,8 @@ async function installMultipleComponents(options, targetDir) {
       commands: [],
       mcps: [],
       settings: [],
-      hooks: []
+      hooks: [],
+      skills: []
     };
     
     // Parse comma-separated values for each component type
@@ -1431,8 +1592,13 @@ async function installMultipleComponents(options, targetDir) {
       const hooksInput = Array.isArray(options.hook) ? options.hook.join(',') : options.hook;
       components.hooks = hooksInput.split(',').map(h => h.trim()).filter(h => h);
     }
-    
-    const totalComponents = components.agents.length + components.commands.length + components.mcps.length + components.settings.length + components.hooks.length;
+
+    if (options.skill) {
+      const skillsInput = Array.isArray(options.skill) ? options.skill.join(',') : options.skill;
+      components.skills = skillsInput.split(',').map(s => s.trim()).filter(s => s);
+    }
+
+    const totalComponents = components.agents.length + components.commands.length + components.mcps.length + components.settings.length + components.hooks.length + components.skills.length;
     
     if (totalComponents === 0) {
       console.log(chalk.yellow('⚠️  No components specified to install.'));
@@ -1445,6 +1611,7 @@ async function installMultipleComponents(options, targetDir) {
     console.log(chalk.gray(`   MCPs: ${components.mcps.length}`));
     console.log(chalk.gray(`   Settings: ${components.settings.length}`));
     console.log(chalk.gray(`   Hooks: ${components.hooks.length}`));
+    console.log(chalk.gray(`   Skills: ${components.skills.length}`));
     
     // Counter for successfully installed components
     let successfullyInstalled = 0;
@@ -1526,14 +1693,21 @@ async function installMultipleComponents(options, targetDir) {
     // Install hooks (using shared installation locations)
     for (const hook of components.hooks) {
       console.log(chalk.gray(`   Installing hook: ${hook}`));
-      const hookSuccess = await installIndividualHook(hook, targetDir, { 
-        ...options, 
-        silent: true, 
-        sharedInstallLocations: sharedInstallLocations 
+      const hookSuccess = await installIndividualHook(hook, targetDir, {
+        ...options,
+        silent: true,
+        sharedInstallLocations: sharedInstallLocations
       });
       if (hookSuccess > 0) successfullyInstalled++;
     }
-    
+
+    // Install skills
+    for (const skill of components.skills) {
+      console.log(chalk.gray(`   Installing skill: ${skill}`));
+      const skillSuccess = await installIndividualSkill(skill, targetDir, { ...options, silent: true });
+      if (skillSuccess) successfullyInstalled++;
+    }
+
     // Handle YAML workflow if provided
     if (options.yaml) {
       console.log(chalk.blue('\n📄 Processing workflow YAML...'));

package/src/security-audit.js

@@ -0,0 +1,164 @@
+#!/usr/bin/env node
+
+/**
+ * Security Audit CLI - Validates component security
+ *
+ * Usage:
+ *   node src/security-audit.js [options]
+ *   npm run security-audit
+ */
+
+const ValidationOrchestrator = require('./validation/ValidationOrchestrator');
+const fs = require('fs-extra');
+const path = require('path');
+const chalk = require('chalk');
+
+/**
+ * Scan directory for component files
+ */
+async function scanComponents(directory) {
+  const components = [];
+  const componentTypes = ['agents', 'commands', 'mcps', 'settings', 'hooks'];
+
+  for (const type of componentTypes) {
+    const typeDir = path.join(directory, type);
+
+    if (!await fs.pathExists(typeDir)) {
+      continue;
+    }
+
+    // Recursively find all .md files
+    const files = await findMarkdownFiles(typeDir);
+
+    for (const file of files) {
+      const content = await fs.readFile(file, 'utf8');
+      const relativePath = path.relative(process.cwd(), file);
+
+      components.push({
+        content,
+        path: relativePath,
+        type: type.slice(0, -1) // Remove 's' (agents -> agent)
+      });
+    }
+  }
+
+  return components;
+}
+
+/**
+ * Recursively find all markdown files
+ */
+async function findMarkdownFiles(dir) {
+  const files = [];
+  const entries = await fs.readdir(dir, { withFileTypes: true });
+
+  for (const entry of entries) {
+    const fullPath = path.join(dir, entry.name);
+
+    if (entry.isDirectory()) {
+      const subFiles = await findMarkdownFiles(fullPath);
+      files.push(...subFiles);
+    } else if (entry.isFile() && entry.name.endsWith('.md')) {
+      files.push(fullPath);
+    }
+  }
+
+  return files;
+}
+
+/**
+ * Main execution
+ */
+async function main() {
+  const args = process.argv.slice(2);
+  const ciMode = args.includes('--ci');
+  const verbose = args.includes('--verbose') || args.includes('-v');
+  const jsonOutput = args.includes('--json');
+  const outputFile = args.find(arg => arg.startsWith('--output='))?.split('=')[1];
+
+  console.log(chalk.blue('\n🔒 Claude Code Templates - Security Audit\n'));
+  console.log(chalk.gray('━'.repeat(60)));
+
+  // Determine components directory
+  // Check if we're running from the cli-tool directory or the root
+  let componentsDir = path.join(process.cwd(), 'components');
+  if (!await fs.pathExists(componentsDir)) {
+    componentsDir = path.join(process.cwd(), 'cli-tool', 'components');
+  }
+
+  if (!await fs.pathExists(componentsDir)) {
+    console.error(chalk.red('❌ Components directory not found:', componentsDir));
+    console.error(chalk.gray('   Tried:', path.join(process.cwd(), 'components')));
+    console.error(chalk.gray('   Tried:', path.join(process.cwd(), 'cli-tool', 'components')));
+    process.exit(1);
+  }
+
+  console.log(chalk.blue('📁 Scanning components directory...'));
+  const components = await scanComponents(componentsDir);
+  console.log(chalk.gray(`   Found ${components.length} components\n`));
+
+  // Validate all components
+  const orchestrator = new ValidationOrchestrator();
+
+  console.log(chalk.blue('🔍 Running security validation...\n'));
+  const results = await orchestrator.validateComponents(components, {
+    strict: ciMode,
+    updateRegistry: false
+  });
+
+  // Generate report
+  if (jsonOutput) {
+    const report = orchestrator.generateJsonReport(results);
+
+    if (outputFile) {
+      await fs.writeFile(outputFile, report);
+      console.log(chalk.green(`✅ JSON report saved to: ${outputFile}`));
+    } else {
+      console.log(report);
+    }
+  } else {
+    const report = orchestrator.generateReport(results, {
+      verbose,
+      colors: !ciMode
+    });
+    console.log(report);
+  }
+
+  // Summary
+  console.log(chalk.bold('\n📊 Validation Summary:'));
+  console.log(chalk.gray('━'.repeat(60)));
+  console.log(`   Total components: ${results.summary.total}`);
+  console.log(`   ${chalk.green('✅ Passed')}: ${results.summary.passed}`);
+  console.log(`   ${chalk.red('❌ Failed')}: ${results.summary.failed}`);
+  console.log(`   ${chalk.yellow('⚠️  Warnings')}: ${results.summary.warnings}`);
+  console.log(chalk.gray('━'.repeat(60)));
+
+  // Exit with appropriate code
+  if (ciMode && results.summary.failed > 0) {
+    console.error(chalk.red('\n❌ Security audit failed in CI mode\n'));
+    process.exit(1);
+  }
+
+  if (results.summary.failed > 0) {
+    console.log(chalk.yellow('\n⚠️  Some components failed validation\n'));
+    process.exit(0); // Don't fail in non-CI mode
+  }
+
+  console.log(chalk.green('\n✅ All components passed security validation\n'));
+  process.exit(0);
+}
+
+// Error handling
+process.on('unhandledRejection', (error) => {
+  console.error(chalk.red('\n❌ Unhandled error:'), error);
+  process.exit(1);
+});
+
+// Run
+main().catch((error) => {
+  console.error(chalk.red('\n❌ Security audit failed:'), error.message);
+  if (process.argv.includes('--verbose')) {
+    console.error(error);
+  }
+  process.exit(1);
+});