# 02 Mofa Studio App Development > Create or modify MoFA Studio apps, screens, and shell integration. Use when adding a new app, changing an existing app, or wiring app lifecycle (timers, dark mode, dataflow). Use when this capability is needed. - Skill: `tomevault-io/02-mofa-studio-app-development` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/02-mofa-studio-app-development` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/02-mofa-studio-app-development/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Integrations & APIs - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/02-mofa-studio-app-development --- # MoFA Studio App Development ## 1. Overview Build apps as self-contained crates under `apps/`. Use `MofaApp` for registration and keep shell coupling minimal. ## 2. New app workflow 1. Scaffold the app crate (copy mofa-fm or `cargo new`). 2. Implement `MofaApp` and export the screen type. 3. Create the screen with `live_design!` and `Widget` impl. 4. Register the app in the shell (Cargo features, `LiveRegister`, `LiveHook`). 5. Add the dashboard page and sidebar entry. 6. Add timer and dark mode hooks if needed. 7. Add dataflow wiring if the app uses Dora. ## 3. Existing app changes - Keep UI changes inside `apps//src/screen/*`. - Keep dataflow changes inside `apps//dataflow`. - Update shared widgets in `mofa-widgets` only when multiple apps need it. ## 4. References - references/app-workflow.md - references/shell-integration.md - references/app-edge-cases.md --- > Converted and distributed by [TomeVault](https://tomevault.io/claim/mofa-org) — claim your Tome and manage your conversions.