# Blog Post Layout

Builds a long-form blog article page with masthead, figures, pull quotes and byline.

- Repository: https://github.com/nexu-io/open-design (105332 stars)
- Category: Design
- License: Apache-2.0
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add nexu-io/open-design --skill blog-post -g -a claude-code -y`
Codex: `npx skills add nexu-io/open-design --skill blog-post -g -a codex -y`
Cursor: `npx skills add nexu-io/open-design --skill blog-post -g -a cursor -y`
Gemini CLI: `npx skills add nexu-io/open-design --skill blog-post -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add nexu-io/open-design`

## Description

A long-form article / blog post, masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts. Use when the brief asks for "blog", "article", "post", "essay", or "case study".

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Blog Post Skill

Produce a single long-form article page, editorial layout, no chrome.

## Workflow

1. **Read the active DESIGN.md** (injected above). Lean into the typography
   tokens, long-form is 70% type, 20% image, 10% chrome.
2. **Pick the topic** from the brief and write a real article, at least 600
   words across 4, 6 H2 sections. No lorem ipsum.
3. **Sections**, in order:
   - **Masthead**, small wordmark + 4, 6 nav links, plain.
   - **Article header**, category eyebrow, headline (display token, large),
     deck (1, 2 sentence subhead), author name + role + date.
   - **Hero image**, a 16:9 placeholder block using a DS-tinted gradient or
     solid fill (no external images). Add a 1-line caption underneath.
   - **Body**, alternating prose paragraphs with at least:
     - 1 pull quote (large display type, accent rule on the inline-start edge so the layout flips correctly under `dir="rtl"`).
     - 1 figure (image placeholder + caption).
     - 1 list (numbered or bulleted).
     - 1 inline blockquote.
   - **Author footer**, author avatar (initials in a circle), bio paragraph.
   - **Related**, 3 cards linking to other posts. Each card: tiny image
     block, title, 1-line excerpt, date.
4. **Write** a single HTML document:
   - `<!doctype html>` through `</html>`, CSS inline.
   - Article body uses the DS body font, centered, max-width per DS layout
     rule (typically 680, 720px).
   - Drop caps (`first-letter`) only if the DS mood is editorial / serif, skip on tech-y DSes.
   - `data-od-id` on the headline, hero, body, pull quote, related grid.
5. **Self-check**:
   - Type hierarchy is unambiguous, H1 is clearly the headline; H2s are
     section dividers; pull quotes do not compete with H1.
   - Line length 60, 75 chars for body prose.
   - Accent appears at most twice (eyebrow + pull-quote rule, or one link).
   - The page reads like a magazine, not a marketing landing.

## Output contract

Emit between `<artifact>` tags:

The rest: https://github.com/nexu-io/open-design/blob/HEAD/design-templates/blog-post/SKILL.md