mirror of
https://github.com/davila7/claude-code-templates.git
synced 2026-09-19 01:30:23 +08:00
c7397fe493
* fix: improve Chats Mobile security, CSS quality, and desktop layout - Sanitize error.message with escapeHtml() to prevent XSS in innerHTML - Replace !important overrides in .back-btn with proper specificity (.header-btn.back-btn) - Add desktop side-by-side layout at 769px+ (360px sidebar + flexible chat view) - Extract 100+ inline styles from analytics modal into reusable CSS classes https://claude.ai/code/session_01Cfg7GGRKxgJoWiNj1EjWSb * chore: standardize all 15 blog posts for consistency Apply unified style guide across all local blog posts: - Fix copyright year 2025 -> 2026 in all footers - Remove inline styles from explore-components-banner (use CSS classes) - Standardize CTA text to "800+" and relative links - Fix OG tag prefix og:article: -> article: (code-reviewer) - Fix www.aitmpl.com -> aitmpl.com in OG/Twitter/structured data - Fix cover image absolute URLs to relative paths (e2b, nextjs) - Standardize Mermaid theme to orange #F97316 (heygen) - Fix author name to "Claude Code Templates" (neon-complete) - Add missing explore-components-banner (security-hooks, vercel-monitor, hackathon) - Add missing callout boxes (info-box, success-box) where absent - Standardize CodeCopy JS and MarkdownCopier across posts Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add worktree commands and blog post for parallel development Add 4 worktree slash commands for git worktree lifecycle management: - /worktree-init: create parallel worktrees from task descriptions - /worktree-check: show current worktree status and task - /worktree-deliver: commit, push, and create PR - /worktree-cleanup: remove merged worktrees and branches Add blog post explaining the Skill + Commands architecture pattern where a discoverable Skill (worktree-guide) orchestrates manual Commands for execution. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * chore: ignore settings.local.json in all subdirectories Change .claude/settings.local.json to **/settings.local.json to cover nested paths like docs/.claude/settings.local.json. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: add missing allowed-tools to worktree commands - worktree-cleanup: add Bash(grep:*) for merge check commands - worktree-init: add Bash(sed:*) for branch name detection Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude <noreply@anthropic.com>
749 lines
35 KiB
HTML
749 lines
35 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Win Your Next Hackathon with the AI Strategist 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">
|
||
<link rel="icon" type="image/png" sizes="192x192" href="../../static/favicon/android-chrome-192x192.png">
|
||
<link rel="icon" type="image/png" sizes="512x512" href="../../static/favicon/android-chrome-512x512.png">
|
||
|
||
<meta name="description" content="Install the Hackathon AI Strategist agent for Claude Code to get expert ideation, judging-criteria evaluation, pitch coaching, and time management for your next hackathon.">
|
||
|
||
<!-- Open Graph / Facebook -->
|
||
<meta property="og:type" content="article">
|
||
<meta property="og:url" content="https://aitmpl.com/blog/hackathon-ai-strategist-agent/">
|
||
<meta property="og:title" content="Win Your Next Hackathon with the AI Strategist Agent for Claude Code">
|
||
<meta property="og:description" content="Install the Hackathon AI Strategist agent for Claude Code to get expert ideation, judging-criteria evaluation, pitch coaching, and time management for your next hackathon.">
|
||
<meta property="og:image" content="https://aitmpl.com/blog/assets/hackathon-ai-strategist-agent-cover.svg">
|
||
<meta property="og:image:width" content="1200">
|
||
<meta property="og:image:height" content="630">
|
||
<meta property="article:author" content="Claude Code Templates">
|
||
<meta property="article:section" content="Agents">
|
||
<meta property="article:tag" content="Hackathon">
|
||
<meta property="article:tag" content="AI Strategy">
|
||
<meta property="article:tag" content="Agents">
|
||
<meta property="article:tag" content="Ideation">
|
||
<meta property="article:tag" content="Competition">
|
||
<meta property="article:tag" content="Claude Code">
|
||
|
||
<!-- Twitter -->
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta name="twitter:url" content="https://aitmpl.com/blog/hackathon-ai-strategist-agent/">
|
||
<meta name="twitter:title" content="Win Your Next Hackathon with the AI Strategist Agent for Claude Code">
|
||
<meta name="twitter:description" content="Install the Hackathon AI Strategist agent for Claude Code to get expert ideation, judging-criteria evaluation, pitch coaching, and time management for your next hackathon.">
|
||
<meta name="twitter:image" content="https://aitmpl.com/blog/assets/hackathon-ai-strategist-agent-cover.svg">
|
||
|
||
<!-- Additional SEO -->
|
||
<meta name="keywords" content="Hackathon AI Strategist, Claude Code Agent, Hackathon Strategy, AI Ideation, Hackathon Winning Tips, Claude Code Templates, Hackathon Judge Criteria, AI Competition, Pitch Strategy, MVP Scoping">
|
||
<meta name="author" content="Claude Code Templates">
|
||
<link rel="canonical" href="https://aitmpl.com/blog/hackathon-ai-strategist-agent/">
|
||
|
||
<link rel="stylesheet" href="../../css/styles.css">
|
||
<link rel="stylesheet" href="../../css/blog.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 for https://aitmpl.com -->
|
||
<script>
|
||
(function(h,o,t,j,a,r){
|
||
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
|
||
h._hjSettings={hjid:6519181,hjsv:6};
|
||
a=o.getElementsByTagName('head')[0];
|
||
r=o.createElement('script');r.async=1;
|
||
r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
|
||
a.appendChild(r);
|
||
})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
|
||
</script>
|
||
|
||
<!-- Structured Data -->
|
||
<script type="application/ld+json">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "BlogPosting",
|
||
"headline": "Win Your Next Hackathon with the AI Strategist Agent for Claude Code",
|
||
"description": "Install the Hackathon AI Strategist agent for Claude Code to get expert ideation, judging-criteria evaluation, pitch coaching, and time management for your next hackathon.",
|
||
"image": "https://aitmpl.com/blog/assets/hackathon-ai-strategist-agent-cover.svg",
|
||
"author": {
|
||
"@type": "Organization",
|
||
"name": "Claude Code Templates"
|
||
},
|
||
"publisher": {
|
||
"@type": "Organization",
|
||
"name": "Claude Code Templates",
|
||
"logo": {
|
||
"@type": "ImageObject",
|
||
"url": "https://aitmpl.com/static/img/logo.svg"
|
||
}
|
||
},
|
||
"mainEntityOfPage": {
|
||
"@type": "WebPage",
|
||
"@id": "https://aitmpl.com/blog/hackathon-ai-strategist-agent/"
|
||
},
|
||
"keywords": "Hackathon AI Strategist, Claude Code Agent, Hackathon Strategy, AI Ideation, Hackathon Judge Criteria",
|
||
"articleSection": "Agents"
|
||
}
|
||
</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>
|
||
<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="../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="terminal">
|
||
<header class="article-header">
|
||
<div class="container">
|
||
<button id="copy-markdown-btn" class="copy-markdown-button" title="Copy post as Markdown">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
|
||
</svg>
|
||
Copy as Markdown
|
||
</button>
|
||
|
||
<h1 class="article-title">Win Your Next Hackathon with the AI Strategist Agent for Claude Code</h1>
|
||
<p class="article-subtitle">Get expert ideation, judge-level evaluation, pitch coaching, and time management from an AI mentor that has seen what wins.</p>
|
||
<div class="article-meta-full">
|
||
<span class="read-time">5 min read</span>
|
||
<div class="article-tags">
|
||
<span class="tag">Hackathon</span>
|
||
<span class="tag">AI Strategy</span>
|
||
<span class="tag">Agents</span>
|
||
<span class="tag">Ideation</span>
|
||
<span class="tag">Competition</span>
|
||
<span class="tag">Claude Code</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<article class="article-body">
|
||
<img src="../assets/hackathon-ai-strategist-agent-cover.svg" alt="Win Your Next Hackathon with the AI Strategist Agent for Claude Code" class="article-cover" loading="lazy">
|
||
|
||
<div class="article-content-full">
|
||
<h2>Installation</h2>
|
||
|
||
<p>Install the Hackathon AI Strategist agent using the Claude Code Templates CLI:</p>
|
||
|
||
<pre><code class="language-bash">npx claude-code-templates@latest --agent ai-specialists/hackathon-ai-strategist</code></pre>
|
||
|
||
<p>This command automatically installs the agent configuration into your project's <code>.claude/agents/</code> directory, ready to use immediately in your next Claude Code session.</p>
|
||
|
||
<div class="info-box">
|
||
<strong>Want to understand how it works?</strong> Keep reading to learn what this agent does under the hood and why it's essential for your workflow.
|
||
</div>
|
||
|
||
<h2>The Problem: Most Hackathon Teams Lose Before They Start Building</h2>
|
||
|
||
<p>Hackathons are won and lost in the first two hours. The team that picks the right idea, scopes it correctly, and plans a compelling demo has an enormous advantage over the team that dives straight into code. Yet most developers skip strategy entirely and jump into building something that is either too ambitious to finish or too boring to impress the judges.</p>
|
||
|
||
<p>Common mistakes that kill hackathon projects:</p>
|
||
|
||
<ul>
|
||
<li>Choosing an idea that cannot be demoed in 3 minutes</li>
|
||
<li>Building features that judges do not care about</li>
|
||
<li>Spending 80% of the time on backend plumbing nobody will see</li>
|
||
<li>Ignoring the judging criteria until the pitch</li>
|
||
<li>No fallback plan when the primary approach hits a wall at 3 AM</li>
|
||
</ul>
|
||
|
||
<p>The Hackathon AI Strategist agent solves this by giving you an experienced mentor who thinks like both a winner and a judge.</p>
|
||
|
||
<h2>What the Agent Does</h2>
|
||
|
||
<p>The Hackathon AI Strategist is an expert agent with dual expertise: serial hackathon winner (20+ wins) and judge at major competitions like HackMIT, TreeHacks, and PennApps. It provides five core capabilities:</p>
|
||
|
||
<h3>1. Winning Concept Ideation</h3>
|
||
|
||
<p>The agent generates AI solution ideas that balance innovation, feasibility, and impact. It prioritizes clear problem-solution fit, technical impressiveness within a 24-48 hour timeframe, creative AI usage that goes beyond basic API calls, and solutions with a strong "wow factor" during demos.</p>
|
||
|
||
<h3>2. Judge-Level Evaluation</h3>
|
||
|
||
<p>Every idea gets scored against the same criteria real judges use:</p>
|
||
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Criterion</th>
|
||
<th>Weight</th>
|
||
<th>What Judges Look For</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Innovation & Originality</td>
|
||
<td>25-30%</td>
|
||
<td>Novel approach, not another todo app</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Technical Complexity</td>
|
||
<td>25-30%</td>
|
||
<td>Clever engineering, not just API wrappers</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Impact & Scalability</td>
|
||
<td>20-25%</td>
|
||
<td>Real-world potential, clear user benefit</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Presentation & Demo</td>
|
||
<td>15-20%</td>
|
||
<td>Smooth demo, compelling narrative</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Completeness & Polish</td>
|
||
<td>5-10%</td>
|
||
<td>Feels finished, no rough edges visible</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<h3>3. Strategic Time Management</h3>
|
||
|
||
<p>The agent recommends how to allocate your hours across ideation, building, and polishing. It identifies which features to prioritize for the demo and which to fake or skip entirely.</p>
|
||
|
||
<h3>4. AI Trend Awareness</h3>
|
||
|
||
<p>It stays current with cutting-edge AI capabilities and suggests incorporating the latest model features, novel applications of existing technology, clever multi-service combinations, and emerging techniques that judges have not seen repeatedly.</p>
|
||
|
||
<h3>5. Constraint Optimization</h3>
|
||
|
||
<p>The agent excels at scoping ambitious ideas into achievable MVPs, identifying pre-built components and APIs that accelerate development, suggesting impressive features that are secretly simple to implement, and planning fallback options when primary approaches fail.</p>
|
||
|
||
<h2>Agent Configuration</h2>
|
||
|
||
<p>Here is the core of the agent's system prompt that gets installed:</p>
|
||
|
||
<pre><code class="language-text">You are an elite hackathon strategist with dual expertise
|
||
as both a serial hackathon winner and an experienced judge
|
||
at major AI competitions.
|
||
|
||
Tools: Read, WebSearch, WebFetch
|
||
Model: sonnet
|
||
|
||
Key behaviors:
|
||
- Generate ideas balancing innovation + feasibility + impact
|
||
- Evaluate through real judging criteria with weighted scores
|
||
- Recommend team composition and skill distribution
|
||
- Suggest time allocation across ideation, building, polishing
|
||
- Identify technical pitfalls and shortcuts
|
||
- Advise on features to prioritize vs. fake for demos
|
||
- Coach on pitch narratives and demo flows</code></pre>
|
||
|
||
<p>The agent uses <code>WebSearch</code> and <code>WebFetch</code> tools to research current AI trends, hackathon themes, and sponsor technologies in real time, giving you advice grounded in what is happening right now rather than outdated patterns.</p>
|
||
|
||
<h2>Usage Examples</h2>
|
||
|
||
<p>Once installed, you can invoke the agent in Claude Code for different hackathon scenarios:</p>
|
||
|
||
<h3>Brainstorming Ideas for a Theme</h3>
|
||
|
||
<pre><code class="language-text">I'm at a healthcare AI hackathon with 36 hours.
|
||
My team has 2 backend devs, 1 frontend dev, and 1 designer.
|
||
The sponsor prizes include best use of LLMs and best social impact.
|
||
Give me 5 winning project ideas ranked by likelihood of winning.</code></pre>
|
||
|
||
<h3>Evaluating Your Current Idea</h3>
|
||
|
||
<pre><code class="language-text">We want to build an AI-powered code review tool that uses
|
||
vision models to analyze screenshots of code.
|
||
Score this idea against typical judging criteria and tell me
|
||
what to change to maximize our chances.</code></pre>
|
||
|
||
<h3>Planning Your Sprint</h3>
|
||
|
||
<pre><code class="language-text">We picked our idea: a multimodal AI assistant for elderly users.
|
||
We have 24 hours left. Create a detailed hour-by-hour schedule
|
||
including what to build, what to fake, and when to stop coding
|
||
and start preparing the pitch.</code></pre>
|
||
|
||
<h3>Pitch Coaching</h3>
|
||
|
||
<pre><code class="language-text">Our demo is in 2 hours. Here's what we built: [description].
|
||
Write a 3-minute pitch script that hits all the judging criteria
|
||
and has a strong opening hook. Include what to show in the live demo
|
||
and what to cover in slides.</code></pre>
|
||
|
||
<div class="info-box">
|
||
<strong>Pro tip:</strong> Use the agent at three critical moments -- the start of the hackathon (ideation), the midpoint (scope check), and 3 hours before judging (pitch prep). These are the highest-leverage interventions.
|
||
</div>
|
||
|
||
<h2>What Makes a Winning Hackathon Project</h2>
|
||
|
||
<p>Based on the strategist's evaluation framework, here are the patterns that consistently win:</p>
|
||
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Winning Pattern</th>
|
||
<th>Why It Works</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Solve a real problem you have experienced</td>
|
||
<td>Authentic passion shows in the pitch</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Use AI in a non-obvious way</td>
|
||
<td>Judges are tired of chatbot wrappers</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Build the demo first, infrastructure second</td>
|
||
<td>Judges only see the demo</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Have one "wow moment" in the presentation</td>
|
||
<td>Makes your project memorable</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Polish the visible 20%, skip the invisible 80%</td>
|
||
<td>Perception of completeness matters more than actual completeness</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="warning-box">
|
||
<strong>Common trap:</strong> Do not spend more than 2 hours on ideation. Analysis paralysis kills more hackathon projects than bad ideas do. Pick a direction, validate it with the strategist agent, and start building.
|
||
</div>
|
||
|
||
<h2>Combining with Other Agents</h2>
|
||
|
||
<p>The Hackathon AI Strategist works best when paired with other Claude Code Templates agents for execution:</p>
|
||
|
||
<pre><code class="language-bash"># Strategy + execution stack
|
||
npx claude-code-templates@latest --agent ai-specialists/hackathon-ai-strategist
|
||
npx claude-code-templates@latest --agent frontend-developer
|
||
npx claude-code-templates@latest --agent api-developer</code></pre>
|
||
|
||
<p>Use the strategist for planning and scoping, then hand off to specialized agents for building. Return to the strategist for scope checks and pitch preparation.</p>
|
||
|
||
<h2>Conclusion</h2>
|
||
|
||
<p>Hackathons reward teams that think strategically before they code. The Hackathon AI Strategist agent gives you an experienced mentor who evaluates your ideas through real judging criteria, helps you scope an achievable MVP, and coaches your pitch to land with maximum impact.</p>
|
||
|
||
<p>Install it before your next hackathon and use it at the three critical moments: ideation, midpoint scope check, and pitch prep. The difference between a good project and a winning project is almost always strategy, not code.</p>
|
||
|
||
<div class="success-box">
|
||
<strong>Key takeaway:</strong> The best hackathon teams spend 20% of their time on strategy and 80% on focused execution. This agent makes that 20% dramatically more effective.
|
||
</div>
|
||
|
||
<div class="explore-components-banner">
|
||
<h3>Explore 800+ Claude Code Components</h3>
|
||
<p>Discover agents, commands, MCPs, settings, hooks, skills and templates to supercharge your Claude Code workflow</p>
|
||
<a href="../../index.html">Browse All Components</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="article-nav">
|
||
<a href="../index.html" class="back-to-blog">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"/>
|
||
</svg>
|
||
Back to Blog
|
||
</a>
|
||
</div>
|
||
</article>
|
||
</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="../../trending.html" class="footer-link">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M16,6L18.29,8.29L13.41,13.17L9.41,9.17L2,16.59L3.41,18L9.41,12L13.41,16L19.71,9.71L22,12V6H16Z"/>
|
||
</svg>
|
||
Trending
|
||
</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>
|
||
|
||
<!-- Code Copy Functionality -->
|
||
<script>
|
||
// Code Copy Functionality for Blog Articles
|
||
class CodeCopy {
|
||
constructor() {
|
||
this.initCodeBlocks();
|
||
this.setupCopyFunctionality();
|
||
}
|
||
|
||
initCodeBlocks() {
|
||
const preElements = document.querySelectorAll('.article-content-full pre:not(.converted)');
|
||
|
||
preElements.forEach(pre => {
|
||
const code = pre.querySelector('code');
|
||
if (!code) return;
|
||
|
||
const language = this.detectLanguage(code);
|
||
const isTerminal = language === 'bash' || language === 'terminal';
|
||
|
||
const codeBlock = document.createElement('div');
|
||
codeBlock.className = isTerminal ? 'code-block terminal-block' : 'code-block';
|
||
|
||
const header = document.createElement('div');
|
||
header.className = 'code-header';
|
||
|
||
const languageSpan = document.createElement('span');
|
||
languageSpan.className = 'code-language';
|
||
languageSpan.textContent = language;
|
||
|
||
const copyButton = document.createElement('button');
|
||
copyButton.className = 'copy-button';
|
||
copyButton.innerHTML = `
|
||
<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
|
||
`;
|
||
|
||
header.appendChild(languageSpan);
|
||
header.appendChild(copyButton);
|
||
|
||
const newPre = pre.cloneNode(true);
|
||
newPre.classList.add('converted');
|
||
|
||
codeBlock.appendChild(header);
|
||
codeBlock.appendChild(newPre);
|
||
|
||
pre.parentNode.replaceChild(codeBlock, pre);
|
||
});
|
||
}
|
||
|
||
detectLanguage(codeElement) {
|
||
const className = codeElement.className;
|
||
if (className.includes('language-')) {
|
||
return className.match(/language-(\w+)/)[1];
|
||
}
|
||
|
||
const content = codeElement.textContent;
|
||
|
||
if (content.includes('npm ') || content.includes('$ ') || content.includes('claude-code ')) {
|
||
return 'bash';
|
||
}
|
||
if (content.includes('import ') && content.includes('from ')) {
|
||
return 'javascript';
|
||
}
|
||
if (content.includes('CREATE TABLE') || content.includes('SELECT ')) {
|
||
return 'sql';
|
||
}
|
||
if (content.includes('{') && content.includes('"')) {
|
||
return 'json';
|
||
}
|
||
if (content.includes('def ') || content.includes('import ')) {
|
||
return 'python';
|
||
}
|
||
|
||
return 'text';
|
||
}
|
||
|
||
setupCopyFunctionality() {
|
||
document.addEventListener('click', async (e) => {
|
||
if (!e.target.closest('.copy-button')) return;
|
||
|
||
const button = e.target.closest('.copy-button');
|
||
const codeBlock = button.closest('.code-block');
|
||
const pre = codeBlock.querySelector('pre');
|
||
const code = pre.querySelector('code');
|
||
|
||
if (!code) return;
|
||
|
||
try {
|
||
let textToCopy = code.textContent;
|
||
|
||
if (codeBlock.classList.contains('terminal-block')) {
|
||
textToCopy = this.cleanTerminalOutput(textToCopy);
|
||
}
|
||
|
||
await navigator.clipboard.writeText(textToCopy);
|
||
|
||
const originalContent = button.innerHTML;
|
||
button.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!
|
||
`;
|
||
button.classList.add('copied');
|
||
|
||
setTimeout(() => {
|
||
button.innerHTML = originalContent;
|
||
button.classList.remove('copied');
|
||
}, 2000);
|
||
|
||
} catch (err) {
|
||
console.error('Failed to copy code:', err);
|
||
|
||
const selection = window.getSelection();
|
||
const range = document.createRange();
|
||
range.selectNodeContents(code);
|
||
selection.removeAllRanges();
|
||
selection.addRange(range);
|
||
}
|
||
});
|
||
}
|
||
|
||
cleanTerminalOutput(text) {
|
||
return text
|
||
.split('\n')
|
||
.map(line => {
|
||
line = line.replace(/^[\$❯]\s*/, '').replace(/^claude-code>\s*/, '');
|
||
|
||
if (line.trim().startsWith('# ✓') ||
|
||
line.trim().startsWith('# Start using') ||
|
||
line.trim().startsWith('# Your .claude') ||
|
||
line.trim().startsWith('# This will') ||
|
||
line.includes('Components will be installed') ||
|
||
line.includes('directory now contains')) {
|
||
return '';
|
||
}
|
||
|
||
return line;
|
||
})
|
||
.filter(line => line.trim() !== '')
|
||
.join('\n')
|
||
.trim();
|
||
}
|
||
}
|
||
|
||
// Initialize when DOM is loaded
|
||
if (document.readyState === 'loading') {
|
||
document.addEventListener('DOMContentLoaded', () => new CodeCopy());
|
||
} else {
|
||
new CodeCopy();
|
||
}
|
||
|
||
// Copy Markdown functionality
|
||
class MarkdownCopier {
|
||
constructor() {
|
||
this.setupButton();
|
||
}
|
||
|
||
setupButton() {
|
||
const button = document.getElementById('copy-markdown-btn');
|
||
if (!button) return;
|
||
|
||
button.addEventListener('click', async () => {
|
||
const markdown = this.extractMarkdown();
|
||
|
||
try {
|
||
await navigator.clipboard.writeText(markdown);
|
||
|
||
const originalContent = button.innerHTML;
|
||
button.innerHTML = `
|
||
<svg width="16" height="16" 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!
|
||
`;
|
||
button.classList.add('copied');
|
||
|
||
setTimeout(() => {
|
||
button.innerHTML = originalContent;
|
||
button.classList.remove('copied');
|
||
}, 2000);
|
||
|
||
} catch (err) {
|
||
console.error('Failed to copy markdown:', err);
|
||
}
|
||
});
|
||
}
|
||
|
||
extractMarkdown() {
|
||
const title = document.querySelector('.article-title')?.textContent || '';
|
||
const subtitle = document.querySelector('.article-subtitle')?.textContent || '';
|
||
const content = document.querySelector('.article-content-full');
|
||
|
||
let markdown = `# ${title}\n\n`;
|
||
|
||
if (subtitle) {
|
||
markdown += `${subtitle}\n\n`;
|
||
}
|
||
|
||
if (!content) return markdown;
|
||
|
||
const elements = content.children;
|
||
|
||
for (const element of elements) {
|
||
markdown += this.processElement(element) + '\n\n';
|
||
}
|
||
|
||
return markdown.trim();
|
||
}
|
||
|
||
processElement(element) {
|
||
const tagName = element.tagName.toLowerCase();
|
||
|
||
switch (tagName) {
|
||
case 'h2':
|
||
return `## ${element.textContent}`;
|
||
case 'h3':
|
||
return `### ${element.textContent}`;
|
||
case 'h4':
|
||
return `#### ${element.textContent}`;
|
||
case 'p':
|
||
return element.textContent;
|
||
case 'ul':
|
||
return this.processList(element, '-');
|
||
case 'ol':
|
||
return this.processList(element, '1.');
|
||
case 'table':
|
||
return this.processTable(element);
|
||
case 'pre':
|
||
return this.processCodeBlock(element);
|
||
case 'div':
|
||
if (element.classList.contains('code-block')) {
|
||
return this.processCodeBlock(element.querySelector('pre'));
|
||
}
|
||
if (element.classList.contains('newsletter-cta') ||
|
||
element.classList.contains('explore-components-banner')) {
|
||
return '';
|
||
}
|
||
return element.textContent || '';
|
||
case 'img':
|
||
const alt = element.getAttribute('alt') || '';
|
||
const src = element.getAttribute('src') || '';
|
||
return ``;
|
||
default:
|
||
return element.textContent || '';
|
||
}
|
||
}
|
||
|
||
processList(listElement, marker) {
|
||
const items = listElement.querySelectorAll('li');
|
||
return Array.from(items)
|
||
.map(item => `${marker} ${item.textContent}`)
|
||
.join('\n');
|
||
}
|
||
|
||
processTable(table) {
|
||
const rows = table.querySelectorAll('tr');
|
||
if (rows.length === 0) return '';
|
||
|
||
let markdown = '';
|
||
|
||
const headerRow = rows[0];
|
||
const headers = headerRow.querySelectorAll('th, td');
|
||
const headerText = Array.from(headers).map(h => h.textContent.trim()).join(' | ');
|
||
markdown += `| ${headerText} |\n`;
|
||
|
||
const separator = Array.from(headers).map(() => '---').join(' | ');
|
||
markdown += `| ${separator} |\n`;
|
||
|
||
for (let i = 1; i < rows.length; i++) {
|
||
const row = rows[i];
|
||
const cells = row.querySelectorAll('td, th');
|
||
const cellText = Array.from(cells).map(c => c.textContent.trim()).join(' | ');
|
||
markdown += `| ${cellText} |\n`;
|
||
}
|
||
|
||
return markdown;
|
||
}
|
||
|
||
processCodeBlock(preElement) {
|
||
if (!preElement) return '';
|
||
|
||
const code = preElement.querySelector('code');
|
||
const codeText = code ? code.textContent : preElement.textContent;
|
||
|
||
const codeBlock = preElement.closest('.code-block');
|
||
let language = '';
|
||
|
||
if (codeBlock) {
|
||
const languageSpan = codeBlock.querySelector('.code-language');
|
||
if (languageSpan) {
|
||
language = languageSpan.textContent.toLowerCase();
|
||
}
|
||
} else if (code && code.className.includes('language-')) {
|
||
language = code.className.match(/language-(\w+)/)?.[1] || '';
|
||
}
|
||
|
||
return `\`\`\`${language}\n${codeText}\n\`\`\``;
|
||
}
|
||
}
|
||
|
||
// Initialize markdown copier
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
new MarkdownCopier();
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |