Building AI-Powered Blog Workflows with Claude Code Slash Commands
This guide documents the implementation of custom Claude Code slash commands for automating blog content creation, review, and illustration. These commands form a complete content workflow system that handles quality assurance, image generation, and style enforcement.
What Are Slash Commands?
Claude Code slash commands are markdown files containing structured instructions for specific workflows. They function as reusable AI procedures that can be invoked with simple commands like /review-post or /generate-image.
Commands are stored in .claude/commands/ and consist of:
- Step-by-step workflow instructions
- Error handling procedures
- Input/output specifications
- Tool usage directives
System Architecture
This blog workflow consists of four slash commands that form a complete content pipeline—from research to publication:
1. /research-post - Automated Research and Outline Generation
Purpose: Research a topic, gather authoritative sources, and generate a structured outline.
Status: Planned (conceptual implementation)
Proposed Workflow:
# Research Blog Post
## Step 1: Parse Topic and Parameters
Extract the topic from `$ARGUMENTS`
Parse optional flags: --depth (shallow|medium|deep), --sources (number)
## Step 2: Multi-Source Research
1. Web Search: Query recent articles, papers, discussions (last 12 months)
2. Internal Search: Find related posts in existing blog via semantic search
3. Code Search: If technical topic, search relevant repositories/documentation
## Step 3: Source Evaluation
For each source, evaluate:
- Authority: Domain reputation, author credentials
- Recency: Publication date relevance
- Relevance: Semantic similarity to topic
- Uniqueness: Novel information vs. redundant content
Filter to top N sources based on evaluation scores
## Step 4: Extract Key Insights
For each validated source:
- Extract main argument/thesis
- Identify supporting evidence (data, examples, quotes)
- Note contradictions or debates in the field
- Capture relevant code examples or technical details
## Step 5: Generate Structured Outline
Create outline with:
- Title suggestions (3 options)
- Opening hook ideas (statistic, question, or anecdote)
- Main sections with H2/H3 hierarchy
- Key points to cover in each section
- Suggested examples or case studies
- Conclusion framework
- Internal/external link suggestions
## Step 6: Citation Management
Create bibliography with:
- Source URL, title, author, date
- Key quote or insight from each source
- Suggested placement in outline
Expected Output:
═══════════════════════════════════════════════════
Research Complete: "Graph-Based Knowledge in LLMs"
═══════════════════════════════════════════════════
Sources Analyzed: 47
Sources Selected: 12 authoritative
Research Depth: Deep
Estimated Read Time: 15-20 minutes
TITLE OPTIONS:
1. "Beyond Sequential Text: Graph-Structured Knowledge in Language Models"
2. "From Sequences to Structures: How Graphs Transform LLM Reasoning"
3. "The Graph Paradigm: Architectural Evolution in Language Models"
OPENING HOOK IDEAS:
- Statistic: "Transformer models process 1M token pairs for a 1K sequence—O(n²) complexity makes long documents prohibitively expensive"
- Question: "What if language models could leverage the structure of knowledge, not just its sequence?"
- Anecdote: Recent research shows LinkBERT outperforms BERT by 4-5% on HotpotQA by learning cross-document relationships
OUTLINE:
## Introduction: Sequential Text Bottleneck
- Quadratic complexity of self-attention (cite: Vaswani 2017)
- Fixed context window limitations
- Semantic gap between sequence and meaning
## Part I: Graph Representation Learning
- LLM-GRL symbiosis (cite: Wang 2024)
- DeepWalk and node2vec foundations
- Spectrum of structure (latent → explicit)
...
CITATIONS:
[1] Vaswani et al. (2017) "Attention Is All You Need"
https://arxiv.org/abs/1706.03762
Key insight: Self-attention enables parallel processing but scales O(n²)
Placement: Introduction, technical background
...
Integration with Workflow:
# Research and generate outline
/research-post "Graph-structured knowledge in LLMs" --depth deep --sources 15
# Review outline, adjust as needed
# Then proceed to writing
/write-post graph-structured-knowledge-llms
Key Features:
- Multi-source aggregation: Combines web search, internal blog search, and code repositories
- Authority scoring: Ranks sources by domain reputation and author credentials
- Contradiction detection: Identifies debates or conflicting viewpoints
- Citation tracking: Maintains full bibliography with suggested placements
- Outline generation: Creates hierarchical structure following style guide rules
Technical Implementation Approach:
// Pseudo-code for research workflow
async function researchPost(topic: string, options: ResearchOptions) {
// Step 1: Web search via search API
const webResults = await searchWeb(topic, {
dateRange: 'recent',
resultCount: options.sources
});
// Step 2: Internal blog search
const internalPosts = await semanticSearch(topic, {
collection: 'blog-posts',
threshold: 0.7
});
// Step 3: Code/documentation search if technical
const codeResults = await searchCode(topic, {
repositories: getRelevantRepos(topic)
});
// Step 4: Evaluate and rank sources
const rankedSources = await evaluateSources([
...webResults,
...internalPosts,
...codeResults
]);
// Step 5: Extract insights using LLM
const insights = await Promise.all(
rankedSources.map(source => extractInsights(source, topic))
);
// Step 6: Generate outline
const outline = await generateOutline(insights, {
styleGuide: loadStyleGuide(),
targetLength: estimateLength(options.depth)
});
return {
outline,
sources: rankedSources,
citations: buildBibliography(rankedSources)
};
}
2. /write-post - Draft Generation from Outline
Purpose: Generate a complete blog post draft from a research outline, following style guide rules.
Status: Planned (conceptual implementation)
Proposed Workflow:
# Write Blog Post
## Step 1: Load Research Artifacts
Read the research outline from `/research-post` output or user-provided outline
Load `.claude/blog-style-guide.md` for writing rules
Check for existing draft at `posts/$ARGUMENTS.md`
## Step 2: Validate Outline Structure
Verify outline has:
- Title (or title options)
- Opening hook framework
- H2/H3 section hierarchy (no skipped levels)
- Key points for each section
- Citations/sources
- Conclusion framework
If invalid, request corrections
## Step 3: Generate Section-by-Section
For each outline section:
1. Expand key points into full paragraphs (4-6 sentences max)
2. Add examples, analogies, or case studies
3. Insert transition sentences between paragraphs
4. Apply style guide rules:
- Use active voice
- Vary sentence length (10-25 words)
- Include "you/your" for reader focus
- Add formatting (bold, italic, lists, code blocks)
5. Integrate citations naturally
6. Add code examples where specified
## Step 4: Opening and Conclusion
Generate opening:
- Start with hook (statistic, question, or anecdote)
- Provide context (2-3 sentences)
- Preview main points
Generate conclusion:
- Summarize key takeaways (2-3 sentences)
- Reinforce main insight
- Include clear CTA (call to action)
## Step 5: Metadata and Frontmatter
Generate:
- Title: Select or refine from outline options
- Excerpt: 120-160 characters, compelling summary
- Tags: 3-5 relevant tags based on content
- Date: Current date
- ReadTime: Estimate based on word count
## Step 6: SEO Optimization
Ensure:
- Primary keyword in title, first paragraph, conclusion
- Internal links to 2-3 related posts
- External links to 2-3 authoritative sources
- Proper heading hierarchy (H1 → H2 → H3)
- Alt text placeholders for images
## Step 7: Save Draft
Write draft to `posts/$ARGUMENTS.md`
Show summary statistics:
- Word count
- Estimated read time
- Number of sections
- Citation count
- SEO score (0-100)
Expected Output:
═══════════════════════════════════════════════════
Draft Generated: graph-structured-knowledge-llms
═══════════════════════════════════════════════════
✓ Draft saved to: posts/graph-structured-knowledge-llms.md
STATISTICS:
- Word count: 3,247 words
- Estimated read time: 13 minutes
- Sections: 5 main sections, 12 subsections
- Code examples: 6
- Citations: 15 sources
- Internal links: 3
- External links: 8
SEO SCORE: 87/100
✓ Keyword placement optimized
✓ Heading hierarchy valid
✓ Internal linking present
✓ Meta description optimized
⚠ Consider adding 1-2 more internal links
NEXT STEPS:
1. Review draft for accuracy and tone
2. Run: /review-post graph-structured-knowledge-llms
3. Generate image: /generate-image graph-structured-knowledge-llms
Usage:
# Generate from research outline
/write-post graph-structured-knowledge-llms
# Or provide custom outline file
/write-post my-topic --outline custom-outline.md
Key Features:
- Style guide compliance: Applies all rules from
.claude/blog-style-guide.mdduring generation - Section-by-section generation: Processes outline incrementally for better coherence
- Automatic SEO: Optimizes keyword placement, linking, and structure
- Citation integration: Weaves sources naturally into narrative
- Metadata generation: Creates complete frontmatter automatically
Technical Implementation Approach:
// Pseudo-code for writing workflow
async function writePost(slug: string, outline: Outline) {
const styleGuide = loadStyleGuide();
const sections = [];
// Generate opening
const opening = await generateOpening(outline.hook, outline.intro);
sections.push(opening);
// Generate each main section
for (const section of outline.sections) {
const content = await generateSection(section, {
styleGuide,
previousSection: sections[sections.length - 1],
citations: outline.citations
});
sections.push(content);
}
// Generate conclusion
const conclusion = await generateConclusion(outline.conclusion, {
mainPoints: extractMainPoints(sections),
cta: suggestCTA(outline.topic)
});
sections.push(conclusion);
// Generate metadata
const metadata = await generateMetadata({
title: outline.title,
content: sections.join('\n\n'),
topic: outline.topic
});
// SEO optimization pass
const optimized = await optimizeSEO({
content: sections.join('\n\n'),
metadata,
internalPosts: await findRelatedPosts(outline.topic)
});
// Assemble and save
const draft = assembleDraft(metadata, optimized);
await saveDraft(`posts/${slug}.md`, draft);
return {
path: `posts/${slug}.md`,
stats: calculateStats(draft),
seoScore: evaluateSEO(optimized)
};
}
3. /review-post - Automated Quality Review
Purpose: Interactive content analysis against a style guide with live editing.
Status: Implemented
Implementation:
# Review Blog Post
## Step 1: Load Files
Read these files:
1. `posts/$ARGUMENTS.md` - the blog post to review
2. `.claude/blog-style-guide.md` - the quality standards
## Step 2: Analyze Against Quality Criteria
Evaluate the blog post against these categories:
### Clarity & Readability
- Paragraph Length: Flag paragraphs exceeding 6 sentences
- Sentence Length: Flag sequences of 3+ consecutive sentences over 25 words
- Passive Voice: Identify passive constructions
- Jargon: Flag unexplained technical terms
### Engagement & Narrative
- Opening Hook: First 2-3 sentences must contain statistic, question, or anecdote
- Reader Focus: Count "you/your" usage (should be 5+ occurrences)
- Transitions: Verify transition words connect ideas
### Structure & SEO
- Heading Hierarchy: Verify H1→H2→H3 progression
- Keyword Presence: Primary keyword in title, intro, and conclusion
- Internal Links: Should have 1+ internal links
Usage:
/review-post blog-post-slug
Output Format:
═══════════════════════════════════════════════════
Change 1 of 5 | Category: Engagement & Narrative
═══════════════════════════════════════════════════
Rationale: Opening lacks a strong hook
BEFORE:
This post discusses AI workflows.
AFTER:
AI workflows can reduce content creation time by 60%.
Options:
[A] Approve - Apply this change and continue
[R] Reject - Skip this change
Each approved change is applied immediately using the Edit tool before presenting the next suggestion.
4. /generate-image - AI Image Generation
Purpose: Generate hero images using Google Vertex AI Imagen and automatically update post frontmatter.
Status: Implemented
Implementation:
The command workflow:
- Reads the blog post at
posts/$ARGUMENTS.md - Analyzes title, excerpt, tags, and opening content
- Crafts an image generation prompt following style guidelines
- Requests user approval (image generation costs ~$0.04)
- Calls the generation script:
npm run generate-images "prompt" - Parses output to extract image path
- Updates frontmatter with
image:andimageAlt:fields
Image Generation Script: (scripts/generate-image.ts)
import { VertexAI } from '@google-cloud/vertexai';
import sharp from 'sharp';
async function generateImage(prompt: string): Promise<string> {
const vertexAI = new VertexAI({
project: process.env.GOOGLE_CLOUD_PROJECT,
location: process.env.GEMINI_LOCATION || 'us-central1',
});
const model = vertexAI.getGenerativeModel({
model: 'imagen-3.0-generate-001'
});
// Generate with retry logic
const result = await model.generateContent({
contents: [{ role: 'user', parts: [{ text: prompt }] }]
});
const imageData = result.response.candidates[0].content.parts[0].inlineData.data;
const pngBuffer = Buffer.from(imageData, 'base64');
// Convert to WebP and resize
const webpBuffer = await sharp(pngBuffer)
.resize(1200, 630, { fit: 'cover' })
.webp({ quality: 85 })
.toBuffer();
// Save with unique filename
const hash = crypto.createHash('md5').update(prompt).digest('hex').substring(0, 8);
const filename = `generated-${Date.now()}-${hash}.webp`;
await fs.promises.writeFile(`public/images/${filename}`, webpBuffer);
return `/images/${filename}`;
}
Style Guidelines:
- Professional blog header aesthetic
- Modern, abstract, geometric design
- Blue-teal color palette
- No text overlay, no human figures
- 16:9 aspect ratio (1200x630px)
Usage:
/generate-image blog-post-slug
Complete Content Pipeline
The four slash commands form an end-to-end workflow:
# Step 1: Research topic and generate outline
/research-post "Graph-structured knowledge in language models" --depth deep
# Output: Structured outline with citations and key points
# Step 2: Generate complete draft from outline
/write-post graph-structured-knowledge-llms
# Output: Full blog post draft with frontmatter and SEO optimization
# Step 3: Interactive quality review
/review-post graph-structured-knowledge-llms
# Output: Proposed improvements, apply changes interactively
# Step 4: Generate hero image
/generate-image graph-structured-knowledge-llms
# Output: AI-generated image, frontmatter updated automatically
# Step 5: Commit and publish
git add posts/graph-structured-knowledge-llms.md
git commit -m "Add new post on graph-structured knowledge"
git push
Pipeline Benefits:
- Reduces time: Research to publication in 30-60 minutes vs. 4-8 hours
- Maintains quality: Each step enforces style guide rules
- Enables iteration: Quick to regenerate sections or try different angles
- Tracks provenance: Citations and sources maintained throughout
- Scales expertise: Can research unfamiliar topics with AI assistance
Command Interdependencies:
/research-post → outline.md
↓
/write-post ← reads outline.md → draft.md
↓
/review-post ← reads draft.md → refined.md
↓
/generate-image ← reads refined.md → image + updated frontmatter
Blog Style Guide - Version-Controlled Quality Standards
Location: .claude/blog-style-guide.md
Structure:
# Blog Style Guide
## Clarity & Readability
### Maximum Paragraph Length
**Rule**: Paragraphs should not exceed 6 sentences
**Severity**: warning
**Rationale**: Web readers skim content. Shorter paragraphs improve scanability.
### Sentence Length Variation
**Rule**: Avoid more than 2 consecutive sentences exceeding 25 words
**Severity**: suggestion
**Rationale**: Mix short (10-15 words) and medium (15-20 words) sentences.
## Engagement & Narrative
### Opening Hook
**Rule**: First 2-3 sentences must contain statistic, question, or anecdote
**Severity**: error
**Rationale**: Strong hooks reduce bounce rate.
### Reader-Focused Writing
**Rule**: Use "you/your" at least 5 times per post
**Severity**: suggestion
**Rationale**: Direct address creates engagement.
## Structure & SEO
### Heading Hierarchy
**Rule**: Use one H1, H2 for sections, H3 for subsections. Never skip levels.
**Severity**: error
**Rationale**: Proper hierarchy improves accessibility and SEO.
### Keyword Optimization
**Rule**: Primary keyword must appear in title, first paragraph, and conclusion
**Severity**: warning
**Rationale**: Signals relevance without keyword stuffing.
The /review-post command parses these rules and evaluates content programmatically. Updating the guide updates all future reviews.
Technical Stack
Blog Platform:
- Next.js 14 (App Router, static site generation)
- Markdown with frontmatter
- Tailwind CSS
AI Infrastructure:
- Claude Code (Anthropic CLI)
- Custom commands in
.claude/commands/ - Style guide in
.claude/blog-style-guide.md
Image Generation:
- Google Cloud Vertex AI (Imagen 3.0)
- TypeScript generation script
- Sharp library for optimization
Design Principles:
- Markdown-based: Commands, guides, and content use markdown for consistency
- Interactive approval: All changes require explicit user approval
- Immediate application: Approved edits applied instantly via Edit tool
- Stateless execution: Each command runs independently
- Version controlled: All configuration stored in git
Implementation Details
Creating a Slash Command
- Create file in
.claude/commands/command-name.md - Define workflow with numbered steps
- Specify error handling
- Document tool usage (Read, Edit, Bash, etc.)
- Include usage examples
Example: Simple command structure
# Command Name
Brief description of what this command does.
## Step 1: Load Data
Read the file at `path/$ARGUMENTS.ext`
If file doesn't exist, show error and list alternatives.
## Step 2: Process Data
Apply transformation using [specific tool]
Show results in this format: [specify]
## Step 3: Update Files
Use Edit tool to update original file
Confirm changes applied successfully
## Error Cases
- File not found: List available files
- Invalid format: Report error with line number
---
**Usage**: /command-name <argument>
**Example**: /command-name blog-post-slug
Integrating External Scripts
Commands can invoke npm scripts:
## Step 4: Generate Image
Run the generation script:
`npm run generate-images "your prompt here"`
The script outputs: `SUCCESS: /images/filename.webp`
Parse this output to extract the image path.
package.json:
{
"scripts": {
"generate-images": "npx tsx scripts/generate-image.ts"
}
}
Style Guide Format
Rules use a consistent structure:
### Rule Name
**Rule**: Clear statement of the rule
**Severity**: error | warning | suggestion
**Rationale**: Why this rule matters
**Examples**: (optional) Good/bad examples
Severity levels:
error: Must fixwarning: Strongly recommendedsuggestion: Optional improvement
Workflow Example
Complete content creation workflow using all four commands:
# 1. Research topic and generate outline
/research-post "Dynamic tool allocation in AI agents" --depth medium --sources 10
# Review and adjust outline as needed
# Output saved to research-output.md or displayed inline
# 2. Generate full draft from research
/write-post dynamic-tool-allocation-ai-agents
# Output: posts/dynamic-tool-allocation-ai-agents.md created
# 3. Quality review with interactive improvements
/review-post dynamic-tool-allocation-ai-agents
# Approve/reject suggested changes interactively:
[A] Approve changes one by one
[R] Reject unwanted suggestions
[E] Request explanation for any suggestion
# 4. Generate hero image
/generate-image dynamic-tool-allocation-ai-agents
# Confirm image prompt, image generated and frontmatter updated
# 5. Optional: Final review pass
/review-post dynamic-tool-allocation-ai-agents
# 6. Commit and publish
git add posts/dynamic-tool-allocation-ai-agents.md
git commit -m "Add post on dynamic tool allocation"
git push
Alternative Workflows:
# Quick workflow: Manual research and writing
# Write post manually, then use automation for polish
vim posts/my-post.md # Write manually
/review-post my-post # Quality check
/generate-image my-post # Generate visual
# Partial automation: Use outline, write manually
/research-post "Topic" # Get outline and sources
# Write post based on outline
/review-post my-post
/generate-image my-post
Benefits
Consistency: Same standards applied to every post automatically.
Speed: Instant feedback enables faster iteration (minutes vs. hours).
Maintainability: Update style guide once, all future reviews inherit changes.
Transparency: Every change requires explicit approval—no black box automation.
Scalability: Add new commands as markdown files without code changes.
Performance Metrics
Based on implementation experience and projected performance:
Implemented Commands
- Review time: 5-10 minutes per post (vs. 30+ minutes manual)
- Image generation: 30 seconds average (vs. 15-30 minutes manual)
- Style consistency: 100% (vs. ~80% manual)
- Cost per image: $0.04 (Vertex AI)
- Approval overhead: ~2 minutes per review
Projected Performance (Full Pipeline)
-
Research time: 10-15 minutes (vs. 60-120 minutes manual)
- Source gathering: 5 minutes
- Evaluation and ranking: 3 minutes
- Outline generation: 2-5 minutes
-
Writing time: 15-20 minutes (vs. 120-180 minutes manual)
- Draft generation: 10-15 minutes
- Review and adjustments: 5 minutes
-
Total pipeline: 30-45 minutes (vs. 4-8 hours manual)
- Research: 15 minutes
- Writing: 20 minutes
- Review: 8 minutes
- Image generation: 2 minutes
-
Quality metrics:
- Citation accuracy: >95% (with human verification)
- Style guide compliance: 100%
- SEO optimization: 85-95 average score
-
Cost per post:
- Research API calls: ~$0.10-0.20
- Writing (LLM tokens): ~$0.30-0.50
- Image generation: $0.04
- Total: ~$0.44-0.74 per post
Limitations and Trade-offs
Requires Initial Setup: Creating commands and style guides takes time upfront.
Interactive Approval Necessary: Fully automated changes degrade quality (95% accuracy still means errors).
API Dependencies: Image generation requires GCP access and quota.
Learning Curve: Understanding command format and tool usage requires practice.
Context Switching: Reviewing suggestions requires judgment and interrupts flow.
Future Enhancements
Commands in active development:
/research-postand/write-post: Currently in design phase (detailed above)/seo-optimize <slug>: Post-publication SEO analysis and improvement suggestions/link-posts: Automatic internal linking based on semantic similarity between posts/verify-citations: Citation verification for factual claims using source validation/analyze-readability: Readability scoring with comparative analytics over time/generate-social: Auto-generate social media posts (Twitter/LinkedIn) from blog content
Getting Started
Prerequisites
- Claude Code installed
- Project directory structure
- (Optional) Google Cloud account for image generation
Setup Steps
- Install Claude Code:
# Follow official documentation at docs.claude.com/claude-code
- Create commands directory:
mkdir -p .claude/commands
- Create first command:
# .claude/commands/review-post.md
# Copy implementation from this guide
- Create style guide:
# .claude/blog-style-guide.md
# Define your quality standards
- Test command:
/review-post test-post
- Iterate and refine: Adjust commands based on results.
Example Project Structure
project/
├── .claude/
│ ├── commands/
│ │ ├── research-post.md # (planned)
│ │ ├── write-post.md # (planned)
│ │ ├── review-post.md # (implemented)
│ │ └── generate-image.md # (implemented)
│ └── blog-style-guide.md
├── posts/
│ └── *.md
├── scripts/
│ └── generate-image.ts
├── public/
│ └── images/
└── package.json
Key Takeaways
- Four-command pipeline: Research → Write → Review → Illustrate forms complete content workflow
- Slash commands as code: Workflows encoded as version-controlled markdown files
- Interactive approval: Human-in-the-loop maintains quality while enabling automation
- Executable standards: Style guides become policy, not static documentation
- External integration: Scripts integrate via npm commands and output parsing
- Planned commands:
/research-postand/write-postextend automation to earlier stages - Performance gains: 30-45 minutes vs. 4-8 hours manual (projected full pipeline)
- Low cost: ~$0.50-0.75 per post including research, writing, and image generation
Reference Implementation
Command implementations in this blog's repository:
Implemented:
.claude/commands/review-post.md- Interactive quality review workflow.claude/commands/generate-image.md- AI image generation workflow.claude/blog-style-guide.md- Version-controlled quality standardsscripts/generate-image.ts- Vertex AI Imagen integration script
Planned (Design Phase):
.claude/commands/research-post.md- Research and outline generation (conceptual spec above).claude/commands/write-post.md- Draft generation from outline (conceptual spec above)