AgentHubAgentHub

beautiful-article Skill Install & Guide

SkillGitHub 中文

io.github.ConardLi/garden-skills/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。

View on GitHub 中文 ↗Repository ↗

Copy the install config on this page first, then verify docs and permissions upstream.

Overview

把用户提供的素材（网页 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。 beautiful-article is a Agent Skill listed from GitHub CN. This page includes an overview, setup tutorial, install commands, and use cases for Trae, Tongyi Lingma, Cursor, Claude Code, and VS Code.

Use cases

Code review & GitHubCursor essentials

AgentHub Verified AvailabilityTested & Ready

Automated pipeline validated install commands, protocol & client compatibility

Verified At2026-10-30
Install Snippets TestedCLI & JSON config syntax verified
Protocol Handshake ReadyComplies with JSON-RPC 2.0 specifications
Origin Registry ActiveSourced from github-cn
Verified ClientsClaude Code、Claude Desktop、Cursor 等
Security Tier: A+ 级 · 零权限本地沙盒 (A+)·Scanned for high-risk vulnerabilities. Recommended to run with project-scoped permissions.

Send this prompt to your AI to install the Skill

Recommended
Target client (auto-optimizes prompt):
PROMPT >

Follow the install guide at https://myagenthub.cn/install/skill.md?lang=en to automatically detect the current IDE and install the skill "ConardLi/garden-skills@beautiful-article" without asking, and tell me how to verify it afterwards.

💡Paste into your AI coding assistant (Cursor, Trae, Claude Code) — the agent will handle download and configuration automatically.

Copy by platformAlternative

Choose your platform

Choose install method

Click to copy snippet
# 改 -a 切换客户端：trae | lingma | codebuddy | kimi-code-cli | qwen-code | cursor | claude-code | windsurf | cline | github-copilot | codex
npx skills add ConardLi/garden-skills@beautiful-article -a cursor -y

Setup tutorial

  1. Open the beautiful-article page and confirm the source is GitHub CN.
  2. Copy the install command for Trae, Lingma, Cursor, Claude Code, or universal CLI.
  3. Run it, or place SKILL.md under .trae/skills/, .lingma/skills/, or .cursor/skills/.
  4. Reload the client, then describe your task so the agent can match this skill.

Install commands

Install commands and setup steps are in the HTML so search engines and no-JS browsers can read them without running client JavaScript.

Universal — Skills CLI (recommended)

Skills CLI

# 改 -a 切换客户端：trae | lingma | codebuddy | kimi-code-cli | qwen-code | cursor | claude-code | windsurf | cline | github-copilot | codex
npx skills add ConardLi/garden-skills@beautiful-article -a cursor -y

AgentHub CLI (change --ai)

# 改 --ai 切换客户端：trae | lingma | workbuddy | kimi | qwen | cursor | claude-code | windsurf | cline | vscode | codex | openclaw
curl -fsSL "https://myagenthub.cn/cli/agenthub-skill.mjs" | node --input-type=module - init ConardLi/garden-skills@beautiful-article --ai cursor -y

Cursor

Skills CLI

npx skills add ConardLi/garden-skills@beautiful-article -a cursor -y

AgentHub CLI (change --ai)

curl -fsSL "https://myagenthub.cn/cli/agenthub-skill.mjs" | node --input-type=module - init ConardLi/garden-skills@beautiful-article --ai cursor -y

Project directory

mkdir -p .cursor/skills/beautiful-article
RAW="https://raw.githubusercontent.com/ConardLi/garden-skills/main/skills/beautiful-article"
curl -sL "$RAW/SKILL.md" -o .cursor/skills/beautiful-article/SKILL.md
# 如有 scripts/ references/ assets/ 请一并复制

User directory

mkdir -p ~/.cursor/skills/beautiful-article
RAW="https://raw.githubusercontent.com/ConardLi/garden-skills/main/skills/beautiful-article"
curl -sL "$RAW/SKILL.md" -o ~/.cursor/skills/beautiful-article/SKILL.md

Trae (ByteDance)

  1. Trae natively supports Skill specs: project-level in .trae/skills/<name>/, global in ~/.trae/skills/
  2. Copy and run the command in your project terminal to download SKILL.md
  3. Reload Trae window, then describe your task in AI chat to activate automatically

Skills CLI

npx skills add ConardLi/garden-skills@beautiful-article -a trae -y

AgentHub CLI (change --ai)

curl -fsSL "https://myagenthub.cn/cli/agenthub-skill.mjs" | node --input-type=module - init ConardLi/garden-skills@beautiful-article --ai trae -y

Project directory

mkdir -p .trae/skills/beautiful-article
RAW="https://raw.githubusercontent.com/ConardLi/garden-skills/main/skills/beautiful-article"
curl -sL "$RAW/SKILL.md" -o .trae/skills/beautiful-article/SKILL.md

User directory

mkdir -p ~/.trae/skills/beautiful-article
RAW="https://raw.githubusercontent.com/ConardLi/garden-skills/main/skills/beautiful-article"
curl -sL "$RAW/SKILL.md" -o ~/.trae/skills/beautiful-article/SKILL.md

Tongyi Lingma (Alibaba)

  1. Tongyi Lingma supports skills in project .lingma/skills/<name>/ or global ~/.lingma/skills/
  2. Run the command to install SKILL.md
  3. In Lingma Agent mode, prompt your task and the skill will be automatically loaded

Skills CLI

npx skills add ConardLi/garden-skills@beautiful-article -a lingma -y

AgentHub CLI (change --ai)

curl -fsSL "https://myagenthub.cn/cli/agenthub-skill.mjs" | node --input-type=module - init ConardLi/garden-skills@beautiful-article --ai lingma -y

Project directory

mkdir -p .lingma/skills/beautiful-article
RAW="https://raw.githubusercontent.com/ConardLi/garden-skills/main/skills/beautiful-article"
curl -sL "$RAW/SKILL.md" -o .lingma/skills/beautiful-article/SKILL.md

User directory

mkdir -p ~/.lingma/skills/beautiful-article
RAW="https://raw.githubusercontent.com/ConardLi/garden-skills/main/skills/beautiful-article"
curl -sL "$RAW/SKILL.md" -o ~/.lingma/skills/beautiful-article/SKILL.md

WorkBuddy / CodeBuddy (Tencent)

  1. WorkBuddy reads skills only from .workbuddy/skills/<name>/ (user-level ~/.workbuddy/skills/); .codebuddy/skills/ belongs to CodeBuddy
  2. The Skills CLI command installs with -a codebuddy and appends a copy step into .workbuddy/skills
  3. AgentHub CLI (--ai workbuddy) syncs it for you; reload the chat panel so the skill gets indexed

Skills CLI

npx skills add ConardLi/garden-skills@beautiful-article -a codebuddy -y
# WorkBuddy 读取 .workbuddy/skills，把上游写入 .codebuddy/skills 的结果同步一份
mkdir -p .workbuddy/skills && cp -R .codebuddy/skills/beautiful-article .workbuddy/skills/

AgentHub CLI (change --ai)

curl -fsSL "https://myagenthub.cn/cli/agenthub-skill.mjs" | node --input-type=module - init ConardLi/garden-skills@beautiful-article --ai workbuddy -y

Project directory

mkdir -p .workbuddy/skills/beautiful-article
RAW="https://raw.githubusercontent.com/ConardLi/garden-skills/main/skills/beautiful-article"
curl -sL "$RAW/SKILL.md" -o .workbuddy/skills/beautiful-article/SKILL.md

Claude Code

Project directory

mkdir -p .claude/skills/beautiful-article
RAW="https://raw.githubusercontent.com/ConardLi/garden-skills/main/skills/beautiful-article"
curl -sL "$RAW/SKILL.md" -o .claude/skills/beautiful-article/SKILL.md

User directory

mkdir -p ~/.claude/skills/beautiful-article
RAW="https://raw.githubusercontent.com/ConardLi/garden-skills/main/skills/beautiful-article"
curl -sL "$RAW/SKILL.md" -o ~/.claude/skills/beautiful-article/SKILL.md

Skills CLI

npx skills add ConardLi/garden-skills@beautiful-article -a claude-code -y

Kimi Code (Moonshot AI)

  1. Kimi Code supports standard Agent Skills: project-level in .agents/skills/<name>/, global in ~/.agents/skills/
  2. Run the command to install
  3. In Kimi Code CLI, describe your task to trigger the skill

Skills CLI

npx skills add ConardLi/garden-skills@beautiful-article -a kimi-code-cli -y

AgentHub CLI (change --ai)

curl -fsSL "https://myagenthub.cn/cli/agenthub-skill.mjs" | node --input-type=module - init ConardLi/garden-skills@beautiful-article --ai kimi -y

Project directory

mkdir -p .agents/skills/beautiful-article
RAW="https://raw.githubusercontent.com/ConardLi/garden-skills/main/skills/beautiful-article"
curl -sL "$RAW/SKILL.md" -o .agents/skills/beautiful-article/SKILL.md

User directory

mkdir -p ~/.agents/skills/beautiful-article
RAW="https://raw.githubusercontent.com/ConardLi/garden-skills/main/skills/beautiful-article"
curl -sL "$RAW/SKILL.md" -o ~/.agents/skills/beautiful-article/SKILL.md

Qwen Code (Alibaba)

  1. Qwen Code supports project .qwen/skills/<name>/ and global ~/.qwen/skills/
  2. Run the command to deploy SKILL.md
  3. Prompt the agent to trigger the skill

Skills CLI

npx skills add ConardLi/garden-skills@beautiful-article -a qwen-code -y

AgentHub CLI (change --ai)

curl -fsSL "https://myagenthub.cn/cli/agenthub-skill.mjs" | node --input-type=module - init ConardLi/garden-skills@beautiful-article --ai qwen -y

Project directory

mkdir -p .qwen/skills/beautiful-article
RAW="https://raw.githubusercontent.com/ConardLi/garden-skills/main/skills/beautiful-article"
curl -sL "$RAW/SKILL.md" -o .qwen/skills/beautiful-article/SKILL.md

User directory

mkdir -p ~/.qwen/skills/beautiful-article
RAW="https://raw.githubusercontent.com/ConardLi/garden-skills/main/skills/beautiful-article"
curl -sL "$RAW/SKILL.md" -o ~/.qwen/skills/beautiful-article/SKILL.md

Windsurf

  1. Windsurf supports project-level .windsurf/skills/<name>/ or global ~/.codeium/windsurf/skills/
  2. Run the install command and refresh Cascade
  3. Cascade will auto-activate the skill based on its description

Skills CLI

npx skills add ConardLi/garden-skills@beautiful-article -a windsurf -y

AgentHub CLI (change --ai)

curl -fsSL "https://myagenthub.cn/cli/agenthub-skill.mjs" | node --input-type=module - init ConardLi/garden-skills@beautiful-article --ai windsurf -y

Project directory

mkdir -p .windsurf/skills/beautiful-article
RAW="https://raw.githubusercontent.com/ConardLi/garden-skills/main/skills/beautiful-article"
curl -sL "$RAW/SKILL.md" -o .windsurf/skills/beautiful-article/SKILL.md

User directory

mkdir -p ~/.codeium/windsurf/skills/beautiful-article
RAW="https://raw.githubusercontent.com/ConardLi/garden-skills/main/skills/beautiful-article"
curl -sL "$RAW/SKILL.md" -o ~/.codeium/windsurf/skills/beautiful-article/SKILL.md

Cline

  1. Cline supports standard .agents/skills/<name>/ structure
  2. Run the command to install the skill
  3. Ask questions in the Cline panel to trigger the skill

Skills CLI

npx skills add ConardLi/garden-skills@beautiful-article -a cline -y

AgentHub CLI (change --ai)

curl -fsSL "https://myagenthub.cn/cli/agenthub-skill.mjs" | node --input-type=module - init ConardLi/garden-skills@beautiful-article --ai cline -y

Project directory

mkdir -p .agents/skills/beautiful-article
RAW="https://raw.githubusercontent.com/ConardLi/garden-skills/main/skills/beautiful-article"
curl -sL "$RAW/SKILL.md" -o .agents/skills/beautiful-article/SKILL.md

Cherry Studio

  1. Use this skill as an Assistant system prompt in Cherry Studio
  2. Copy the command to view SKILL.md text
  3. Paste the contents into Cherry Studio Assistant system prompt
# 打印 SKILL.md 指令内容并粘贴到 Cherry Studio 智能体系统提示词中
RAW="https://raw.githubusercontent.com/ConardLi/garden-skills/main/skills/beautiful-article"
curl -sL "$RAW/SKILL.md"

VS Code / GitHub Copilot

mkdir -p .github/skills/beautiful-article
RAW="https://raw.githubusercontent.com/ConardLi/garden-skills/main/skills/beautiful-article"
curl -sL "$RAW/SKILL.md" -o .github/skills/beautiful-article/SKILL.md

OpenAI Codex

Skills CLI

npx skills add ConardLi/garden-skills@beautiful-article -a codex -g -y

User directory

mkdir -p ~/.codex/skills/beautiful-article
RAW="https://raw.githubusercontent.com/ConardLi/garden-skills/main/skills/beautiful-article"
curl -sL "$RAW/SKILL.md" -o ~/.codex/skills/beautiful-article/SKILL.md

Project directory

mkdir -p .agents/skills/beautiful-article
RAW="https://raw.githubusercontent.com/ConardLi/garden-skills/main/skills/beautiful-article"
curl -sL "$RAW/SKILL.md" -o .agents/skills/beautiful-article/SKILL.md

Troubleshooting & Common ErrorsFAQ

Common connection errors and verified fixes for beautiful-article

Getting 'connection closed' or exit code 1 in Cursor / Claude Code for beautiful-article?

Usually caused by missing runtime paths or IDE environment inheritance. Fix steps: 1. Verify Node.js 18+ (npx) or Python 3.10+ (uvx) is installed; 2. Run 'which npx' or 'which uvx' in terminal, and replace 'command' with absolute path; 3. Reload or restart the client window after modifying config.

Fix Snippet
# Check binary path in terminal:
which npx
node -v
Getting 'spawn npx ENOENT' or 'command not found'?

The editor background process does not inherit your full terminal PATH. Solution: Globally install the package, or set the absolute binary path (e.g. C:\Program Files\nodejs\npx.cmd on Windows, or /usr/local/bin/npx on macOS).

Tool calls timing out or failing to download packages?

First-time package downloading might be slow or timeout due to network limits. Configure a reliable mirror or check outbound proxy settings.

Agent does not match or apply beautiful-article during conversations?

Verify SKILL.md is located at .cursor/skills/beautiful-article/SKILL.md (Cursor) or ~/.claude/skills/beautiful-article/SKILL.md (Claude Code). You can explicitly mention the skill name in your prompt to boost match confidence.

Still not connecting? Read the MCP troubleshooting guide →

Tool Mock Playground

Sandbox

beautiful-article Rule Injection & Agent Behavior Simulation · Preview tool schema & outputs without local runtime

Sandbox Ready
fn: agent_skill_runtimeInject system prompt guidelines & workflow constraints from beautiful-article
Request ArgumentsJSON Schema
{
  "skill": "beautiful-article",
  "rulePath": ".cursor/skills/beautiful-article/SKILL.md",
  "userGoal": "请使用 beautiful-article 的方法与标准帮我完成当前任务",
  "client": "Cursor / Claude Code"
}
💡Parameters generated dynamically by Agent runtime
Agent Tool Output

Click 'Run Mock' above

to preview the raw response returned to the LLM

Env: AgentHub Virtual SandboxJSON-RPC 2.0

Decision Guide: Why & When to Use

Assess suitability before installing to save trial-and-error time

Best Suited For
  • PR review
  • Changelog generation
  • Cross-repo issue search
When NOT to Use
  • Replacing human security audit
  • Unauthorized repo access
Recommended Workflow Pairing:View Scenario →

beautiful-article + Scenario Prompt → Complete Agent Automation

Skill hands-on: install to visible results

Follow the full lab (expected UI/output + contrast checks). After installing this item, verify with the tutorial prompts.

Open tutorial →

An Agent Skill is a folder with SKILL.md instructions. After install, the AI loads it automatically when your task matches its description.

How to use

After installing, describe your task in chat (or mention the skill name). The agent reads the skill description to decide when to activate it, then follows the instructions in SKILL.md. Check loaded skills via /skills in Claude Code or in your client settings.

Related resources

中文公文写作

v2.0.46

SkillClawHub7210.6k

io.clawhub.gongyu0918-debug/chinese-official-writing

用于中文公文、事务性材料和新闻稿件的起草、改写、压缩、润色、审校、文种核对、去口语化、降 AI 味及 Word 格式处理，适用于机关、企事业单位、学校和新闻机构。涵盖申请、请示、报告、通知、通告、意见、决定、决议、议案、公报、命令、函、复函、批复、说明、方案、纪要、公告、公示、通报、制度、规定、办法、细则、操作规程、工作要点、总结、调研、讲话、致辞、主持词、述职、可研、审查材料、技术需求、新闻消息、编者按、新闻评论，以及采购、整改、反馈和 AI 算力等场景。

source
View on ClawHub

Often paired with

Keep exploring AgentHub

Most people compare similar tools or check scenario guides before installing—start here.

Browse more like thisSearch similarPick by scenarioPrompt playbooksSkill hands-onReviews & comparisons

Listing badge: put AgentHub on your site

Copy either snippet into your project homepage, docs, or GitHub README. The badge is a hotlinked SVG — nothing to host — and it links back to this page so visitors can find the install steps.

PreviewListed on AgentHub: beautiful-article
HTML
<a href="https://myagenthub.cn/p/io.github.ConardLi/garden-skills/beautiful-article" title="Listed on AgentHub: beautiful-article" target="_blank" rel="noopener">
  <img src="https://myagenthub.cn/badge/io.github.ConardLi/garden-skills/beautiful-article?lang=en" alt="Listed on AgentHub: beautiful-article" height="20" style="border:0"/>
</a>
Markdown (GitHub README)
[![Listed on AgentHub: beautiful-article](https://myagenthub.cn/badge/io.github.ConardLi/garden-skills/beautiful-article?lang=en)](https://myagenthub.cn/p/io.github.ConardLi/garden-skills/beautiful-article)

Badges are generated on the fly from /badge/<package-id>, so name and listing changes propagate automatically. Keep the link target unchanged — it is what counts as the referral.

Unified Manifest

{
  "id": "io.github.ConardLi/garden-skills/beautiful-article",
  "type": "skill",
  "version": "0.0.0",
  "displayName": "beautiful-article",
  "description": "把用户提供的素材（网页 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。",
  "author": {
    "name": "ConardLi",
    "url": "https://github.com/ConardLi"
  },
  "repository": {
    "url": "https://github.com/ConardLi/garden-skills",
    "source": "github",
    "subfolder": "skills/beautiful-article"
  },
  "homepage": "https://github.com/ConardLi/garden-skills/tree/main/skills/beautiful-article",
  "distribution": {
    "packages": [
      {
        "registryType": "source",
        "identifier": "ConardLi/garden-skills@beautiful-article",
        "version": "main",
        "runtimeHint": "npx skills add"
      }
    ],
    "remotes": []
  },
  "dependencies": [],
  "installTargets": [
    "claude-code",
    "claude-desktop",
    "cursor",
    "codex",
    "vscode"
  ],
  "keywords": [],
  "provenance": {
    "origin": "github-cn",
    "originalId": "ConardLi/garden-skills/beautiful-article",
    "originalUrl": "https://github.com/ConardLi/garden-skills/tree/main/skills/beautiful-article",
    "isOfficial": false,
    "status": "active"
  }
}
beautiful-article Skill Install & Guide - AgentHub