# Beautiful Article Pages

Turns source material into a single-file HTML article that works offline and can be shared.

- Repository: https://github.com/ConardLi/garden-skills (13467 stars)
- Category: Documents
- License: MIT
- Last updated: 2026-10-25
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add ConardLi/garden-skills --skill beautiful-article -g -a claude-code -y`
Codex: `npx skills add ConardLi/garden-skills --skill beautiful-article -g -a codex -y`
Cursor: `npx skills add ConardLi/garden-skills --skill beautiful-article -g -a cursor -y`
Gemini CLI: `npx skills add ConardLi/garden-skills --skill beautiful-article -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add ConardLi/garden-skills`

## Description

把用户提供的素材（网页 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。

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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 文件）
   ▼
Phase 6  Final Review      Editorial / Visual / Technical 三视角终审（写 review/final-review.md）
   ▼
Phase 7  Repair            最小切片修复，有修复才写 repair-log.md
   ▼
Phase 8  Delivery          ★Checkpoint 3 必须停。逐项确认交付决策 → 交付 article.html + 简短编辑说明
```

工作区结构（脚手架创建；这些文件是 Skill 的长期记忆，**不要只依赖聊天上下文记决策**）：

The rest: https://github.com/ConardLi/garden-skills/blob/HEAD/skills/beautiful-article/SKILL.md