wehub-resource-sync
542 lines
38 KiB
HTML
542 lines
38 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>ClaudeKit: AI Agents & Skills for Claude Code</title>
|
|
|
|
<!-- Google tag (gtag.js) -->
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=G-YWW6FV2SGN"></script>
|
|
<script>
|
|
window.dataLayer = window.dataLayer || [];
|
|
function gtag(){dataLayer.push(arguments);}
|
|
gtag('js', new Date());
|
|
gtag('config', 'G-YWW6FV2SGN');
|
|
</script>
|
|
|
|
<!-- Favicon -->
|
|
<link rel="icon" type="image/x-icon" href="../../static/favicon/favicon.ico">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="../../static/favicon/favicon-16x16.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="../../static/favicon/favicon-32x32.png">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="../../static/favicon/apple-touch-icon.png">
|
|
|
|
<meta name="description" content="ClaudeKit is the fastest path from idea to production. AI agents & skills that research, plan, code, test, and document so you can ship features in hours instead of weeks.">
|
|
|
|
<!-- Open Graph / Facebook -->
|
|
<meta property="og:type" content="article">
|
|
<meta property="og:url" content="https://aitmpl.com/featured/claudekit/">
|
|
<meta property="og:title" content="ClaudeKit: AI Agents & Skills for Claude Code">
|
|
<meta property="og:description" content="The fastest path from idea to production. AI agents & skills built on Claude Code that research, plan, code, test, and document so you can ship features in hours.">
|
|
<meta property="og:image" content="https://docs.claudekit.cc/logo-horizontal.png">
|
|
|
|
<!-- Twitter -->
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:url" content="https://aitmpl.com/featured/claudekit/">
|
|
<meta name="twitter:title" content="ClaudeKit: AI Agents & Skills for Claude Code">
|
|
<meta name="twitter:description" content="The fastest path from idea to production. AI agents & skills built on Claude Code that research, plan, code, test, and document.">
|
|
<meta name="twitter:image" content="https://docs.claudekit.cc/logo-horizontal.png">
|
|
|
|
<meta name="keywords" content="ClaudeKit, Claude Code, AI Agents, AI Skills, Software Development, Claude Code Workflow, AI Engineering, Marketing Automation, Code Review, Automated Testing">
|
|
<link rel="canonical" href="https://aitmpl.com/featured/claudekit/">
|
|
|
|
<link rel="stylesheet" href="../../css/styles.css">
|
|
<link rel="stylesheet" href="../../css/component-page.css">
|
|
<link rel="stylesheet" href="../../css/featured-page.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">
|
|
|
|
<!-- Hotjar Tracking Code -->
|
|
<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="../../index.html" class="header-btn">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z"/>
|
|
</svg>
|
|
Home
|
|
</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.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>
|
|
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>
|
|
|
|
<!-- Component Content -->
|
|
<div class="component-content">
|
|
<div class="container">
|
|
<!-- Component Header -->
|
|
<div class="component-header">
|
|
<div class="header-actions">
|
|
<div class="share-dropdown" id="componentShareDropdown">
|
|
<button class="share-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>
|
|
</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-.6-.053-1.149-.16-1.644a4.158 4.158 0 00-.488-1.336 3.996 3.996 0 00-.82-1.084 4.015 4.015 0 00-1.414-1.017c-1.276-.67-2.747-1.02-4.37-1.04h-.014c-1.623.02-3.094.37-4.37 1.04a4.015 4.015 0 00-1.414 1.017 3.996 3.996 0 00-.82 1.084 4.158 4.158 0 00-.488 1.336c-.107.495-.16 1.044-.16 1.644 0 .6.053 1.149.16 1.644.107.496.27.941.488 1.336.218.394.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="featured-logo">
|
|
<img src="https://docs.claudekit.cc/logo-horizontal.png" alt="ClaudeKit Logo">
|
|
</div>
|
|
<div class="component-title-info">
|
|
<h1>ClaudeKit</h1>
|
|
<div class="component-meta">
|
|
<div class="partner-badge partner-badge--toolkit">TOOLKIT</div>
|
|
<span class="component-category-title">AI Engineering</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- External CTA Button -->
|
|
<a href="https://claudekit.cc" target="_blank" class="title-section-add-to-cart-btn" style="text-decoration: none;">
|
|
<svg width="20" height="20" 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.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z"/>
|
|
</svg>
|
|
<span>Get ClaudeKit</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Tab Navigation -->
|
|
<div class="component-tabs">
|
|
<button class="tab-btn active" data-tab="overview" onclick="switchTab('overview')">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/>
|
|
</svg>
|
|
Overview
|
|
</button>
|
|
<button class="tab-btn" data-tab="website" onclick="switchTab('website')">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95a15.65 15.65 0 00-1.38-3.56A8.03 8.03 0 0118.92 8zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2s.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56A7.987 7.987 0 015.08 16zm2.95-8H5.08a7.987 7.987 0 014.33-3.56A15.65 15.65 0 008.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2s.07-1.35.16-2h4.68c.09.65.16 1.32.16 2s-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 01-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2s-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"/>
|
|
</svg>
|
|
Website
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Tab Content -->
|
|
<div class="tab-content-wrapper">
|
|
|
|
<!-- Overview Tab -->
|
|
<div class="tab-pane active" id="tab-overview">
|
|
<div class="tab-content-grid">
|
|
<!-- Main Content -->
|
|
<div class="tab-main">
|
|
<div class="featured-content">
|
|
<h2>What Is ClaudeKit</h2>
|
|
<p>ClaudeKit is a production-ready Claude Code setup with subagents, commands, hooks, and skills that have been battle-tested and used in real products. Built by someone who has been using Claude Code for 7+ months and documented everything publicly.</p>
|
|
<p><strong>4,000+ happy users across 109 countries trust ClaudeKit to power their development workflow.</strong></p>
|
|
<p>Beyond engineering, ClaudeKit also covers go-to-market with marketing automation to help you distribute your products to the world.</p>
|
|
|
|
<h2>Quick Installation</h2>
|
|
<p>After purchasing, your GitHub username is granted access to the repos automatically. Install with these commands:</p>
|
|
<pre><code># Login with your GitHub account
|
|
gh auth login
|
|
|
|
# Install ClaudeKit CLI
|
|
npm i -g claudekit-cli
|
|
|
|
# Install CK Engineer in your project
|
|
ck init
|
|
|
|
# Or install globally for every project
|
|
ck init -g</code></pre>
|
|
|
|
<h2>The Battle-Tested Workflow</h2>
|
|
<p>ClaudeKit users rely on this proven workflow to ship features with confidence:</p>
|
|
|
|
<div class="feature-list">
|
|
<div class="feature-item">
|
|
<div class="feature-icon">1</div>
|
|
<div class="feature-content">
|
|
<h3>/docs:init</h3>
|
|
<p>Scans and analyzes your codebase, then generates specs: codebase structure, system architecture, code standards, product overview, and design guidelines.</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-item">
|
|
<div class="feature-icon">2</div>
|
|
<div class="feature-content">
|
|
<h3>/brainstorm</h3>
|
|
<p>Describe what you want to build. AI asks questions to fulfill requirements, challenges you with unresolved issues, and produces a report with requirement specs.</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-item">
|
|
<div class="feature-icon">3</div>
|
|
<div class="feature-content">
|
|
<h3>/plan</h3>
|
|
<p>Researches approaches, spawns researcher agents in parallel, and creates a comprehensive implementation plan with separate phases and validation.</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-item">
|
|
<div class="feature-icon">4</div>
|
|
<div class="feature-content">
|
|
<h3>/clear</h3>
|
|
<p>Fresh context window before implementation to ensure best code quality output and agents stick with the plan.</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-item">
|
|
<div class="feature-icon">5</div>
|
|
<div class="feature-content">
|
|
<h3>/code:auto</h3>
|
|
<p>Reads the plan, implements phase by phase using progressive disclosure. Write code, write tests, run tests, code review (quality & security), verification, iterate until finished, then update specs & roadmap.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="info-note">This workflow is packed with 18+ years of professional development experience: Spec-driven Development, Test-driven Development, and the YAGNI - KISS - DRY principles.</p>
|
|
|
|
<h2>ClaudeKit Engineer</h2>
|
|
<p>A complete engineering toolkit built on Claude Code:</p>
|
|
|
|
<div class="feature-list">
|
|
<div class="feature-item">
|
|
<div class="feature-icon">⚙</div>
|
|
<div class="feature-content">
|
|
<h3>Feature Development</h3>
|
|
<p><code>/cook</code> - Standalone implementation with internal planning and development workflows</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-item">
|
|
<div class="feature-icon">🔍</div>
|
|
<div class="feature-content">
|
|
<h3>Multi-Agent Code Review</h3>
|
|
<p><code>/code:review</code> and <code>/codebase:review</code> - Specialized agents for security, performance, and standards enforcement</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-item">
|
|
<div class="feature-icon">✅</div>
|
|
<div class="feature-content">
|
|
<h3>Automated Testing</h3>
|
|
<p><code>/test</code> - Generates comprehensive test suites including E2E, integration, and unit tests</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-item">
|
|
<div class="feature-icon">🐛</div>
|
|
<div class="feature-content">
|
|
<h3>Bug Diagnosis</h3>
|
|
<p><code>/debug</code> - Analyzes logs, CI/CD failures, and provides root cause analysis</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-item">
|
|
<div class="feature-icon">📄</div>
|
|
<div class="feature-content">
|
|
<h3>Documentation Sync</h3>
|
|
<p><code>/docs</code> - Maintains synchronized technical docs: PRD, codebase summary, code standards, system architecture</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-item">
|
|
<div class="feature-icon">📈</div>
|
|
<div class="feature-content">
|
|
<h3>Project Tracking</h3>
|
|
<p><code>/watzup</code> - Project health metrics and milestone tracking</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>ClaudeKit Marketing</h2>
|
|
<p>Go beyond code. ClaudeKit Marketing handles the go-to-market side of your products:</p>
|
|
|
|
<div class="feature-list">
|
|
<div class="feature-item">
|
|
<div class="feature-content">
|
|
<h3>Content Strategy</h3>
|
|
<p><code>/plan "Q1 content strategy"</code> - Campaign planning with TOFU/MOFU/BOFU funnel stages</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-item">
|
|
<div class="feature-content">
|
|
<h3>Copywriting</h3>
|
|
<p><code>/content/good</code> and <code>/content/cro</code> - Landing pages and conversion-optimized copy</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-item">
|
|
<div class="feature-content">
|
|
<h3>SEO Optimization</h3>
|
|
<p><code>/seo:audit</code> and <code>/seo:keywords</code> - Keyword research and competitor analysis</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-item">
|
|
<div class="feature-content">
|
|
<h3>Campaign & Email</h3>
|
|
<p><code>/campaign:email</code> - Email sequences, seasonal promotions, and drip campaigns via SendGrid and Resend MCPs</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-item">
|
|
<div class="feature-content">
|
|
<h3>Analytics</h3>
|
|
<p>GA4 + Google Ads MCPs for data-driven campaign optimization</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Comments Section -->
|
|
<section class="content-section comments-section">
|
|
<h2>Comments</h2>
|
|
<p class="comments-description">Sign in with GitHub to leave a comment. Discussions are stored in the project's <a href="https://github.com/davila7/claude-code-templates/discussions" target="_blank">GitHub Discussions</a>.</p>
|
|
<div id="giscusContainer"></div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- Sidebar -->
|
|
<aside class="tab-sidebar">
|
|
<!-- Partner Info -->
|
|
<div class="sidebar-card">
|
|
<h3 class="sidebar-card-title">About ClaudeKit</h3>
|
|
<div class="partner-info-card">
|
|
<img src="https://docs.claudekit.cc/logo-horizontal.png" alt="ClaudeKit">
|
|
<p class="partner-info-description">Battle-tested AI agents & skills for Claude Code. Ship features in hours instead of weeks with engineering and marketing automation.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CTA -->
|
|
<div class="sidebar-card">
|
|
<a href="https://claudekit.cc" target="_blank" class="sidebar-cta-btn">
|
|
<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.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z"/>
|
|
</svg>
|
|
Get ClaudeKit
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Metadata -->
|
|
<div class="sidebar-card">
|
|
<h3 class="sidebar-card-title">Details</h3>
|
|
<div class="sidebar-metadata-list">
|
|
<div class="sidebar-meta-row">
|
|
<span class="sidebar-meta-label">Type</span>
|
|
<span class="sidebar-meta-value">Toolkit</span>
|
|
</div>
|
|
<div class="sidebar-meta-row">
|
|
<span class="sidebar-meta-label">Category</span>
|
|
<span class="sidebar-meta-value">Engineering</span>
|
|
</div>
|
|
<div class="sidebar-meta-row">
|
|
<span class="sidebar-meta-label">Users</span>
|
|
<span class="sidebar-meta-value">4,000+</span>
|
|
</div>
|
|
<div class="sidebar-meta-row">
|
|
<span class="sidebar-meta-label">Countries</span>
|
|
<span class="sidebar-meta-value">109</span>
|
|
</div>
|
|
<div class="sidebar-meta-row">
|
|
<span class="sidebar-meta-label">Website</span>
|
|
<span class="sidebar-meta-value"><a href="https://claudekit.cc" target="_blank" style="color: var(--accent-color); text-decoration: none;">claudekit.cc</a></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Links -->
|
|
<div class="sidebar-card">
|
|
<h3 class="sidebar-card-title">Links</h3>
|
|
<div class="sidebar-links">
|
|
<a href="https://docs.claudekit.cc" target="_blank" class="sidebar-link-item">
|
|
<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>
|
|
Documentation
|
|
</a>
|
|
<a href="https://claudekit.cc" target="_blank" class="sidebar-link-item">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95a15.65 15.65 0 00-1.38-3.56A8.03 8.03 0 0118.92 8zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96z"/>
|
|
</svg>
|
|
claudekit.cc
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Website Tab -->
|
|
<div class="tab-pane" id="tab-website">
|
|
<div class="website-tab-header">
|
|
<span class="website-tab-url">claudekit.cc</span>
|
|
<a href="https://claudekit.cc" target="_blank" class="website-tab-open">
|
|
Open in new tab
|
|
<svg width="14" height="14" 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.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
<iframe src="https://claudekit.cc" class="featured-website-frame" title="ClaudeKit Website" loading="lazy"></iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<div class="footer-content">
|
|
<div class="footer-left">
|
|
<div class="footer-ascii">
|
|
<pre class="footer-ascii-art"> █████╗ ██╗████████╗███╗ ███╗██████╗ ██╗
|
|
██╔══██╗██║╚══██╔══╝████╗ ████║██╔══██╗██║
|
|
███████║██║ ██║ ██╔████╔██║██████╔╝██║
|
|
██╔══██║██║ ██║ ██║╚██╔╝██║██╔═══╝ ██║
|
|
██║ ██║██║ ██║ ██║ ╚═╝ ██║██║ ███████╗
|
|
╚═╝ ╚═╝╚═╝ ╚═╝ ╚═╝ ╚═╝╚═╝ ╚══════╝</pre>
|
|
<p class="footer-tagline">Supercharge Anthropic's Claude Code</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-right">
|
|
<p class="footer-copyright">© 2026 Claude Code Templates. Open source project.</p>
|
|
<div class="footer-links">
|
|
<a href="../../blog/index.html" class="footer-link">
|
|
<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://docs.aitmpl.com/" target="_blank" class="footer-link">
|
|
<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>
|
|
Documentation
|
|
</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.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>
|
|
GitHub
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// Tab switching
|
|
function switchTab(tabName) {
|
|
document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
|
|
document.querySelectorAll('.tab-pane').forEach(pane => pane.classList.remove('active'));
|
|
document.querySelector(`[data-tab="${tabName}"]`).classList.add('active');
|
|
document.getElementById(`tab-${tabName}`).classList.add('active');
|
|
}
|
|
|
|
// Share dropdown
|
|
function toggleShareDropdown() {
|
|
document.getElementById('componentShareDropdown').classList.toggle('open');
|
|
}
|
|
|
|
function shareOnTwitter() {
|
|
const text = encodeURIComponent('ClaudeKit: The fastest path from idea to production. Battle-tested AI agents & skills for Claude Code');
|
|
const url = encodeURIComponent('https://aitmpl.com/featured/claudekit/');
|
|
window.open(`https://twitter.com/intent/tweet?text=${text}&url=${url}`, '_blank');
|
|
document.getElementById('componentShareDropdown').classList.remove('open');
|
|
}
|
|
|
|
function shareOnThreads() {
|
|
const text = encodeURIComponent('ClaudeKit: AI Agents & Skills for Claude Code\n\nhttps://aitmpl.com/featured/claudekit/');
|
|
window.open(`https://www.threads.net/intent/post?text=${text}`, '_blank');
|
|
document.getElementById('componentShareDropdown').classList.remove('open');
|
|
}
|
|
|
|
// Close dropdown on outside click
|
|
document.addEventListener('click', (e) => {
|
|
if (!e.target.closest('.share-dropdown')) {
|
|
document.getElementById('componentShareDropdown').classList.remove('open');
|
|
}
|
|
});
|
|
|
|
// Giscus comments
|
|
function loadGiscus() {
|
|
const container = document.getElementById('giscusContainer');
|
|
if (!container) return;
|
|
const script = document.createElement('script');
|
|
script.src = 'https://giscus.app/client.js';
|
|
script.setAttribute('data-repo', 'davila7/claude-code-templates');
|
|
script.setAttribute('data-repo-id', 'R_kgDONN2YhQ');
|
|
script.setAttribute('data-category', 'Component Comments');
|
|
script.setAttribute('data-category-id', 'DIC_kwDONN2Yhc4CmFij');
|
|
script.setAttribute('data-mapping', 'specific');
|
|
script.setAttribute('data-term', 'featured/claudekit');
|
|
script.setAttribute('data-strict', '0');
|
|
script.setAttribute('data-reactions-enabled', '1');
|
|
script.setAttribute('data-emit-metadata', '0');
|
|
script.setAttribute('data-input-position', 'top');
|
|
script.setAttribute('data-theme', 'dark_dimmed');
|
|
script.setAttribute('data-lang', 'en');
|
|
script.setAttribute('crossorigin', 'anonymous');
|
|
script.async = true;
|
|
container.appendChild(script);
|
|
}
|
|
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', loadGiscus);
|
|
} else {
|
|
loadGiscus();
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|