What problem does it solve?
Explainer and lesson pages often read as dense and over-decorated because every element competes for attention with borders, colors, and boxes. This Skill provides a disciplined design system for building single-page HTML teaching documents that direct attention through space and a single accent instead of decoration.
Core Features & Use Cases
- Contrast-budget design rules: Enforces three constraints—no boxes, one accent marking one thing, and one idea per section with generous spacing—plus a fixed CSS token palette for a consistent house style.
- Shape and figure guidance: Offers six page shapes (ladder, margin notes, annotated drawing, rail, table, sheet) and eight figure patterns (ranked bars, two lines over time, sequence on a rule, nesting, part-to-whole, two axes, before/after, hierarchy) drawn with inline SVG and direct labels instead of legends.
- Reference implementations: Ships three complete example HTML pages demonstrating the reading-measure layout, the landing-measure variant, and all eight figure types.
- Use Case: Ask the assistant to build a page explaining how spaced repetition works, and it produces a self-contained HTML file with inline CSS, a ladder structure, margin notes, and one accented forgetting-curve figure.
Quick Start
Create a self-contained teaching page explaining a topic of my choice, following the no-boxes, one-accent, one-idea-per-section rules.
