npm - claude-code-templates - Versions diffs - 1.20.3 → 1.21.1 - Mend

claude-code-templates 1.20.3 → 1.21.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (743) hide show

package/cli-tool/docs_to_claude/BLOG_WRITING_GUIDE.md ADDED Viewed

@@ -0,0 +1,438 @@
+# 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
+<!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
+```html
+<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
+```html
+<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
+```html
+<img src="../assets/[technology]-claude-code-templates-cover.png" alt="[Technology] and Claude Code Integration" class="article-cover">
+```
+### 2. Technology Stack Overview
+```html
+<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
+```html
+<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
+```html
+<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
+```html
+<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
+```html
+<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
+```html
+<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
+```html
+<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
+```html
+<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
+```html
+<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
+```html
+<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
+```html
+<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.