Agent skill · writing content · conardli
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。
Why this skill is useful
Adds a structured workflow for converting various document formats into a visually appealing single-file HTML article, which includes domain-specific processes and checks not commonly known.
What it needs
About 9k tokens when loaded. Last updated 2026-07-12. 10,116 stars on the source repository.
What this skill does
Beautiful Article 背景原则 AI 生成内容越复杂，输出媒介越重要。HTML 的价值在于同时提升信息密度、视觉清晰度、分享便利性和交互能力：表格、SVG、CSS、代码片段、可调控件、复制与导出按钮，可以让读者不只是“看完”，而是能比较、定位、调整、复查和继续使用。Beautiful Article 的目的，是把原本枯燥、线性、难以消化的文字材料，转换成视觉体验更漂亮、阅读节奏更清晰、也更容易审阅和分享的单文件网页文章。 边界（先判断要不要进这个 Skill） 最终主产物是 single HTML 文章，不是网页应用。 文章可以有 Raw 自由层（任意 HTML / CSS / JS / React：交互、布局排版、动效、小工具、 按需的 SVG / canvas 图解），但必须服务阅读、解释、论证、节奏或审美。 不生成：后台、表单、拖拽工作台、完整 dashboard、产品原型、通用 Web App。 信息密度由用户确认；默认保留 100% 信息，生成长文式网页文章。 如果用户要的是应用而不是文章，停下来澄清，不要进入本 Skill。 --- 工作流总览 工作区结构（脚手架创建；这些文件是 Skill 的长期记忆，不要只依赖聊天上下文记决策）： --- 硬性质检协议（贯穿整个 Skill） 质检方式按节点区分 —— 不是所有质检都要开 SubAgent，也不是所有质检都要写文件。 误开 SubAgent / 误写文件是首要性能问题，按下表严格执行： 节点 质检方式 产物 为什么 --- --- --- --- Phase 1 Source（默认） 主 Agent 内联 5 条 checklist 无文件 主 Agent 反正要通读 source.md Phase 1 Source（仅复杂/低置信源） Source Reviewer SubAgent（对照 original. diff） review/source-review.md 静默丢失只能 diff 抓到 Phase 2 Plan / Checkpoint 1 前 主 Agent 内联自查（禁止开 SubAgent） 无文件 plan 是文字决策且 200-400 行，上下文是热的，SubAgent 冷启反而更慢 Phase 4 First Spread / Checkpoint 2 前 First Spread Reviewer SubAgent review/first-spread-review.md 首屏定调，多一道独立眼睛更稳 Phase 5 每个 Section Section Reviewer SubAgent 以消息返回 pass/fail + 修复点（不写文件） 一篇可能 5-15 节，N 份 review 文件无人再读 Phase 6 终审 / Checkpoint 3 前 Editorial + Visual + Technical Reviewer SubAgent review/final-review.md 交付物的一部分，留档有价值 铁律： 1. Plan Checkpoint（Phase 2 → Checkpoint 1）严禁开 SubAgent 做质检。主 Agent 写完 plan.md 后就地对照 5 条清单（见 references/review-checklist.md 的 Plan 自查段）核查、按结论 改完 plan/plan.md，不要写任何 review 文件，然后进入 Checkpoint 1。 2. First Spread / Final 必须用 SubAgent（这两个节点 SubAgent 价值 > 开销）；只有探测不到 SubAgent 环境才由主 Agent 兜底，并在文件首注明"无 SubAgent 环境，主 Agent 兜底"。 3. Section Reviewer 用 SubAgent，但返回值是消息（pass / fail + 修复点）；fail 项主 Agent 收到后直接修，不要让 SubAgent 写 review/section-NN-review.md 文件。 4. 拿到任何质检结论 —— 先按 fail 项把产出改完，再汇报"做完了 + 自检结论 + 改了什么"。 直接拿原始结论汇报但不修复 = 违规。 5. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills conardli/beautiful-article