AgentSkillsCN

creating-blog-posts

通过可视化反馈循环，持续创作并迭代博客文章。当您撰写文章、绘制图表、优化版面布局，或验证内容能否正确渲染时，可使用此功能。

SKILL.md
--- frontmatter
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

code
1. 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)

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

Update Draft (MCP)

code
mcp__klaboworld__kw_draft_update
  slug: "post-slug"
  body: "Updated content..."

CLI Alternative

bash
# 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

bash
cd /Users/klabo/Documents/klabo.world/app && pnpm contentlayer build

Visual Feedback Loop

Critical: Always verify changes visually using Playwright MCP.

1. Capture Before

code
browser_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

bash
pnpm contentlayer build
code
browser_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

EnhancementHow
Table of ContentsAdd ## Contents with anchor links
Quote attributionsAdd author links after blockquotes
Callout boxesUse amber callout pattern
Code highlightingEnsure language specified

Visual Upgrades

EnhancementHow
SVG diagramsCreate in /app/public/images/posts/<slug>/
Featured imageSet featuredImage in frontmatter
Side-by-sideUse grid comparison pattern
Full-width breaksUse -mx-4 md:-mx-8

Image Locations

code
/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

code
mcp__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

IssueFix
404 on draftpnpm contentlayer build
MDX errorCheck closing tags, escape <
Image 404Check path starts with /images/
Console errorsFix component issues
Hydration mismatchCheck dynamic content