beautiful-article
把用户提供的素材（网页 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。
npx skills add ConardLi/garden-skills --skill beautiful-article --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Beautiful Article ## 背景原则 AI 生成内容越复杂，输出媒介越重要。HTML 的价值在于同时提升信息密度、视觉清晰度、分享便利性和交互能力：表格、SVG、CSS、代码片段、可调控件、复制与导出按钮，可以让读者不只是“看完”，而是能比较、定位、调整、复查和继续使用。Beautiful Article 的目的，是把原本枯燥、线性、难以消化的文字材料，转换成视觉体验更漂亮、阅读节奏更清晰、也更容易审阅和分享的单文件网页文章。 ## 边界（先判断要不要进这个 Skill） - 最终主产物是 **single HTML 文章**，不是网页应用。 - 文章可以有 `Raw` 自由层（任意 HTML / CSS / JS / React：交互、布局排版、动效、小工具、 按需的 SVG / canvas 图解），但**必须服务阅读、解释、论证、节奏或审美**。 - **不**生成：后台、表单、拖拽工作台、完整 dashboard、产品原型、通用 Web App。 - 信息密度由用户确认；**默认保留 100% 信息**，生成长文式网页文章。 如果用户要的是应用而不是文章，停下来澄清，不要进入本 Skill。 --- ## 工作流总览 ``` Phase 0 Intake 判断是否进入本 Skill + 初步文章类型 ▼ Phase 1 Source → Markdown URL/PDF/DOCX/MD/文本 → source.md + extraction-notes.md └ 主 Agent 内联 5 条 checklist 自查（仅复杂/低置信源升级 SubAgent） ▼ Phase 2 Editorial Planning 一份 plan.md（Brief / Outline / Theme / Assets 四段） └ 主 Agent 内联自查（无 SubAgent、无 review 文件） ▼ Phase 3 Plan Checkpoint ★Checkpoint 1 必须停。逐项确认 5 件事：文章类型（含标配保留比例）/ 主题 / 版式 / 配图模式 / 封面 ▼ Phase 4 First Spread 首屏 + 第一节 + 一个代表性视觉块（脚手架在此创建） └ First Spread Reviewer SubAgent（写 review/first-spread-review.md） └ ★Checkpoint 2 必须停。逐项确认 2 件事：验收结论 / 开发模式 A/B ▼ Phase 5 Full Article Build 生成完整网页文章（默认单 Agent，超长可按 Section 隔离） └ Section Reviewer SubAgent（以消息返回 pass/fail，无须写 review 文件） ▼ P
- 背景原则
- 边界（先判断要不要进这个 Skill）
- 工作流总览
- 硬性质检协议（贯穿整个 Skill）
- 各阶段文件读取指南（渐进加载，别一次全读）
- Phase 0 —— Intake
- Phase 1 —— Source → Markdown
- Phase 2 —— Editorial Planning
- Phase 3 —— Plan Checkpoint（★硬节点 · Checkpoint 1，必须停）
- Phase 4 —— First Spread（文章版"第一章验收"）
- Checkpoint 2 · First Spread（★硬节点，必须停）
- Phase 5 —— Full Article Build
- Phase 6 —— Final Review（三视角终审）
- Phase 7 —— Repair（最小切片）
bash <path-to-beautiful-article>/scripts/scaffold.sh ./my-article --theme=<id> Checkpoint 1 用户选了"封面 · 关" bash <path-to-beautiful-article>/scripts/scaffold.sh ./my-article --theme=<id> --no-cover bash <path-to-beautiful-article>/scripts/scaffold.sh --list-themes bash <path-to-beautiful-article>/scripts/html-to-pdf.sh
What does the beautiful-article skill do?
把用户提供的素材（网页 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。
How do I install it?
Run `npx skills add ConardLi/garden-skills --skill beautiful-article --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From ConardLi/garden-skills, a repository with 10,047 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.