ui-page-style

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).

Jump to install

Repository: ayushozha/hituto
Last source activity: July 25, 2026 at 03:20
Detected SKILL.md language: English
Stars: 0
Forks: 0

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

A direct command skips the review prompt. Inspect the source before running it.

npx skills add https://github.com/ayushozha/hituto --skill ui-page-style

The command stays on one line. Scroll horizontally to inspect it before copying.

Prefer a local copy? Download the files currently available to SkillsMP.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

SKILL.md

Source instructions · Read-only preview

Back to search Back to installation

UI Skill: Page

Build a scrollable interactive mini-app, not a slide deck and not the Canvas Studio shell.

Layout

Start with the shared hituto-generated-lesson-design canvas and token contract (zinc-neutral).

Outer shell: mx-auto max-w-7xl px-4 py-5 md:px-6 md:py-7 (e.g. <main class="ht-shell …">).

Reading column (required): put every major section inside one centered column — mx-auto w-full max-w-3xl (768px). Same width for every section so side gutters stay even and more of a section fits on screen. Do not use max-w-4xl / max-w-5xl / max-w-6xl or full-bleed sections that stretch to the shell.

Use one spacious centered content column on a transparent canvas. Do not add a sidebar.

Start directly with the first content section. Do not generate a lesson title, intro header, module label, table of contents, or section-navigation buttons.

Keep prose near 65–72 characters per line (max-w-2xl on text-only blocks is fine); keep cards, grids, and interactive regions inside the max-w-3xl column.

Section rhythm: hook → concept → interactive exploration → check → recap

Each concept section pairs a short explanation with a hands-on element beside/below it

Alternate restrained mint soft fills with white panels; one lime accent action per section.

Required

Each major section: data-lesson-section="..." + data-lesson-title

Interactive controls carry data-lesson-control (sliders, buttons, toggles)

At least one drawn visualization (canvas or inline SVG) wired to a control (change input → graphic updates). Prefer Chart.js only for standard charts.

Optional real-world <img go-data-src="/image?query=..."> only when a photograph teaches better than a diagram — never use /gen art as the teaching graphic.

A short knowledge check (2–3 questions) near the end — inline, no score dashboard

Primary actions are lime pills; supporting cards are flat with a light border-line.

Keep under ~45 KB; max-width 100% — no horizontal overflow.

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 duplicate trusted host title/progress/tutor/share controls inside the capsule

Do not imitate a generic documentation site with a white page, blue active link, and fixed rail

Do not tint the full lesson canvas or place the content inside nested background containers

Do not front-load a wall of text — interleave explanation and interaction

Do not require decorative hero images

Do not stretch sections to the full max-w-7xl shell or mix max-w-4xl/max-w-3xl/full-bleed — one max-w-3xl reading column for the whole lesson (capsule/postprocess.py coerces this)

Never touch window.parent, window.top, or localStorage