When to Use

Setting up a blog section for SEO
Writing blog articles for organic traffic
Creating comparison/review content
Building content marketing assets
Any project needing a file-based blog CMS

Prerequisites

Before writing articles, ensure:

Blog infrastructure is set up (see Blog Setup)
AI image generation capability is available
MDX support is configured in your bundler

Quick Start

# 1. Set up blog infrastructure (first time only)
# Copy assets from this skill to your project

# 2. Create article folder
mkdir -p src/content/blog/{slug}

# 3. Generate unique article image using AI
# See Image Generation section below

# 4. Write article using template
# Use assets/templates/article.mdx as base

Workflow Overview

┌─────────────────────────────────────────────────────────────────┐
│  1. SETUP (One-time)                                            │
│     └─> Blog infrastructure                                     │
├─────────────────────────────────────────────────────────────────┤
│  2. RESEARCH                                                    │
│     └─> Keywords → Competitors → Content gaps                   │
├─────────────────────────────────────────────────────────────────┤
│  3. OUTLINE                                                     │
│     └─> Structure → Tables → FAQs                               │
├─────────────────────────────────────────────────────────────────┤
│  4. IMAGE GENERATION                                            │
│     └─> AI-generate unique image for article content            │
├─────────────────────────────────────────────────────────────────┤
│  5. WRITE                                                       │
│     └─> Draft → Optimize → Review                               │
├─────────────────────────────────────────────────────────────────┤
│  6. PUBLISH                                                     │
│     └─> MDX file → Sitemap → Verify                             │
└─────────────────────────────────────────────────────────────────┘

Image Generation (CRITICAL)

Philosophy

Every article MUST have a unique, content-specific image. Do NOT use generic pattern backgrounds. Generate a custom image that:

Visually represents the article topic
Includes relevant text/title overlay
Has a consistent brand style (dark theme, orange accents)
Is sized 1200x630 pixels for OG sharing

Image Generation Process

For EACH article, use AI image generation with this template:

A sophisticated hero image for "[ARTICLE TITLE]" blog article.
[DESCRIBE VISUAL CONCEPT THAT MATCHES CONTENT]
Dark background (#0f172a or #1e293b) with orange (#f97316) accents.
Modern, minimalist, professional SaaS style like Linear or Vercel.
Include text overlay: "[TITLE]" and optional subtitle.
1200x630 pixels.

Example Prompts by Article Type

Comparison Article

A sophisticated hero image for "Sunsama Alternatives" comparison article.
Modern minimalist design with floating app icons and comparison cards.
Deep navy background (#0f172a) with orange (#f97316) gradient accents.
Show multiple tools being compared with visual hierarchy.
Include title text overlay. Professional SaaS marketing style.
1200x630 pixels.

Guide/Tutorial Article

A sophisticated hero image for "Time Blocking Guide" tutorial article.
Modern minimalist design showing calendar grid with colorful time blocks.
Dark slate background (#1e293b) with vibrant orange (#f97316) blocks.
Clean 3D floating elements suggesting productivity and organization.
Include title: "TIME BLOCKING GUIDE" and subtitle "Master Your Day".
1200x630 pixels.

VS/Comparison Article

A sophisticated hero image for "Time Blocking vs To-Do Lists" comparison.
Split design: left side shows organized calendar blocks, right side shows
scattered checklist items. Visual contrast between order and chaos.
Dark background with orange (#f97316) and blue (#3b82f6) accents.
Include title text. Editorial style. 1200x630 pixels.

Self-Hosted/Technical Article

A sophisticated hero image for "Self-Hosted Productivity Apps" article.
Server/cloud icon with data flowing to personal devices.
Emphasizes privacy and control with lock/shield symbols.
Dark navy background with green (#22c55e) security accents and orange highlights.
Include title and tagline about privacy/control. 1200x630 pixels.

Routine/Habit Article

A sophisticated hero image for "Daily Planning Routine" habit article.
Morning scene with coffee, notebook, and digital calendar interface.
Soft gradient from deep purple to warm orange (#f97316).
Floating UI elements showing checklist items.
Calm, productive, aspirational mood. Include title. 1200x630 pixels.

Image Naming Convention

Save images with descriptive names:

public/blog-{slug}.png

Examples:
- blog-sunsama-alternatives.png
- blog-time-blocking-guide.png
- blog-self-hosted.png
- blog-daily-planning-routine.png

Updating Frontmatter

After generating, update the article frontmatter:

export const frontmatter = {
  // ...other fields
  image: "/blog-{slug}.png"
};

Blog Infrastructure Setup

Required Files

Copy these from assets/ to your project:

your-project/
├── src/
│   ├── content/
│   │   └── blog/           # MDX articles go here
│   │       └── {slug}/
│   │           └── index.mdx
│   ├── types/
│   │   └── blog.ts         # Copy from assets/templates/
│   ├── lib/
│   │   └── blog.ts         # Copy from assets/templates/
│   ├── components/
│   │   └── blog/
│   │       ├── blog-card.tsx
│   │       └── blog-layout.tsx
│   └── routes/
│       ├── blog.tsx        # Blog listing
│       └── blog.$slug.tsx  # Individual post
└── public/
    └── blog-{slug}.png     # Generated images per article

Vite/React Setup

For Vite projects, use import.meta.glob to load MDX files:

// src/lib/blog.ts
const modules = import.meta.glob('../content/blog/*/index.mdx', { eager: true });

Next.js Setup

For Next.js projects, use @next/mdx or contentlayer:

// next.config.js
import mdx from '@next/mdx';
const withMDX = mdx({ extension: /\.mdx?$/ });
export default withMDX({ pageExtensions: ['ts', 'tsx', 'mdx'] });

Keyword Research

Step 1: Primary Keyword Selection

Use web search to research your topic:

Search queries to run:
- "[topic] 2026"
- "best [topic]"
- "[topic] alternative"
- "[topic] vs [competitor]"

Step 2: Classify Search Intent

Intent	Indicators	Content Type	Priority
Transactional	"best", "alternative", "buy"	Comparison, review	HIGH
Informational	"how to", "what is", "guide"	Tutorial, explainer	MEDIUM
Navigational	Brand names, specific tools	Feature page	LOW

Subagent Prompt: Keyword Research

You are an SEO expert. Research keywords for [TOPIC].

Use web search to find:
1. Primary keyword with highest search intent
2. 5 secondary keywords (long-tail variations)
3. Top 5 competitor URLs for analysis
4. Content gaps competitors are missing

Return:
- Prioritized keyword list with intent classification
- Recommended content angle
- Estimated search volume (HIGH/MEDIUM/LOW)

Article Structure

Frontmatter Template

export const frontmatter = {
  title: "SEO Title Under 60 Characters with Primary Keyword",
  description: "Meta description 150-160 chars with keyword and compelling hook.",
  date: "2026-01-30",
  author: "Team Name",
  tags: ["primary-tag", "secondary-tag", "category"],
  readingTime: 10,
  image: "/blog-your-article-slug.png"  // UNIQUE image per article!
};

Article Outline Template

# [Primary Keyword in H1 Title]

## Introduction
- Hook with statistic or pain point
- What reader will learn
- Establish credibility (1-2 paragraphs)

## [Section 2: Definition/Background]
- What is [topic]?
- Why it matters (2-3 paragraphs)

## [Section 3: Core Content / How-To]
- Main value proposition
- Step-by-step if tutorial
- Numbered list for scanability

## [Section 4: Comparison Table]

| Feature | Option A | Option B | Option C |
|---------|----------|----------|----------|
| Price   | Free     | $10/mo   | $25/mo   |
| Feature | ✅       | ✅       | ❌       |

## [Section 5: Detailed Analysis]
- 3-4 paragraphs per option
- Pros and cons
- Best use cases

## Frequently Asked Questions

### What is [primary keyword]?
[2-3 sentence answer targeting featured snippet]

### Is [option A] better than [option B]?
[Honest comparison with recommendation]

## Conclusion
- Summary of key points
- Clear CTA with link to action

Writing Guidelines

SEO Best Practices

Element	Guideline
Title	Primary keyword, under 60 characters
Meta description	150-160 chars, keyword, compelling hook
H2 headers	Include secondary keywords naturally
Keyword density	1-2% for primary keyword
Internal links	2-3 links to relevant pages
External links	1-2 authoritative sources

Word Count Targets

Content Type	Minimum Words	Optimal
Comparison/Review	2,000	2,500
Complete Guide	2,500	3,500
How-To Tutorial	1,500	2,000
Thought Leadership	1,800	2,200

Complete Article Creation Workflow

Step 1: Research

Use keyword research agent to identify:
- Primary keyword
- Secondary keywords  
- Top 5 competitors
- Content gaps

Step 2: Generate Image

Use AI image generation with article-specific prompt.
Save to public/blog-{slug}.png

Step 3: Create Article Folder

mkdir -p src/content/blog/{slug}
touch src/content/blog/{slug}/index.mdx

Step 4: Write Content

Use article writer agent with:
- Keyword targets
- Word count requirement
- Comparison tables
- FAQ section

Step 5: Update Frontmatter

export const frontmatter = {
  title: "...",
  description: "...",
  date: "YYYY-MM-DD",
  author: "Team Name",
  tags: ["..."],
  readingTime: X,
  image: "/blog-{slug}.png"  // Your generated image
};

Step 6: Add to Sitemap

<url>
  <loc>https://yoursite.com/blog/{slug}</loc>
  <lastmod>{date}</lastmod>
  <changefreq>monthly</changefreq>
  <priority>0.8</priority>
</url>

Step 7: Verify

Image displays correctly on blog listing
Article renders properly
All links work
Sitemap is valid

Subagent Prompts

Image Generation Agent

Generate a unique blog hero image for: "[ARTICLE TITLE]"

Topic: [brief description]
Style: Dark background, orange accents, modern SaaS aesthetic
Include: Title text overlay, relevant visual elements
Size: 1200x630 pixels

Save as: blog-{slug}.png

Article Writer Agent

Write a [WORD_COUNT]+ word SEO article on [TOPIC].

Primary keyword: [KEYWORD]
Secondary keywords: [KEYWORD_LIST]

Include:
1. Frontmatter with all required fields
2. Introduction with hook/statistic
3. Comparison table with 4+ options
4. Detailed breakdown (3-4 paragraphs per option)
5. FAQ section with 5+ questions using h3 headers
6. Conclusion with CTA linking to [PAGE]

Image has been generated at: /blog-{slug}.png
Include this in frontmatter.

FAQ Writer Agent

Write 7 FAQ questions for article about [TOPIC].

Target keywords:
- [keyword 1]
- [keyword 2]
- [keyword 3]

Use h3 headers (###) for each question.
Each answer should be 2-3 sentences.
Target featured snippet format (direct, concise).

Publishing Checklist

File References

See assets/ folder for:

File	Purpose
`templates/blog-types.ts`	TypeScript interfaces
`templates/blog-utils.ts`	Utility functions for loading MDX
`templates/article.mdx`	Article template
`components/blog-card.tsx`	Card component for listing
`components/blog-layout.tsx`	Layout for individual posts
`scripts/setup-blog.sh`	Quick setup script

Updates

v1.1 (2026-01-31): Updated to require unique AI-generated images per article
v1.0 (2026-01-30): Initial skill with complete workflow

seo-article-writing