Skip to content
Get packs

Magazine Article Layout

Formats long-form writing into a polished, Substack-style magazine page in HTML.

Source Download skill
Repository
nexu-io/html-anything
Stars
9,376
Licence
Apache-2.0
Files
3 files

What it does

This skill gives the agent a set of layout rules for turning a piece of writing into a clean, magazine-style web page. Once installed, when you ask for a long article, essay, or newsletter layout, the agent produces HTML with a large headline and subtitle, a centred single column of readable text, serif section headings, styled quotes and code blocks, and a closing call-to-action card. It is a formatting guide, not a writing tool: the text itself still comes from you or the agent's own drafting.

Great for

  • Bloggers or newsletter writers who want their posts to look like Substack or Medium pieces
  • People preparing long posts for blogs or WeChat Official Accounts
  • Anyone who wants an essay turned into a shareable HTML page instead of plain Markdown

Skip it if

  • Short social media posts or dashboards, since the template is built for long single-column articles
  • Users who need strict brand or print-ready layouts, because the skill only sets general style conventions

Try asking

  • “Turn this draft essay into a magazine-style HTML article with a large hero title and author byline.”
  • “Format my newsletter post with serif headings, styled quotes, and an end-of-article share card.”
  • “Make a long-form blog article layout from this Markdown file, centred at about 700px wide.”
Step-by-step guide: how to use Magazine Article LayoutInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 3 original files, the Apache-2.0 licence and an attribution note.

    article-magazine.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip article-magazine.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip article-magazine.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Provide the finished text and a title, subtitle, author and date so the hero section is fully populated.
  • Ask for the output as a single HTML file if you want to paste it straight into a blog or publishing tool.
  • Review the generated page in a browser, since the skill's style classes may need small tweaks for your platform.

What's inside

  • example.html
  • example.md
  • SKILL.md

Redistributed unmodified from nexu-io/html-anything under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.