MoUI Tutorial Skeletons
These skeletons keep new examples aligned with the current package boundaries. They are intentionally short: copy the shape, then fill in package-local tests before expanding behavior.
Create A View
- Add the public constructor under
views/and return@moui.View[Msg]. - Put concrete reusable custom view behavior in
moui/views, then letviews/expose the app-facing constructor. Reuse existing state, style, binding, semantics, and layout types. - Add focused tests in the
moui/viewstests/smokepackage or a focused*_test.mbt. - Add a Showcase entry when the view is user-facing.
- Run
moon test moui/views --target nativeandmoon info.
Implement reusable built-in behavior as a concrete @core.ViewNode and wrap it
with @core.View::from_node. Do not re-export ViewNode from app-facing
facades or add @core.View::primitive_*_view, ViewLoweringSink, or runtime
lowering arms for a new control.
Create A Custom Layout
- Use
@views.custom_children_layoutfor the first version. - Read
CustomLayoutContext.child_sizes,child_baselines,child_alignment_guides,child_priorities,safe_area,viewport, andlayout_direction. - Store reusable measurements in
CustomLayoutContext.cache. - Use
CustomPlacementContext::mirror_xfor RTL-aware x placement. - Add tests in
moui/views(tests/smokeor a focused*_test.mbt) or core white-box tests when the runtime contract changes.
Create A Platform Service
- Add the typed request/response to
backendfirst. - Gate dispatch through
HostServiceCapabilities. - Add platform-local bridge constructors in the relevant backend package.
- Keep unavailable platforms explicit with
HostServiceBridge::unavailable. - Add host tests plus at least one backend scaffold test.
Change Text Behavior
- Read
docs/text-system.mdbefore changing measurement, shaping, glyph rasterization, embedded font registration, or startup text-engine options. - Keep
corelimited to the neutralTextSystemcontract and deterministic fallback. - Put native provider work under the relevant
moui_wgpu_renderer/*package and keep Web text changes aligned withbackend/web. - Add focused core, renderer, backend, or provider tests for the boundary you changed.
- Update
docs/text-system.md,docs/renderer-capability-report.md, and guidance files when the behavior or maintenance rules change.
Update Renderer Capability
- Add or update the
@core.DrawCommandintent. - Update renderer fallback planning in
render/capabilities.mbt. - Update native/Web renderer behavior or report the planned fallback.
- Update
docs/renderer-capability-report.md. - Run
moon test moui/render --target native,moon test moui_wgpu_renderer --target native, andmoon test moui_web_renderer --target wasm-gc.
Add A Showcase Entry
- Put shared behavior in
examples/showcase/app. - Add category metadata, preview, API notes, semantics notes, test coverage, and renderer notes.
- Prefer list-detail entries that demonstrate real controls over static copy.
- Run
moon test examples/showcase/app --target native.
Update Guidance
- Check
AGENTS.mdandskills/when docs placement, validation commands, package layout, example structure, renderer status, platform behavior, or text architecture changes. - Keep skill instructions short and operational.
- If guidance files do not need edits, mention that they were checked in the handoff.