Follow Makepad patterns for event handling and runtime updates. Use apply_over for dynamic changes and keep hover handling before action extraction.
2. UI workflow
Build layout in live_design! using theme constants.
Implement Widget::handle_event and call self.view.handle_event.
Handle hover events before Event::Actions early return.
Use apply_over for visibility and shader instance updates.
Use shader time or Event::NextFrame for animations.
3. References
references/ui-workflow.md
references/hover-and-apply-over.md
references/ui-edge-cases.md
Converted and distributed by TomeVault — claim your Tome and manage your conversions.
1---2name: mofa-org-mofa-studio-04-mofa-studio-ui-patterns3description: MoFA Studio UI Patterns4---56# MoFA Studio UI Patterns78## 1. Overview9Follow Makepad patterns for event handling and runtime updates. Use `apply_over` for dynamic changes and keep hover handling before action extraction.1011## 2. UI workflow121. Build layout in `live_design!` using theme constants.132. Implement `Widget::handle_event` and call `self.view.handle_event`.143. Handle hover events before `Event::Actions` early return.154. Use `apply_over` for visibility and shader instance updates.165. Use shader time or `Event::NextFrame` for animations.1718## 3. References19- references/ui-workflow.md20- references/hover-and-apply-over.md21- references/ui-edge-cases.md2223---24> Converted and distributed by [TomeVault](https://tomevault.io/claim/mofa-org) — claim your Tome and manage your conversions.25<!-- tomevault:4.0:skill_md:2026-04-11 -->
Run npx skillmds@latest add tomevault-io/mofa-org-mofa-studio-04-mofa-studio-ui-patterns in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
MoFA Studio UI Patterns It is listed under Coding & Dev Tools on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.
tomevault-io