QingYunA agent-html skill
A skill and CLI that make dependency-free single-file HTML: shadcn tokens, seven layouts, SVG charts and an agent self-check
- 66 ★ on the repository
- Last commit
Minimal access
Why this level
- The skill gives instructions and templates for static HTML files and runs nothing on the machine
- The CLI runs through `npx`, and `npx skills` downloads and writes files into the agent directory to install the skill
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/qingyuna-agent-htmlDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skill gives instructions and templates for static HTML files and runs nothing on the machine
- The CLI runs through `npx`, and `npx skills` downloads and writes files into the agent directory to install the skill
This is third-party code. Review the repository files before installing.
What it does
agent-html is a skill and a small CLI that teach an agent to produce single-file HTML pages with no npm and no CDN. Pages open on a double click and work offline: styles, icons and charts live inside the file. The base is a short pure-CSS token sheet of about 75 lines ported from the shadcn/ui look, with light and dark themes and a toggle in a few lines of JavaScript. It ships seven layouts: report, dashboard, workbench, side-by-side comparison, timeline, kanban and a diff-based code review. There are 32 vector icons, SVG charts with no CDN (trends, columns, donuts, rankings, gauges, a 7 by 24 heatmap), tabs and form controls. "Copy as Markdown" and "Copy Review Decisions" buttons carry the result back to the agent, and `scripts/validate.mjs` checks tag symmetry, zero-CDN compliance and the viewport setup. Install the skill with `npx skills add QingYunA/agent-html`. The CLI opens a gallery with `npx agent-html open`, prints a component with `npx agent-html snippet button` and a layout with `npx agent-html template dashboard`. The skill carries rules for when HTML is the right answer and when it is not, backed by 12 eval cases.
Who it is for. People who ask Claude Code, Codex or Pi for a report, dashboard or code review and want a tidy file that opens with no build and no network.
Good fit when
- You need an analysis or test report as one HTML file that a colleague can open offline
- A diff has to become a code review page with accept and reject decisions
- An agent has to build a kanban or timeline and get the result back through a Markdown copy
- An air-gapped network needs pages that link no external fonts or scripts
Not a fit when
- You need a multi-page site or an app with a build: the skill produces single files
- A Markdown answer is enough: the skill rules themselves advise against HTML where it is not needed
- You need live data from an API: pages are static and the agent fills in the values
Example request
Use agent-html to build a dashboard from metrics.csv as a single file with a trend chart and a dark themeLimitations
- The skill description and part of the documentation are in Chinese; an English README exists, but internal instructions read in Chinese.
- Pages are static: the agent fills in data at generation time and there are no real-time updates.
- The repository has no license, so reuse terms are unclear even though the code is open.
- The last commit is from September 2026, the project has a single author.
- Layouts and charts are meant for single files; complex interactive apps with a build step are outside their scope.
How to disable. Delete the skill from `.claude/skills/` or `~/.claude/skills/` and remove symlinks in `~/.agents/skills` by hand. The CLI runs through `npx` and leaves nothing on the system.
FAQ
How do I install agent-html?
Run `npx skills add QingYunA/agent-html` for a project or add `-g` for every agent on the machine. By hand you can clone the repository and symlink the `skills/agent-html` folder.
How is this different from plain HTML generation?
Without rules a model tends to pull a CDN and external fonts or invent crooked CSS with no dark mode. The skill brings ready tokens, layouts and a `scripts/validate.mjs` self-check.
Which layouts are there?
Seven: report, dashboard, workbench, side-by-side comparison, timeline, kanban and a diff-based code review. `npx agent-html template <name>` prints one.
How do I open the component gallery?
`npx agent-html open` opens the gallery in a browser with no build or server. The README also links an online gallery on `vercel.app`.
How does the result return to the agent?
The "Copy as Markdown" and "Copy Review Decisions" buttons copy form values and review decisions as Markdown that you paste back into the chat.
Discussion
No questions or reviews yet.
Related
SkillsThe skill teaches an agent to build an AI agent chat from 26 Agent Elements components: tool cards, input bar, streaming
A CLI that sets up a canvas where an AI agent builds dashboards and reports as React artifacts, revised block by block
shadcn-svelte skill for agents
shadcn-svelte
A shadcn-svelte skill: the agent reads components.json, adds components with the CLI and builds forms, dialogs and cards by the library's rules
A skill and CLI for agents: UI without the templated look, 25 commands, rule-based anti-slop checks and a 0 to 100 quality score
A registry of installable design skills: ready SKILL.md and DESIGN.md files with tokens, component rules and accessibility for different styles
An interface design skill for the agent: diagnosis, four directions to choose, implementation and QA without an AI-template look
README in short
The README explains the two traps of model-generated HTML (CDN and tasteless CSS), shows the install and the CLI, and lists features: seven layouts, icons, charts and eval cases.
README badge
Original SKILL.md
--- name: agent-html description: 为 AI Agent 提供基于 shadcn/ui 极简现代美学的单文件 HTML 组件化规范与母版体系。当用户要求“生成 HTML 页面/网页”、“前端可视化大盘/看板”、“面试/分析/测试报告”、“对比矩阵/方案比对”、“review 结果做成可视化页面”、“代码审查报告 / 把 diff 做成可视化审查页”、“不要输出 markdown 墙/不要文字墙”、“把分析结果做成可交互单文件网页”等场景时，务必使用本 Skill。零构建、零 npm、严禁引入外部 CDN（无断网白屏风险），纯原生 HTML/CSS/SVG，支持暗黑模式与双击秒开。 --- # Agent HTML 设计系统与组件化规范 本规范指导 AI Agent 如何生成**高信息密度、工业级质感、零外部依赖、双击秒开**的单文件 HTML。 --- ## 零、价值研判准则：何时用 HTML，何时坚决不用 (Judgment Rules) > **黄金法则**：*Markdown 是事实来源（Source of Truth），HTML 是人类决策与评审表面（Human Review Surface）。* 并不是所有输出都需要制作成 HTML。在动手前，AI Agent 必须先做价值研判： ### 1. 优先使用 HTML 的场景（具备以下任一特征）： - **空间性与多维性 (Spatial)**：宽屏数据大盘、左右双栏日志审查器、指标统计网格、密集状态看板； - **并行与对比性 (Parallel / A-B)**：基准 vs 挑战者、版本 Diff、模型评测、方案取舍矩阵； - **可交互与即时过滤 (Interactive / Filterable)**：包含数十条记录需毫秒级搜索、多 Tab 切换、手风琴折叠展开； - **供人类正式决策/归档 (Human Review Surface)**：正式架构评审、面试录用报告、技术复盘白皮书、发布日志。 ### 2. 坚决不要使用 HTML 的场景（留在终端 Markdown 即可）： - **线性单线条内容**：普通的问答、短解释、单次代码段说明（< 200 字）； - **纯终端命令/脚本**：用户需要立即在终端复制执行的 shell 命令； - **无空间结构的信息**：没有表格、没有对比、没有维度的流水账文本；强行输出 HTML 会打断用户终端心流并浪费 Token。 ### 3. 定了要用 HTML 之后，再定粒度 (Output Granularity) 这是**第二问**，和第一问同等重要。判错粒度会让用户拿到一份远超或远低于预期的东西： | 粒度 | 交付物 | 什么时候用 | | :--- | :--- | :--- | | **片段** | 单个组件卡片 / 一张图 / 一个表格 | 单点结论、单个对比，用户只想看一眼 | | **证据页** | 一页：KPI 概览 + 图表 + 关键明细表 | 2–3 个独立结论，需要摆证据但不需要完整叙事 | | **整页母版** | 七种通用母版之一（见「通用布局母版」一节） | 完整叙事交付：报告、复盘、评审、白皮书 | **默认档位是「证据页」，不是「整页母版」。** 用户说「分析一下这组数据」「帮我把这个看板做出来」但**没有**说「报告 / 白皮书 / 年报 / 复盘 / 评审」时： - **必须先交付证据页**（KPI + 最强的一张或两张图 + 关键明细），并在回复里用一句话提示「如需完整报告可以再展开」； - **不得**因为「数据很丰富」「结论很多」「用户说了分析」就自行升格为整页母版； - 反过来，用户明确要了「报告 / 白皮书」时，也不得只交付一张图。 拿不准时**选更细的粒度**：多给一张卡片，用户会自己说「再展开」；多给一份六章节报告，用户只会觉得被淹没。