Create Blog Article for Claude Code Component banner
davila7 davila7

Create Blog Article for Claude Code Component

Development community intermediate

Description

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

Installation

Terminal
claude install-skill https://github.com/davila7/claude-code-templates

README


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:

    undefined

Step 1: Identify Component Type and Read Component File

Based on the path structure, determine the component type:

    undefined

Read the component file:

    undefined

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

Extract from the component file:

    undefined

Step 2: Generate Component-Specific Blog ID and Names

From the component path, create:

    undefined

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:

    undefined

After image generation, update the entry with correct information.

Step 4: Create Blog Article HTML

Create directory:

mkdir -p docs/b