Blog Post Skill
Produce a single long-form article page — editorial layout, no chrome.
Workflow
- Read the active DESIGN.md (injected above). Lean into the typography
tokens — long-form is 70% type, 20% image, 10% chrome.
- Pick the topic from the brief and write a real article — at least 600
words across 4–6 H2 sections. No lorem ipsum.
- 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.
- 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.
- 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:
<artifact identifier="post-slug" type="text/html" title="Article Title">
<!doctype html>
<html>...</html>
</artifact>
One sentence before the artifact, nothing after.
1---2name: blog-post3description: 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".4---56# Blog Post Skill78Produce a single long-form article page — editorial layout, no chrome.910## Workflow11121. **Read the active DESIGN.md** (injected above). Lean into the typography13 tokens — long-form is 70% type, 20% image, 10% chrome.142. **Pick the topic** from the brief and write a real article — at least 60015 words across 4–6 H2 sections. No lorem ipsum.163. **Sections**, in order:17 - **Masthead** — small wordmark + 4–6 nav links, plain.18 - **Article header** — category eyebrow, headline (display token, large),19 deck (1–2 sentence subhead), author name + role + date.20 - **Hero image** — a 16:9 placeholder block using a DS-tinted gradient or21 solid fill (no external images). Add a 1-line caption underneath.22 - **Body** — alternating prose paragraphs with at least:23 - 1 pull quote (large display type, accent rule on the inline-start edge so the layout flips correctly under `dir="rtl"`).24 - 1 figure (image placeholder + caption).25 - 1 list (numbered or bulleted).26 - 1 inline blockquote.27 - **Author footer** — author avatar (initials in a circle), bio paragraph.28 - **Related** — 3 cards linking to other posts. Each card: tiny image29 block, title, 1-line excerpt, date.304. **Write** a single HTML document:31 - `<!doctype html>` through `</html>`, CSS inline.32 - Article body uses the DS body font, centered, max-width per DS layout33 rule (typically 680–720px).34 - Drop caps (`first-letter`) only if the DS mood is editorial / serif —35 skip on tech-y DSes.36 - `data-od-id` on the headline, hero, body, pull quote, related grid.375. **Self-check**:38 - Type hierarchy is unambiguous — H1 is clearly the headline; H2s are39 section dividers; pull quotes do not compete with H1.40 - Line length 60–75 chars for body prose.41 - Accent appears at most twice (eyebrow + pull-quote rule, or one link).42 - The page reads like a magazine, not a marketing landing.4344## Output contract4546Emit between `<artifact>` tags:4748```49<artifact identifier="post-slug" type="text/html" title="Article Title">50<!doctype html>51<html>...</html>52</artifact>53```5455One sentence before the artifact, nothing after.
hqz-2024