davila7

Create Blog Article for Claude Code Component

Development community intermediate

SOURCE https://github.com/davila7/claude-code-templates

Description

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

Installation

This entry records only its repository, not the path inside it, so there is no exact command to give. Open the source below and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

Repository README

This is the README for davila7/claude-code-templates, shared by 7 entries in this directory. It describes the repository, not this entry specifically.

allowed-tools: Read, Write, Edit, Bash(python3:), Bash(mkdir:), Bash(rm:*) argument-hint: 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:

Detect the new entry
Find the component path
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/b