Beautiful Article

Takes your raw materials (URLs, PDFs, Word docs, screenshots, text dumps) and turns them into a single-file HTML article you can share and read offline. It's built around a deliberate workflow: extract to markdown, plan the editorial structure, get your sign-off on article type and theme, build the first screen as proof of concept, then generate the full piece with tables, code blocks, SVGs, and interactive elements where they help. Default mode keeps 100% of the source information, so you get long-form web articles, not summaries. The whole thing runs on a component protocol called reacticle instead of hand-written HTML, with built-in review checkpoints and a repair phase before delivery. Use it when you need to turn dense material into something people will actually read and share.

skills.sh installs: 4.1K
GitHub stars: 14.8K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add conardli/garden-skills --skill beautiful-article --agent claude-code

Installs into .claude/skills of the current project.

Files

Beautiful Article

背景原则

AI 生成内容越复杂，输出媒介越重要。HTML 的价值在于同时提升信息密度、视觉清晰度、分享便利性和交互能力：表格、SVG、CSS、代码片段、可调控件、复制与导出按钮，可以让读者不只是“看完”，而是能比较、定位、调整、复查和继续使用。Beautiful Article 的目的，是把原本枯燥、线性、难以消化的文字材料，转换成视觉体验更漂亮、阅读节奏更清晰、也更容易审阅和分享的单文件网页文章。

边界（先判断要不要进这个 Skill）

最终主产物是 single HTML 文章，不是网页应用。
文章可以有 Raw 自由层（任意 HTML / CSS / JS / React：交互、布局排版、动效、小工具、按需的 SVG / canvas 图解），但必须服务阅读、解释、论证、节奏或审美。
不生成：后台、表单、拖拽工作台、完整 dashboard、产品原型、通用 Web App。
信息密度由用户确认；默认保留 100% 信息，生成长文式网页文章。

如果用户要的是应用而不是文章，停下来澄清，不要进入本 Skill。