Blog Post
FreeCreate structured long-form articles effortlessly.
Free · Opens the source repo
What Blog Post does
The Blog Post skill is designed to help users generate a complete long-form article page with an editorial layout, focusing on typography and structured content. It guides you through a systematic workflow that emphasizes the importance of type, images, and minimal chrome, ensuring that the final output is visually appealing and easy to read. This skill is particularly useful for developers and designers who need to produce content that meets specific editorial standards without getting bogged down in the details of HTML and CSS.
To start, users must read the active DESIGN.md file to understand the typography tokens, which play a crucial role in the layout. The skill requires you to choose a topic and write a substantive article, ensuring that it contains at least 600 words divided into 4–6 sections. Each section has a defined structure, including a masthead, article header, hero image placeholder, and a well-organized body that incorporates various elements like pull quotes, figures, and lists. This structured approach not only enhances readability but also aligns with best practices for long-form content.
The output is a single HTML document that adheres to specific guidelines, ensuring that the article is formatted correctly for web publishing. The skill emphasizes clarity in type hierarchy and line length, promoting a magazine-like reading experience. By following the outlined steps, users can produce professional-quality articles that are ready for publication, making this skill an essential tool for anyone involved in content creation, whether for blogs, case studies, or essays.
When to use it
Use this skill when you need to generate a well-structured long-form article or blog post based on a specific brief.
When not to use it
This skill may not be suitable for short-form content or when a highly customized layout is required beyond the provided structure.
What you can build with it
Creating a Blog Post
Use this skill to quickly generate a blog post based on a given topic, ensuring it meets editorial standards.
Writing Case Studies
Generate structured case studies that include all necessary components for a professional presentation.
Developing Essays
Utilize this skill to create well-organized essays that follow a clear format and are ready for submission.
How to install Blog Post
View source1. Install with the skills CLI
npx skills add nexu-io/open-design/blog-post --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by nexu-ioBlog 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.
- 1 pull quote (large display type, accent rule on the inline-start edge so the layout flips correctly under
- 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-idon 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.
Frequently asked questions about Blog Post
Similar skills
Content Creator
Streamline your content creation with SEO and brand voice tools.
Content Production
Transform topics into polished, publish-ready content.
Content Creator
Streamline your content creation with brand voice and SEO tools.
Content Strategy
Plan impactful content that drives traffic and engagement.
Post to Weibo
Effortlessly publish to Weibo with Markdown support.
Post to WeChat
Effortlessly publish content to WeChat Official Accounts.