Blog Post Skill

Produce a single long-form editorial article page.

Structure

1. Header — publication wordmark, minimal nav (3–4 links), search icon.
2. Hero — full-bleed cover image (CSS gradient placeholder), title in display font, byline (author · date · read time), topic tag.
3. Body — max-width 65ch, generous line-height (1.65–1.8).
   • Subheadings in display font.
   • Pull quotes: left border accent, larger type, lighter weight.
   • Inline code: mono, subtle background.
   • Code blocks: dark background, syntax-colored via CSS classes.
   • Images: full-bleed or inset with caption.
4. Footer — author bio card, related articles (3 cards), newsletter signup.

Rules

• Serif for body, sans for UI, mono for code.
• Generous whitespace between sections.
• data-df-id on title, sections, pull quotes, code blocks.
• Responsive: comfortable reading at 375px–1440px.

Output

Single index.html, inline CSS.