npm - claude-code-templates - Versions diffs - 1.21.12 → 1.21.13 - Mend

claude-code-templates 1.21.12 → 1.21.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (797) hide show

package/docs/component.html ADDED Viewed

@@ -0,0 +1,506 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title id="page-title">Component - Claude Code Templates</title>
+    <!-- Meta tags -->
+    <meta name="description" content="Explore Claude Code templates, agents, commands, and automation tools for enhanced development workflows.">
+    <meta name="keywords" content="Claude Code, AI development, automation, templates, agents, commands">
+    <link rel="canonical" href="" id="canonical-url">
+    <!-- Open Graph -->
+    <meta property="og:title" content="Component - Claude Code Templates" id="og-title">
+    <meta property="og:description" content="Explore Claude Code templates, agents, commands, and automation tools for enhanced development workflows." id="og-description">
+    <meta property="og:image" content="https://aitmpl.com/og-image.png">
+    <meta property="og:url" content="" id="og-url">
+    <meta property="og:type" content="website">
+    <!-- Twitter -->
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="Component - Claude Code Templates" id="twitter-title">
+    <meta name="twitter:description" content="Explore Claude Code templates, agents, commands, and automation tools for enhanced development workflows." id="twitter-description">
+    <meta name="twitter:image" content="https://aitmpl.com/og-image.png">
+    <meta name="twitter:url" content="" id="twitter-url">
+    <!-- Favicon -->
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
+    <!-- Stylesheets -->
+    <link rel="stylesheet" href="/css/component-page.css">
+    <link rel="stylesheet" href="/css/styles.css">
+    <!-- Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <!-- Hotjar Tracking Code for https://aitmpl.com -->
+    <script>
+        (function(h,o,t,j,a,r){
+            h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
+            h._hjSettings={hjid:6519181,hjsv:6};
+            a=o.getElementsByTagName('head')[0];
+            r=o.createElement('script');r.async=1;
+            r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
+            a.appendChild(r);
+        })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
+    </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 <strong>Claude Code</strong> projects
+                    </div>
+                </div>
+                <div class="header-actions">
+                    <a href="https://www.anthropic.com/claude-code?ref=aitmpl.com" target="_blank" class="header-btn anthropic-btn" title="Learn about Anthropic's Claude Code">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
+                        </svg>
+                        Claude Code
+                    </a>
+                    <a href="/blog/index.html" 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>
+                        Blog
+                    </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="component-page">
+        <!-- Back Navigation -->
+        <div class="back-navigation">
+            <div class="container">
+                <a href="/index.html" class="back-link">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                        <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.42-1.41L7.83 13H20v-2z"/>
+                    </svg>
+                    Back to Components
+                </a>
+            </div>
+        </div>
+        <!-- Loading State -->
+        <div class="loading-state" id="loadingState">
+            <div class="loading-spinner"></div>
+            <div class="loading-text">Loading component...</div>
+        </div>
+        <!-- Error State -->
+        <div class="error-state" id="errorState" style="display: none;">
+            <div class="error-icon">❌</div>
+            <h2>Component Not Found</h2>
+            <p>The requested component could not be found. Please check the URL and try again.</p>
+            <a href="/index.html" class="btn-primary">Back to Components</a>
+        </div>
+        <!-- Component Content -->
+        <div class="component-content" id="componentContent" style="display: none;">
+            <div class="container">
+                <!-- Component Header -->
+                <div class="component-header">
+                    <div class="header-actions">
+                        <a id="githubLink" href="#" target="_blank" class="github-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.30.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.30 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>
+                            View on GitHub
+                        </a>
+                        <div class="share-dropdown" id="componentShareDropdown">
+                            <button class="share-btn" onclick="toggleComponentShareDropdown()">
+                                <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>
+                            </button>
+                            <div class="share-options" id="componentShareOptions">
+                                <button class="share-option-btn" onclick="shareComponentOnTwitter()">
+                                    <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="shareComponentOnThreads()">
+                                    <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 class="component-title-section">
+                        <div class="component-icon-large" id="componentIcon">🤖</div>
+                        <div class="component-title-info">
+                            <div class="component-title-with-downloads">
+                                <h1 id="componentTitle">Component Name</h1>
+                                <div class="component-download-badge" id="componentDownloadBadge" style="display: none;">
+                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+                                        <path d="M5 20h14v-2H5v2zM19 9h-4V3H9v6H5l7 7 7-7z"/>
+                                    </svg>
+                                    <span id="downloadCount">0</span>
+                                </div>
+                            </div>
+                            <div class="component-meta">
+                                <div class="component-type-badge-title" id="componentTypeBadge">AGENT</div>
+                                <span class="component-category-title" id="componentCategory">Development</span>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Add to Stack Button - Positioned in bottom-right of title section -->
+                    <button class="title-section-add-to-cart-btn" id="addToCartBtn">
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                            <path d="M19,7H18V6A2,2 0 0,0 16,4H8A2,2 0 0,0 6,6V7H5A1,1 0 0,0 4,8A1,1 0 0,0 5,9H6V19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V9H19A1,1 0 0,0 20,8A1,1 0 0,0 19,7M8,6H16V7H8V6M16,19H8V9H16V19Z"/>
+                        </svg>
+                        <span>Add to Stack</span>
+                    </button>
+                </div>
+                <!-- Component Description -->
+                <section class="content-section">
+                    <h2>Overview</h2>
+                    <div class="component-description-content">
+                        <p id="componentDescription">Component description will be loaded here.</p>
+                    </div>
+                </section>
+                <!-- Installation Section -->
+                <section class="content-section" id="installationSection">
+                    <h2>Installation</h2>
+                    <!-- Basic Installation -->
+                    <div class="installation-method">
+                        <h3>📦 Basic Installation</h3>
+                        <p class="method-description">Install this component locally in your project. Works with your existing Claude Code setup.</p>
+                        <div class="command-block">
+                            <div class="command-header">
+                                <span class="command-label">Terminal</span>
+                            </div>
+                            <div class="command-content">
+                                <code id="basicInstallCommand">npx claude-code-templates@latest --agent=example --yes</code>
+                                <button class="copy-btn" onclick="copyToClipboard(document.getElementById('basicInstallCommand').textContent)">Copy</button>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Global Agent Section (for agents only) -->
+                    <div class="installation-method" id="globalAgentSection" style="display: none;">
+                        <h3>🌍 Global Agent (Claude Code SDK)</h3>
+                        <p class="method-description">Create a global AI agent accessible from anywhere with zero configuration. Perfect for automation and CI/CD workflows.</p>
+                        <div class="command-block">
+                            <div class="command-header">
+                                <span class="command-label">Terminal</span>
+                            </div>
+                            <div class="command-content">
+                                <code id="globalAgentCommand">npx claude-code-templates@latest --create-agent example</code>
+                                <button class="copy-btn" onclick="copyToClipboard(document.getElementById('globalAgentCommand').textContent)">Copy</button>
+                            </div>
+                        </div>
+                        <div class="usage-info">
+                            <h4>After installation, use from anywhere:</h4>
+                            <div class="command-block small">
+                                <div class="command-content">
+                                    <code id="globalUsageCommand">example "your prompt here"</code>
+                                    <button class="copy-btn" onclick="copyToClipboard(document.getElementById('globalUsageCommand').textContent)">Copy</button>
+                                </div>
+                            </div>
+                            <div class="features-list">
+                                <div class="feature">✅ Works in scripts, CI/CD, npm tasks</div>
+                                <div class="feature">✅ Auto-detects project context</div>
+                                <div class="feature">✅ Powered by Claude Code SDK</div>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- E2B Sandbox Section (for agents only) -->
+                    <div class="installation-method" id="e2bSandboxSection" style="display: none;">
+                        <h3>☁️ Run in E2B Sandbox (Cloud Execution) <span class="new-badge">NEW</span></h3>
+                        <p class="method-description">Execute Claude Code with this component in an isolated cloud environment using E2B. Perfect for testing complex projects without affecting your local system.</p>
+                        <div class="setup-requirements">
+                            <h4>🔑 Setup API Keys</h4>
+                            <p>Add to your .env file:</p>
+                            <div class="env-block">
+                                <code>ANTHROPIC_API_KEY=your_anthropic_key_here</code>
+                                <div class="env-comment"># Required for Claude Code access</div>
+                                <code>E2B_API_KEY=your_e2b_key_here</code>
+                            </div>
+                            <div class="api-key-links">
+                                <a href="https://console.anthropic.com" target="_blank" class="api-key-link">
+                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                                        <path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z"/>
+                                    </svg>
+                                    Get Anthropic API Key
+                                </a>
+                                <a href="https://e2b.dev" target="_blank" class="api-key-link">
+                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                                        <path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z"/>
+                                    </svg>
+                                    Get E2B API Key
+                                </a>
+                            </div>
+                        </div>
+                        <div class="command-block">
+                            <div class="command-header">
+                                <span class="command-label">Terminal</span>
+                            </div>
+                            <div class="command-content">
+                                <code id="e2bSandboxCommand">npx claude-code-templates@latest --sandbox e2b --agent=example --prompt "your development task"</code>
+                                <button class="copy-btn" onclick="copyToClipboard(document.getElementById('e2bSandboxCommand').textContent)">Copy</button>
+                            </div>
+                        </div>
+                        <div class="e2b-features">
+                            <div class="feature">☁️ Isolated cloud environment</div>
+                            <div class="feature">🔧 Full development tools</div>
+                            <div class="feature">📊 Real-time execution output</div>
+                        </div>
+                        <div class="e2b-requirements">
+                            <div class="requirements-title">Requirements:</div>
+                            <div class="feature">• Valid E2B API key</div>
+                            <div class="feature">• Internet connection</div>
+                            <div class="feature">• Claude Code v1.0.0+</div>
+                        </div>
+                    </div>
+                </section>
+                <!-- Component Code Section -->
+                <section class="component-code-section">
+                    <h2>Component Code</h2>
+                    <div class="code-editor">
+                        <div class="code-header">
+                            <span class="code-language" id="codeLanguage">markdown</span>
+                            <button class="copy-code-btn" onclick="copyToClipboard(document.querySelector('#codeContent code').textContent)">
+                                <svg width="14" height="14" 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 Code
+                            </button>
+                        </div>
+                        <div class="code-body">
+                            <div class="code-line-numbers" id="lineNumbers">
+                                <span>1</span>
+                            </div>
+                            <div class="code-content" id="codeContent">
+                                <pre><code class="language-markdown">Loading component code...</code></pre>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+            </div>
+        </div>
+    </main>
+    <!-- Shopping Cart Sidebar -->
+    <div id="shoppingCart" class="cart-sidebar">
+        <div class="cart-content">
+            <div class="cart-header">
+                <div class="cart-header-main">
+                    <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>
+                <!-- Clear All Button - Subtle position -->
+                <div class="cart-clear-section-prominent" id="cartClearProminent" style="display: none;">
+                    <button class="clear-all-btn-prominent" onclick="clearCart()">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+                            <path d="M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M7,6H17V19H7V6M9,8V17H11V8H9M13,8V17H15V8H13Z"/>
+                        </svg>
+                        Clear All
+                        <span class="clear-count" id="clearCount">(0)</span>
+                    </button>
+                </div>
+            </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, settings, hooks, or MCPs to build your development stack</small>
+                </div>
+                <div class="cart-items" id="cartItems" style="display: none;">
+                    <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>
+                            Settings (<span id="settingsCount">0</span>)
+                        </h4>
+                        <div class="cart-section-items" id="settingsList"></div>
+                    </div>
+                    <div class="cart-section">
+                        <h4>
+                            <span class="section-icon">🪝</span>
+                            Hooks (<span id="hooksCount">0</span>)
+                        </h4>
+                        <div class="cart-section-items" id="hooksList"></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>
+                    <div class="share-dropdown" id="shareDropdown">
+                        <button class="share-stack-btn" onclick="toggleShareDropdown()">
+                            <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
+                            <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" class="dropdown-arrow">
+                                <path d="M7,10L12,15L17,10H7Z"/>
+                            </svg>
+                        </button>
+                        <div class="share-options" id="shareOptions">
+                            <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>
+        </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>
+    <!-- Scripts -->
+    <script src="/js/data-loader.js"></script>
+    <script src="/js/cart-manager.js"></script>
+    <script src="/js/component-page.js"></script>
+    <script src="/js/utils.js"></script>
+    <script>
+        // Debug script loading and ensure proper initialization
+        window.addEventListener('DOMContentLoaded', () => {
+            console.log('=== Component Page Debug ===');
+            console.log('Scripts loaded. Available objects:', {
+                DataLoader: typeof DataLoader,
+                ComponentPageManager: typeof ComponentPageManager,
+                addToCart: typeof addToCart,
+                CartManager: typeof CartManager,
+                windowAddToCart: typeof window.addToCart
+            });
+            // Ensure cart manager is initialized
+            if (typeof CartManager !== 'undefined' && !window.cartManager) {
+                console.log('Initializing CartManager...');
+                window.cartManager = new CartManager();
+            }
+            // Ensure component page manager is initialized
+            if (typeof ComponentPageManager !== 'undefined' && !window.componentPageManager) {
+                console.log('Initializing ComponentPageManager...');
+                window.componentPageManager = new ComponentPageManager();
+            }
+        });
+    </script>
+</body>
+</html>