allowed-tools: Read, Write, Edit, Bash(python3:), Bash(mkdir:), Bash(rm:*)

argument-hint: <component-path>

description: Create an SEO-optimized blog article for a Claude Code component with AI-generated cover image

Create Blog Article for Claude Code Component

You will create a complete, SEO-optimized blog article for a Claude Code component.

Component Path Argument

Component path provided: $ARGUMENTS

Expected format examples:

• development-team/frontend-developer (for agents)
• supabase (for MCPs)
• productivity/nowait (for skills)

Step 1: Identify Component Type and Read Component File

Based on the path structure, determine the component type:

• If path has /, could be an agent, MCP, command, skill, or hook in a folder
• Single word could be MCP, command, or skill

Read the component file:

• Agents: cli-tool/components/agents/$ARGUMENTS.md (e.g., development-team/frontend-developer.md)
• MCPs: cli-tool/components/mcps/$ARGUMENTS.json (e.g., devtools/context7.json)
• Skills: cli-tool/components/skills/$ARGUMENTS/SKILL.md
• Commands: cli-tool/components/commands/$ARGUMENTS.md (e.g., setup/ci-cd-pipeline.md)
• Hooks: cli-tool/components/hooks/$ARGUMENTS.md

CRITICAL: Use find or grep to locate the actual file path first, then extract folder/name structure.

Extract from the component file:

• name: Component name
• description: Component description
• tools: Available tools (for agents)
• Key capabilities and focus areas from the content

Step 2: Generate Component-Specific Blog ID and Names

From the component path, create:

• Blog ID: Convert path to blog-friendly ID
• Example: development-team/frontend-developer → frontend-developer-agent
• Example: supabase → supabase-mcp
• Example: productivity/nowait → nowait-skill

• Component Name: Human-readable name
• Example: frontend-developer → Frontend Developer
• Example: supabase → Supabase

• Component Type: Uppercase type
• AGENT, MCP, SKILL, COMMAND, HOOK

Step 3: Generate Cover Image FIRST

CRITICAL: Generate the cover image BEFORE creating the HTML file.

Use the Python script to generate the image:

python3 scripts/generate_blog_images.py

But first, temporarily add a new entry to docs/blog/blog-articles.json with:

{
  "id": "[blog-id]",
  "title": "Temporary",
  "description": "Temporary",
  "url": "[blog-id]/",
  "image": "https://www.aitmpl.com/blog/assets/[blog-id]-cover.png",
  "category": "[Component Type]",
  "publishDate": "2025-01-15",
  "readTime": "4 min read",
  "tags": ["Claude Code"],
  "difficulty": "basic",
  "featured": true,
  "order": 999
}

Then run the script, which will:

1. Detect the new entry
2. Find the component path
3. Generate the image at docs/blog/assets/[blog-id]-cover.png

After image generation, update the entry with correct information.

Step 4: Create Blog Article HTML

Create directory:

mkdir -p docs/blog/[blog-id]

CRITICAL PROCESS:

1. First, READ the template file completely:

   Read docs/blog/code-reviewer-agent/index.html

1. Copy the ENTIRE content to the new file location:

   Write docs/blog/[blog-id]/index.html

1. Then, ONLY replace the specific content sections (listed below)

DO NOT:

• ❌ Create HTML from scratch
• ❌ Use a different template
• ❌ Simplify or remove any scripts
• ❌ Change the header/footer structure
• ❌ Modify CSS paths or class names

Create docs/blog/[blog-id]/index.html using this process:

HTML Template Structure

CRITICAL: Use docs/blog/code-reviewer-agent/index.html as the EXACT base template.

This template includes ALL required components:

• ✅ Header with class="header" (NOT "blog-header")
• ✅ ASCII art logo in terminal-header
• ✅ Copy as Markdown button (id="copy-markdown-btn")
• ✅ Proper article structure: article-header → article-body → article-content-full
• ✅ "Explore Components" banner at the end of content
• ✅ Footer with ASCII art and links
• ✅ CodeCopy script (adds copy buttons to code blocks)
• ✅ MarkdownCopier script (copy entire article as markdown)
• ✅ Mermaid diagram support script

DO NOT create custom HTML structure - copy the template EXACTLY and only replace the content-specific parts.

#### How to Use the Template:

1. Copy the entire file from code-reviewer-agent/index.html
2. Only replace these specific content areas:

• SEO meta tags (title, description, keywords, Open Graph)
• Article title and subtitle in <h1> and <p class="article-subtitle">
• Tags in <div class="article-tags">
• Main content inside <div class="article-content-full"> (everything between the opening and closing div)
• Cover image src and alt text

1. Keep EVERYTHING else unchanged:

• Header structure and navigation
• Copy Markdown button
• Footer with ASCII art
• All three scripts at the end (CodeCopy, Markdow