wehub/davila7--claude-code-templates
1
0
Fork 0
Code Issues Pull Requests Actions Deployments Models Agent Notes Packages Projects Releases Wiki Activity
Files
main
davila7--claude-code-templates/cli-tool/docs_to_claude/BLOG_WRITING_GUIDE.md
T
wehub-resource-sync bb5c75ce05
Component Security Validation / Security Audit (push) Has been cancelled
Details
Deploy to Cloudflare Pages / deploy (push) Has been cancelled
Details
chore: import upstream snapshot with attribution
2026-07-13 12:38:58 +08:00

15 KiB
Raw Permalink Blame History

Blog Writing Guide - Claude Code Templates

This guide provides a comprehensive template for creating consistent, SEO-optimized blog articles for Claude Code Templates. Use this structure for articles about technologies, companies, or trends related to Claude Code integration.

📁 File Structure

docs/blog/
├── index.html                              # Blog homepage
├── assets/                                 # Shared blog assets
│   ├── [technology]-claude-code-templates-cover.png
│   └── aitmpl-[technology]-search.png
├── [technology-name]-claude-code-integration/
│   ├── index.html                          # Article page
│   └── cover.jpg                          # Article cover image (1200x630)
└── code-copy.js                           # Copy functionality script

🏗️ HTML Structure Template

Basic HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>[Technology] and Claude Code Integration</title>
    <meta name="description" content="Learn how to integrate [Technology] with Claude Code using MCP servers, specialized agents, and automated commands for lightning-fast [domain] development.">
    
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="article">
    <meta property="og:url" content="https://davila7.github.io/claude-code-templates/blog/[slug]/">
    <meta property="og:title" content="[Technology] and Claude Code Integration">
    <meta property="og:description" content="Learn how to integrate [Technology] with Claude Code...">
    <meta property="og:image" content="https://davila7.github.io/claude-code-templates/blog/[slug]/cover.jpg">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="article:published_time" content="[ISO_DATE]">
    <meta property="article:author" content="Claude Code Templates">
    <meta property="article:section" content="[Category]">
    <meta property="article:tag" content="[Technology]">
    <meta property="article:tag" content="Claude Code">
    
    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://davila7.github.io/claude-code-templates/blog/[slug]/">
    <meta property="twitter:title" content="[Technology] and Claude Code Integration">
    <meta property="twitter:description" content="Learn how to integrate [Technology] with Claude Code...">
    <meta property="twitter:image" content="https://davila7.github.io/claude-code-templates/blog/[slug]/cover.jpg">
    
    <!-- Additional SEO -->
    <meta name="keywords" content="[Technology], Claude Code, MCP, [Domain], AI Development, Anthropic">
    <meta name="author" content="Claude Code Templates">
    <link rel="canonical" href="https://davila7.github.io/claude-code-templates/blog/[slug]/">
    
    <!-- Stylesheets -->
    <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">
    
    <!-- Structured Data -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "BlogPosting",
        "headline": "[Technology] and Claude Code Integration",
        "description": "Learn how to integrate [Technology] with Claude Code...",
        "image": "https://davila7.github.io/claude-code-templates/blog/[slug]/cover.jpg",
        "author": {
            "@type": "Organization",
            "name": "Claude Code Templates"
        },
        "publisher": {
            "@type": "Organization",
            "name": "Claude Code Templates",
            "logo": {
                "@type": "ImageObject",
                "url": "https://davila7.github.io/claude-code-templates/static/img/logo.svg"
            }
        },
        "datePublished": "[ISO_DATE]",
        "dateModified": "[ISO_DATE]",
        "mainEntityOfPage": {
            "@type": "WebPage",
            "@id": "https://davila7.github.io/claude-code-templates/blog/[slug]/"
        }
    }
    </script>
</head>

Header Section

<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..."/>
                    </svg>
                    GitHub
                </a>
            </div>
        </div>
    </div>
</header>

Article Header

<header class="article-header">
    <div class="container">
        <h1 class="article-title">How to use Claude Code with [Technology]</h1>
        <p class="article-subtitle">Learn how to integrate [Technology] with Claude Code using MCP, Agents, and Commands for faster [domain] development.</p>
        <div class="article-meta-full">
            <time datetime="[YYYY-MM-DD]">[Month DD, YYYY]</time>
            <span class="read-time">[X] min read</span>
            <div class="article-tags">
                <span class="tag">[Technology]</span>
                <span class="tag">[Category]</span>
                <span class="tag">MCP</span>
                <span class="tag">Agents</span>
            </div>
        </div>
    </div>
</header>

📝 Content Structure

1. Hero Image

<img src="../assets/[technology]-claude-code-templates-cover.png" alt="[Technology] and Claude Code Integration" class="article-cover">

2. Technology Stack Overview

<h2>[Technology] Stack for Claude Code</h2>
<p>Claude Code Templates offers [X] pre-built components for [Technology] integration:</p>

3. Component Tables

Agents Table

<h3>🤖 Agents</h3>
<table class="components-table">
    <thead>
        <tr>
            <th>Component</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><strong>[Agent Name]</strong></td>
            <td>[Detailed description of agent capabilities and use cases]</td>
        </tr>
    </tbody>
</table>

Commands Table

<h3>⚡ Commands</h3>
<table class="components-table">
    <thead>
        <tr>
            <th>Command</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><strong>[command-name]</strong></td>
            <td>[Command description and functionality]</td>
        </tr>
    </tbody>
</table>

MCP Table

<h3>🔌 MCP</h3>
<table class="components-table">
    <thead>
        <tr>
            <th>Component</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>🔌 <strong>[Technology] MCP Server</strong></td>
            <td>Direct integration with [Technology] API through Model Context Protocol for seamless Claude Code interaction.</td>
        </tr>
    </tbody>
</table>

4. AITMPL.com Browse Section

<h2>Browse all components on AITMPL.com</h2>
<p>Before installing, you can explore all available [Technology] components on the official Claude Code Templates website:</p>
<p>Visit <strong><a href="https://aitmpl.com" target="_blank" rel="noopener">aitmpl.com</a></strong> and search for "[technology]" to see:</p>
<img src="../assets/aitmpl-[technology]-search.png" alt="Searching for [Technology] components on AITMPL.com" loading="lazy">

5. Installation Options

Individual Components

<h3>Install Individual Components</h3>
<pre><code class="language-bash">
# Install specific agent
npx claude-code-templates@latest --agent [agent-name]

# Install specific command
npx claude-code-templates@latest --command [command-name]

# Install MCP server
npx claude-code-templates@latest --mcp [technology]</code></pre>

<p><strong>Components will be installed to:</strong></p>
<ul>
    <li>📁 <code>.claude/commands/</code></li>
    <li>📁 <code>.claude/agents/</code></li>
    <li>📁 <code>.mcp.json</code></li>
</ul>

Global Agents

<h3>Create Global Agents (Available Anywhere)</h3>
<pre><code class="language-bash"># Create global agents accessible from any project
npx claude-code-templates@latest --create-agent [agent-name]

# List all global agents
npx claude-code-templates@latest --list-agents

# Update global agents
npx claude-code-templates@latest --update-agent [agent-name]

# Remove global agents  
npx claude-code-templates@latest --remove-agent [agent-name]</code></pre>

Multiple Components

<h3>Install Multiple Components at Once</h3>
<pre><code class="language-bash">
# Install specific commands (comma-separated for multiple)
npx claude-code-templates@latest --command [command1],[command2],[command3]
</code></pre>

<pre><code class="language-bash">
# Install all [Technology] components in one command
npx claude-code-templates@latest \
  --command [all-commands-comma-separated] \
  --agent [all-agents-comma-separated] \
  --mcp [technology]</code></pre>

<p><strong>This will install:</strong></p>
<ul>
    <li>✓ [X] [domain] commands</li>
    <li>✓ [X] specialized AI agents</li>
    <li>✓ 1 MCP server integration</li>
    <li>✓ Complete documentation</li>
</ul>

Execute Prompt After Installation

<h3>Execute Prompt After Installation</h3>
<pre><code class="language-bash"># Install components and run a prompt immediately
npx claude-code-templates@latest \
  --command [primary-command] \
  --prompt "[Sample prompt for the technology]"</code></pre>

6. File Structure

<h2>Where Components Are Installed</h2>
<p>The installation creates a standard Claude Code structure with components organized as follows:</p>

<pre><code class="language-bash">your-project/
├── .claude/
│   ├── commands/
│   │   ├── [command-1].md
│   │   ├── [command-2].md
│   │   └── ...
│   └── agents/
│       ├── [agent-1].md
│       └── [agent-2].md
└── .mcp.json
└── src/ # Your application code</code></pre>

<p>That's it! Claude Code will automatically detect all components and you can start using them immediately.</p>

7. Navigation Footer

<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>

📋 Content Guidelines

Writing Style

  • Use clear, technical language suitable for developers
  • Include practical examples and code snippets
  • Focus on actionable content and real-world use cases
  • Keep sentences concise and scannable
  • Use bullet points and numbered lists for clarity

Technical Content

  • Always include installation commands with proper syntax
  • Provide multiple installation methods (individual, global, bulk)
  • Show file structure after installation
  • Include component descriptions that highlight practical benefits
  • Use consistent command naming patterns

SEO Optimization

  • Title: "How to use Claude Code with [Technology]"
  • Meta Description: Max 160 characters, include key terms
  • Keywords: Technology name, Claude Code, MCP, Agents, Commands, AI Development
  • Headers: Use proper H2, H3 hierarchy
  • Alt Text: Descriptive alt text for all images
  • Internal Links: Link to main site and other relevant articles
  • Structured Data: Include JSON-LD schema for articles

Visual Assets Required

  1. Cover Image: 1200x630 pixels for social sharing
  2. Hero Image: Technology + Claude Code branded image
  3. AITMPL Search Screenshot: Show search results for the technology
  4. Component Icons: Use appropriate emojis (🤖 for agents, ⚡ for commands, 🔌 for MCP)

🔧 Technical Requirements

File Naming Convention

  • Slug: [technology-name]-claude-code-integration
  • Directory: docs/blog/[slug]/
  • Main File: index.html
  • Assets: Use descriptive names with technology prefix

Code Block Standards

  • Use language-bash for terminal commands
  • Include copy functionality (automatic via code-copy.js)
  • Clean terminal output (remove success messages and prompts)
  • Use proper syntax highlighting

Responsive Design

  • All tables must be responsive
  • Images should have loading="lazy" attribute
  • Use relative paths for internal assets
  • Test on mobile and desktop viewports

📊 Component Data Requirements

Before writing an article, gather:

  1. Available Components

    • List all commands for the technology
    • List all agents for the technology
    • Identify MCP server if available

  2. Installation Information

    • Component file names
    • Installation directory structure
    • Example prompts for testing

  3. Category Information

    • Primary category (Database, Frontend, Backend, etc.)
    • Secondary tags
    • Related technologies

✅ Pre-Publication Checklist

  • All placeholders replaced with actual content
  • SEO meta tags completed
  • Images optimized and properly sized
  • Links tested (internal and external)
  • Code blocks tested for copy functionality
  • Mobile responsiveness verified
  • Structured data validated
  • Article added to blog index page
  • Social media preview tested

📈 Analytics & Performance

Tracking

  • Article views and engagement will be tracked via existing analytics
  • Monitor social media sharing performance
  • Track component installation after article publication

Success Metrics

  • Time on page > 3 minutes
  • Low bounce rate < 40%
  • High component installation conversion
  • Social media shares and engagement

This template ensures consistency across all technology integration articles while maintaining high SEO standards and user experience.

Reference in New Issue View Git Blame Copy Permalink