Html Preview logo

Html Preview

CommunityPopular
xerrors
html-preview

使用 Markdown `html:preview` 围栏输出轻量静态 HTML/CSS 可视化。当普通 Markdown 难以清晰表达数值对比、层级关系、流程、时间线、关键指标或布局示意，或用户明确要求可视化 HTML 预览时使用。询问 HTML 源码、教程示例或可复制代码时不要使用。

Overview

Publisherxerrors
RepositoryYuxi
Skill namehtml-preview
Stars
7.1K
Forks
1.1K
Bundled files
Instructions only
LicenseMIT
Links
Skill sourceRepositoryHomepage
  • Markdown instructions

    A SKILL.md file the model loads on demand, so it only costs tokens when a request actually matches.

  • Works with any LLM

    AI skills are plain Markdown, not provider-specific code, so this works with GPT, Claude, Gemini, Grok, or a local model.

  • Self-contained

    Everything the model needs lives in the instructions — no extra files to sync.

  • Open source

    Published by xerrors on GitHub. Read the source before you install it.

Installation

Install the Html Preview AI skill in TypingMind to use it with any LLM, or drop it into another agent that reads SKILL.md.

1

Install in TypingMind

TypingMind installs a skill straight from its GitHub folder — it reads SKILL.md, bundles the resource files, and stores the result locally.

  1. Open the app and go to Plugins → Skills.
  2. Choose "Install from GitHub".
  3. Paste the skill folder URL below and confirm.
  4. Enable the skill in any chat where you want it available.
Plugins → Skills → Add skill → From GitHub URL, then paste the folder URL and press Continue.
2

Install in another agent

Any agent that reads the Agent Skills format can use this skill — copy the folder into that agent's skills directory.

Claude Code — .claude/skills
git clone --depth 1 https://github.com/xerrors/Yuxi.git /tmp/Yuxi
mkdir -p .claude/skills
cp -r /tmp/Yuxi/backend/package/yuxi/agents/skills/buildin/html-preview .claude/skills/html-preview
Restart Claude Code after copying so it picks up the new skill.

Use it in TypingMind

Enable Html Preview in any TypingMind chat and the model takes it from there. Its name and description sit in the system prompt, and the moment a request matches, the model loads the full instructions itself — you never invoke it by hand, and it costs no tokens until it is actually used.

The model loads Html Preview on its own as soon as a request matches it.

Works with any AI model

AI skills are plain Markdown instructions rather than provider-specific code, so Html Preview is not tied to the model it was written for. Install it once in TypingMind and use it with GPT-5, Claude, Gemini, Grok, DeepSeek, Mistral, Llama, or a local model you run yourself — all on your own API keys.

  • Loaded only when it is needed

    The system prompt carries just the name and description. The instructions are fetched on the first matching request, so an idle skill costs nothing.

  • Switch models mid-chat

    Because the skill is instructions rather than code, changing model does not break it — the next model reads the same SKILL.md.

Skill instructions

This is the SKILL.md content the model loads. Read it before installing — a skill is instructions your model will follow.

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，并明确说明限制。不要输出残缺围栏、不可访问资源或依赖脚本才能理解的预览。

Frequently asked questions

What does the Html Preview AI skill do?

使用 Markdown `html:preview` 围栏输出轻量静态 HTML/CSS 可视化。当普通 Markdown 难以清晰表达数值对比、层级关系、流程、时间线、关键指标或布局示意，或用户明确要求可视化 HTML 预览时使用。询问 HTML 源码、教程示例或可复制代码时不要使用。

Why use Html Preview on TypingMind?

Because you install it once and use it with any model. Html Preview is plain Markdown rather than provider-specific code, so the same skill runs on GPT-5, Claude, Gemini, Grok, or a local model — and you can switch model mid-chat without it breaking. TypingMind runs on your own API keys, so you pay providers directly instead of a per-seat subscription, and your skills and chats stay in your own storage.

How do I install Html Preview in TypingMind?

Open Plugins → Skills → Install from GitHub in TypingMind and paste https://github.com/xerrors/Yuxi/tree/main/backend/package/yuxi/agents/skills/buildin/html-preview. TypingMind reads its SKILL.md and installs it as a skill you can enable per chat.

Which AI models can use Html Preview?

Any model you connect in TypingMind. AI skills are plain Markdown instructions rather than provider-specific code, so GPT, Claude, Gemini, Grok, and local models can all load this skill when a request matches it.

How many AI models can I use with Html Preview?

As many as you like. As long as a model supports skills, you can use Html Preview with it — GPT, Claude, Gemini, Grok, DeepSeek, Mistral, Llama and more — all on TypingMind with your own API keys.

Is the Html Preview AI skill free?

Yes. It is published on GitHub by xerrors under the MIT license. You only pay your own AI provider for the tokens you use.

What are AI skills?

An AI skill is a reusable instruction bundle that teaches an AI model how to do one specific task. It follows the open Agent Skills format: a SKILL.md file with a name and description, plus any scripts, templates or reference files the model may need. The model reads the instructions only when your request matches the skill, so an installed skill costs nothing until it is used.

How are AI skills different from plugins or MCP servers?

A plugin or MCP server gives a model new tools to call — code that runs somewhere and returns a result. An AI skill gives the model knowledge and process instead: how to approach a task, which steps to follow, what good output looks like. Skills are plain Markdown, so they need no server, no API key and no runtime, and they work with any model.

Related AI Skills

View all
obra logo

Verification Before Completion

obra
CommunityPopular

Use when about to claim work is complete, fixed, or passing, before committing or creating PRs - requires running verification commands and confirming output before making any success claims; evidence…

25.8K
288.1K
Instructions
View
obra logo

Writing Plans

obra
CommunityPopular

Use when you have a spec or requirements for a multi-step task, before touching code

25.8K
288.1K
1 files
View
mattpocock logo

Ask Matt

mattpocock
CommunityPopular

Ask which skill or flow fits your situation. A router over the skills in this repo.

22.3K
264.4K
2 files
View
mattpocock logo

Code Review

mattpocock
CommunityPopular

Review the changes since a fixed point (commit, branch, tag, or merge-base) along two axes: Standards (does the code follow this repo's documented coding standards?) and Spec (does the code match what…

22.3K
264.4K
1 files
View

Set up your own AI workspace now

Get notified about new features and future giveaways by subscribing to our newsletter 👇