mirror of
https://github.com/davila7/claude-code-templates.git
synced 2026-09-19 01:30:23 +08:00
Dani
238 lines
15 KiB
HTML
238 lines
15 KiB
HTML
<!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">
|
|
<link rel="stylesheet" href="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">
|
|
<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.23.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 style="display: none;" class="download-stats-section" id="downloadStatsSection">
|
|
<div class="stats-container">
|
|
<div class="stats-header">
|
|
<div class="stats-title">📊 Community Downloads</div>
|
|
<div class="stats-subtitle">Real-time usage statistics</div>
|
|
</div>
|
|
<div class="stats-compact">
|
|
<div class="stat-item-compact">
|
|
<div class="stat-icon">📦</div>
|
|
<div class="stat-data">
|
|
<span class="stat-number" id="totalDownloads">-</span>
|
|
<span class="stat-label">total downloads</span>
|
|
</div>
|
|
</div>
|
|
<div class="stat-item-compact">
|
|
<div class="stat-icon">🤖</div>
|
|
<div class="stat-data">
|
|
<span class="stat-number" id="agentDownloads">-</span>
|
|
<span class="stat-label">agents</span>
|
|
</div>
|
|
</div>
|
|
<div class="stat-item-compact">
|
|
<div class="stat-icon">⚡</div>
|
|
<div class="stat-data">
|
|
<span class="stat-number" id="commandDownloads">-</span>
|
|
<span class="stat-label">commands</span>
|
|
</div>
|
|
</div>
|
|
<div class="stat-item-compact">
|
|
<div class="stat-icon">🔌</div>
|
|
<div class="stat-data">
|
|
<span class="stat-number" id="mcpDownloads">-</span>
|
|
<span class="stat-label">mcps</span>
|
|
</div>
|
|
</div>
|
|
<div class="stat-item-compact">
|
|
<div class="stat-icon">🎯</div>
|
|
<div class="stat-data">
|
|
<span class="stat-number" id="templateDownloads">-</span>
|
|
<span class="stat-label">templates</span>
|
|
</div>
|
|
</div>
|
|
<div class="stat-item-compact popular-item">
|
|
<div class="stat-icon">🏆</div>
|
|
<div class="stat-data">
|
|
<span class="stat-number" id="popularComponent">-</span>
|
|
<span class="stat-label">most popular</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="stats-updated">
|
|
<span>Last updated <span id="statsLastUpdated">-</span></span>
|
|
</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>© 2025 Claude Code Templates. Open source project.</p>
|
|
<div class="footer-links">
|
|
<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.23.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>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html> |