html-preview

html-preview is a skill for Claude Code, Codex from xerrors/Yuxi. It costs 86 tokens per session (792 once invoked), scanned A, original, MIT.

A guidance skill for adding small, static HTML/CSS visual previews to Markdown when a diagram, comparison, timeline, metric display, or layout sketch would be clearer than text. It does not use JavaScript.

In plain words
What is it for?
Use it for compact visual explanations of data, hierarchy, process, timing, or page layout—not when someone needs reusable HTML source code.
Why use it?
It makes certain relationships and visual arrangements easier to understand while keeping the main answer readable.

Skill for Claude CodeCodex

Written for no agent in particular: nothing here depends on one.

Good fit Use it for compact visual explanations of data, hierarchy, process, timing, or page layout—not when someone needs reusable HTML source code.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/xerrors/yuxi/html-preview
About the project

Yuxi is a self-hosted, multi-tenant knowledge-agent platform that combines document retrieval, knowledge graphs, multi-agent workflows, tools, sandboxes, and access controls in one workspace. Teams use it to build source-backed question answering and multi-step agents while managing their data, models, and permissions. The catalogue entries provide agents, skills, and instructions for Yuxi workflows.

xerrors/Yuxi · 7,405 stars · on GitHub · xerrors.github.io

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add xerrors/Yuxi --skill html-preview
Clone the repo
git clone --depth 1 https://github.com/xerrors/Yuxi

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for html-preview

README.md
[![agentmods](https://agentmods.dev/badge/skills/xerrors/yuxi/html-preview/github.svg)](https://agentmods.dev/skills/xerrors/yuxi/html-preview)
Your own site
<a href="https://agentmods.dev/skills/xerrors/yuxi/html-preview"><img src="https://agentmods.dev/badge/skills/xerrors/yuxi/html-preview/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for html-preview

Your own site · 80×15
<a href="https://agentmods.dev/skills/xerrors/yuxi/html-preview"><img src="https://agentmods.dev/badge/skills/xerrors/yuxi/html-preview.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 86 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 792 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe. Third-party audits
  • NVIDIA SkillSpector pass 7 Sept 2026
How audits are shown
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00086 $0.00792
Opus 5.5 $0.00034 $0.00317
Sonnet 5.5 $0.00017 $0.00158
Haiku 4.5 $0.00009 $0.00079

Measured 28d ago against content hash ed1edc689569, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

html-preview scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 28d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

backend/package/yuxi/agents/skills/buildin/html-preview/SKILL.md · 42 lines

What it actually says

HTML Preview

将 Markdown 作为回答主体。只有可视化能明显降低理解成本时,才补充一个 html:preview 静态组件;标题、列表、表格或代码块已经足够清楚时,继续使用普通 Markdown。

按以下顺序输出:

  1. 先用普通 Markdown 写结论和必要解释。
  2. 顶格写开始围栏 ```html:preview。围栏最多只能有 3 个前导空格,否则前端会把它当作源码。
  3. 在围栏内写自包含的静态 <style> 和语义化 HTML。
  4. 顶格写结束围栏 ```。
  5. 在围栏后用普通 Markdown 补充背景、风险、完整明细和来源。

内容边界

  • 只输出静态 HTML/CSS,不编写 JavaScript,不使用表单、iframe、object 或 embed。
  • 可以引用公开、稳定、无需登录的 HTTPS 图片或字体,但核心信息必须在外链失败时仍然可读。
  • 不引用内网、临时地址、鉴权资源或包含用户凭证的链接。
  • 不把组件当成完整网页或正文容器;不要制作导航栏、页脚、登录态、复杂按钮、营销页 Hero 或多屏页面。
  • 不在组件中放长段叙事、完整报告、长表格或长列表。背景、推理、风险、明细和来源放在普通 Markdown 中。
  • 用户询问 HTML 源码、教程示例或需要复制代码时,使用普通 html 代码块,不使用 html:preview。

布局约束

  • 面向默认 800px × 360px 尺寸设计,并允许容器宽度变化;前端最高显示到 700px,超出后在预览内部滚动。
  • 使用 max-width: 100%、box-sizing: border-box、弹性网格、换行和适度间距保持响应式。
  • 不写死整体画布高度。核心信息应在默认尺寸内无需滚动即可读;放不下时减少内容。
  • 最多展示 1 个短标题、3–5 个关键指标或一组简短对比。数据超过 6 项时,汇总为趋势、区间、异常点或 Top 3。
  • 文字以短标签、数字、单位、状态词和极短备注为主;单条说明尽量不超过 20 个中文字符。
  • 外层已经提供圆角、边框和裁切。不要再给最外层添加卡片壳、页面背景、大圆角、阴影、厚边框或额外外边距。
  • 保持克制和可读,优先使用紧凑指标组、摘要表、对比条、状态标签、时间轴或简单关系图。

失败处理

如果内容无法在上述静态、安全和篇幅边界内表达,改用普通 Markdown,并明确说明限制。不要输出残缺围栏、不可访问资源或依赖脚本才能理解的预览。

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 28d ago Changed · +1 lines ed1edc689569
  2. 1mo ago First seen · 41 lines · 86 tokens per session scan A b481d22101eb

Subscribe to this mod's changes

html-preview is a skill published in the GitHub repository xerrors/Yuxi (7,405 stars, last pushed yesterday), licensed MIT. It adds 86 tokens to every session and 792 once invoked, about $0.0003 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

scope-creep-detector

Analyzes git diffs against a stated intent to detect scope creep, unrelated files, broad pull requests, changes that grew beyond a fix, dependency additions, public API renames, config or CI edits, oversized hunks, and formatting-only files. Use when the user asks whether a change grew beyond the fix, a PR is too…

Shubhamsaboo/awesome-llm-apps · 98 tokens

reviewing-blogs

Reviews and critiques blog posts in src/content/blog/posts/ against Appwrite's established standards for voice, tone, structure, SEO, formatting, and accuracy. Use when the user asks to review, audit, critique, or improve an existing blog post.

appwrite/appwrite · 55 tokens

first-reader

Beta readers for any draft, run by simulating how a real reader experiences it, moment by moment. A skim gate, a no-lookahead timed read producing an attention transcript with quit points, a recall test of what a reader remembers the next day, and a trust ledger of the implied author. Use when the user asks for a beta…

Shubhamsaboo/awesome-llm-apps · 174 tokens

mcp-apps-builder

MANDATORY for ALL MCP server work - mcp-use framework best practices and patterns. READ THIS FIRST before any MCP server work, including: Creating new MCP servers Modifying existing MCP servers (adding/updating tools, resources, prompts, widgets) Debugging MCP server issues or errors Reviewing MCP server code for…

Shubhamsaboo/awesome-llm-apps · 139 tokens

project-graveyard

Scans the developer's machine for dead side projects, autopsies each one from its git history (died at the payments wall, killed by a newer project, finished but never shipped), surfaces their personal death patterns, and picks the corpse most worth resurrecting — then helps ship it. Use when the user mentions…

Shubhamsaboo/awesome-llm-apps · 127 tokens

status

Show whether Mem0 memory is working in this repository, covering configuration, capture state, pending flushes, and whether the Mem0 API key is valid. Use when the user asks whether memory is on, why a memory is missing, or anything looks broken.

mem0ai/mem0 · 54 tokens