html

GitHub

生成自包含的交互式HTML片段,用于创建计算器、配置器、仪表板等原型。遵循无依赖、内存状态、无障碍及响应式设计规范,支持就地修订与验证保存。

docker/sandbox/skills/html/SKILL.md MODSetter/SurfSense

Trigger Scenarios

需要创建前端交互原型或组件 生成无需后端支持的纯前端HTML工具

Install

npx skills add MODSetter/SurfSense --skill html -g -y
More Options

Non-standard path

npx skills add https://github.com/MODSetter/SurfSense/tree/main/docker/sandbox/skills/html -g -y

Use without installing

npx skills use MODSetter/SurfSense@html

指定 Agent (Claude Code)

npx skills add MODSetter/SurfSense --skill html -a claude-code -g -y

安装 repo 全部 skill

npx skills add MODSetter/SurfSense --all -g -y

预览 repo 内 skill

npx skills add MODSetter/SurfSense --list

SKILL.md

Frontmatter
{
    "name": "html",
    "description": "Create interactive calculators, configurators, dashboards, widgets, and prototypes as self-contained HTML artifacts."
}

Interactive HTML

Create one interactive HTML fragment in /workspace. Everything required is available in the browser; never install or download dependencies.

Authoring contract

  • Emit a fragment only. Do not include <!DOCTYPE>, <html>, <head>, or <body>; the artifact viewer supplies the document shell and security policy.
  • Put all CSS in <style> and all behavior in inline <script>.
  • Keep state in memory. The sandboxed viewer does not provide application APIs, cookies, or durable browser storage.
  • Do not call fetch, XMLHttpRequest, WebSocket, or application APIs.
  • Images must be data: URIs. The only external resources the viewer permits are stylesheets and fonts from fonts.googleapis.com and fonts.gstatic.com.
  • Use semantic HTML and native controls. Every input needs an accessible label, keyboard focus must be visible, and motion must respect prefers-reduced-motion.
  • Make the layout responsive without horizontal page overflow.

Web design requirements

  • Design mobile-first and verify narrow and wide layouts without horizontal overflow.
  • Use one h1, ordered heading levels, native controls, and explicit labels.
  • Keep CSS selectors local and simple to avoid specificity conflicts.
  • Make touch targets usable and provide :focus-visible styles.
  • Respect prefers-reduced-motion; do not animate every section or card.

Revisions

Start an in-place revision with load_artifact_for_revision. Edit primary_path directly, or regenerate the fragment from markdown_path plus the user's instruction, and write it to expected_output_path. Keep the output a self-contained fragment. Do not use vision to reconstruct the current page.

Save the verified revision with the returned artifact_id and expected_generation. A changed title or design remains the same artifact unless the user explicitly asks for a separate copy.

Verify and save

Call verify_artifact(path=output_path, format="html"). HTML verification is structural only: there is no PDF preview or vision pass. Warnings identify resources the viewer will block and do not require regeneration. If verification reports blocking findings, fix all blockers together, regenerate once at the same output path, and reverify. If a blocker remains, stop and explain it instead of looping.

Then call save_artifact(path=output_path, title="...", markdown_representation="..."). Working files may use any paths; no source file, preview file, or matching filename stem is part of the publication contract.

The Markdown representation must faithfully summarize the artifact's purpose, controls, outputs, and important content for accessibility and search. Do not paste the raw HTML into it.

Version History

  • 014e47a Current 2026-09-23 08:23

Same Skill Collection

.agents/skills/codebase-design/SKILL.md
.agents/skills/migrate-radix-to-base/SKILL.md
.agents/skills/shadcn/SKILL.md
.agents/skills/tdd/SKILL.md
.agents/skills/translate/SKILL.md
.cursor/skills/alert-manager/SKILL.md
.cursor/skills/animation-vocabulary/SKILL.md
.cursor/skills/backlink-analyzer/SKILL.md
.cursor/skills/competitor-analysis/SKILL.md
.cursor/skills/content-gap-analysis/SKILL.md
.cursor/skills/content-quality-auditor/SKILL.md
.cursor/skills/content-refresher/SKILL.md
.cursor/skills/domain-authority-auditor/SKILL.md
.cursor/skills/emil-design-eng/SKILL.md
.cursor/skills/entity-optimizer/SKILL.md
.cursor/skills/frontend-design/SKILL.md
.cursor/skills/geo-content-optimizer/SKILL.md
.cursor/skills/improve-codebase-architecture/SKILL.md
.cursor/skills/internal-linking-optimizer/SKILL.md
.cursor/skills/keyword-research/SKILL.md
.cursor/skills/memory-management/SKILL.md
.cursor/skills/meta-tags-optimizer/SKILL.md
.cursor/skills/on-page-seo-auditor/SKILL.md
.cursor/skills/performance-reporter/SKILL.md
.cursor/skills/python-patterns/SKILL.md
.cursor/skills/rank-tracker/SKILL.md
.cursor/skills/review-animations/SKILL.md
.cursor/skills/schema-markup-generator/SKILL.md
.cursor/skills/seo-content-writer/SKILL.md
.cursor/skills/serp-analysis/SKILL.md
.cursor/skills/shadcn/SKILL.md
.cursor/skills/system-architecture/SKILL.md
.cursor/skills/tdd/SKILL.md
.cursor/skills/technical-seo-checker/SKILL.md
.cursor/skills/ugc-brief/SKILL.md
.cursor/skills/vercel-react-best-practices/SKILL.md
.cursor/skills/web-design-guidelines/SKILL.md
docker/sandbox/skills/docx/SKILL.md
docker/sandbox/skills/flashcards/SKILL.md
docker/sandbox/skills/infographic/SKILL.md
docker/sandbox/skills/mindmap/SKILL.md
docker/sandbox/skills/pdf/SKILL.md
docker/sandbox/skills/pptx/SKILL.md
docker/sandbox/skills/quiz/SKILL.md
docker/sandbox/skills/video/SKILL.md
docker/sandbox/skills/xlsx/SKILL.md
.agents/skills/frontend-workflow/SKILL.md
.cursor/skills/playwright-testing/SKILL.md

Metadata

Files
0
Version
176aed2
Hash
85db2a94
Indexed
2026-09-23 08:23

ホーム - Wiki
Copyright © 2011-2026 iteam. Current version is 2.155.2. UTC+08:00, 2026-11-02 05:06
浙ICP备14020137号-1