把用户提供的素材（网页 URL / PDF / DOCX / Markdown / 纯文本 / 截图 / 粘贴材料）编辑、设计成一篇美丽的、可离线打开和分享的**单文件 HTML 网页文章**。基于 reacticle 组件协议：不手写裸 HTML/CSS，而用语义组件 + 受主题约束的 Raw 自由层；按 source→规划→双确认→生成→终审→修复的小型 harness 流程推进，默认 100% 信息保留的长文。触发场景：把 URL/PDF/DOCX/文章做成网页文章 / 长文 / briefing / 解释文 / 视觉文章 / 教程 / 审阅复盘 / 方案分析，'render this as a beautiful web article / 把这篇做成网页文章 / 生成一篇可分享的 HTML 长文 / reacticle 文章'。只生成文章，不生成后台、表单、dashboard、产品原型或通用 Web App。
Beautiful Article turns arbitrary source material — a web URL, PDF, DOCX, Markdown, plain text, screenshots, or pasted content — into a polished, offline-openable, single-file HTML web article. It is built on the reacticle component protocol, so instead of hand-writing raw HTML/CSS it composes prose-first semantic React components (Article, Hero, Lead, Section, Quote, Image, Formula, CodeBlock) plus a theme-constrained Raw free layer, all wired to one theme system. The problem it addresses is that dense, linear text is hard to read, share, and review; the skill re-designs it into a visually clearer, better-paced, more shareable document while defaulting to 100% information retention for long-form output.
The workflow is a small harness with hard checkpoints: intake, source-to-Markdown extraction, editorial planning, a plan checkpoint, a first-spread build reviewed by a sub-agent, full article build with per-section review, a three-perspective final review (editorial, visual, technical), minimal-slice repair, and delivery. It ships eleven authoring themes (Tufte, Press, Shannon, Vignelli, Knuth, Freddie, and others), article-type references (longform, briefing, explainer, tutorial, review, essay, dialogue, visual-essay), and a scaffold template with Vite/TypeScript tooling. Strict quality rules govern when to spawn sub-agent reviewers versus inline self-checks, and forbid silently making decisions on the user's behalf at checkpoints. It explicitly does not build apps, dashboards, forms, or prototypes — only articles.
Target users are writers, editors, engineers, and content teams who want to convert reports, papers, or articles into beautiful shareable web pages, and anyone wanting a briefing, explainer, tutorial, or visual essay rendered as long-form HTML.
Web URLs, PDF, DOCX, Markdown, plain text, screenshots, and pasted material. These are first converted to source.md plus extraction notes before planning and generation.
It produces a single-file HTML article (article.html) that opens offline and is easy to share. It explicitly does not generate back-office apps, forms, drag-and-drop workbenches, full dashboards, product prototypes, or general web apps.
By default it retains 100% of the information and generates a long-form article, though information density is confirmed with the user. If you need an application rather than an article, the skill instructs the agent to stop and clarify.
Through a multi-phase harness with three hard checkpoints and node-specific review: inline self-checks for planning, dedicated sub-agent reviewers for the first spread and final review, and per-section pass/fail review during the full build. Fixes are applied before reporting back.
Beautiful Article is the editorial harness (methodology, checkpoints, theme selection, reviewers); reacticle is the underlying npm component protocol it calls at runtime for components, themes, the Raw layer, and export. The two are best paired but independent.
Quick Setup:
.claude/skills/Repository
conardli/garden-skills