blog-post

nexu-io/open-design · design-templates/blog-post/SKILL.md

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".

Design & CreativeNo license★ 91422⑂ 10531commit d488b1a

Install skillView source on GitHub

What this skill does

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.

Installation

Copy a source-pinned command for your client. You run it yourself.

Destination: .claude/skills/blog-post · pinned to the source commit

git clone https://github.com/nexu-io/open-design.git
cd open-design
git checkout d488b1aa87917daee40d7c61efd7decbb28b5455
mkdir -p ".claude/skills/blog-post"
cp -r "design-templates/blog-post" ".claude/skills/blog-post"

Review the source before running. This copies files into your project; it is not a one-click install and does not verify runtime safety.

Security & Audits

Scanner static-checks@0.1.0 · commit d488b1aa8791. Static checks cannot prove runtime safety – review the source and the exact diff before installing. How checks work.

No static rules matched. This is not a safety guarantee.