What is the beautiful-article skill?
The beautiful-article skill is part of ConardLi's garden-skills collection. You hand your agent source material such as a URL, PDF or Markdown file, and it plans, builds and reviews a single offline HTML article using the reacticle component protocol. It makes articles only, never apps, forms or dashboards.
The beautiful-article skill sits in ConardLi's garden-skills repository. It takes material you already have, including web pages, PDFs, DOCX files, Markdown, plain text, screenshots and pasted notes, and turns it into one HTML article that opens offline and is easy to share.
It builds with the reacticle component protocol. Rather than hand-writing bare HTML and CSS, the agent uses semantic components plus a free-form Raw layer that stays inside the chosen theme. Long articles keep 100 percent of the source information by default.
How the workflow runs
- Intake decides whether the request is an article at all. A request for an app or dashboard stops here.
- Source files are converted to Markdown, and unclear extractions are written to a separate notes file.
- Planning produces one plan.md holding the brief, outline, theme and assets.
- A first spread, meaning the opening screen and first section, is built so you can judge the tone early.
- The full article is built one section file at a time, reviewed from editorial, visual and technical angles, then repaired in small slices.
- Delivery hands over article.html with a short editorial note.
What you decide along the way
At the first checkpoint the agent asks five separate questions and waits for each answer. It may recommend an option, but the skill forbids choosing silently on your behalf or bundling everything into one yes or no.
- Article type: ten options, each with a standard share of the source kept, from longform at about 100 percent to visual-essay at about 40 percent.
- Theme: tufte, press or another registered theme.
- Layout width: narrow, regular, wide or full, with regular as the default.
- Image mode: none, user-assets, placeholders or ai-generated.
- Cover: a 3:4 book-style cover above the contents list and body, on by default.
Who the beautiful-article skill is for
Best for
- Turning a long PDF, report or web page into something people will actually read and share.
- Tutorials, explainers, reviews, essays and briefings, each with its own retention target.
- Writers who want the agent to edit and restructure the material, not only reformat it.
- Articles in the source language, or translated first when you name a different target language.
Not for
- Apps, admin screens, forms, drag-and-drop tools, full dashboards or product prototypes. The skill stops and asks when that is what you want.
- Starting from nothing. With no source or outline, the agent asks for material instead of inventing content.
- A one-pass export. The flow pauses at three checkpoints and expects your answers.
- Reviewing front-end code. Related: web-design-guidelines.
Use it with UiChemy
The result is a self-contained HTML article, not a WordPress page. UiChemy covers the WordPress side: AI to WordPress imports an existing AI build, and Composer edits the result in Elementor or Gutenberg. Click Get Started on uichemy.com. Related: theme-factory.
How to install Beautiful Article Skill: Turn Sources into HTML Pages
git clone https://github.com/ConardLi/garden-skills.gitClone the repository
Run the clone command above. The skill sits at skills/beautiful-article inside the repository.
Copy the folder
Copy skills/beautiful-article into the place your agent reads skills from. Keep the references and assets subfolders, because SKILL.md points to them.
Have npm ready
The scaffold step creates a Vite, React and TypeScript project and installs the latest reacticle release from npm, so Node and npm need to work on your machine.
Ask for an article
Give the agent a source and a request such as render this as a beautiful web article, which is one of the trigger phrases in the skill description.
Check that it loaded
Hand the agent one short source. It should ask about article type, theme, layout width, image mode and cover before writing anything, then stop and wait for your answers.
Key features
- Source to MarkdownURLs, PDFs, DOCX files, Markdown, text and screenshots are normalized into source.md. Uncertain extractions go to extraction-notes.md, and complex sources get a separate reviewer that diffs against the original.
- Translate firstWhen your target language differs from the source, the agent writes an idiomatic translated source file and builds from it, keeping structure and the share of information unchanged.
- One plan filePlanning produces plan/plan.md with Brief, Outline, Theme and Assets sections. The agent checks it inline against a five-point list before asking you anything.
- Ten article typesLongform, full-report, tutorial, explainer, dialogue, review, essay, interactive-explainer, briefing and visual-essay each carry a standard share of source information retained.
- Themes and widthsChoose tufte, press or another registered theme, then a narrow, regular, wide or full layout. The agent recommends one and gives a reason.
- Cover and contentsA 3:4 book-style cover sits above the contents list and body, and the contents list is on by default. Briefing and dialogue pieces are suggested to skip the cover.
- First spread previewCover, opening screen, first section and one representative visual block are built first, previewed with npm run dev and reviewed before you approve the direction.
- One file per sectionEach section is its own component file, and Article.tsx only imports them in order. This is what makes the optional parallel build mode safe.
- Raw layer with theme tokensCustom HTML, CSS, JS or React, SVG and canvas diagrams are allowed only when they help reading or explanation, and they must use the theme's --ra-* tokens.
- Three-angle final reviewEditorial, visual and technical reviewers check the finished article, and fixes are applied in the smallest slice that works.
Frequently asked questions
What is the beautiful-article skill?
It is a skill in ConardLi's garden-skills repository that converts source material into a single HTML article. The agent normalizes the source, writes a plan, builds a preview, builds the full article section by section and reviews it. The result opens offline and can be shared as one file.
How do I install beautiful-article?
Clone ConardLi/garden-skills and copy the skills/beautiful-article folder into the directory your agent loads skills from. Keep its references and assets folders. Then ask the agent to render a source as a beautiful web article. The README also lists other install routes.
Which AI coding agents can use beautiful-article?
The repository describes its skills as made for Claude Code, Cursor, Codex and other AI coding agents. This skill uses subagents for its reviews. If none can be detected, the main agent does the review. It uses an AskQuestion tool for checkpoints when one exists, otherwise numbered questions.
What input can beautiful-article work from?
It accepts web page URLs, PDFs, DOCX files, Markdown, plain text, screenshots and pasted material. All of them are converted to Markdown first. With no material at all, the agent asks you for a source or an outline instead of writing content from nothing.
Can beautiful-article build an app or a dashboard?
No. The skill produces articles only. It rules out admin screens, forms, drag-and-drop tools, full dashboards, product prototypes and general web apps. Interactive pieces are allowed inside the article, but only when they serve reading, explanation or pacing. If you want an app, the agent stops and asks.
Does beautiful-article keep all of my source content?
By default, yes. Long articles aim to keep 100 percent of the information. Each article type carries its own standard share, such as about 80 percent for an explainer or about 50 percent for a briefing, and you can override it in one sentence. Related: frontend-design.
What does the agent ask before it starts building?
At the first checkpoint it asks five separate questions: article type, theme, layout width, image mode and cover. Later it asks you to approve the first spread and choose between a single-agent or a parallel build, and a final checkpoint confirms delivery.
What license does the beautiful-article skill use?
The garden-skills repository is MIT licensed, and GitHub reports the same license. The final review phase covers editorial, visual and technical views, and its technical reviewer touches accessibility. Related: fixing-accessibility.