What problem does it solve? Static HTML checks (token compliance, nav chains, prose) read the file but cannot see what actually renders: SVG text collisions, shapes occluding labels, JS runtime errors, broken images, and horizontal overflow only appear in a real browser engine. This Skill loads generated HTML artifacts in headless Chromium and asserts on the rendered result before the learner or user sees the page. ## Core Features & Use Cases - Two-layer verification: a structure layer (DOCTYPE, duplicate ids, tag closure via lxml cross-validation, external-resource inventory, optional html5lib/VNU strict parsing) gates a render layer that runs in real Chromium via Playwright. - Render-layer checks: element presence smoke tests, JS console/page errors, failed subresource loads, HTML horizontal overflow, SVG text×text collision, shape×text occlusion, and text-escape from containing rects — with a calibrated adjudication model separating intentional design (box labels, background shapes, hidden layers) from hard findings. - Screenshot evidence: every run produces a full-page .render-check.png plus a JSON verdict per file, exiting non-zero when hard findings exist. - Use Case: After generating a teach lesson HTML with SVG diagrams, run bash scripts/check.sh lesson.html to catch a circle marker centered on a label or a broken image before publishing. ## Quick Start Run the html-render-check skill on my generated lesson.html to verify it renders correctly in Chromium and report any layout or runtime issues.
