Claude Skill MartBrowse skillsWhat is a Skill?
 
← Back to list

Magazine Article Layout

A template skill that turns your draft into a polished Substack/Medium-style long-form HTML page.

Content & WritingBeginner★ 8,191⑂ 803AI score 5/10Last updated: Jul 28, 2026

What it does

A set of layout rules that guide Claude to render long-form content as a magazine-quality HTML page:

  • Hero header: oversized title (text-5xl/6xl), optional subtitle, author / read time / date metadata
  • Single-column body, ~700px max width, centered, text-lg leading-relaxed
  • Serif H2/H3 headings for contrast against the body copy
  • Blockquotes with a thick left accent rule and italics
  • Rounded dark code blocks with a language label
  • Ornamental centered section dividers and a closing "share this" card

Who it's for

  • Bloggers, newsletter writers, and technical essayists
  • Anyone converting Markdown drafts into presentable web pages
  • Teams that want consistent typography without hand-tuning CSS each time

Examples

  1. "Render this Markdown post as article-magazine HTML" → a single self-contained HTML file with hero header.
  2. Publish an internal engineering post with dark-mode-ready styling and embed it in your wiki.
  3. Format a newsletter draft as a magazine spread for screenshots or PDF distribution.

· · · Install guide · · ·

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the next/src/lib/templates/skills/article-magazine folder from the GitHub repo nexu-io/html-anything into my ~/.claude/skills/article-magazine/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/nexu-io/html-anything.git && mkdir -p ~/.claude/skills/article-magazine && cp html-anything/next/src/lib/templates/skills/article-magazine/SKILL.md ~/.claude/skills/article-magazine/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open your terminal.
  2. Run git clone https://github.com/nexu-io/html-anything.git.
  3. Create the skill folder: mkdir -p ~/.claude/skills/article-magazine.
  4. Copy the file: cp html-anything/next/src/lib/templates/skills/article-magazine/SKILL.md ~/.claude/skills/article-magazine/.
  5. Restart Claude Code and test with: "Lay out this article in magazine style as HTML."
View source on GitHub ↗License: Apache-2.0