Skip to content
Get packs

Beautiful Article

Turns source material into a single, offline-openable HTML long-form article with a React build step.

Source Download skill
Repository
ConardLi/garden-skills
Stars
13,484
Licence
MIT
Files
15 files

What it does

When installed, the agent takes material you provide (a web page, PDF, Word file, Markdown, plain text or screenshots) and turns it into one self-contained HTML article that opens offline and can be shared as a file. It follows a staged workflow: it extracts the source to Markdown, drafts a plan, pauses for your confirmation at several checkpoints, builds the page with a React and Vite scaffold, reviews it, and delivers article.html. It is explicitly limited to articles, not web apps, dashboards or forms.

Great for

  • Turning a long report or research paper into a readable, shareable web article
  • Creating an explainer or briefing page from a URL or PDF to send to colleagues
  • Users who want a visually designed single HTML file rather than a plain document

Skip it if

  • Building dashboards, forms, admin panels or product prototypes, which the skill explicitly excludes
  • Quick plain-text summaries where a styled multi-stage HTML build is unnecessary overhead
  • Sensitive documents shared with third-party sites, since URL sources are fetched from the internet

Try asking

  • “Render this PDF as a beautiful web article I can share offline”
  • “把这篇网页文章做成一篇可分享的 HTML 长文”
  • “Turn these meeting notes into a briefing-style single-file article”
  • “Make an explainer article from this Markdown file with a clean visual layout”
Step-by-step guide: how to use Beautiful ArticleInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 15 original files, the MIT licence and an attribution note.

    beautiful-article.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

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

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip beautiful-article.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

  • Decide the target language up front; otherwise the article follows the source language
  • Answer each checkpoint question individually so you control article type, theme and layout
  • Review the first spread before the full build to catch tone or layout problems early

What's inside

  • assets/scaffold-template/index.html
  • assets/scaffold-template/package.json
  • assets/scaffold-template/tsconfig.json
  • assets/scaffold-template/tsconfig.node.json
  • assets/scaffold-template/vite.config.ts
  • manifest.json
  • README.md
  • README.zh-CN.md
  • references/article-types.md
  • references/article-types/briefing.md
  • references/article-types/dialogue.md
  • references/article-types/essay.md
  • references/article-types/explainer.md
  • references/article-types/full-report.md
  • SKILL.md

Redistributed unmodified from ConardLi/garden-skills under the MIT 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.