# 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 ```html [Technology] and Claude Code Integration ``` ### Header Section ```html

 
██████╗ ██╗      ██████╗  ██████╗ 
██╔══██╗██║     ██╔═══██╗██╔════╝ 
██████╔╝██║     ██║   ██║██║  ███╗
██╔══██╗██║     ██║   ██║██║   ██║
██████╔╝███████╗╚██████╔╝╚██████╔╝
╚═════╝ ╚══════╝ ╚═════╝  ╚═════╝

Home Blog GitHub

``` ### Article Header ```html

How to use Claude Code with [Technology]

Learn how to integrate [Technology] with Claude Code using MCP, Agents, and Commands for faster [domain] development.

[Month DD, YYYY] [X] min read

[Technology] [Category] MCP Agents

``` ## 📝 Content Structure ### 1. Hero Image ```html [Technology] and Claude Code Integration

``` ### 2. Technology Stack Overview ```html

[Technology] Stack for Claude Code

Claude Code Templates offers [X] pre-built components for [Technology] integration:

``` ### 3. Component Tables #### Agents Table ```html

🤖 Agents

Component	Description
[Agent Name]	[Detailed description of agent capabilities and use cases]

``` #### Commands Table ```html

⚡ Commands

Command	Description
[command-name]	[Command description and functionality]

``` #### MCP Table ```html

🔌 MCP

Component	Description
🔌 [Technology] MCP Server	Direct integration with [Technology] API through Model Context Protocol for seamless Claude Code interaction.

``` ### 4. AITMPL.com Browse Section ```html

Browse all components on AITMPL.com

Before installing, you can explore all available [Technology] components on the official Claude Code Templates website:

Visit aitmpl.com and search for "[technology]" to see:

Searching for [Technology] components on AITMPL.com

``` ### 5. Installation Options #### Individual Components ```html

Install Individual Components


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

Components will be installed to:

📁 .claude/commands/
📁 .claude/agents/
📁 .mcp.json

``` #### Global Agents ```html

Create Global Agents (Available Anywhere)

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

``` #### Multiple Components ```html

Install Multiple Components at Once


# Install specific commands (comma-separated for multiple)
npx claude-code-templates@latest --command [command1],[command2],[command3]


# Install all [Technology] components in one command
npx claude-code-templates@latest \
  --command [all-commands-comma-separated] \
  --agent [all-agents-comma-separated] \
  --mcp [technology]

This will install:

✓ [X] [domain] commands
✓ [X] specialized AI agents
✓ 1 MCP server integration
✓ Complete documentation

``` #### Execute Prompt After Installation ```html

Execute Prompt After Installation

# Install components and run a prompt immediately
npx claude-code-templates@latest \
  --command [primary-command] \
  --prompt "[Sample prompt for the technology]"

``` ### 6. File Structure ```html

Where Components Are Installed

The installation creates a standard Claude Code structure with components organized as follows:

your-project/
├── .claude/
│   ├── commands/
│   │   ├── [command-1].md
│   │   ├── [command-2].md
│   │   └── ...
│   └── agents/
│       ├── [agent-1].md
│       └── [agent-2].md
└── .mcp.json
└── src/ # Your application code

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

``` ### 7. Navigation Footer ```html ``` ## 📋 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.