How to use the Beautiful Article agent skill

What the Beautiful Article skill makes the agent do

The skill is for turning existing material into a readable, visually designed web article. The agent first extracts your source into Markdown, then drafts a plan, then builds the page using a React and Vite scaffold, reviews the result, and delivers a file named article.html.

By default the skill keeps 100% of the information from the source and produces a long-form article. It builds on the reacticle component protocol, so the agent uses semantic components and a theme-constrained Raw layer rather than hand-writing bare HTML and CSS.

• Input: web page URL, PDF, DOCX, Markdown, plain text, screenshots or pasted material
• Output: one single-file HTML article (article.html) that opens offline and can be shared as a file
• Article types include briefing, explainer, tutorial, review and analysis-style pages
• Explicitly not for dashboards, forms, admin panels, product prototypes or general web apps

Install the skill: download the ZIP and unzip it

Download the ZIP for this skill from the page you are reading. Then put the unzipped skill folder in one of the locations the agent reads from. You can install it for yourself across projects or for a single project.

Alternatively, if you use the Claude apps, you can upload the skill through the settings instead of placing files on disk.

• Personal install: unzip into ~/.claude/skills/
• Project install: unzip into the .claude/skills/ folder inside your project
• Claude apps: go to Settings, then Capabilities, then Skills, and upload the skill

Trigger the skill with a natural request

You do not need a special command. The skill is meant to be triggered when you ask for an article built from material you supply. Give the agent the source and say what kind of page you want. The skill's own trigger phrases include requests such as rendering a URL, PDF or DOCX as a web article, or asking for a shareable HTML long-form piece.

Phrasing that works well names the source, the output and the purpose. If you have no material yet, the agent will ask for a source or outline first rather than inventing content.

• "Render this as a beautiful web article: [URL]"
• "把这篇 PDF 做成网页文章，发给团队看"
• "Turn this report into a shareable HTML long-form article"
• "生成一篇可分享的 HTML 长文，素材是下面这段文字"

What happens during a run and where you confirm

The skill works in stages and stops for your input at three checkpoints. At the plan checkpoint you confirm the article type, theme, layout, image mode and cover. At the first-spread checkpoint you review the opening section and choose the development mode. At the delivery checkpoint you approve how the final file is delivered.

Each decision is listed separately so you can answer it on its own. The agent may recommend an option and give its reason, but it is not supposed to lock in choices for you without asking.

• Checkpoint 1: article type (including how much content to keep), theme, layout, image mode, cover
• Checkpoint 2: acceptance of the first spread and development mode A or B
• Checkpoint 3: delivery decisions, then article.html and a short editorial note

What you need before you start

The skill needs Node.js and npm, because the build uses Vite and React with the plugins listed in the scaffold's package.json. The reacticle component library is pulled from npm. For PDF and DOCX extraction the skill can use MarkItDown or bundled Python helper scripts.

The skill also runs scripts and uses the network. URL sources are fetched from the internet.

• Node.js and npm
• Vite, React, @vitejs/plugin-react and vite-plugin-singlefile (declared in package.json)
• reacticle component library from npm
• Optional: MarkItDown or the Python helper scripts for PDF and DOCX

Safety notes before using sensitive material

Because the skill runs scripts and fetches URL sources from the internet, do not give it confidential documents if you do not want their content sent to third-party sites. Use local files and pasted text for sensitive material, and check the result before sharing the article.

The skill is released under the MIT licence, as stated in the project's information. Read the licence and the included files if your organisation has review requirements for installed skills.

• URL sources are fetched over the internet
• Scripts run as part of the workflow
• Review article.html before sharing it outside your team

Tips for better articles

Give the agent the clearest possible source and say who the reader is. Answer the checkpoint questions with specific choices, since the plan sets the structure for everything after it. If the result is not right, send the specific fix at the checkpoint or review stage rather than asking for a full rewrite.

• Choose a long-form type when you want full retention; a shorter type when you want a briefing
• Use a PDF or Markdown source when you want accurate extraction of tables and structure
• Do not use the skill for app-like pages; it will not build forms or dashboards