Makepad UI patterns in MoFA Studio: live_design layout, event handling, apply_over usage, shader-driven theming, and animation lifecycles. Use when editing UI or behavior.
Installs into .claude/skills of the current project.
Are you the author of 04 Mofa Studio Ui Patterns?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/david-li0406-04-mofa-studio-ui-patterns)
---
name: 04-mofa-studio-ui-patterns
description: Makepad UI patterns in MoFA Studio: live_design layout, event handling, apply_over usage, shader-driven theming, and animation lifecycles. Use when editing UI or behavior.
---
# MoFA Studio UI Patterns
## 1. Overview
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
1. Build layout in `live_design!` using theme constants.
2. Implement `Widget::handle_event` and call `self.view.handle_event`.
3. Handle hover events before `Event::Actions` early return.
4. Use `apply_over` for visibility and shader instance updates.
5. 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
