What problem does it solve? Creating visually consistent, readable technical explanation pages (with diagrams, comparison tables, and code blocks) plus matching comprehension quizzes normally requires hand-writing large amounts of HTML/CSS. This Skill provides a complete design system and ready-to-use templates so you can produce polished educational HTML documents and interactive quizzes directly from a topic. ## Core Features & Use Cases - Educational HTML generation: Builds academic-note-style light-theme pages with a scroll-synced left sidebar TOC, callout boxes (Def/Note/Warn/Tip), CSS-grid flow diagrams, comparison columns, syntax-highlighted code blocks, and a summary card grid. - Quiz HTML generation: Produces a companion quiz file with three question types (4-choice, YES/NO, drag-and-drop sort), instant feedback, per-type score breakdown, and a retry-enabled results screen. - Accessibility and responsiveness: All interactions respect prefers-reduced-motion, layouts adapt to narrow viewports, and flow diagrams scroll horizontally instead of losing detail. - Use Case: Ask for an explanation of CBC encryption mode, and receive a diagram-rich HTML document plus a linked CBCモード解説_クイズ.html self-check quiz. ## Quick Start Create an educational HTML page explaining how TLS handshake works, with flow diagrams and a companion quiz.
