---

name: creating-blog-posts description: Creates and iterates on blog posts with visual feedback loop. Use when writing posts, creating diagrams, improving layouts, or verifying content renders correctly. invocation: user arguments: "[title]"

Creating Blog Posts

Iterative blog post creation with Playwright visual verification.

Contents

• Workflow
• Draft Management
• Visual Feedback Loop
• Enhancements
• Publishing
• References:
  • references/enhancement-ideas.md - Common improvements

Workflow

Copy1. Create draft (MCP or CLI)
2. Start dev server
3. Visual loop: snapshot → improve → rebuild → verify
4. Publish when ready

Draft Management

Create Draft (MCP)

Copymcp__klaboworld__kw_draft_create
  title: "Post Title"
  summary: "One-line description"
  body: "Markdown content..."
  tags: ["tag1", "tag2"]

Update Draft (MCP)

Copymcp__klaboworld__kw_draft_update
  slug: "post-slug"
  body: "Updated content..."

CLI Alternative

Copy# From monorepo root
node packages/content/dist/cli/bin.js draft create -t "Title" -s "Summary" -b ./content.md
node packages/content/dist/cli/bin.js draft update <slug> -b ./content.md

After Content Changes

Copycd /Users/klabo/Documents/klabo.world/app && pnpm contentlayer build

Visual Feedback Loop

Critical: Always verify changes visually using Playwright MCP.

1. Capture Before

Copybrowser_navigate → http://localhost:3000/drafts/<slug>
browser_snapshot → analyze current state
browser_take_screenshot → save before.png

2. Make Changes

• Edit MDX content
• Add images/diagrams
• Update styling

3. Rebuild & Verify

Copypnpm contentlayer build

Copybrowser_navigate → http://localhost:3000/drafts/<slug>
browser_snapshot → check for errors
browser_console_messages → verify no errors
browser_take_screenshot → save after.png

4. Iterate or Complete

• If issues: fix and repeat
• If good: continue to next enhancement

Enhancements

Quick Wins

Visual Upgrades

Image Locations

Copy/app/public/images/posts/<slug>/
├── featured.svg     # Hero image
├── diagram-1.svg    # Inline diagrams
└── screenshot.png   # Screenshots

Reference in MDX as: /images/posts/<slug>/filename.ext

Publishing

Pre-publish Checklist

• Title compelling
• Summary concise (<160 chars)
• Tags relevant (2-4)
• Featured image set
• No console errors
• Mobile looks good
• Links work
• Code blocks have language

Publish

Copymcp__klaboworld__kw_draft_publish
  slug: "post-slug"
  publishDate: "2026-01-17"  # Optional, defaults to today

Post-publish

• Verify at /posts/<slug>
• Share URL
• Monitor for issues

Troubleshooting