alan0x/skills/04-moxin-studio-ui-patterns
skills/04-moxin-studio-ui-patterns/SKILL.md
--- name: 04-moxin-studio-ui-patterns description: Makepad UI patterns in Moxin Studio: live_design layout, event handling, apply_over usage, shader-driven theming, and animation lifecycles. Use when editing UI or behavior. --- # Moxin 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.
development
Updated Apr 1, 2026
$ install --global
skillsauthnpx skillsauth add alan0x/moxin-tts skills/04-moxin-studio-ui-patternsInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 1, 2026, 10:57 PM57.5s4 files scanned
SKILL.md
- name:
- 04-moxin-studio-ui-patterns
- description:
- Makepad UI patterns in Moxin Studio: live_design layout, event handling, apply_over usage, shader-driven theming, and animation lifecycles. Use when editing UI or behavior.
Moxin 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
- Build layout in
live_design!using theme constants. - Implement
Widget::handle_eventand callself.view.handle_event. - Handle hover events before
Event::Actionsearly return. - Use
apply_overfor visibility and shader instance updates. - Use shader time or
Event::NextFramefor animations.
3. References
- references/ui-workflow.md
- references/hover-and-apply-over.md
- references/ui-edge-cases.md
Related Skills
alan0x/99-moxin-studio-evolution
development
VerifiedTrustedCommunity
Roadmap and refactor guidance for Moxin Studio, plus skill maintenance workflow. Use when planning large changes or updating the skill set.
SKILL.mdUpdated Apr 1, 2026
alan0x/skills/08-moxin-studio-reference
development
VerifiedTrustedCommunity
--- name: 08-moxin-studio-reference description: Troubleshooting and operational reference for Moxin Studio: common errors, Dora issues, Makepad pitfalls, and checklists. Use when debugging or validating fixes. --- # Moxin Studio Reference ## 1. Overview Use this skill to diagnose failures quickly. Follow the triage flow and jump to the relevant area. ## 2. Triage flow 1. Reproduce and capture logs. 2. Check dataflow status and dynamic node connections. 3. Verify preferences and env vars. 4
SKILL.mdUpdated Apr 1, 2026
alan0x/07-moxin-studio-deployment
development
VerifiedTrustedCommunity
Run and deploy Moxin Studio via Nix or manual builds, including dataflow startup and environment variables. Use when launching the app or preparing a dev environment.
SKILL.mdUpdated Apr 1, 2026
alan0x/06-moxin-studio-settings
development
VerifiedTrustedCommunity
Provider settings and user preferences in Moxin Studio. Use when editing provider UI, saving preferences, or wiring API keys and defaults.
SKILL.mdUpdated Apr 1, 2026