QingYunA agent-html — скилл
Скилл и CLI: единый HTML-файл без зависимостей, с токенами shadcn, семью макетами, графиками на SVG и самопроверкой агента
- 66 ★ репозитория
- Последний коммит
Минимальный доступ
Почему такой уровень
- Скилл дает инструкции и шаблоны для статичных HTML-файлов и ничего не запускает на машине
- CLI вызывают через `npx`, а для установки скилла `npx skills` скачивает и пишет файлы в каталог агента
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/qingyuna-agent-htmlОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемМинимальный доступИнструмент ничего не запускает и не ходит в сеть.
- Скилл дает инструкции и шаблоны для статичных HTML-файлов и ничего не запускает на машине
- CLI вызывают через `npx`, а для установки скилла `npx skills` скачивает и пишет файлы в каталог агента
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
agent-html — скилл и небольшой CLI, которые учат агента выдавать HTML-страницы в одном файле без npm и без CDN. Страницы открываются двойным щелчком и работают без сети: стили, значки и графики лежат внутри файла. Основа — короткий лист токенов на чистом CSS примерно в 75 строк, портированный из эстетики shadcn/ui, со светлой и темной темами и переключателем на нескольких строках JavaScript. В комплекте семь макетов: отчет, дашборд, рабочее место, сравнение бок о бок, хронология, канбан и обзор кода по диффу. Есть 32 векторных значка, графики на SVG без CDN (динамика, колонки, кольца, рейтинги, шкалы, тепловая карта 7 на 24), вкладки и поля форм. Кнопки «Copy as Markdown» и «Copy Review Decisions» возвращают результат агенту, а `scripts/validate.mjs` проверяет парность тегов, отсутствие CDN и настройку области просмотра. Скилл ставится командой `npx skills add QingYunA/agent-html`. CLI открывает галерею `npx agent-html open`, выдает компонент `npx agent-html snippet button` и шаблон `npx agent-html template dashboard`. В скилл вшиты правила, когда HTML нужен, а когда нет: на этот случай есть 12 тестовых сценариев.
Для кого. Тем, кто просит Claude Code, Codex или Pi сделать отчет, дашборд или обзор кода и хочет получить аккуратный файл, который открывается без сборки и сети.
Подходит, если
- Нужен отчет по анализу или тесту одним HTML-файлом, который можно отправить коллеге и открыть без интернета
- Дифф надо превратить в страницу обзора кода с принятием и отклонением правок
- Агент должен собрать канбан или хронологию, а результат вернуть себе через копирование в Markdown
- Закрытая сеть без CDN требует страниц, которые не ссылаются на внешние шрифты и скрипты
Не подходит, если
- Нужен многостраничный сайт или приложение со сборкой: скилл делает одиночные файлы
- Достаточно ответа в Markdown: сами правила скилла советуют не делать HTML там, где он не нужен
- Нужны интерактивные данные из API: страницы статичны, значения подставляет агент
Пример запроса к агенту
Сделай через agent-html дашборд по отчету из metrics.csv одним файлом, с графиком динамики и темной темойОграничения
- Описание скилла и часть документации написаны на китайском, английская версия README есть, но внутренние инструкции читаются по-китайски.
- Страницы статичны: данные подставляет агент в момент генерации, обновления в реальном времени нет.
- В репозитории нет лицензии, поэтому условия повторного использования неясны, хотя код открыт.
- Последний коммит от сентября 2026; проект ведет один автор.
- Макеты и графики рассчитаны на одиночные файлы; сложные интерактивные приложения со сборкой в эти рамки не входят.
Как отключить. Скилл удаляют из `.claude/skills/` или `~/.claude/skills/`, а ссылки в `~/.agents/skills` убирают вручную. CLI запускается через `npx` и ничего не оставляет в системе.
Частые вопросы
Как поставить agent-html?
Выполните `npx skills add QingYunA/agent-html` для проекта или добавьте `-g` для всех агентов на машине. Вручную можно склонировать репозиторий и связать папку `skills/agent-html` символической ссылкой.
Чем это отличается от генерации HTML без скилла?
Модель без правил обычно тянет CDN и внешние шрифты или рисует кривой CSS без темной темы. Скилл дает готовые токены, макеты и самопроверку `scripts/validate.mjs`.
Какие макеты есть?
Семь: отчет, дашборд, рабочее место, сравнение бок о бок, хронология, канбан и обзор кода по диффу. Шаблон выводит `npx agent-html template <имя>`.
Как открыть галерею компонентов?
Команда `npx agent-html open` открывает галерею в браузере, для сборки и сервера Node.js не требуется. README также ссылается на онлайн-галерею на `vercel.app`.
Как результат возвращается агенту?
Кнопки «Copy as Markdown» и «Copy Review Decisions» копируют значения форм и решения по обзору в Markdown, который вы вставляете обратно в чат.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкилл учит агента собирать чат ИИ-агента на 26 компонентах Agent Elements: карточки инструментов, ввод, стриминг
CLI создает холст, где ИИ-агент строит дашборды, отчеты и макеты как React-артефакты, а правки привязаны к блокам страницы
shadcn-svelte — скилл для агентов
shadcn-svelte
Скилл по shadcn-svelte: агент читает components.json, ставит компоненты через CLI и собирает формы, диалоги и карточки по правилам библиотеки
Скилл и CLI для агентов: интерфейс без шаблонного вида, 25 команд, проверка шаблонности правилами и оценка качества от 0 до 100
Реестр устанавливаемых дизайн-скиллов: готовые файлы SKILL.md и DESIGN.md с токенами, правилами компонентов и доступностью под разные стили
Скилл дизайна интерфейсов для агента: диагностика, четыре направления на выбор, реализация и приемка без вида шаблона от ИИ
Коротко о README
README объясняет две ловушки при генерации HTML моделью (CDN и безвкусный CSS), показывает установку и работу CLI, перечисляет возможности и семь макетов, значки, графики и тестовые сценарии.
Бейдж для README
Исходный 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 + 最强的一张或两张图 + 关键明细），并在回复里用一句话提示「如需完整报告可以再展开」； - **不得**因为「数据很丰富」「结论很多」「用户说了分析」就自行升格为整页母版； - 反过来，用户明确要了「报告 / 白皮书」时，也不得只交付一张图。 拿不准时**选更细的粒度**：多给一张卡片，用户会自己说「再展开」；多给一份六章节报告，用户只会觉得被淹没。