Individual skill
html-canvas
Builds single-file HTML documents: explainers, reference pages, architecture visualizations, light/dark and DE/EN toggles, DESIGN.md tokens. Also running models: simulations with a clock. NOT marketing pages or ops dashboards (creative-design-stack), not ecosystem maps (bridge-explorer). Trigger: "create an HTML page", "explainer", "html kit", "theme toggle", "simulate this".
skills/html-canvas/SKILL.md
Source commit 2554bda8eeb2d55671e922c31484905fc8c67af9
What was checked
- Matches the observed repository HEAD
- Yes
- Scanner rules are current
- No
- Repository scan complete
- No
- Skill scan complete
- No
- Observed behavior
- Not checked yet
- Last checked
- Nov 5, 2026
These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.
Install this skill
Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.
An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.
Repository context
- Repository stars (not skill ratings)
- 13
- Repository last updated
- Nov 8, 2026
- License
- MIT
Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.
- agent-memory Repository topic
- agent-orchestration Repository topic
- agentic-ai Repository topic
- ai-agents Repository topic
- claude-code Repository topic
- codex Repository topic
- coding-agent Repository topic
- context-engineering Repository topic
- copilot-cli Repository topic
- developer-tools Repository topic
- engineering Derived category
- design Derived category
- marketing Derived category
Files and excerpt
File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.
Browse files
SKILL.mdcore · 11,120 bytesSKILL.mdcore · 11,120 bytesSKILL.mdcore · 11,120 bytesSKILL.mdcore · 11,120 bytesSKILL.mdcore · 11,120 bytesSKILL.mdcore · 11,120 bytesSKILL.mdcore · 11,120 bytesSKILL.mdcore · 11,120 bytesSKILL.mdcore · 11,120 bytesSKILL.mdcore · 11,120 bytesSKILL.mdcore · 11,120 bytesSKILL.mdcore · 11,120 bytesassets/animations.cssasset · 4,409 bytesassets/fonts/OFL-inter.txtdoc · 4,375 bytesassets/fonts/OFL-jetbrains-mono.txtdoc · 4,524 bytesassets/fonts/OFL-playfair-display.txtdoc · 4,449 bytesassets/fonts/inter-latin-wght.woff2asset · 48,256 bytesassets/fonts/jetbrains-mono-latin-400-normal.woff2asset · 21,524 bytesassets/fonts/jetbrains-mono-latin-600-normal.woff2asset · 22,232 bytesassets/fonts/playfair-display-latin-500.woff2asset · 23,048 bytesassets/sections.cssasset · 19,111 bytesassets/sections.jsruns · 8,263 bytesassets/shell.htmlasset · 14,790 bytesassets/sim-engine.jsruns · 52,561 bytesassets/sim-flow.htmlasset · 35,800 bytesassets/sim-worklist.htmlasset · 16,168 bytesassets/simulation.cssasset · 18,002 bytesreferences/build-workflow.mddoc · 12,779 bytesreferences/interactivity.mddoc · 6,627 bytesreferences/repo-analysis.mddoc · 6,124 bytesreferences/sections.mddoc · 31,438 bytesreferences/simulation.mddoc · 23,006 bytesreferences/theme-contract.mddoc · 7,008 bytesscripts/bridge_design.pyruns · 5,423 bytesscripts/bundle.pyruns · 33,823 bytesscripts/design-to-css.pyruns · 31,331 bytesscripts/embed-fonts.pyruns · 10,897 bytesscripts/new-page.pyruns · 23,213 bytesscripts/new-simulation.pyruns · 11,885 bytesscripts/repo-scan.pyruns · 9,147 bytesscripts/verify-page.pyruns · 52,222 bytestests/canvas_testlib.pyruns · 4,798 bytestests/conftest.pyruns · 2,290 bytestests/fixtures/bundle/app.jsruns · 184 bytestests/fixtures/bundle/fixture-design.mddoc · 188 bytestests/fixtures/bundle/fonts/local-face.woff2asset · 29 bytestests/fixtures/bundle/frames/nested.htmlasset · 335 bytestests/fixtures/bundle/frames/plain.htmlasset · 151 bytestests/fixtures/bundle/img/bg.pngasset · 69 bytestests/fixtures/bundle/img/dot.pngasset · 69 bytestests/fixtures/bundle/img/mark.svgasset · 112 bytestests/fixtures/bundle/index.htmlasset · 779 bytestests/fixtures/bundle/pages/second.htmlasset · 190 bytestests/fixtures/bundle/style.cssasset · 277 bytestests/fixtures/canvas/lang-pairs.htmlasset · 931 bytestests/fixtures/canvas/repo/README.mddoc · 31 bytestests/fixtures/canvas/repo/docs/architecture.mddoc · 55 bytestests/fixtures/canvas/repo/package.jsonruns · 98 bytestests/fixtures/canvas/repo/pyproject.tomlasset · 98 bytestests/fixtures/canvas/repo/src/__main__.pyruns · 23 bytestests/fixtures/canvas/repo/src/main.pyruns · 25 bytestests/fixtures/canvas/repo/web/index.tsruns · 40 bytestests/fixtures/canvas/reveal.htmlasset · 160 bytestests/fixtures/fonts/README.txtdoc · 145 bytestests/fixtures/fonts/fixture-sans-latin-400.woff2asset · 3,096 bytestests/fixtures/fonts/fixture-sans-latin-600.woff2asset · 3,148 bytestests/fixtures/fonts/fixture-var-latin-wght.woff2asset · 7,144 bytestests/fixtures/pages/broken.htmlasset · 634 bytestests/fixtures/pages/current-lang.htmlasset · 707 bytestests/fixtures/pages/legacy-generated.htmlasset · 732 bytestests/fixtures/pages/legacy-lang.htmlasset · 868 bytestests/fixtures/stage/parent.htmlasset · 1,441 bytestests/fixtures/tokens/design-current.mddoc · 948 bytestests/fixtures/tokens/design-legacy.mddoc · 521 bytestests/fixtures/tokens/golden-current.cssasset · 1,802 bytestests/fixtures/tokens/golden-legacy.cssasset · 1,438 bytestests/fixtures/tokens/golden-shell-region.htmlasset · 2,205 bytestests/fixtures/tokens/map-missing.yamlasset · 37 bytestests/fixtures/tokens/map-print-off.yamlasset · 238 bytestests/fixtures/tokens/map-selectors.yamlasset · 177 bytestests/fixtures/tokens/map.yamlasset · 361 bytestests/fixtures/tokens/shell-region.htmlasset · 321 bytestests/fixtures/tokens/target.htmlasset · 303 bytestests/fixtures/verify/DESIGN.mddoc · 389 bytestests/fixtures/verify/aria-lang.htmlasset · 1,719 bytestests/fixtures/verify/aria-pair.htmlasset · 1,751 bytestests/fixtures/verify/browser-broken.htmlasset · 1,796 bytestests/fixtures/verify/charset.htmlasset · 1,759 bytestests/fixtures/verify/clean.htmlasset · 1,782 bytestests/fixtures/verify/contrast.htmlasset · 1,786 bytestests/fixtures/verify/data-theme.htmlasset · 1,743 bytestests/fixtures/verify/dead-anchor.htmlasset · 1,785 bytestests/fixtures/verify/deck-clean.htmlasset · 839 bytestests/fixtures/verify/deck-overflow.htmlasset · 874 bytestests/fixtures/verify/deck-pages.htmlasset · 889 bytestests/fixtures/verify/dual-hidden.htmlasset · 1,807 bytestests/fixtures/verify/dual-shown.htmlasset · 1,836 bytestests/fixtures/verify/entity.htmlasset · 1,798 bytestests/fixtures/verify/escape.htmlasset · 1,816 bytestests/fixtures/verify/external-css.htmlasset · 1,832 bytestests/fixtures/verify/external-link.htmlasset · 1,830 bytestests/fixtures/verify/external-url.htmlasset · 1,837 bytestests/fixtures/verify/font-face.htmlasset · 1,796 bytestests/fixtures/verify/forbid-chars.txtdoc · 58 bytestests/fixtures/verify/forbidden.htmlasset · 1,797 bytestests/fixtures/verify/google-fonts.htmlasset · 1,860 bytestests/fixtures/verify/hex.htmlasset · 1,803 bytestests/fixtures/verify/lang-pair.htmlasset · 1,744 bytestests/fixtures/verify/local-ref.htmlasset · 1,749 bytestests/fixtures/verify/motion.htmlasset · 1,848 bytestests/fixtures/verify/night.htmlasset · 1,738 bytestests/fixtures/verify/pixel.svgasset · 96 bytestests/fixtures/verify/placeholder.htmlasset · 1,781 bytestests/fixtures/verify/scrim-dark.htmlasset · 1,336 bytestests/fixtures/verify/scrim-veil.htmlasset · 1,365 bytestests/fixtures/verify/theme-class.htmlasset · 1,777 bytestests/fixtures/verify/theme-light-preset.htmlasset · 1,909 bytestests/test_browser_shell.pyruns · 14,942 bytestests/test_bundle.pyruns · 23,197 bytestests/test_design_to_css.pyruns · 20,790 bytestests/test_embed_fonts.pyruns · 10,169 bytestests/test_new_page.pyruns · 25,560 bytestests/test_new_simulation.pyruns · 5,047 bytestests/test_page_aids.pyruns · 14,184 bytestests/test_repo_scan.pyruns · 3,067 bytestests/test_sim_timeline.pyruns · 23,616 bytestests/test_stage_child.pyruns · 11,846 bytestests/test_verify_page.pyruns · 22,861 bytes
Read excerpt
# html-canvas
Rich **single-file HTML** that reads well, themes light/dark, switches DE/EN and
takes every colour from DESIGN.md: explainers, reference kits, concept and
architecture pages, decision pages, multi-section docs, and simulations that run.
One file, offline, no external dependency, native UTF-8.
This skill also owns the **shared foundation** every HTML skill calls instead of
copying: tokens (`scripts/design-to-css.py`), font embedding
(`scripts/embed-fonts.py`), the quality gate (`scripts/verify-page.py`), the send
bundle (`scripts/bundle.py`) and the theme contract
(`references/theme-contract.md`). `html-slides` builds its decks on them.
## Decision tree