What does this skill do, and when should you use it?
Beautiful Article is the article-production skill in the Garden Skills collection. It accepts URLs, PDFs, DOCX files, Markdown, plain text, screenshots, and pasted material, then plans, edits, and designs the content as a self-contained HTML article. Its workflow covers source extraction, editorial planning, user checkpoints, first-spread development, full generation, final review, and repair. It is deliberately article-focused and does not build backends, forms, dashboards, product prototypes, or general web apps.
Reads user-provided URLs, PDFs, DOCX files, Markdown, plain text, screenshots, or pasted material; normalizes sources into Markdown and records extraction uncertainties; plans article type, structure, theme, layout, and asset strategy; generates a React/Vite/TypeScript article project using reacticle semantic components and a theme-constrained Raw layer; runs type checking and build workflows; produces a shareable single-file HTML article that can be opened offline; optionally produces a PDF when the user selects that delivery format; and applies staged quality checks at the planning, first-spread, section, final-review, and delivery stages.
- A researcher turns a PDF or web source into a detailed long-form article or formal report while retaining substantial source information.
- An editor converts DOCX files, Markdown, or interview notes into a shareable feature article, dialogue transcript, or post-mortem.
- A technical writer transforms complex source material into a tutorial or explainer with tables, code, formulas, and SVG-based visual explanations.
- A team turns raw notes into an offline briefing with a table of contents, cover, and consistent visual theme.
How do you install this skill?
- Before URL/PDF/DOCX extraction or npm installation, confirm that the material contains no unapproved sensitive data, network access is authorized, and dependency versions should be locked.
- reacticle is specified as latest, so generated results and build behavior may vary; pin the version and retain a rollback-capable lockfile.
- Showcases and offline-delivery claims were not executed or independently verified in this static review and should not be treated as tested results.
- Shell / CLI
- Network access
- Local filesystem
Node.jsnpmViteReactTypeScriptreacticle
Install the skill with the skills CLI: npx skills add ConardLi/garden-skills -s beautiful-article. Alternatively, clone the repository and copy skills/beautiful-article into .claude/skills/, .agents/skills/, or another directory scanned by a compatible Agent Skills client. The repository is licensed under MIT.
tmp="$(mktemp -d)"
git clone --depth 1 https://github.com/ConardLi/garden-skills.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/skills/beautiful-article" ~/.claude/skills/
rm -rf "$tmp"Generated from the source repository and skill path; it copies only this skill's folder. If the author's install steps above differ, follow those first. To scope it to one project, replace ~/.claude/skills with that project's .claude/skills.
How do you use this skill?
Once installed, send your agent any of these to trigger it:
- render this as a beautiful web article
- generate a shareable HTML long-form article.
Provide one or more URLs, PDFs, DOCX files, Markdown files, plain-text sources, screenshots, or pasted material, then use a trigger such as “render this as a beautiful web article” or “generate a shareable HTML long-form article.” The skill first determines whether the request is for an article or an application, then moves through planning, first-spread, and delivery confirmations. If no source material is provided, supply material or an outline first. Requests for applications, backends, forms, dashboards, or general web apps are outside its scope.
What are this skill's strengths and limitations?
- Accepts URLs, PDFs, DOCX files, Markdown, plain text, screenshots, and pasted material.
- Provides multiple article types with associated information-retention ratios, including a default long-form mode.
- Produces a self-contained HTML file suitable for offline opening, sharing, and archiving.
- Includes themes, a table of contents, a cover, semantic components, a Raw visual layer, and staged review checkpoints.
- The repository documents compatibility with Claude Code, Claude.ai, Cursor, Codex CLI, Gemini CLI, and OpenCode.
- The workflow has several mandatory user-confirmation checkpoints, so it may feel lengthy for users seeking immediate output.
- It is limited to articles and is not intended for applications, dashboards, backends, or product prototypes.
- Full project generation depends on Node.js, npm, Vite, React, TypeScript, and reacticle.
- Source extraction, URL handling, PDF/DOCX processing, and optional PDF export may require appropriate local-file, network, or browser access.
- The supplied materials do not describe an independent test suite or coverage across input types.
How does this skill compare with similar options?
Side by side with related skills; every score comes from the same FSRS standard.
| Skill | FS score | Stars | Last updated | License |
|---|---|---|---|---|
| Beautiful Article: Single-File Editorial Web Pages this page | 51 · Use with care | ★ 13k | 16d ago | MIT |
| gzh-design — WeChat Official Account Typesetting Skill | 58 · Recommended | ★ 4k | 18d ago | NOASSERTION |
| Translate Book | 55 · Use with care | ★ 2.1k | 15d ago | MIT |
| Claude Blog Brain | 53 · Use with care | ★ 2.4k | 13d ago | MIT |
| Resume Tailoring Skill | 51 · Use with care | ★ 779 | 8mo ago | MIT |
How did FollowSkills review this skill?
The evidence shows clear article boundaries, three itemized confirmation checkpoints, a ban on silently choosing for the user, theme-token constraints for Raw content, offline single-file delivery, and opt-in PDF export. These provide meaningful control over permissions and external effects. Deductions apply because the workflow runs shell commands, npm, a browser, and optional extraction tools; installs an unpinned latest reacticle dependency; and does not sufficiently disclose URL/PDF/DOCX data flows, sensitive-data handling, rollback, or dependency supply-chain risks.
The documentation provides phased procedures, workspace conventions, typecheck/build commands, repair rules, and a main-agent fallback when subagents are unavailable, making the happy path reasonably clear. Deductions apply because static review cannot reproduce the key paths; reacticle is pinned to latest, optional external tools may be unavailable, and diagnostics for malformed inputs, network failures, extraction errors, and build failures are incomplete.
Trigger scenarios, input types, output format, article-versus-application boundaries, article types, and retention ratios are clearly described, with bilingual documentation and target-language handling. Deductions apply because runtime capability requirements, reachability of npm and URL services, actual screenshot/PDF/DOCX support limits, and mainland-China environment fit are not sufficiently documented; core operation may depend on npm and remote URL access.
The repository documents information architecture, progressive reading guidance, installation commands, scripts, theme registration, FAQs, MIT licensing, manifest versioning, and release structure. Deductions apply because the selected skill does not clearly identify a maintainer, changelog, or maintenance responsibility; latest dependency resolution weakens stability, and troubleshooting/version-locking guidance is incomplete.
The stated goal is to edit varied source material into a shareable, offline-capable single-file HTML article, and the workflow, component protocol, themes, and review gates align with that goal. Deductions apply because the supplied files contain no independently verifiable built artifact or third-party execution evidence; showcases are primarily author-provided claims and external examples; and usability still depends on the agent correctly implementing React/Reacticle code.
The supplied SKILL.md, README files, manifest, scaffold template, package configuration, TypeScript configuration, release workflow, and claimed showcases provide some auditable material. Deductions apply because there is no committed key-path test suite or CI build evidence, and the showcases and external links cannot be independently reproduced within this static review.
Open a dimension to read why it scored that way
Evidence confidence：Low — Mostly static review, author material or a limited demo; useful for discovery, not high-risk decisions.
See the full review method →