Create interactive calculators, configurators, dashboards, widgets, and prototypes as self-contained HTML artifacts.
62
78%
Does it follow best practices?
Run evals on this skill
Adds up to 20 points to the overall score
Passed
No findings from the security scan
Fix and improve this skill with Tessl
tessl review fix ./docker/sandbox/skills/html/SKILL.mdCreate one interactive HTML fragment in /workspace. Everything required is
available in the browser; never install or download dependencies.
<!DOCTYPE>, <html>, <head>, or
<body>; the artifact viewer supplies the document shell and security policy.<style> and all behavior in inline <script>.fetch, XMLHttpRequest, WebSocket, or application APIs.data: URIs. The only external resources the viewer permits
are stylesheets and fonts from fonts.googleapis.com and
fonts.gstatic.com.prefers-reduced-motion.h1, ordered heading levels, native controls, and explicit labels.:focus-visible styles.prefers-reduced-motion; do not animate every section or card.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.
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.
MODSetter/SurfSense
176aed2
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.