html-canvaslisted

Build rich, polished SINGLE-FILE HTML deliverables — explainers, reference pages, concept/architecture visualizations, use-case kits, multi-section documents — with a light/dark theme toggle, a DE/EN language toggle, tasteful animations, and DESIGN.md-driven tokens, all offline with zero dependencies. Use whenever the user wants content turned into a good-looking HTML page or kit, or says 'create an HTML page', 'visualize this as HTML', 'explainer', 'html kit', 'single-file html', 'html with light and dark', 'theme toggle', 'language toggle', 'analyze this repo as an explainer' — even if unnamed. Ships a copy-paste shell, a section-block catalog, an animation layer, optional JS behaviours, a DESIGN.md→CSS token generator, and a parallel-builder workflow. NOT for live Bridge ops dashboards (bridge-dashboard), repo/ecosystem maps (bridge-explorer), or slide decks / styled emails / PDFs / marketing landing pages (use the dedicated skills if your Bridge ships them).
bks-lab/open-bridge · ★ 8 · Web & Frontend · score 74

Install: claude install-skill bks-lab/open-bridge

# html-canvas 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. ## The three controls every deliverable ships These are the point of the skill — they come baked into the shell, don't reinvent them: 1. **Light / Dark** — button + key `T` + `localStorage`, anti-FOUC pre-paint in `<head>`, OS preference when unset. Applied via the `.dark` class on `<html>` (DESIGN.md convention). 2. **DE / EN** — button + key `L` + `localStorage`. Every translatable run ships as `data-de`/`data-en` siblings; the swap is pure CSS. Default = the conversation language. (Repo/OSS-shipped artifacts stay English regardless.) 3. **Print / PDF** — first-class: chrome hidden, reveals forced visible, dark pages forced to a light palette for clean paper. ## How to build **One page:** copy `assets/shell.html` → fill the `{{placeholders}}` → compose `<main>` from the blocks in `references/sections.md` → add