SkillsAdd

smithery/joelklabo

creating-blog-posts

Creates and iterates on blog posts with visual feedback loop. Use when writing posts, creating diagrams, improving layouts, or verifying content renders correctly.

Installation

$ npx skills add smithery/joelklabo --skill creating-blog-posts
View on skills.sh ↗ Website ↗

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

creating-secrets-using-best-practices Similar name
aws/agent-toolkit-for-aws

Creates and manages secrets in AWS Secrets Manager following security best practices. Always us…

5K installs
creating-data-lake-table Similar name
aws/agent-toolkit-for-aws

Create managed Iceberg tables using Amazon S3 Tables (s3tables API namespace) with automatic co…

4.9K installs
creating-api-gateway-stage Similar name
aws/agent-toolkit-for-aws

Creates an API Gateway stage with CloudWatch logging, X-Ray tracing, throttling, WAF integratio…

4.7K installs
creating-production-vpc-multi-az Similar name
aws/agent-toolkit-for-aws

Creates a production-ready VPC with public and private subnets across multiple Availability Zon…

4.6K installs
creating-amazon-aurora-db-cluster-with-instances Similar name
aws/agent-toolkit-for-aws

Creates a complete Amazon Aurora database cluster with instances, handling cluster creation, in…

4.4K installs
creating-ec2-image-builder-pipeline Similar name
aws/agent-toolkit-for-aws

Creates a complete EC2 Image Builder pipeline that builds a custom AMI with pre-installed softw…

4K installs

Also in this package

Other skills from smithery/joelklabo.

npx skills add smithery/joelklabo
oracle 0 markdowntown-workbench 0

Browse all from smithery/joelklabo

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 3,698 B
  • docs SUMMARY.md 190 B

History

  1. First recorded snapshot · 0 installs

SKILL.md

Creating Blog Posts

Iterative blog post creation with Playwright visual verification.

Contents

  • [Workflow](#workflow)
  • [Draft Management](#draft-management)
  • [Visual Feedback Loop](#visual-feedback-loop)
  • [Enhancements](#enhancements)
  • [Publishing](#publishing)
  • References:

- [references/enhancement-ideas.md](references/enhancement-ideas.md) - Common improvements

Workflow

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)

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

Update Draft (MCP)

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

CLI Alternative

# 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

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

Visual Feedback Loop

Critical: Always verify changes visually using Playwright MCP.

1. Capture Before

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

pnpm contentlayer build
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

Enhancement How
Table of Contents Add ## Contents with anchor links
Quote attributions Add author links after blockquotes
Callout boxes Use amber callout pattern
Code highlighting Ensure language specified

Visual Upgrades

Enhancement How
SVG diagrams Create in /app/public/images/posts/<slug>/
Featured image Set featuredImage in frontmatter
Side-by-side Use grid comparison pattern
Full-width breaks Use -mx-4 md:-mx-8

Image Locations

/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

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

Issue Fix
404 on draft pnpm contentlayer build
MDX error Check closing tags, escape <
Image 404 Check path starts with /images/
Console errors Fix component issues
Hydration mismatch Check dynamic content