Skip to main content
odebase

blog

Starter

Appears as a one-click chip in the workspace.

Build a blog or content site with post list, post detail, and an editorial layout. Use when the user asks for a blog, newsletter site, writing portfolio, or content-driven site where reading typography is the priority. Prefer scaffold-next for static-friendly routing.

Scaffolds

next

Verified dependencies

lucide-react
clsx

Example prompts

Prompts this skill is written to handle. Copy one into the workspace to try it.

Build a personal blog with serif typography

Make a newsletter site with archive of past issues

Design an engineering blog for a small team

Build an editorial-style essay site

Instructions

The full instruction set the agent receives when this skill is active.

Blog

A blog is a typography exercise first, a CMS exercise second. Make reading feel deliberate.

Pages

  1. Home / post list — title, lede, post cards. Each card has title, date, 1-2 line excerpt, optional tag. No images required.
  2. Post detail — full post body. Hero with title + date + tag, then prose. Max content width ~70ch.
  3. (Optional) About — single static page.

Typography (the whole point)

  • Pick a serif for body text — Source Serif, Lora, Cardo, EB Garamond, Fraunces. Body should be at least text-lg with leading-relaxed.
  • Pick a contrasting display font for headlines — geometric sans, condensed sans, or a stylized serif. Pair with intention.
  • Drop caps, well-set blockquotes, and proper smart quotes elevate the design more than any animation will.
  • Use Tailwind's prose class from @tailwindcss/typography — install with npm install @tailwindcss/typography (allowed by scaffold guard).

Content Storage

For a static blog, store posts as MDX or Markdown files in content/posts/*.md. Parse with gray-matter for frontmatter and marked or remark for HTML. Install: npm install gray-matter marked.

Don't reach for a headless CMS unless the user explicitly asks. A folder of .md files works for everything under ~100 posts.

Avoid

  • Carousel post headers.
  • Author bio boxes with stock photos.
  • "Related posts" widgets that link to the same 3 posts everywhere.

Implementation Notes

  • scaffold-next: use app/blog/page.tsx for list, app/blog/[slug]/page.tsx for detail. Read posts at request time with fs.readFile — Next.js will static-render them.
  • For RSS, generate app/feed.xml/route.ts returning XML. One screen of code.

See also: [[frontend-design]], [[theme-kit]].

blog skill — Codebase