القائمة
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).
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Hi-Tuto design system for all frontend/UI work in this repo. Use whenever creating or modifying React components, pages, styles, Tailwind classes, or the mascot in frontend/ — ensures the Thinkby-inspired look (flat vivid color panels, one-sided shadows, square mascot) stays consistent.
Author Hi Tuto HTML lesson capsules. Use when emitting final lesson HTML, choosing scroll vs Canvas Studio vs slide shell, wiring tutor hooks, or applying postprocess/CSP constraints.
Source-grounding rules — cite retrieved facts, never invent specifics, prefer source packs over web when a document is attached. Use when a lesson has source packs or research. (Body pending Deep Agents skills wiring.)
Core pedagogy for Hi Tuto lessons — one mechanism per lesson, prerequisite ordering, active recall. Use when scoping or sequencing lesson content. (Body pending Deep Agents skills wiring.)
Data-synthesis guidance — generating plausible datasets for visualizations or simulations when no source data exists. Use during asset_plan for data-driven capsules. (Body pending Deep Agents skills wiring.)
Generate PBR meshes (Hunyuan 3D Pro) for Canvas Studio chapters only. Use when presentation is studio and subjects need realistic 3D. Studio chrome lives in ui-studio-style — this skill owns mesh generation only.
| 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). |
Build a scrollable interactive mini-app, not a slide deck and not the Canvas Studio shell.
lesson_system.md (bg-paper, cobalt, grass)data-lesson-section="..." + data-lesson-titledata-lesson-control (sliders, buttons, toggles)<img go-data-src=...> illustrative imageui-studio-style) unless the plan sets needs_3dui-slide-deck owns that)window.parent, window.top, or localStorage