chore: import upstream snapshot with attribution
This commit is contained in:
wehub-resource-sync
@@ -0,0 +1,59 @@
|
||||
<svg width="1200" height="630" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- Background gradient -->
|
||||
<defs>
|
||||
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#0d1117;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#161b22;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
<linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#d97706;stop-opacity:0.3" />
|
||||
<stop offset="100%" style="stop-color:#d97706;stop-opacity:0.1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="1200" height="630" fill="url(#grad1)"/>
|
||||
|
||||
<!-- Grid pattern -->
|
||||
<g opacity="0.1">
|
||||
<line x1="0" y1="0" x2="1200" y2="630" stroke="#d97706" stroke-width="1"/>
|
||||
<line x1="0" y1="630" x2="1200" y2="0" stroke="#d97706" stroke-width="1"/>
|
||||
<line x1="600" y1="0" x2="600" y2="630" stroke="#d97706" stroke-width="2"/>
|
||||
<line x1="0" y1="315" x2="1200" y2="315" stroke="#d97706" stroke-width="2"/>
|
||||
</g>
|
||||
|
||||
<!-- Accent bar -->
|
||||
<rect x="0" y="0" width="1200" height="8" fill="url(#grad2)"/>
|
||||
|
||||
<!-- Main content -->
|
||||
<text x="600" y="200" font-family="monospace" font-size="72" font-weight="bold" fill="#d97706" text-anchor="middle">BrainGrid</text>
|
||||
|
||||
<text x="600" y="280" font-family="monospace" font-size="28" fill="#c9d1d9" text-anchor="middle">Product Management Agent</text>
|
||||
|
||||
<text x="600" y="340" font-family="monospace" font-size="24" fill="#7d8590" text-anchor="middle">for Claude Code</text>
|
||||
|
||||
<!-- Feature boxes -->
|
||||
<g transform="translate(200, 400)">
|
||||
<rect width="180" height="80" rx="8" fill="#21262d" stroke="#30363d" stroke-width="2"/>
|
||||
<text x="90" y="35" font-family="monospace" font-size="32" fill="#d97706" text-anchor="middle">💡</text>
|
||||
<text x="90" y="65" font-family="monospace" font-size="14" fill="#c9d1d9" text-anchor="middle">Planning</text>
|
||||
</g>
|
||||
|
||||
<g transform="translate(410, 400)">
|
||||
<rect width="180" height="80" rx="8" fill="#21262d" stroke="#30363d" stroke-width="2"/>
|
||||
<text x="90" y="35" font-family="monospace" font-size="32" fill="#d97706" text-anchor="middle">🗺️</text>
|
||||
<text x="90" y="65" font-family="monospace" font-size="14" fill="#c9d1d9" text-anchor="middle">UX Flows</text>
|
||||
</g>
|
||||
|
||||
<g transform="translate(620, 400)">
|
||||
<rect width="180" height="80" rx="8" fill="#21262d" stroke="#30363d" stroke-width="2"/>
|
||||
<text x="90" y="35" font-family="monospace" font-size="32" fill="#d97706" text-anchor="middle">⚡</text>
|
||||
<text x="90" y="65" font-family="monospace" font-size="14" fill="#c9d1d9" text-anchor="middle">AI Prompts</text>
|
||||
</g>
|
||||
|
||||
<!-- Footer -->
|
||||
<text x="600" y="570" font-family="monospace" font-size="18" fill="#7d8590" text-anchor="middle">Turn messy ideas into Claude Code-ready specifications</text>
|
||||
|
||||
<!-- Branding -->
|
||||
<text x="50" y="610" font-family="monospace" font-size="14" fill="#7d8590">aitmpl.com</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
@@ -0,0 +1,484 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>BrainGrid: Product Management Agent 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="BrainGrid is a Product Management Agent that works alongside Claude Code. Transform messy ideas into clear specifications, end-to-end UX flows, and Claude Code-ready prompts.">
|
||||
|
||||
<!-- Open Graph / Facebook -->
|
||||
<meta property="og:type" content="article">
|
||||
<meta property="og:url" content="https://aitmpl.com/featured/braingrid/">
|
||||
<meta property="og:title" content="BrainGrid: Product Management Agent for Claude Code">
|
||||
<meta property="og:description" content="Transform messy ideas into clear specifications and Claude Code-ready prompts with BrainGrid - the planning layer for your AI-powered development workflow.">
|
||||
<meta property="og:image" content="https://aitmpl.com/featured/braingrid/assets/braingrid-cover.svg">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:url" content="https://aitmpl.com/featured/braingrid/">
|
||||
<meta name="twitter:title" content="BrainGrid: Product Management Agent for Claude Code">
|
||||
<meta name="twitter:description" content="Transform messy ideas into clear specifications and Claude Code-ready prompts with BrainGrid.">
|
||||
<meta name="twitter:image" content="https://aitmpl.com/featured/braingrid/assets/braingrid-cover.svg">
|
||||
|
||||
<meta name="keywords" content="BrainGrid, Claude Code, Product Management Agent, AI Planning, Software Planning, Claude Code Integration, AI Development, Product Strategy">
|
||||
<link rel="canonical" href="https://aitmpl.com/featured/braingrid/">
|
||||
|
||||
<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://www.braingrid.ai/brand/full-logo-lime-on-transparent.png" alt="BrainGrid Logo">
|
||||
</div>
|
||||
<div class="component-title-info">
|
||||
<h1>BrainGrid</h1>
|
||||
<div class="component-meta">
|
||||
<div class="partner-badge partner-badge--partner">PARTNER</div>
|
||||
<span class="component-category-title">Product Management</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- External CTA Button -->
|
||||
<a href="https://braingrid.link/hsn8pFE" 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>Try BrainGrid</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>The Real Problem With AI Coding Is Not Code Generation</h2>
|
||||
<p>AI coding tools like Claude Code are extremely capable. With models like Opus 4.5, they can reason deeply, write high-quality code, and implement complex features.</p>
|
||||
<p>The problem shows up when builders try to turn a product idea into working software. As products grow, intent gets blurry, context fragments, and small changes ripple across the system in unexpected ways.</p>
|
||||
<p><strong>The limitation is not the model. It is the lack of product-level planning, structure, and strategy before any code is written.</strong></p>
|
||||
|
||||
<h2>BrainGrid Is Like Claude Code Plan Mode for Your Entire Product</h2>
|
||||
<p>Think of BrainGrid as Claude Code plan mode, but applied to your entire product, not just a single prompt.</p>
|
||||
|
||||
<div class="comparison-box">
|
||||
<div class="comparison-item">
|
||||
<strong>Claude Code</strong> helps you plan a feature.
|
||||
</div>
|
||||
<div class="comparison-item">
|
||||
<strong>BrainGrid</strong> helps you plan the product.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>BrainGrid acts as a Product Management Agent that sits upstream of Claude Code. It turns messy ideas into clear specifications, end-to-end UX flows, task breakdowns, and engineering-grade prompts that Claude Code can execute reliably.</p>
|
||||
|
||||
<h2>How BrainGrid Works With Claude Code</h2>
|
||||
<p>BrainGrid is not a replacement for Claude Code—it works alongside it. It is a planning and orchestration layer that makes Claude Code more effective.</p>
|
||||
|
||||
<div class="feature-list">
|
||||
<div class="feature-item">
|
||||
<div class="feature-icon">💡</div>
|
||||
<div class="feature-content">
|
||||
<h3>Clarifying Questions</h3>
|
||||
<p>Asks clarifying questions to surface edge cases and hidden complexity</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<div class="feature-icon">🗺</div>
|
||||
<div class="feature-content">
|
||||
<h3>End-to-End UX Flows</h3>
|
||||
<p>Maps end-to-end UX flows so features are planned as complete experiences</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<div class="feature-icon">📋</div>
|
||||
<div class="feature-content">
|
||||
<h3>Task Breakdown</h3>
|
||||
<p>Breaks large ideas into small, scoped tasks with goals and acceptance criteria</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<div class="feature-icon">⚡</div>
|
||||
<div class="feature-content">
|
||||
<h3>Claude Code-Ready Prompts</h3>
|
||||
<p>Generates Claude Code-ready prompts with the right context attached</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<div class="feature-icon">🛡</div>
|
||||
<div class="feature-content">
|
||||
<h3>Prevent Regressions</h3>
|
||||
<p>Helps prevent regressions by ensuring new work fits the existing system</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="info-note">Tasks can be sent to Claude Code via MCP, CLI or copied directly into the Claude Code workflow.</p>
|
||||
|
||||
<h2>Claude Code Integration</h2>
|
||||
<p>BrainGrid seamlessly integrates with your Claude Code workflow. Once BrainGrid generates your product specifications and task breakdowns, you can:</p>
|
||||
<ul>
|
||||
<li>Export tasks directly to Claude Code via MCP integration</li>
|
||||
<li>Copy generated prompts into your Claude Code sessions</li>
|
||||
<li>Use the CLI to sync tasks between BrainGrid and Claude Code</li>
|
||||
</ul>
|
||||
<div class="cta-box">
|
||||
<p><strong>Claude Code integration guide:</strong></p>
|
||||
<a href="https://docs.braingrid.ai/claude-code" target="_blank">https://docs.braingrid.ai/claude-code</a>
|
||||
</div>
|
||||
|
||||
<h2>Built for Production-Ready Apps, Not Just Prototypes</h2>
|
||||
<p>BrainGrid is designed for builders creating real AI-native SaaS products with:</p>
|
||||
<ul>
|
||||
<li>Authentication and multi-tenancy</li>
|
||||
<li>Billing and subscriptions</li>
|
||||
<li>AI features like chat, agents, and search</li>
|
||||
<li>Ongoing feature development and iteration</li>
|
||||
</ul>
|
||||
<p>It helps builders move beyond fragile demos and ship software that can actually scale.</p>
|
||||
|
||||
<h2>Who BrainGrid Is For</h2>
|
||||
<p>AI coding tools have created a new kind of builder. Domain experts, creators, and entrepreneurs who have never written code are now building software through natural language.</p>
|
||||
<p><strong>BrainGrid is for:</strong></p>
|
||||
<ul>
|
||||
<li>Non-technical founders building real products, not just prototypes</li>
|
||||
<li>Vibe coders hitting complexity walls as their apps grow</li>
|
||||
<li>AI builders who need help planning scope, sequencing work, and evolving apps without breaking what already works</li>
|
||||
</ul>
|
||||
</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 BrainGrid</h3>
|
||||
<div class="partner-info-card">
|
||||
<img src="https://www.braingrid.ai/brand/full-logo-lime-on-transparent.png" alt="BrainGrid">
|
||||
<p class="partner-info-description">Product Management Agent for Claude Code. Transform messy ideas into clear specifications and Claude Code-ready prompts.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CTA -->
|
||||
<div class="sidebar-card">
|
||||
<a href="https://braingrid.link/hsn8pFE" 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>
|
||||
Try BrainGrid Free
|
||||
</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">Partner</span>
|
||||
</div>
|
||||
<div class="sidebar-meta-row">
|
||||
<span class="sidebar-meta-label">Category</span>
|
||||
<span class="sidebar-meta-value">Planning</span>
|
||||
</div>
|
||||
<div class="sidebar-meta-row">
|
||||
<span class="sidebar-meta-label">Website</span>
|
||||
<span class="sidebar-meta-value"><a href="https://braingrid.ai" target="_blank" style="color: var(--accent-color); text-decoration: none;">braingrid.ai</a></span>
|
||||
</div>
|
||||
<div class="sidebar-meta-row">
|
||||
<span class="sidebar-meta-label">Integration</span>
|
||||
<span class="sidebar-meta-value">MCP, CLI</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Links -->
|
||||
<div class="sidebar-card">
|
||||
<h3 class="sidebar-card-title">Links</h3>
|
||||
<div class="sidebar-links">
|
||||
<a href="https://docs.braingrid.ai/claude-code" 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>
|
||||
Integration Docs
|
||||
</a>
|
||||
<a href="https://braingrid.ai" 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>
|
||||
braingrid.ai
|
||||
</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">braingrid.ai</span>
|
||||
<a href="https://braingrid.ai" 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://braingrid.ai" class="featured-website-frame" title="BrainGrid 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('BrainGrid: Product Management Agent for Claude Code - Transform messy ideas into clear specifications and Claude Code-ready prompts');
|
||||
const url = encodeURIComponent('https://aitmpl.com/featured/braingrid/');
|
||||
window.open(`https://twitter.com/intent/tweet?text=${text}&url=${url}`, '_blank');
|
||||
document.getElementById('componentShareDropdown').classList.remove('open');
|
||||
}
|
||||
|
||||
function shareOnThreads() {
|
||||
const text = encodeURIComponent('BrainGrid: Product Management Agent for Claude Code\n\nhttps://aitmpl.com/featured/braingrid/');
|
||||
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/braingrid');
|
||||
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>
|
||||
@@ -0,0 +1,541 @@
|
||||
<!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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
@@ -0,0 +1,71 @@
|
||||
<svg width="1200" height="630" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- Background gradient -->
|
||||
<defs>
|
||||
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#0d1117;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#161b22;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
<linearGradient id="neonGrad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#00e699;stop-opacity:0.3" />
|
||||
<stop offset="100%" style="stop-color:#00e699;stop-opacity:0.1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="1200" height="630" fill="url(#grad1)"/>
|
||||
|
||||
<!-- Grid pattern -->
|
||||
<g opacity="0.1">
|
||||
<line x1="0" y1="0" x2="1200" y2="630" stroke="#00e699" stroke-width="1"/>
|
||||
<line x1="0" y1="630" x2="1200" y2="0" stroke="#00e699" stroke-width="1"/>
|
||||
<line x1="600" y1="0" x2="600" y2="630" stroke="#00e699" stroke-width="2"/>
|
||||
<line x1="0" y1="315" x2="1200" y2="315" stroke="#00e699" stroke-width="2"/>
|
||||
</g>
|
||||
|
||||
<!-- Accent bar -->
|
||||
<rect x="0" y="0" width="1200" height="8" fill="url(#neonGrad)"/>
|
||||
|
||||
<!-- Main content -->
|
||||
<text x="600" y="180" font-family="monospace" font-size="72" font-weight="bold" fill="#00e699" text-anchor="middle">Neon</text>
|
||||
|
||||
<text x="600" y="250" font-family="monospace" font-size="28" fill="#c9d1d9" text-anchor="middle">Complete Postgres Template</text>
|
||||
|
||||
<text x="600" y="310" font-family="monospace" font-size="24" fill="#7d8590" text-anchor="middle">for Claude Code</text>
|
||||
|
||||
<!-- Feature boxes -->
|
||||
<g transform="translate(100, 380)">
|
||||
<rect width="180" height="80" rx="8" fill="#21262d" stroke="#30363d" stroke-width="2"/>
|
||||
<text x="90" y="35" font-family="monospace" font-size="28" fill="#00e699" text-anchor="middle">⚡</text>
|
||||
<text x="90" y="65" font-family="monospace" font-size="13" fill="#c9d1d9" text-anchor="middle">Instant Postgres</text>
|
||||
</g>
|
||||
|
||||
<g transform="translate(310, 380)">
|
||||
<rect width="180" height="80" rx="8" fill="#21262d" stroke="#30363d" stroke-width="2"/>
|
||||
<text x="90" y="35" font-family="monospace" font-size="28" fill="#00e699" text-anchor="middle">🤖</text>
|
||||
<text x="90" y="65" font-family="monospace" font-size="13" fill="#c9d1d9" text-anchor="middle">5 Expert Agents</text>
|
||||
</g>
|
||||
|
||||
<g transform="translate(520, 380)">
|
||||
<rect width="180" height="80" rx="8" fill="#21262d" stroke="#30363d" stroke-width="2"/>
|
||||
<text x="90" y="35" font-family="monospace" font-size="28" fill="#00e699" text-anchor="middle">🔌</text>
|
||||
<text x="90" y="65" font-family="monospace" font-size="13" fill="#c9d1d9" text-anchor="middle">MCP Integration</text>
|
||||
</g>
|
||||
|
||||
<g transform="translate(730, 380)">
|
||||
<rect width="180" height="80" rx="8" fill="#21262d" stroke="#30363d" stroke-width="2"/>
|
||||
<text x="90" y="35" font-family="monospace" font-size="28" fill="#00e699" text-anchor="middle">📊</text>
|
||||
<text x="90" y="65" font-family="monospace" font-size="13" fill="#c9d1d9" text-anchor="middle">Monitoring</text>
|
||||
</g>
|
||||
|
||||
<g transform="translate(940, 380)">
|
||||
<rect width="180" height="80" rx="8" fill="#21262d" stroke="#30363d" stroke-width="2"/>
|
||||
<text x="90" y="35" font-family="monospace" font-size="28" fill="#00e699" text-anchor="middle">🚀</text>
|
||||
<text x="90" y="65" font-family="monospace" font-size="13" fill="#c9d1d9" text-anchor="middle">Production Ready</text>
|
||||
</g>
|
||||
|
||||
<!-- Footer -->
|
||||
<text x="600" y="550" font-family="monospace" font-size="18" fill="#7d8590" text-anchor="middle">Production-ready Postgres infrastructure for AI development</text>
|
||||
|
||||
<!-- Branding -->
|
||||
<text x="50" y="610" font-family="monospace" font-size="14" fill="#7d8590">aitmpl.com</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.7 KiB |
@@ -0,0 +1,573 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Neon Complete Postgres Template 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="Complete Neon Template for Claude Code: Instant Postgres provisioning + 5 expert agents + MCP + monitoring tools. Production-ready database infrastructure.">
|
||||
|
||||
<!-- Open Graph / Facebook -->
|
||||
<meta property="og:type" content="article">
|
||||
<meta property="og:url" content="https://aitmpl.com/featured/neon-instagres/">
|
||||
<meta property="og:title" content="Neon Complete Postgres Template for Claude Code">
|
||||
<meta property="og:description" content="Production-ready Postgres infrastructure with instant provisioning, expert agents, and MCP integration.">
|
||||
<meta property="og:image" content="https://aitmpl.com/featured/neon-instagres/assets/neon-cover.png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
<meta property="og:image:alt" content="Neon Complete Postgres Template for Claude Code">
|
||||
<meta property="og:site_name" content="Claude Code Templates">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:url" content="https://aitmpl.com/featured/neon-instagres/">
|
||||
<meta name="twitter:title" content="Neon Complete Postgres Template for Claude Code">
|
||||
<meta name="twitter:description" content="Production-ready Postgres infrastructure with instant provisioning and expert agents.">
|
||||
<meta name="twitter:image" content="https://aitmpl.com/featured/neon-instagres/assets/neon-cover.png">
|
||||
<meta name="twitter:image:alt" content="Neon Complete Postgres Template for Claude Code">
|
||||
<meta name="twitter:creator" content="@davila7">
|
||||
<meta name="twitter:site" content="@davila7">
|
||||
|
||||
<meta name="keywords" content="Neon, Claude Code, Postgres, Database, Instagres, Serverless, AI Development, Drizzle ORM, Database Provisioning">
|
||||
<link rel="canonical" href="https://aitmpl.com/featured/neon-instagres/">
|
||||
|
||||
<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://neon.tech/brand/neon-logo-dark-color.svg" alt="Neon Logo">
|
||||
</div>
|
||||
<div class="component-title-info">
|
||||
<h1>Neon Complete Postgres Template</h1>
|
||||
<div class="component-meta">
|
||||
<div class="partner-badge partner-badge--database">DATABASE</div>
|
||||
<span class="component-category-title">Infrastructure</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- External CTA Button -->
|
||||
<a href="https://get.neon.com/4eCjZDz" 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>Try Neon Free</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>Overview</h2>
|
||||
<p>The Neon template provides a complete Postgres infrastructure for Claude Code projects. It combines Neon's Instagres provisioning service with specialized AI agents, MCP integration, and monitoring tools.</p>
|
||||
<p>This template is designed for developers who need production-ready database infrastructure without manual configuration.</p>
|
||||
|
||||
<h2>Template Architecture</h2>
|
||||
<p>The template consists of 10 components organized into four layers:</p>
|
||||
|
||||
<h3>1. Provisioning Layer</h3>
|
||||
<p><strong>neon-instagres Skill</strong> - Auto-activating skill that provisions Postgres databases via the <code>npx get-db</code> CLI. Triggers on keywords like "database", "postgres", or "PostgreSQL".</p>
|
||||
|
||||
<pre><code>npx get-db --yes --ref 4eCjZDz</code></pre>
|
||||
|
||||
<p>Creates three environment variables:</p>
|
||||
<ul>
|
||||
<li><code>DATABASE_URL</code> - Connection pooler endpoint (recommended for application queries)</li>
|
||||
<li><code>DATABASE_URL_DIRECT</code> - Direct connection (required for migrations and schema changes)</li>
|
||||
<li><code>PUBLIC_INSTAGRES_CLAIM_URL</code> - Claim URL with 72-hour validity window</li>
|
||||
</ul>
|
||||
|
||||
<p><strong>using-neon Skill</strong> - Comprehensive guides and best practices for working with Neon Serverless Postgres. Covers getting started, local development, connection methods, authentication (<code>@neondatabase/auth</code>), PostgREST-style data API (<code>@neondatabase/neon-js</code>), Neon CLI, and Platform API/SDKs. Includes 28 reference documents.</p>
|
||||
|
||||
<pre><code>npx claude-code-templates@latest --skill database/using-neon</code></pre>
|
||||
|
||||
<p>Reference documentation covers:</p>
|
||||
<ul>
|
||||
<li><strong>Core Guides</strong> - What is Neon, getting started, features, connection methods, devtools</li>
|
||||
<li><strong>Database Drivers</strong> - Neon Serverless Driver (<code>@neondatabase/serverless</code>), Drizzle ORM integration</li>
|
||||
<li><strong>Auth & Data API</strong> - Neon Auth (<code>@neondatabase/auth</code>), Neon JS (<code>@neondatabase/neon-js</code>)</li>
|
||||
<li><strong>Platform API & CLI</strong> - TypeScript/Python SDKs, REST API, Neon CLI reference</li>
|
||||
</ul>
|
||||
|
||||
<h3>2. Agent Layer</h3>
|
||||
<p>Five specialized agents handle different database operations:</p>
|
||||
<p><strong>neon-database-architect</strong> - Schema design with Drizzle ORM. Handles table relationships, indexes, constraints, and migration generation.</p>
|
||||
<p><strong>neon-auth-specialist</strong> - Authentication integration with Stack Auth. Implements multi-tenancy patterns, row-level security, and session management.</p>
|
||||
<p><strong>neon-migration-specialist</strong> - Production migration strategies including zero-downtime deployments, rollback procedures, and data migration patterns.</p>
|
||||
<p><strong>neon-optimization-analyzer</strong> - Query performance analysis using <code>EXPLAIN ANALYZE</code>, index recommendations, and connection pooling optimization.</p>
|
||||
<p><strong>neon-expert</strong> - General database consulting. Covers branching workflows, compute autoscaling, and Neon-specific features.</p>
|
||||
|
||||
<h3>3. Integration Layer</h3>
|
||||
<p><strong>neon MCP</strong> - Model Context Protocol integration providing programmatic access to Neon's management API for project and branch operations.</p>
|
||||
|
||||
<h3>4. Monitoring Layer</h3>
|
||||
<p><strong>neon-database-dev</strong> - Development metrics statusline showing active connections, transaction counts, and cache hit rates.</p>
|
||||
<p><strong>neon-database-resources</strong> - Resource monitoring statusline tracking CPU usage, memory consumption, and storage metrics.</p>
|
||||
|
||||
<h2>Installation</h2>
|
||||
|
||||
<h3>Option 1: Skills Only</h3>
|
||||
<p>Install both Neon skills (provisioning + best practices):</p>
|
||||
<pre><code>npx claude-code-templates@latest --skill database/neon-instagres,database/using-neon</code></pre>
|
||||
|
||||
<h3>Option 2: Complete Template</h3>
|
||||
<p>Install all 10 components:</p>
|
||||
<pre><code>npx claude-code-templates@latest \
|
||||
--skill database/neon-instagres,database/using-neon \
|
||||
--agent database/neon-expert,database/neon-database-architect,database/neon-auth-specialist,data-ai/neon-migration-specialist,data-ai/neon-optimization-analyzer \
|
||||
--mcp database/neon \
|
||||
--setting statusline/neon-database-dev,statusline/neon-database-resources \
|
||||
--yes</code></pre>
|
||||
|
||||
<h2>Usage Patterns</h2>
|
||||
|
||||
<h3>Basic Database Setup</h3>
|
||||
<p>The skill auto-activates when you mention database setup:</p>
|
||||
<blockquote>
|
||||
<p><strong>User:</strong> "Set up a Postgres database for this project"</p>
|
||||
<p><strong>Skill:</strong> Provisions database, writes credentials to <code>.env</code></p>
|
||||
</blockquote>
|
||||
|
||||
<h3>Schema Design</h3>
|
||||
<p>Complex schemas trigger delegation to the architect agent:</p>
|
||||
<blockquote>
|
||||
<p><strong>User:</strong> "Create a multi-tenant SaaS schema with users, organizations, and subscriptions"</p>
|
||||
<p><strong>Flow:</strong> Skill provisions → delegates to neon-database-architect → generates Drizzle schema</p>
|
||||
</blockquote>
|
||||
|
||||
<h3>Authentication Integration</h3>
|
||||
<blockquote>
|
||||
<p><strong>User:</strong> "Add Stack Auth with row-level security"</p>
|
||||
<p><strong>Flow:</strong> Delegates to neon-auth-specialist → implements RLS policies and auth tables</p>
|
||||
</blockquote>
|
||||
|
||||
<h3>Production Migration</h3>
|
||||
<blockquote>
|
||||
<p><strong>User:</strong> "Migrate to production with zero downtime"</p>
|
||||
<p><strong>Flow:</strong> Delegates to neon-migration-specialist → creates migration strategy with rollback plan</p>
|
||||
</blockquote>
|
||||
|
||||
<h2>Framework Integration</h2>
|
||||
<p>The template integrates with major JavaScript/TypeScript frameworks:</p>
|
||||
<ul>
|
||||
<li><strong>Next.js</strong> - Writes to <code>.env.local</code>, configures for server components and API routes</li>
|
||||
<li><strong>Vite</strong> - Creates <code>.env</code> with <code>VITE_</code> prefix for client-side access</li>
|
||||
<li><strong>Express</strong> - Standard <code>.env</code> configuration with connection pooling setup</li>
|
||||
<li><strong>SvelteKit</strong> - Writes to <code>.env</code> with <code>$env/static/private</code> patterns</li>
|
||||
<li><strong>Remix</strong> - Creates <code>.env</code> for server-side loaders and actions</li>
|
||||
</ul>
|
||||
<p>ORM support includes Drizzle, Prisma, TypeORM, Kysely, and raw SQL via node-postgres.</p>
|
||||
|
||||
<h2>Technical Implementation</h2>
|
||||
|
||||
<h3>Database Provisioning</h3>
|
||||
<p>Neon Instagres creates serverless Postgres instances with the following characteristics:</p>
|
||||
<ul>
|
||||
<li>Postgres 16 with standard extensions (pgvector, PostGIS, uuid-ossp, etc.)</li>
|
||||
<li>Connection pooling via PgBouncer in transaction mode</li>
|
||||
<li>Autoscaling compute from 0.25 to 8 vCPU based on load</li>
|
||||
<li>72-hour trial period before requiring account claim</li>
|
||||
</ul>
|
||||
|
||||
<h3>Agent Delegation Logic</h3>
|
||||
<p>The skill uses keyword matching to delegate to appropriate agents:</p>
|
||||
<ul>
|
||||
<li><code>schema</code>, <code>table</code>, <code>drizzle</code> → neon-database-architect</li>
|
||||
<li><code>auth</code>, <code>stack auth</code>, <code>RLS</code> → neon-auth-specialist</li>
|
||||
<li><code>migrate</code>, <code>migration</code>, <code>production</code> → neon-migration-specialist</li>
|
||||
<li><code>slow</code>, <code>optimize</code>, <code>performance</code> → neon-optimization-analyzer</li>
|
||||
<li><code>branch</code>, <code>scale</code> → neon-expert</li>
|
||||
</ul>
|
||||
|
||||
<h3>MCP Integration</h3>
|
||||
<p>The Neon MCP exposes management operations:</p>
|
||||
<ul>
|
||||
<li>List and create projects</li>
|
||||
<li>Manage database branches (create, delete, merge)</li>
|
||||
<li>Configure compute settings and autoscaling</li>
|
||||
<li>Query connection strings and endpoints</li>
|
||||
</ul>
|
||||
|
||||
<h2>Additional Resources</h2>
|
||||
<ul>
|
||||
<li><a href="https://neon.tech/docs/guides/instagres" target="_blank">Neon Instagres Documentation</a></li>
|
||||
<li><a href="https://neon.tech/docs/introduction" target="_blank">Neon Platform Overview</a></li>
|
||||
<li><a href="https://get.neon.com/4eCjZDz" target="_blank">Create Free Neon Account</a></li>
|
||||
</ul>
|
||||
</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 Neon</h3>
|
||||
<div class="partner-info-card">
|
||||
<img src="https://neon.tech/brand/neon-logo-dark-color.svg" alt="Neon">
|
||||
<p class="partner-info-description">Serverless Postgres with instant provisioning, autoscaling compute, and branching for modern development workflows.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CTA -->
|
||||
<div class="sidebar-card">
|
||||
<a href="https://get.neon.com/4eCjZDz" 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>
|
||||
Try Neon Free
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Quick Install -->
|
||||
<div class="sidebar-card">
|
||||
<h3 class="sidebar-card-title">Quick Install</h3>
|
||||
<div class="quick-install-block">
|
||||
<code id="quickInstallCommand">npx claude-code-templates@latest --skill database/neon-instagres,database/using-neon --yes</code>
|
||||
<button class="quick-copy-btn" onclick="copyInstallCommand()">
|
||||
<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
|
||||
</button>
|
||||
</div>
|
||||
</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">Template</span>
|
||||
</div>
|
||||
<div class="sidebar-meta-row">
|
||||
<span class="sidebar-meta-label">Components</span>
|
||||
<span class="sidebar-meta-value">10</span>
|
||||
</div>
|
||||
<div class="sidebar-meta-row">
|
||||
<span class="sidebar-meta-label">Category</span>
|
||||
<span class="sidebar-meta-value">Database</span>
|
||||
</div>
|
||||
<div class="sidebar-meta-row">
|
||||
<span class="sidebar-meta-label">Website</span>
|
||||
<span class="sidebar-meta-value"><a href="https://neon.tech" target="_blank" style="color: var(--accent-color); text-decoration: none;">neon.tech</a></span>
|
||||
</div>
|
||||
<div class="sidebar-meta-row">
|
||||
<span class="sidebar-meta-label">Integration</span>
|
||||
<span class="sidebar-meta-value">MCP, CLI</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Links -->
|
||||
<div class="sidebar-card">
|
||||
<h3 class="sidebar-card-title">Links</h3>
|
||||
<div class="sidebar-links">
|
||||
<a href="https://neon.tech/docs/guides/instagres" 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>
|
||||
Instagres Docs
|
||||
</a>
|
||||
<a href="https://neon.tech/docs/introduction" 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>
|
||||
Platform Overview
|
||||
</a>
|
||||
<a href="https://neon.tech" 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>
|
||||
neon.tech
|
||||
</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">neon.tech</span>
|
||||
<a href="https://neon.tech" 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://neon.tech" class="featured-website-frame" title="Neon 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('Neon Complete Postgres Template for Claude Code - Production-ready database infrastructure with instant provisioning and expert agents');
|
||||
const url = encodeURIComponent('https://aitmpl.com/featured/neon-instagres/');
|
||||
window.open(`https://twitter.com/intent/tweet?text=${text}&url=${url}`, '_blank');
|
||||
document.getElementById('componentShareDropdown').classList.remove('open');
|
||||
}
|
||||
|
||||
function shareOnThreads() {
|
||||
const text = encodeURIComponent('Neon Complete Postgres Template for Claude Code\n\nhttps://aitmpl.com/featured/neon-instagres/');
|
||||
window.open(`https://www.threads.net/intent/post?text=${text}`, '_blank');
|
||||
document.getElementById('componentShareDropdown').classList.remove('open');
|
||||
}
|
||||
|
||||
// Copy install command
|
||||
async function copyInstallCommand() {
|
||||
const command = document.getElementById('quickInstallCommand').textContent;
|
||||
try {
|
||||
await navigator.clipboard.writeText(command);
|
||||
const btn = document.querySelector('.quick-copy-btn');
|
||||
const original = btn.innerHTML;
|
||||
btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg> Copied!';
|
||||
setTimeout(() => { btn.innerHTML = original; }, 2000);
|
||||
} catch (err) {
|
||||
// fallback
|
||||
}
|
||||
}
|
||||
|
||||
// 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/neon-instagres');
|
||||
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>
|
||||
Reference in New Issue
Block a user