mofa-org/mofa-studio/04-mofa-studio-ui-patterns

Claude Code and agent skill by mofa-org/mofa-studio

Trust tier 3
  • community
Source check pending

Checking that the SKILL.md file is still in the repository.

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.

Install

npx vskill@latest install mofa-org/mofa-studio/04-mofa-studio-ui-patterns

SKILL.md

The same SKILL.md was published earlier as david-li0406/meta-skill-evloving/04-mofa-studio-ui-patterns.

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

Security

  • Security scanPassed, 90 of 100Pattern checks on the skill's files.
  • Model reviewPassed

See the full security report

Quality evaluation

  • Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

See evaluation results

Source

Popularity

7-day trend score
5

Not refreshed yet.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

  • Claude Code
  • Cursor
  • GitHub Copilot
  • Windsurf
  • Codex
  • Gemini CLI
  • Cline
  • Amp
  • Roo Code
  • Goose
  • Continue
  • Kilo Code
  • Junie
  • Trae
  • OpenHands
  • Qwen Code
  • AI Agent
  • Tabnine Chat
  • Sourcegraph Cody
  • Amazon Q
  • Firebase Genkit
  • Sweep
  • Devin
  • Phind
  • Mentat
  • Claude Desktop
  • Aider
  • GPT Pilot
  • Plandex
  • bolt.new
  • v0
  • Replit Agent
  • Anse
  • TypingMind
  • BetterChatGPT
  • LibreChat
  • Warp AI
  • Pieces
  • Fig AI
Embed badge
vskill VERIFIED badge
[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/mofa-org/mofa-studio/04-mofa-studio-ui-patterns/badge)](https://verified-skill.com/skills/mofa-org/mofa-studio/04-mofa-studio-ui-patterns)

Something wrong with this skill or its page? Tell us.