WAVE: Skill for Claude Code

Blog Writer

Write a new blog post for the Hackathon Starter Kit site using the rich content block system. Every post is defined as structured data in lib/blog.ts and rendered automatically by app/blog/[slug]/page.tsx.

Step 1: Define the Topic

Ask the user (or determine from context):

• What is the blog post about?
• Who is the target reader?
• What primary search keyword should this rank for?

If the user is unsure, suggest 3 topic ideas based on gaps in the existing blog coverage. Check lib/blog.ts for the BLOG_POSTS array to see what already exists.

Step 2: Plan the Post Structure

Before writing any content, create an outline:

1. Slug: URL-friendly, matches the target keyword (e.g., how-to-find-hackathon-teams)
2. Title: Keyword-rich, compelling, under 70 characters if possible
3. Description: 150-160 characters with the primary keyword in the first sentence
4. Keywords: 4-6 search terms this post targets
5. Sections: 5-8 sections, each with a heading and a mix of content block types
6. Reading Time: Estimate based on content length (e.g., "8 min read")

Present the outline to the user for approval before writing the full content.

Step 3: Write Using Content Blocks

Each section in BlogSection has a heading (string), paragraphs (string[], can be empty), and an optional blocks (ContentBlock[]) array. When blocks is present, the renderer uses it instead of paragraphs.

Available Block Types

Use the ContentBlock union type defined in lib/blog.ts. Here is every type with its fields and when to use it:

paragraph

Standard body text. Use for introductory context and transitions between visual blocks.

{ type: "paragraph", text: "Your paragraph text here." }

callout

Highlighted box with an icon. Four variants available.

{
  type: "callout",
  variant: "tip" | "warning" | "info" | "success",
  title: "Optional custom title",   // defaults to variant label if omitted
  text: "The callout body text."
}

• tip (yellow, lightbulb icon): Actionable advice, shortcuts, pro tips
• warning (red, alert icon): Common mistakes, things to avoid
• info (purple, info icon): Background context, definitions, notes
• success (green, checkmark icon): Key takeaways, proven results