html-canvas — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited html-canvas (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
Generate rich single-file HTML that reads well, themes light/dark, switches DE/EN, and pulls every colour from DESIGN.md — the genre we keep hand-building (explainers, reference kits, concept/architecture pages, use-case boards, multi-section docs). One file, offline, no external dependencies, native UTF-8.
Scope: html-canvas owns content-as-document — bilingual explainers, reference/concept/architecture pages, multi-section docs — with first-class light/dark + DE/EN toggles and a DESIGN.md-token section catalog. Marketing / landing / pitch pages belong to a style-picker design skill, if your Bridge ships one.These are the point of the skill — they come baked into the shell, don't reinvent them:
T + localStorage, anti-FOUC pre-paint in<head>, OS preference when unset. Applied via the .dark class on <html> (DESIGN.md convention).
L + localStorage. Every translatable run shipsas data-de/data-en siblings; the swap is pure CSS. Default = the conversation language. (Repo/OSS-shipped artifacts stay English regardless.)
pages forced to a light palette for clean paper.
One page: copy assets/shell.html → fill the {{placeholders}} → compose <main> from the blocks in references/sections.md → add behaviours from references/interactivity.md and motion from assets/animations.css if wanted. Render light and dark, DE and EN, then file under work/tasks/<slug>/deliverables/.
A kit (many pages/boards): use the parallel-builder workflow in references/build-workflow.md — one convention audit emits a shared shell, N builders run concurrently on it, one adversarial reviewer checks every page, then integrate + write an index launcher. This is how the 12-board sets get built consistently.
Tokens: regenerate the CSS variable layer from the design system with
python3 skills/html-canvas/scripts/design-to-css.py --out /tmp/tokens.cssand paste it over the shell's brand-token block. Never hand-pick a brand colour; if a token is missing, add it to DESIGN.md first, then regenerate.
Turn a codebase (or its existing architecture doc) into a sectioned architecture explainer. Full playbook: references/repo-analysis.md. Two paths:
as the source, extract the spec, render. (The doc-driven path.)
code → offer a subagent fan-out (one agent per facet: modules, data model, flows, deps, …), synthesize an Architecture Spec, then render. It's heavy, so it's an offer, never automatic.
Always seed with facts first: python3 skills/html-canvas/scripts/repo-scan.py <repo>. Verify against code — every component/edge/flow cites a real path; unsourced architecture goes under a caveat ("unverified"), never stated as fact.
| File | What | Read it when |
|---|---|---|
assets/shell.html | The starting template: tokens + theme + DE/EN + print + base styles | Always — it's the skeleton you copy |
references/sections.md | ~20 copy-paste section blocks (headers, flows, swimlanes, matrices, KPIs, timelines, callouts, …) | Composing <main> |
references/interactivity.md | Optional vanilla JS: scroll-reveal, slide engine, count-up, filtering, data hydration | Adding behaviour |
assets/animations.css | Optional motion layer, all prefers-reduced-motion-gated | Adding animation |
references/build-workflow.md | Parallel-builder workflow + the full quality/voice/accessibility bar | Multi-page kits, or before calling any page done |
scripts/design-to-css.py | DESIGN.md → :root + html.dark CSS custom properties | (Re)generating tokens |
references/repo-analysis.md | Repo/doc → Architecture-Spec → sections: doc-scan + offered subagent fan-out + spec→block mapping | Building an architecture explainer from a repo |
scripts/repo-scan.py | Deterministic repo inventory (languages, entry points, deps, docs) — the factual seed | Before analyzing any repo |
references/build-workflow.md)data-URI-inlined woff2.
light" (headings ≥24px → weight 300). Accent gradient only on 1–2 accent words + the wordmark; never the cyan→purple-on-text AI-slop tell.
semantic lens/actor colours are the only exception and always ship a legend; status reads by shape (● ◐ ✗ –) first.
in 3rd person); verify-before-claim (unsourced facts get an explicit caveat).
A clean flat page also happens to import reasonably into Figma — that's a side benefit of good markup, not a mode or a constraint. See the optional note in references/build-workflow.md if a specific deliverable is meant for Figma.~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.