skills/davila7__claude-code-templates
1
0
Fork 0
mirror of https://github.com/davila7/claude-code-templates.git synced 2026-09-19 01:30:23 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
v1.14.16
davila7__claude-code-templates/docs/index.html
T
Dani 66be089cb7 Implement comprehensive shopping cart system for Claude Code Templates 
- Add Shopify-style cart sidebar with drag-from-right animation
- Implement Add to Stack buttons for all component cards
- Create dynamic command generation for agents, commands, and MCPs
- Add cart state management with localStorage persistence
- Implement notification system with auto-dismiss
- Add social sharing for X/Twitter and Threads
- Create overlay copy buttons for command text in cards and cart
- Optimize card layout grid system (4 columns desktop, 2 tablet, 1 mobile)
- Add cart floating button with item count badge
- Fix scroll prevention and notification persistence issues
- Remove quotes from agent parameters in generated commands
- Implement compact cart item design with Clear All repositioning
- Add comprehensive cart styling with responsive design
- Include share functionality with proper URL encoding
- Update CLI package version to 1.14.16 for npm compatibility

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-06 08:53:34 -04:00

360 lines
24 KiB
HTML
Raw Permalink Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Claude Code Templates</title>
<meta name="description" content="Browse and install Claude Code configuration templates for different languages and frameworks">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://davila7.github.io/claude-code-templates/">
<meta property="og:title" content="Claude Code Templates - Ready-to-use configurations">
<meta property="og:description" content="Browse and install Claude Code configuration templates for different languages and frameworks. Includes 100+ agents, 159+ commands, 23+ MCPs, and 14+ templates.">
<meta property="og:image" content="https://raw.githubusercontent.com/davila7/claude-code-templates/main/social-preview.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Claude Code Templates - Ready-to-use configurations for your projects">
<meta property="og:site_name" content="Claude Code Templates">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://davila7.github.io/claude-code-templates/">
<meta property="twitter:title" content="Claude Code Templates - Ready-to-use configurations">
<meta property="twitter:description" content="Browse and install Claude Code configuration templates for different languages and frameworks. Includes 100+ agents, 159+ commands, 23+ MCPs, and 14+ templates.">
<meta property="twitter:image" content="https://raw.githubusercontent.com/davila7/claude-code-templates/main/social-preview.png">
<meta property="twitter:image:alt" content="Claude Code Templates - Ready-to-use configurations for your projects">
<meta property="twitter:creator" content="@davila7">
<meta property="twitter:site" content="@davila7">
<!-- Additional SEO -->
<meta name="keywords" content="Claude Code, AI development, code templates, agents, commands, MCP, Model Context Protocol, development tools, AI assistant">
<meta name="author" content="David Davila">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://davila7.github.io/claude-code-templates/">
<link rel="stylesheet" href="css/styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css">
<script src="https://cdn.counter.dev/script.js" data-id="1f599060-4af4-4cbc-a809-a158768ab768" data-utcoffset="-4"></script>
</head>
<body>
<header class="header">
<div class="container">
<div class="header-content">
<div class="terminal-header">
<div class="ascii-title">
<pre class="ascii-art"> ██████╗██╗ █████╗ ██╗ ██╗██████╗ ███████╗ ██████╗ ██████╗ ██████╗ ███████╗ ████████╗███████╗███╗ ███╗██████╗ ██╗ █████╗ ████████╗███████╗███████╗
██╔════╝██║ ██╔══██╗██║ ██║██╔══██╗██╔════╝ ██╔════╝██╔═══██╗██╔══██╗██╔════╝ ╚══██╔══╝██╔════╝████╗ ████║██╔══██╗██║ ██╔══██╗╚══██╔══╝██╔════╝██╔════╝
██║ ██║ ███████║██║ ██║██║ ██║█████╗ ██║ ██║ ██║██║ ██║█████╗ ██║ █████╗ ██╔████╔██║██████╔╝██║ ███████║ ██║ █████╗ ███████╗
██║ ██║ ██╔══██║██║ ██║██║ ██║██╔══╝ ██║ ██║ ██║██║ ██║██╔══╝ ██║ ██╔══╝ ██║╚██╔╝██║██╔═══╝ ██║ ██╔══██║ ██║ ██╔══╝ ╚════██║
╚██████╗███████╗██║ ██║╚██████╔╝██████╔╝███████╗ ╚██████╗╚██████╔╝██████╔╝███████╗ ██║ ███████╗██║ ╚═╝ ██║██║ ███████╗██║ ██║ ██║ ███████╗███████║
╚═════╝╚══════╝╚═╝ ╚═╝ ╚═════╝ ╚═════╝ ╚══════╝ ╚═════╝ ╚═════╝ ╚═════╝ ╚══════╝ ╚═╝ ╚══════╝╚═╝ ╚═╝╚═╝ ╚══════╝╚═╝ ╚═╝ ╚═╝ ╚══════╝╚══════╝</pre>
</div>
<div class="terminal-subtitle">
<span class="status-dot"></span>
Ready-to-use configurations for your Claude Code projects
</div>
</div>
<div class="header-actions">
<!-- Workflows button temporarily hidden for testing -->
<!--
<a href="workflows.html" class="header-btn">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<path d="M4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H16L12,22L8,18H4A2,2 0 0,1 2,16V4A2,2 0 0,1 4,2M4,4V16H8.83L12,19.17L15.17,16H20V4H4M6,6H18V8H6V6M6,10H16V12H6V10M6,14H14V16H6V14Z"/>
</svg>
Workflows
</a>
-->
<a href="https://docs.aitmpl.com/" alt="_blank" class="header-btn">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"/>
</svg>
Docs
</a>
<a href="https://github.com/davila7/claude-code-templates" target="_blank" class="header-btn">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.30.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
</svg>
GitHub
</a>
</div>
</div>
</div>
</header>
<main class="terminal">
<section class="stats-section">
<div class="stats-badges">
<a href="https://www.npmjs.com/package/claude-code-templates" target="_blank" class="stat-badge-link">
<img src="https://img.shields.io/npm/dt/claude-code-templates.svg" alt="npm downloads" class="stat-badge">
</a>
<a href="https://github.com/davila7/claude-code-templates" target="_blank" class="stat-badge-link">
<img src="https://img.shields.io/github/stars/davila7/claude-code-templates.svg?style=social&label=Star" alt="GitHub stars" class="stat-badge">
</a>
<a href="https://www.deepgraph.co/davila7/claude-code-templates" target="_blank" class="stat-badge-link">
<img src="https://img.shields.io/badge/%E2%9C%A8%20Open%20in-DeepGraph-a465f7?style=flat" alt="Open in DeepGraph" class="stat-badge">
</a>
</div>
</section>
<section class="steps-section">
<div class="steps-grid">
<div class="step-card">
<div class="step-number">1</div>
<div class="step-content">
<h3>Install CLI Tool (Optional)</h3>
<p>Install globally for convenience, or use npx to run directly</p>
<div class="command-line">
<span class="prompt">$</span>
<code class="command">npm install -g claude-code-templates</code>
<button class="copy-btn" onclick="copyToClipboard('npm install -g claude-code-templates')">Copy</button>
</div>
</div>
</div>
<div class="step-card">
<div class="step-number">2</div>
<div class="step-content">
<h3>Choose & Run Template</h3>
<p>Select your framework below and run the installation command</p>
<div class="step-highlight">
<span class="highlight-text">Click any template card below to copy its command</span>
</div>
</div>
</div>
<div class="step-card">
<div class="step-number">3</div>
<div class="step-content">
<h3>Start Coding</h3>
<p>Launch Claude Code and start developing with AI assistance</p>
<div class="command-line">
<span class="prompt">$</span>
<code class="command">claude</code>
<span class="command-note">// That's it! 🎉</span>
</div>
</div>
</div>
</div>
</section>
<section class="unified-filter-section">
<div class="unified-filter-bar">
<div class="filter-label">$ Filter Components</div>
<div class="filter-buttons">
<button class="filter-btn active" data-filter="agents" onclick="setUnifiedFilter('agents')">
🤖 Agents
</button>
<button class="filter-btn" data-filter="commands" onclick="setUnifiedFilter('commands')">
⚡ Commands
</button>
<button class="filter-btn" data-filter="mcps" onclick="setUnifiedFilter('mcps')">
🔌 MCPs
</button>
<button class="filter-btn" data-filter="templates" onclick="setUnifiedFilter('templates')">
📦 Templates
</button>
</div>
</div>
</section>
<section class="content-grid" id="contentGrid">
<div class="unified-grid" id="unifiedGrid">
<!-- All content will be loaded here by JavaScript -->
</div>
</section>
<section class="additional-tools">
<div class="command-block">
<div class="command-label">$ Additional Tools</div>
<div class="command-description">Explore more features to enhance your development workflow</div>
</div>
<div class="tools-grid">
<div class="tool-card">
<div class="tool-icon">📊</div>
<h3>Analytics Dashboard</h3>
<p>Real-time monitoring of your Claude Code sessions with detailed analytics and performance metrics</p>
<div class="command-line">
<span class="prompt">$</span>
<code class="command">npx claude-code-templates@latest --analytics</code>
<button class="copy-btn" onclick="copyToClipboard('npx claude-code-templates@latest --analytics')">Copy</button>
</div>
</div>
<div class="tool-card">
<div class="tool-icon">🔍</div>
<h3>Health Check</h3>
<p>Comprehensive system diagnostics to ensure your Claude Code setup is optimal and ready for development</p>
<div class="command-line">
<span class="prompt">$</span>
<code class="command">npx claude-code-templates@latest --health-check</code>
<button class="copy-btn" onclick="copyToClipboard('npx claude-code-templates@latest --health-check')">Copy</button>
</div>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="container">
<div class="footer-content">
<p>&copy; 2025 Claude Code Templates. Open source project.</p>
<div class="footer-links">
<a href="/download-stats.html" class="footer-link">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<path d="M3,3V21H21V3H3M20,20H4V4H20V20M8,17L12,13L16,17H13V19H11V17H8M8,7H16V9H8V7M8,11H16V13H8V11Z"/>
</svg>
Download Analytics
</a>
<a href="https://github.com/davila7/claude-code-templates" target="_blank" class="footer-link">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.30.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
</svg>
Documentation & More Info
</a>
</div>
</div>
</div>
</footer>
<!-- Shopping Cart Sidebar -->
<div id="shoppingCart" class="cart-sidebar">
<div class="cart-content">
<div class="cart-header">
<h3>
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<path d="M7 18c-1.1 0-2 0.9-2 2s0.9 2 2 2 2-0.9 2-2-0.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-0.16 0.27-0.25 0.58-0.25 0.96 0 1.1 0.9 2 2 2h12v-2H7.42c-0.14 0-0.25-0.11-0.25-0.25l0.03-0.12L8.1 13h7.45c0.75 0 1.41-0.41 1.75-1.03L21.7 4H5.21l-0.94-2H1zM17 18c-1.1 0-2 0.9-2 2s0.9 2 2 2 2-0.9 2-2-0.9-2-2-2z"/>
</svg>
Stack Builder
</h3>
<button class="cart-close" onclick="closeCart()">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/>
</svg>
</button>
</div>
<div class="cart-body">
<div class="cart-empty" id="cartEmpty">
<div class="empty-cart-icon">🛒</div>
<p>Your stack is empty</p>
<small>Add agents, commands, or MCPs to build your development stack</small>
</div>
<div class="cart-items" id="cartItems" style="display: none;">
<div class="cart-clear-section">
<button class="clear-all-btn" onclick="clearCart()">
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/>
</svg>
Clear All
</button>
</div>
<div class="cart-section">
<h4>
<span class="section-icon">🤖</span>
Agents (<span id="agentsCount">0</span>)
</h4>
<div class="cart-section-items" id="agentsList"></div>
</div>
<div class="cart-section">
<h4>
<span class="section-icon">⚡</span>
Commands (<span id="commandsCount">0</span>)
</h4>
<div class="cart-section-items" id="commandsList"></div>
</div>
<div class="cart-section">
<h4>
<span class="section-icon">🔌</span>
MCPs (<span id="mcpsCount">0</span>)
</h4>
<div class="cart-section-items" id="mcpsList"></div>
</div>
</div>
</div>
<div class="cart-footer" id="cartFooter" style="display: none;">
<div class="command-preview">
<div class="command-preview-header">
<span>Generated Command:</span>
</div>
<div class="cart-command-container">
<div class="command-code" id="generatedCommand">
npx claude-code-templates@latest
</div>
<button class="cart-copy-overlay-btn" onclick="copyCartCommand()" title="Copy command">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
</svg>
Copy
</button>
</div>
</div>
<div class="cart-instructions">
<div class="instructions-header">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<path d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />
</svg>
<strong>Instructions</strong>
</div>
<p>Navigate to your project root and run the generated command. All selected components will be installed automatically.</p>
</div>
<div class="cart-actions">
<button class="copy-command-btn" onclick="copyCartCommand()">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
</svg>
Copy Command
</button>
<button class="share-stack-btn" onclick="showShareOptions()">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<path d="M18,16.08C17.24,16.08 16.56,16.38 16.04,16.85L8.91,12.7C8.96,12.47 9,12.24 9,12C9,11.76 8.96,11.53 8.91,11.3L15.96,7.19C16.5,7.69 17.21,8 18,8A3,3 0 0,0 21,5A3,3 0 0,0 18,2A3,3 0 0,0 15,5C15,5.24 15.04,5.47 15.09,5.7L8.04,9.81C7.5,9.31 6.79,9 6,9A3,3 0 0,0 3,12A3,3 0 0,0 6,15C6.79,15 7.5,14.69 8.04,14.19L15.16,18.34C15.11,18.55 15.08,18.77 15.08,19C15.08,20.61 16.39,21.91 18,21.91C19.61,21.91 20.92,20.6 20.92,19A2.84,2.84 0 0,0 18,16.08Z"/>
</svg>
Share Stack
</button>
</div>
<div class="share-options" id="shareOptions" style="display: none;">
<button class="share-option-btn" onclick="shareOnTwitter()">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
</svg>
Share on X
</button>
<button class="share-option-btn" onclick="shareOnThreads()">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<path d="M12.186 24h-.007c-3.581-.024-6.334-1.205-8.184-3.509C2.35 18.44 1.5 15.586 1.472 12.01v-.017c.03-3.579.879-6.43 2.525-8.482C5.845 1.205 8.6.024 12.18 0h.014c2.746.02 5.043.725 6.826 2.098 1.677 1.29 2.858 3.13 3.509 5.467l-2.04.569c-1.104-3.96-3.898-5.984-8.304-6.015-2.91.022-5.11.936-6.54 2.717C4.307 6.504 3.616 8.914 3.589 12c.027 3.086.718 5.496 2.057 7.164 1.43 1.781 3.631 2.695 6.54 2.717 1.623-.02 3.094-.37 4.37-1.04.558-.29 1.029-.63 1.414-1.017.33-.33.602-.69.82-1.084.218-.395.381-.84.488-1.336.107-.495.16-1.044.16-1.644 0-.595-.053-1.144-.16-1.644-.107-.496-.27-.941-.488-1.336a3.79 3.79 0 00-.82-1.084 3.790 3.790 0 00-1.414-1.017c-1.276-.67-2.747-1.02-4.37-1.04h-.007c-1.623.02-3.094.37-4.37 1.04-.558.29-1.029.63-1.414 1.017-.33.33-.602.69-.82 1.084-.218.395-.381.84-.488 1.336-.107.5-.16 1.049-.16 1.644 0 .595.053 1.144.16 1.644.107.496.27.941.488 1.336.218.395.49.754.82 1.084.385.387.856.727 1.414 1.017 1.276.67 2.747 1.02 4.37 1.04z"/>
</svg>
Share on Threads
</button>
</div>
</div>
</div>
</div>
<!-- Cart Floating Button -->
<div id="cartFloatingBtn" class="cart-floating-btn" onclick="openCart()" style="display: none;">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
<path d="M7 18c-1.1 0-2 0.9-2 2s0.9 2 2 2 2-0.9 2-2-0.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-0.16 0.27-0.25 0.58-0.25 0.96 0 1.1 0.9 2 2 2h12v-2H7.42c-0.14 0-0.25-0.11-0.25-0.25l0.03-0.12L8.1 13h7.45c0.75 0 1.41-0.41 1.75-1.03L21.7 4H5.21l-0.94-2H1zM17 18c-1.1 0-2 0.9-2 2s0.9 2 2 2 2-0.9 2-2-0.9-2-2-2z"/>
</svg>
<span class="cart-badge" id="cartBadge">0</span>
</div>
<link rel="stylesheet" href="css/workflows-modal.css">
<script src="js/utils.js"></script>
<script src="js/data-loader.js"></script>
<script src="js/cart-manager.js"></script>
<script src="js/index-events.js"></script>
<script src="js/modal-helpers.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink