| name | ui-page-style |
| description | Default scroll-page lesson shell — a scrollable interactive mini-app with a clear section rhythm. Use when knobs.presentation is page (or resolves to the default). |
UI Skill: Page
Build a scrollable interactive mini-app, not a slide deck and not the Canvas Studio shell.
Layout
- Single vertical scroll, max-width prose column (~65ch) with full-bleed viz breaks
- Section rhythm: hook → concept → interactive exploration → check → recap
- Each concept section pairs a short explanation with a hands-on element beside/below it
- Paper theme from
lesson_system.md (bg-paper, cobalt, grass)
Required
- Each major section:
data-lesson-section="..." + data-lesson-title
- Interactive controls carry
data-lesson-control (sliders, buttons, toggles)
- At least one canvas visualization wired to a control (change input → canvas updates)
- One
<img go-data-src=...> illustrative image
- A short knowledge check (2–3 questions) near the end — inline, no score dashboard
- Keep under ~45 KB
Do not
- Do not use the studio sidebar chrome (
ui-studio-style) unless the plan sets needs_3d
- Do not paginate content behind prev/next controls (
ui-slide-deck owns that)
- Do not front-load a wall of text — interleave explanation and interaction
- Never touch
window.parent, window.top, or localStorage
