102.3K+Download
Skip to the usage guide
Beautiful Articleby ConardLi

Beautiful Article Skill.

Make a document worth reading without turning it into a dashboard.

  • Editorial Design
  • HTML
  • Longform
Download OpenDesignView Usage Guide
Source Review · Beautiful ArticleSKILL.md
Task Editorial Design Produces • A self-contained article.html with inline styling and scripts • Extracted source Markdown and notes on extraction quality • An editorial plan and reviewed first spread for the article Before You Start The documented build uses Node/npm, Vite, React, TypeScript, and Reacticle. Document extraction and optional PDF output may require additional tools; generated imagery needs a separately available backend.
Editorial summary · source reviewed 2026-10-07 · not a generated example

01 What It Does

Beautiful Article

An editorial pipeline that separates extraction, article planning, first-spread approval, complete composition, and offline delivery.

Source-based workflowNot an execution benchmark

The Working Approach

Beautiful Article is ConardLi's source-to-article workflow. It starts with material you already have: an article URL, Markdown, a document, a PDF, or screenshots. The intended result is a long-form reading experience, not a short marketing summary. Extracted source material stays available so facts, examples, and technical details can be checked throughout the build.

The distinctive decision is to review a first spread before producing the whole article. A cover, opening section, and representative visual block establish how the content will read. Reacticle supplies semantic article components, while a constrained custom layer can add diagrams or other reading aids. Delivery is a self-contained HTML file; PDF is a separate, requested output rather than the default.

Expected Deliverables

  • A self-contained article.html with inline styling and scripts
  • Extracted source Markdown and notes on extraction quality
  • An editorial plan and reviewed first spread for the article
See the Example Brief

From Brief to Review

  1. 01
    Recover The Source

    Extract the supplied material and keep an account of missing or uncertain content. Difficult PDFs and screenshots need particular attention before their text becomes the basis of an article.

  2. 02
    Plan The Reading Experience

    Before building, obtain separate user decisions on article type and its retention level, theme, layout width, image mode and cover. Full information retention is the default; record any agreed reduction in the plan.

  3. 03
    Review The First Spread

    Build the approved cover, opening section and a representative visual block. Obtain an independent reviewer-agent check, then pause for the user to approve the sample and choose sequential or parallel development.

  4. 04
    Complete And Package

    Review each section and the finished article, repair failures, then obtain the final delivery decision before exporting offline HTML. First-spread and final review use independent agents when available; any main-agent fallback must be disclosed. Export PDF only when requested.

02 When to Use It

When to Use It

The documented build uses Node/npm, Vite, React, TypeScript, and Reacticle. Document extraction and optional PDF output may require additional tools; generated imagery needs a separately available backend.

A Good Fit

  • Technical ExplainersUseful when code, formulas, tables, or comparisons should remain readable alongside prose instead of being compressed into slide-like cards.
  • Portable Reading CopiesFits a report or essay that should open as one HTML file without depending on a running development server.

Limits to Check

  • Not An Application BuilderThe source explicitly separates this workflow from dashboards, forms, general web applications, and product prototypes.
  • Not Automatic IllustrationExternal images and generated imagery are deliberate choices. A no-image article may still use content-driven CSS or SVG explanations without silently requesting an image service.

Bring These Inputs

  • Source MaterialProvide the actual document or accessible article, plus any sections, quotations, and figures that must survive the conversion.
  • Reader And PurposeState whether this is a tutorial, briefing, review, or essay, and how much prior knowledge the intended reader has.
  • Visual PermissionsChoose supplied assets, placeholders, generated images, or no images; identify any brand constraints and whether PDF output is required.

03 Decisions That Matter

Decisions That Matter

  1. Content Before Decoration

    The source remains the factual reference while the article structure changes. That makes it easier to spot an attractive layout that has accidentally removed a necessary qualification.

  2. An Early Reading Sample

    A reviewed first spread tests actual prose and explanation blocks, not just colors. Changes to reading width or visual density can happen before every section is built.

04 Try a Focused Brief

Try a Focused Brief

The example brief below has not been tested. Check the skill’s setup before using it.

Review the Setup

Use the author's repository package with its scripts and references. The source describes project scaffolding, not a verified universal installer command.

Upstream Source File
https://github.com/ConardLi/garden-skills/blob/aaf9a82f5efd73e87cc0998edc398e75bfc35901/skills/beautiful-article/SKILL.md

The documented build uses Node/npm, Vite, React, TypeScript, and Reacticle. Document extraction and optional PDF output may require additional tools; generated imagery needs a separately available backend.

Start With One Deliverable

Adapt the scope, source material and constraints in this brief before running the skill.

Example Brief
Use Beautiful Article to turn the attached migration guide into an offline HTML explainer for frontend engineers. Keep the code examples and compatibility caveats, preserve the source language, and use no generated images. Plan the reading structure and show a first spread with the introduction and one comparison block before completing the article. Deliver the HTML and extraction notes; do not create a PDF yet.

Inspect the Result

Check the actual output against these observable criteria.

  • The article can be opened offline with its intended styles and interactions present.
  • Required examples and caveats can be traced back to the supplied source.
  • The first spread and later sections share a readable hierarchy without replacing long-form prose with repetitive cards.

OpenDesign provides a local design workspace for coding agents. This listing does not mean the skill is bundled or that its external tools, credentials and software dependencies are included.

Download OpenDesignRead the Quickstart

05 Source and License

Source and License

This page describes the pinned source revision linked below. Upstream behavior and requirements can change.

Source Owner
ConardLi
Repository
ConardLi/garden-skills
Skill File
skills/beautiful-article/SKILL.md
License
MIT
Reviewed Snapshot
2026-10-07 · aaf9a82f5efd
Editorial Source Summary
An editorial pipeline that separates extraction, article planning, first-spread approval, complete composition, and offline delivery.

Original summary by OpenDesign, based on the linked source. Repository stars are a dated popularity signal, not skill usage or a quality score.

06 Questions Before You Start

Questions Before You Start

Does it summarize the source by default?

No. The workflow prioritizes retaining the source's information. Article type and density can change the treatment, but abridgment should be an explicit editorial decision.

Can it translate the article?

Translation can be requested, but the source language is otherwise preserved. Keep the original material separate so a translated passage remains checkable.

Is PDF the main deliverable?

No. The main deliverable is self-contained HTML. PDF requires a separate print pass, including cover and pagination treatment.

OpenDesign

Make Room for the Next Design Iteration.

Keep your brief, source material and design work together in a local workspace. Check the skill’s own setup before adding it to your workflow.

Download OpenDesignBrowse Design Skills
Upstream Source File
https://github.com/ConardLi/garden-skills/blob/aaf9a82f5efd73e87cc0998edc398e75bfc35901/skills/beautiful-article/SKILL.md