본문으로 건너뛰기
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(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

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 / 1,000자

이 양식은 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/Yuxi7.4천2026년 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/Yuxi7.4천2026년 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/Yuxi7.4천2026년 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/Yuxi7.4천2026년 10월 17일 업데이트

xerrors의 스킬 모두 보기

이 스킬의 문제 신고