跳到正文
cccskills
免费在 GitHub 公开

html-preview

Add compact visual summaries to Markdown answers using static HTML and CSS. Show comparisons, key metrics, timelines, or simple relationships in a preview, while keeping explanations and detailed information in the surrounding text.

中文简介正在准备中。当前显示英语简介。

原文查看原文说明

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

查看安装方法

适用场景

  • Comparing key metrics visually
  • Showing a process or sequence of steps
  • Summarizing events on a timeline
  • Illustrating hierarchies and simple layouts

包含的文件(1)

  • SKILL.md2.9 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

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

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

Organize complex research by splitting a topic into focused questions, assigning research agents, and checking important claims. Findings become a structured report with source links, conflicting evidence, and clearly stated uncertainties.

中文简介正在准备中。当前显示英语简介。

  • Reviewing research literature
  • Researching industries and competitors
  • Comparing technologies for selection
xerrors/Yuxi74312026年10月17日 更新

image-gen

免费

Generate images, posters, and illustrations from written descriptions using an external image API, with Qwen-Image as the default. Save the finished image in the agent's working environment and display it through the artifact presentation tool.

中文简介正在准备中。当前显示英语简介。

  • Generating an illustration from a written description
  • Creating a poster with a specified style
  • Saving and displaying images generated with Qwen-Image
xerrors/Yuxi74312026年10月17日 更新

Search configured Yuxi knowledge bases to answer questions using internal or uploaded documents. Open source text, locate relevant passages, inspect mind maps, and identify supporting files so answers can be traced back to their evidence.

中文简介正在准备中。当前显示英语简介。

  • Answering questions from internal documents
  • Locating passages that support a claim
  • Exploring knowledge base structure with mind maps
xerrors/Yuxi74312026年10月17日 更新

Query MySQL databases to summarize sales, user behavior, and business metrics. The skill checks available tables, runs read-only queries, and presents results as Markdown tables with explanations of key figures, changes, and conclusions.

中文简介正在准备中。当前显示英语简介。

  • Summarizing sales data
  • Analyzing user behavior
  • Reporting business metrics
xerrors/Yuxi74312026年10月17日 更新

查看 xerrors 的全部技能

报告此技能的问题