Matlab Build App
MathWorksOfficialCreated by MathWorks
- Skill
- Workflow
- Software development
- BSD-2-Clause
- No issues found
AutoGineer summary
Written by AutoGineer from the skill’s own files, not by the author
This skill provides a structured approach to developing MATLAB applications, guiding users from initial requirements to a fully implemented codebase. It helps determine the optimal architecture (UIFigure or UIHTML) and layout archetype (e.g., Dashboard, Explorer, Wizard) based on the user's specific needs, team expertise, and maintenance requirements. The skill enforces a rigorous planning phase, requiring an implementation plan before any code is written, and supports multiple serialization formats for UIFigure apps, including App Designer (.mlapp) and plain-text (.m + .xml) formats.
What it does
- Conducts discovery to identify app purpose, maintenance needs, and visual requirements.
- Recommends the best architecture (UIFigure or UIHTML) and layout archetype.
- Produces a detailed implementation plan and writes it to a markdown file.
- Supports building UIFigure apps with optional App Designer serialization.
- Ensures structural integrity by enforcing grid-based layouts and proper background task handling.
- Provides a clear, step-by-step build sequence based on internal documentation.
When to use it
- When you need to build a new MATLAB GUI or interactive tool.
- When you are unsure whether to use UIFigure or UIHTML for a specific project.
- When you need to define a clear development plan for a complex MATLAB application.
- When you want to create an App Designer app using either binary or plain-text formats.
Advantages
- Ensures consistent, maintainable application architecture.
- Prevents common pitfalls by enforcing proven layout and background task patterns.
- Provides clear guidance on choosing between App Designer and programmatic approaches.
- Facilitates collaboration by requiring a documented implementation plan before coding.
Usage examples
- “I need to build a MATLAB dashboard to monitor sensor data. What approach should I take?”
- The agent will ask discovery questions about the app's lifespan, team skills, and visual needs, then recommend an architecture and layout archetype before creating a plan.
- “Build me a UIHTML app for visualizing experimental results.”
- The agent will skip the architecture recommendation, ask for any missing requirements, and proceed to generate an implementation plan for a UIHTML-based app.
Install
5 of its files are not mirrored here, so install it from its source:
https://github.com/matlab/matlab-agentic-toolkit/tree/2a7f215e965597acf6ed495beb9e7b8aff45a3be/skills-catalog/matlab-app-building/matlab-build-app
Documentation by MathWorks
MATLAB Build App
Determine the best architecture for a MATLAB application, produce an implementation plan grounded in internal references, and execute the build. For UIFigure apps, optionally serialize into an App Designer format.
When to Use This Skill
Use this skill when:
User wants to build a MATLAB app, GUI, or interactive tool
User asks "how should I build this app?" or "which approach should I use?"
User describes an application — with or without specifying an implementation path
User mentions: MATLAB app, GUI, uifigure, uihtml, interactive tool, dashboard, visualization app, App Designer, .mlapp, plain-text app
User describes spatial layout needs: dashboard, control panel, sidebar, tabs, wizard, stepper, canvas, workspace
User has already chosen a path (e.g., "build me a uihtml app") — handle directly
When Not to Use
The request is purely about MATLAB computation with no UI component
The user is asking about an existing app they want to modify → read
references/editing-guide.mdThe user wants to convert between App Designer formats (e.g., .mlapp to plain-text or vice versa) → tell them to use File > Save As in App Designer. Do NOT attempt the conversion programmatically.
Critical Rules
MUST ask discovery questions before recommending a path — unless the user already specified one
MUST confirm the path choice with the user before producing the implementation plan
MUST produce an implementation plan grounded in internal references before writing any code
MUST write the plan to a file (
<app-name>-plan.md) in the working directoryNEVER recommend a path without understanding the user's constraints (unless path was pre-specified)
NEVER apply dark mode, custom colors, or visual themes unless the user explicitly requests them
ALWAYS present the recommendation as guidance, not a mandate — the user decides
MUST choose archetype based on the user's primary task, not aesthetics
NEVER treat two archetypes as equals within one app — one is always the primary container
UIFigure app: MUST use
uigridlayoutfor all structural layout — neverPosition-based sizingUIHTML/web app: MUST use CSS Grid or Flexbox for chrome — no absolute positioning for structural panels
The chrome (header, sidebar, tabs, step indicator) MUST remain spatially stable
Background execution (any operation taking more than ~1 second) requires a class-structured app and MUST be read up first in
references/background-tasks.md— do NOT hand-writeparfeval/backgroundPool/DataQueueplumbing from memory. For an App Designer app (.mlappor plain text) you MUST use theaddBackgroundTaskverb and NEVER hand-roll the infrastructure or reuse the standalone-programmatic manual wiring. For a standalone programmatic app, use the MVVM structure per that doc. A flat nested-function app that needs background work MUST escalate to one of these.App Designer serialization: MUST read
references/app-designer/agent-guide-shared.md(covers ownership models, editing discipline, property rules, quoting) plus the format-specific guide (agent-guide-mlapp.mdoragent-guide-plaintext.md) before building. Those docs are the single source of truth; do not attempt to edit app files without reading them first.
Workflow
User request arrives
│
├── Path NOT specified → Full Discovery
│ │
│ ▼
│ Ask Q1-Q4 (purpose, lifespan, polish, team skills)
│ │
│ ▼
│ Identify layout archetype
│ │
│ ▼
│ Recommend UIFigure vs UIHTML based on Q1-Q4
│ │
│ ▼
│ *** STOP: Present recommendation and WAIT for user confirmation ***
│ (Do NOT produce a plan or read references until user says yes)
│ │
│ ▼
│ Ask Q5 (FINAL): Serialization format? (UIFigure apps only)
│ │
│ ├── App Designer → release check, present format choice,
│ │ continue with UIFigure references + add serialization step
│ │
│ └── Standalone programmatic → no extra step
│ │
│ ▼
│ Produce Implementation Plan → write to <app-name>-plan.md
│ │
│ ▼
│ User reviews plan → confirms or adjusts
│ │
│ ▼
│ Begin building (read references per the plan)
│
└── Path IS specified
│
├── Serialization explicit (e.g., ".mlapp app", "plain-text app")
│ → Skip Q5, proceed with stated format
│ → Ask only missing requirements + archetype if unclear
│ → Produce Implementation Plan
│
├── Architecture explicit but serialization not stated
│ (e.g., "build me a uifigure app")
│ → Still ask Q5 (serialization) before planning
│ → Ask missing requirements + archetype if unclear
│ → Produce Implementation Plan
│
└── UIHTML or standalone programmatic explicit
→ Skip Q5 entirely (not applicable)
→ Ask missing requirements + archetype if unclear
→ Produce Implementation PlanDiscovery Questions
Ask these conversationally — not as a rigid checklist. Gather requirements and layout intent first; ask the serialization question last, once you understand what the app needs to do.
Core Questions
1. What does the app do and who is it for?
What will this app do? Who will use it?
Listen for archetype signals: "dashboard", "control panel", "step-by-step", "workspace".
2. Is this a quick tool or something you'll maintain over time?
Is this meant to be maintained and evolved, or is it more of a quick, proof-of-concept tool?
Maintained → proceed to remaining questions; team skills matter
Ephemeral → favor UIHTML app path; can skip team question
3. How polished does the UI need to look?
Are standard MATLAB buttons, sliders, tables, and plots enough? Or do you need custom visuals — branded, animated, or visually richer?
Standard controls sufficient → UIFigure app signal
Custom visuals needed → UIHTML app signal
4. Who will work on this app going forward?
Will this be maintained by people comfortable only with MATLAB, or by people also comfortable with web technologies?
Only ask for maintained apps.
MATLAB-only team → UIFigure app
Web-comfortable team → UIHTML app
5. (FINAL) How should this app be saved?
Do you want this app to open and edit inside App Designer, or do you prefer a standalone programmatic file (no App Designer dependency)?
This is a serialization question, not an architecture question. The app's structure (components, layout, callbacks) is designed using UIFigure knowledge regardless of the answer. Q5 only determines how that design is persisted to disk.
App Designer →
.mlappor plain-text.m+.xml. Check release (plain-text needs R2026b+). If Q3 indicated custom visuals, note that App Designer constrains visual customization vs UIHTML and confirm.Standalone programmatic → programmatic
.mcode, no App Designer dependency. MVVM may warrant multiple files; that is decided at build time.
Follow-up Probes (only if path isn't clear)
Interaction style: Real-time feedback needed? → slight UIFigure lean
Existing work: Existing MATLAB UI code? → UIFigure. Existing web assets? → UIHTML
Distribution: May need to work outside MATLAB? → UIHTML
Long computations: Will any operation take more than a second? → use a background task (read
references/background-tasks.md). Note this requires a class-structured app: App Designer serialization, or MVVM if standalone programmatic. Heavy, long, or one-shot work is ALWAYS a background task, never a timer; a timer fits only scheduled, cheap-per-tick work that must update the UI on the main thread (readreferences/timers.md).
Path Decision Logic
Two stages: first determine architecture (Q1-Q4), then determine serialization format (Q5).
Stage A — Architecture (from Q1-Q4):
Ephemeral app? → Strong default to UIHTML app
Maintained app? → Weigh signals:
Strong UIFigure signals:
✓ Maintained + MATLAB-only team
✓ Standard UI components sufficient
✓ Tight real-time interaction
✓ Existing MATLAB UI code
Strong UIHTML signals:
✓ Ephemeral (regardless of team)
✓ Maintained + web-skilled team
✓ Custom visuals, branded look, animations
✓ Existing web assets
✓ Future portability outside MATLAB
UIFigure + uihtml accent:
Mostly standard app but needs one custom visualization panel.
Stage B — Serialization format (Q5, UIFigure apps only):
Q5 = Standalone → programmatic code (no App Designer). Done.
Q5 = App Designer → adds a serialization layer ON TOP of Stage A.
UIFigure references still apply in full. Serialization is IN ADDITION TO,
not instead of, the normal UIFigure build.
→ Check release, present format choice (plain text vs .mlapp).
→ If Stage A indicated UIHTML for custom visuals, surface the trade-off:
App Designer constrains custom visuals — confirm before committing.Weighting: 1. Architecture (Q1-Q4) 2. Serialization (Q5, applies only to UIFigure)
Paths at a Glance
| Architecture | Key strength |
|---|---|
| UIFigure app | Single language, any MATLAB dev can maintain |
| UIHTML app | Full visual control, rich interactivity |
| UIFigure + accent | Best of both when you need one custom visual |
For UIFigure apps, three serialization formats:
| Format | Trade-off |
|---|---|
Programmatic .m | Standalone, no App Designer dependency |
App Designer .mlapp | Binary, works on any release, opens in App Designer |
App Designer plain text .m + .xml | Source-controllable, AI-editable, R2026b+ |
Layout Archetype
Pick based on the user's primary task:
| Archetype | Primary user task | Structure |
|---|---|---|
| Dashboard | Monitor and compare at a glance | KPI cards + charts + table; read-only |
| Explorer | Adjust parameters, observe live results | Sidebar controls + live display |
| Tabbed | Navigate between independent sections | Tab bar + content panels |
| Wizard | Complete a sequential workflow | Step indicator + one-step-at-a-time |
| Canvas | Create, inspect, or edit spatial artifacts | Central workspace + tools |
If unclear, ask: "Will users mostly be watching results (Dashboard), tweaking controls (Explorer), switching sections (Tabbed), going through steps (Wizard), or working on a central figure (Canvas)?"
Implementation Plan
After confirming path and archetype, produce a plan and write it to <app-name>-plan.md in the working directory. Present a concise summary inline with the approval request.
Plan Template
**Implementation Plan: [App Name]**
**Architecture:** [UIFigure app / UIHTML app / UIFigure + accent]
**Serialization:** [Programmatic .m / App Designer .mlapp / App Designer plain text]
**Layout:** [Archetype] — [one sentence describing spatial structure]
**Structure:**
- [Major panel/area — spatial description]
- [e.g., "Left sidebar (220px) with date range picker, category filter, refresh button"]
- [e.g., "Main area with line chart showing filtered results"]
**Key behaviors:**
- [User-visible interaction effects]
**Internal references that will be used:**
| Reference | Role in this app |
|-----------|-----------------|
| `references/path/file.md` | [what it provides] |
| ... | ... |
**External skills:**
- `matlab-build-chart` — [role, if applicable]
- `matlab-apply-theme` — [role, if applicable]
**File organization:**
[app directory tree]
**Implementation sequence:**
1. [First reference read] — [what it establishes]
2. [Next reference] — [what it adds]
3. [...]Each reference pointer carries provenance: [src: references/uifigure/grid-layout.md §Spanning]
Plan Quality Checks
Before presenting:
[ ] Every reference listed has a concrete role
[ ] Structure uses spatial terms the user can visualize
[ ] Behaviors describe user-visible effects
[ ] Implementation sequence shows a logical build order
[ ] Plan is specific enough for "yes, that's what I want" or "change X"
Reference Router
After plan approval, read the relevant internal references to execute the build.
UIFigure Path
| When building... | Read |
|---|---|
| Grid layout, sizing, components | references/uifigure/guide.md |
| Grid details (spanning, collapse) | references/uifigure/grid-layout.md |
| Panels, tab groups, nested grids | references/uifigure/containers.md |
| Component reference (controls, display) | references/uifigure/components.md |
| Callback patterns, data sharing | references/uifigure/callbacks.md |
| Layout recipes (sidebar, form, split) | references/uifigure/layout-patterns.md |
| MVVM architecture (complex apps) | references/uifigure/mvvm-guide.md |
| View binding patterns | references/uifigure/mvvm-view-binding.md |
| ViewModel testing | references/uifigure/mvvm-testing.md |
| Background execution — concepts + routing (read first) | references/background-tasks.md |
| Background execution — standalone programmatic (MVVM) wiring | references/uifigure/mvvm-background-tasks.md |
| Timers — periodic main-thread work (NOT for offloading heavy work) | references/timers.md |
UIHTML Path
| When building... | Read |
|---|---|
| MATLAB-JS bridge, setup(), events | references/uihtml/bridge-guide.md |
| Communication patterns (4 patterns) | references/uihtml/communication-patterns.md |
| Data type conversion | references/uihtml/data-types.md |
| Platform constraints | references/uihtml/platform-limitations.md |
| uihtml creation, hybrid layouts | references/uihtml/setup.md |
| Error handling (both sides) | references/uihtml/error-handling.md |
| JS MVVM architecture | references/uihtml/mvvm-guide.md |
| Observable/Computed classes | references/uihtml/mvvm-observable-classes.md |
| JS View binding | references/uihtml/mvvm-view-binding.md |
| JS coding patterns, modules | references/uihtml/js-coding-guide.md |
| JS testing & debugging | references/uihtml/js-testing-debugging.md |
| Chart.js setup & patterns | references/uihtml/charting-guide.md |
| Chart type selection | references/uihtml/chart-type-selection.md |
| Chart.js initialization | references/uihtml/chartjs-setup.md |
| Line & bar charts | references/uihtml/line-bar-charts.md |
| Doughnut & scatter charts | references/uihtml/doughnut-scatter-charts.md |
| Chart data updates | references/uihtml/chart-updates.md |
| Chart ↔ bridge integration | references/uihtml/chart-bridge-integration.md |
| Chart performance | references/uihtml/chart-performance.md |
| CSS styling & tokens | references/uihtml/styling-guide.md |
| Component CSS (buttons, inputs) | references/uihtml/component-styles.md |
| CSS layout patterns | references/uihtml/css-layout-patterns.md |
| Brand design tokens | references/uihtml/brand-design-tokens.md |
| Dark mode | references/uihtml/dark-mode.md |
| External color schemes | references/uihtml/external-color-schemes.md |
App Designer Serialization (UIFigure apps only)
Important: App Designer serialization is an additional step AFTER the normal UIFigure build. You MUST also read the UIFigure path references above (components, grid-layout, callbacks, containers, layout-patterns) to design the app's structure. The serialization references below cover only how to persist that design to disk.
Both formats use the same AppDesignerAgentInterface API via the bundled scripts/ tool; only the file extension passed to create()/open() differs.
Read first (both formats):
| When building... | Read |
|---|---|
Verbs, build sequence, editing, save()/validate()/finalize(), inspect() | references/app-designer/agent-guide-shared.md |
| Background execution — concepts + routing (read first) | references/background-tasks.md |
Background execution — addBackgroundTask verb reference | references/app-designer/background-tasks.md |
Plain-text (.m + .xml):
| When building... | Read |
|---|---|
Ownership model, .xml authoring, flow, gotchas | references/app-designer/agent-guide-plaintext.md |
| classdef structure & block ordering rules | references/app-designer/plaintext/classdef-template.md |
| XML structure and which properties to set | references/app-designer/plaintext/xml-template.md |
| Per-component property names, types, defaults | references/app-designer/plaintext/property-reference.md |
| Authoritative XML schema | references/app-designer/plaintext/matlabAppSchema.xsd |
Binary .mlapp:
| When building... | Read |
|---|---|
Build flow, native property values, save()/finalize() | references/app-designer/agent-guide-mlapp.md |
Editing an Existing App
| When editing... | Read |
|---|---|
| Any existing app (determines format, routes to approach) | references/editing-guide.md |
Archetype References
| Archetype | File |
|---|---|
| Dashboard | references/archetypes/dashboard.md |
| Explorer | references/archetypes/explorer.md |
| Tabbed | references/archetypes/tabbed.md |
| Wizard | references/archetypes/wizard.md |
| Canvas | references/archetypes/canvas.md |
External Skills (invoked, not read)
matlab-build-chart— when the app includes MATLAB plots (UIFigure path or UIFigure+accent)matlab-apply-theme— when the app needs dark mode, brand colors, or custom palettes (UIFigure path)
After Plan Approval
All UIFigure apps (regardless of serialization format)
Read the archetype reference for the spatial skeleton
If MVVM warranted (Explorer, Wizard, Canvas, or complex apps): read the architecture reference
Read the UIFigure guide to establish layout (grid, components, containers)
Layer in path-specific references per the implementation sequence
For visual polish: invoke
matlab-apply-theme(UIFigure) or read styling references (UIHTML accent)For charts: invoke
matlab-build-chart(UIFigure) or read charting references (UIHTML accent)If App Designer serialization: read the app-designer reference docs (shared guide + format-specific guide), then use the
AppDesignerAgentInterfaceAPI to persist the app. The docs contain the complete build flow, property rules, and editing discipline.
UIHTML path
Read the archetype reference for the spatial skeleton
If MVVM warranted: read the JS MVVM architecture reference
Read the bridge guide to establish the MATLAB-JS connection
Layer in path-specific references per the implementation sequence
For visual polish: read styling/CSS references
For charts: read charting references
Format Fallback
If the plain text path produces errors that cannot be resolved (e.g., version mismatch, unsupported component), fall back to the .mlapp path — the same verbs drive both formats; re-create the handle with a .mlapp extension. Only fall back to fully programmatic UIFigure code as a last resort.
Recommendation Template
Recommended architecture: [UIFigure app / UIHTML app / UIFigure + accent]
Based on what you've described:
[Key signal 1]
[Key signal 2]
[Key signal 3, if applicable]
What this means: [1-2 sentences on development experience]
Trade-off: [Main thing they'd give up vs the other path]
Serialization (if App Designer): I'd recommend [.mlapp / plain text] because [reason]. This doesn't change the app's structure, just how it's saved.
Want to proceed with this approach, or would you prefer the other path?
Copyright 2026 The MathWorks, Inc.
Files
- ATTRIBUTION.mdAdded by AutoGineer1.0 KiB
- LICENSELicence file added by AutoGineer1.4 KiB
- SKILL.md20.9 KiB
- assets/colors_and_type.css12.8 KiB
- assets/minimal-bridge.html1.3 KiB
- assets/minimal-bridge.m1.2 KiB
- assets/standalone-chart-template.html11.5 KiB
- manifest.yaml672 B
- references/app-designer/agent-guide-mlapp.md15.7 KiB
- references/app-designer/agent-guide-plaintext.md14.7 KiB
- references/app-designer/agent-guide-shared.md27.1 KiB
- references/app-designer/background-tasks.md4.8 KiB
- references/app-designer/plaintext/classdef-template.md11.3 KiB
- references/app-designer/plaintext/matlabAppSchema.xsd16.8 KiB
- references/app-designer/plaintext/property-reference.md45.1 KiB
- references/app-designer/plaintext/xml-template.md12.3 KiB
- references/archetypes/canvas.md8.0 KiB
- references/archetypes/dashboard.md6.4 KiB
- references/archetypes/explorer.md5.7 KiB
- references/archetypes/tabbed.md6.6 KiB
- references/archetypes/wizard.md9.7 KiB
- references/background-tasks.md6.9 KiB
- references/editing-guide.md3.3 KiB
- references/timers.md2.1 KiB
- references/uifigure/callbacks.md3.0 KiB
- references/uifigure/components.md1.7 KiB
- references/uifigure/containers.md1.3 KiB
- references/uifigure/grid-layout.md4.9 KiB
- references/uifigure/guide.md5.3 KiB
- references/uifigure/layout-patterns.md1.5 KiB
- references/uifigure/mvvm-background-tasks.md3.9 KiB
- references/uifigure/mvvm-guide.md11.1 KiB
- references/uifigure/mvvm-testing.md2.8 KiB
- references/uifigure/mvvm-view-binding.md5.4 KiB
- references/uihtml/brand-design-tokens.md5.6 KiB
- references/uihtml/bridge-guide.md7.0 KiB
- references/uihtml/chart-bridge-integration.md7.5 KiB
- references/uihtml/chart-performance.md5.0 KiB
- references/uihtml/chart-type-selection.md3.1 KiB
- references/uihtml/chart-updates.md4.7 KiB
- references/uihtml/charting-guide.md3.9 KiB
- references/uihtml/chartjs-setup.md4.0 KiB
- references/uihtml/communication-patterns.md4.2 KiB
- references/uihtml/component-styles.md4.3 KiB
- references/uihtml/css-layout-patterns.md5.0 KiB
- references/uihtml/dark-mode.md3.8 KiB
- references/uihtml/data-types.md2.7 KiB
- references/uihtml/doughnut-scatter-charts.md6.0 KiB
- references/uihtml/error-handling.md4.6 KiB
- references/uihtml/external-color-schemes.md2.6 KiB
- references/uihtml/js-coding-guide.md11.2 KiB
- references/uihtml/js-testing-debugging.md2.9 KiB
- references/uihtml/line-bar-charts.md5.2 KiB
- references/uihtml/mvvm-guide.md11.0 KiB
- references/uihtml/mvvm-observable-classes.md2.9 KiB
- references/uihtml/mvvm-view-binding.md5.3 KiB
- references/uihtml/platform-limitations.md2.5 KiB
- references/uihtml/setup.md3.9 KiB
- references/uihtml/styling-guide.md8.1 KiB
- scripts/+module/+backgroundtask/BackgroundTaskModule.p(opens on GitHub)Not mirrored: opens on GitHub2.5 KiB
- scripts/+module/+backgroundtask/templates/cancelBackground.m357 B
- scripts/+module/+backgroundtask/templates/handleBackgroundComplete.m1.4 KiB
- scripts/+module/+backgroundtask/templates/safeProgress.m734 B
- scripts/+module/+backgroundtask/templates/startBackground.m1.2 KiB
- scripts/+module/AppBuilderModule.p(opens on GitHub)Not mirrored: opens on GitHub242 B
- scripts/AppDesignerAgentInterface.p(opens on GitHub)Not mirrored: opens on GitHub12.6 KiB
- scripts/MlappBackend.p(opens on GitHub)Not mirrored: opens on GitHub9.4 KiB
- scripts/PlainTextBackend.p(opens on GitHub)Not mirrored: opens on GitHub10.2 KiB
references/app-designer/agent-guide-plaintext.md
AppDesignerAgentInterface: Plain-text (.m + .xml) Guide
Read agent-guide-shared.md first. This file covers what is specific to plain-text
apps. Plaintext behaves differently from mlapp — do not carry over mlapp habits.
Ownership model: YOU own the .xml, the tool owns the .m
A plain-text app is two files with a split of ownership:
| Concern | Owner | How |
|---|---|---|
| Component tree: types, properties, layout, nesting, and callback wiring | YOU (the agent) | hand-edit the .xml on disk directly |
Code: callback bodies, custom properties, methods, ClassName, StartupFcn body | the tool | code verbs -> in-memory model |
the .xml file | YOU | tool writes a boilerplate ONCE (at create, only if absent); NEVER regenerates it |
the .m file | the tool | regenerated at save() from (your .xml tree) + (the model's code) |
Consequence: component verbs are disabled for plaintext. Calling
addComponent / setProperty / removeComponent / moveComponent / addCallback
on a plaintext model HARD-ERRORS with AppDesignerAgentInterface:plaintextComponentsInXml. To
add/remove/reconfigure a component or wire a callback, edit the .xml. Use the
code verbs (setCallbackCode, addProperty, addMethod) for the .m.
Why: save() re-reads the .xml as the live source of truth for components every
time. A component verb would mutate an in-memory tree that save() discards — so it
fails loudly instead of silently no-op'ing.
The flow (important — differs from mlapp)
You cannot create() then open(): create() writes only the .xml; the .m
does not exist until save(), and open() requires the .m. Keep the handle
from create() and drive the whole session on it:
% 1. create(): seeds a boilerplate <ClassName>.xml (only if none exists),
% returns an in-memory handle. Does NOT write the .m.
appBuilder = AppDesignerAgentInterface.create("C:/path/MyApp.m");
% 2. Hand-author the component tree in C:/path/MyApp.xml on disk
% (see XML format below). This is where components live.
% 3. Code side via verbs on the SAME handle (tool-owned .m):
appBuilder.setCallbackCode("startupFcn", "app.UIFigure.Name = ""Ready"";");
appBuilder.setCallbackCode("onGo", "app.UIFigure.Color = [0.2 0.6 0.9];");
appBuilder.addProperty("ClickCount", 0, "private");
appBuilder.addMethod("reset", strjoin([ ...
"function reset(app)" ...
" app.ClickCount = 0;" ...
"end" ], newline), "private");
% 4. save(): re-reads the .xml, merges the code, regenerates ONLY the .m,
% gates on the real product loader. NEVER rewrites the .xml.
appBuilder.save();To edit an existing plaintext app later, open("C:/path/MyApp.m") (both .m and
.xml must exist) and use code verbs; edit the .xml on disk for component changes.
Editing timing: the model is a snapshot, the .xml is re-read at save
open()/create() snapshot the code side into the in-memory model. The
component side lives only in the .xml, which save() re-reads fresh from disk.
So the two sides update at different times, and the order that is always safe is:
open()(or keep thecreate()handle).Edit the
.xmlon disk for any component change.Apply code verbs on the handle for
.mchanges.save()— it reads your latest.xmlfrom disk and merges the model code.
You do NOT need to re-open after editing the .xml; save() reads the file, not a
cached copy. inspect(), however, reflects the model as loaded — it will not show
.xml edits you made after open(). Trust the file on disk for components, and
inspect() for code.
Match the existing layout manager before adding a component
Before adding a component to an existing app, look at how the parent lays out its
children in the .xml. If the parent's children carry <Layout> blocks (a
GridLayout parent), your new child needs a <Layout> with <Column>/<Row> too —
a bare <Position> will not place correctly under a grid. If children use
<Position> (absolute), match that. Do not mix the two under one parent.
The .xml format
create() seeds this boilerplate at <ClassName>.xml, co-located with the .m:
<?xml version='1.0' encoding='UTF-8' standalone='yes'?>
<MATLABApp schemaVersion='1.0.0' release='R2026b.0' minRelease='R2026b'>
<UIFigure name='UIFigure'>
</UIFigure>
<AppDetails>
<Name>MyApp</Name>
<Version>1.0</Version>
</AppDetails>
<InternalData>
<AppId>...</AppId>
</InternalData>
<Thumbnail autoCapture='true'></Thumbnail>
</MATLABApp>You fill in the tree. A figure with one wired button:
<UIFigure name='UIFigure'>
<Name>'Mini App'</Name>
<Position>[100 100 300 200]</Position>
<Children>
<Button name='GoButton'>
<Position>[100 80 100 40]</Position>
<Text>'Go'</Text>
<ButtonPushedFcn>onGo</ButtonPushedFcn>
</Button>
</Children>
</UIFigure>
<AppDetails> ... </AppDetails>
<InternalData> ... </InternalData>
<RunConfiguration>
<StartupFcn>startupFcn</StartupFcn>
</RunConfiguration>
<Thumbnail autoCapture='true'></Thumbnail>XML rules (get these right or the parse/load fails)
Each component is an element named after its type, with a
nameattribute = its codeName:<Button name='GoButton'>. Nest children inside<Children>.Property values are parsed as NATIVE MATLAB literals — this is the big one:
string: single-quoted —
<Text>'Go'</Text>,<Name>'Mini App'</Name>. A bare<Text>Go</Text>throwsPlainTextBackend:unparseableValue.numeric vector / scalar: bare or bracketed —
<Position>[100 80 100 40]</Position>,<FontSize>14</FontSize>.cell array:
{...}.logical:
true/false.escape a literal
'inside a quoted string by doubling it ('').
Callback-wiring tags are the exception — they are bare (a function name, not a parsed value):
<ButtonPushedFcn>onGo</ButtonPushedFcn>. Wiring tags are detected by name (the*Fcnevent names). Only the wiring lives in the.xml; the body is a code verb (setCallbackCode).Handle-typed properties (component -> component references) use the referenced component's codeName as a quoted string literal, same as any other string value. The canonical example is attaching a
<ContextMenu>(declared as a child of the figure) to another component:<UIFigure name='UIFigure'> <Children> <ContextMenu name='MyCtx'> <Children> <Menu name='Item1'><Text>'Item 1'</Text></Menu> </Children> </ContextMenu> <Button name='MyBtn'> <Text>'Right-click me'</Text> <ContextMenu>'MyCtx'</ContextMenu> </Button> </Children> </UIFigure>The quotes are non-negotiable — the value goes through the same
PlainTextBackend:unparseableValuegate as any other string. A bare<ContextMenu>MyCtx</ContextMenu>fails the parse; the product loader resolves the quoted codename to the live component handle at load time.StartupFcnis NOT a figure property — put it under<RunConfiguration>, not as a<UIFigure>child. A<StartupFcn>under the figure becomes a bad constructor arg and fails to load.Layout (for grid children only): a
<Layout>block with<Column>before<Row>.<Layout>is valid only when the component's parent is aGridLayout. The top-level container (the direct child ofUIFigure) must have no<Layout>. A stray<Layout>on a non-grid child loads without error but renders a blank canvas.The root is always
<UIFigure name='UIFigure'>.NEVER change
<AppId>.create()seeds a uniqueAppIdunder<InternalData>. It is the app's stable identity — leave it exactly as seeded. Do not regenerate, edit, blank, or copy it from another app. Editing it can break the product's caching/identity tracking. When you hand-author or edit the.xml, preserve the<InternalData>/<AppId>block verbatim.
The property/type/event names are the same product-validated set as mlapp — see the type list and event examples in the shared guide.
validate() — the dry-run you should use before/instead of guessing
For plaintext, save() has an unavoidable side effect (it writes the .m), so a
side-effect-free check is genuinely useful. validate():
re-reads your
.xml, merges the model code, runs the cross-file (Layer-3) reconcile in report mode,returns a struct array of
{code, message}(empty = coherent), throws nothing, writes nothing.
The one real cross-file drift it catches: a callback wired in the .xml with no
body in the model (AppDesignerAgentInterface:missingCallbackBody) — a silently broken app
you cannot see by eye. It also flags orphan bodies (a setCallbackCode for a
callback nothing wires) as advisory. Run validate() after authoring the .xml and
setting bodies, before save().
save() for plaintext: write-then-gate, and it NEVER writes the .xml
Re-read your
.xml(live component truth) and merge with the model's code.Layer-3 reconcile (throws
AppDesignerAgentInterface:missingCallbackBodyon wired-but-bodyless).Regenerate only the
.mand write it to the real path.Run the real product loader on the
.m+ your.xml. On failure, the files are left on disk (they are human-readable and recoverable) and the loader errors are thrown — open the files, fix the drift, save again.
The .xml is byte-identical before and after save(). The tool never edits a
file you authored. If a component is wrong, that is a .xml edit you make, not
something the tool will "reconcile" for you.
finalize(): canonicalize the .xml and open it for viewing
finalize() works for plaintext too — same verb, same contract as mlapp (launch App
Designer, save through the product, leave the app open for the user to view with its
theme rendered). What the save accomplishes differs by format:
mlapp bakes the runnable classdef (there is a stub to fill in).
plaintext has no stub to bake — the product regenerates the runnable class on load, so the
.mis left unchanged. The save instead canonicalizes the.xmlinto App Designer's exact form: it drops default-valued properties (e.g. a<Value>0</Value>that equals the default disappears) and normalizes element order, so an agent-authored app matches what a human's AD session would produce. It also gates on the product's real loader, sofinalize()doubles as an early surface for any load issue in the files you wrote.
AppDesignerAgentInterface.finalize("C:/path/MyApp.m"); % default 60s deadline
AppDesignerAgentInterface.finalize("C:/path/MyApp.m", 120); % raise deadlineThe
<AppId>is preserved through the canonicalizing save — the product does not touch it (consistent with rule 7).Cost: ~3-5s warm, up to ~16s on a cold AD launch.
Requires a live App Designer / connector session (the save routes through AD's JS code engine). Works headless (no
-desktopneeded).Only needed when you want the app viewed (theme rendered) or the
.xmlcanonicalized. If you are going to keep editing viaAppDesignerAgentInterface, you do not need to finalize between edits —save()alone keeps the files loadable.
Close-then-open: finalize releases the file from AD first
Like mlapp, finalize() runs the posture-A guard before it opens: if App Designer
is already holding this file, it closes the clean copy first, then opens it
fresh. If AD holds the file with unsaved edits, finalize() rejects (never
discards your work) — save or close it in App Designer, then retry. This close-then-open
sequence is why finalize is safe to call on an app you may already have open in AD, as
long as it has no unsaved changes.
finalize deadline / wedge behavior (know this)
App Designer can wedge (e.g. a modal dialog if a file changed under it), and the
open/save waits have no built-in timeout. finalize runs under a hard-deadline
watchdog: if the open wait exceeds the deadline it aborts and throws
AppDesignerAgentInterface:finalizeTimeout without closing anything — recover manually
(close App Designer / the stuck app, then retry, or raise deadlineSeconds). A
save-side wedge is rare (save on an already-open, ready app is fast) and is
intentionally NOT force-closed either.
Editing after finalize() — free the file first (avoid the reload wedge)
finalize() leaves the app open in App Designer. AD is now holding the file. If
you edit that file on disk while AD holds it, AD detects the out-of-band change and
raises a modal "reload?" dialog that wedges the client. So before any post-finalize
edit, release the file from AD first. Which verb depends on what you are editing:
Editing components (the
.xml) → callAppDesignerAgentInterface.release("C:/path/MyApp.m")first. There is nothing to snapshot (save()re-reads the.xmlfresh), so you just need the file freed. Then hand-edit the.xml,save(), andfinalize()again to re-preview.Editing code (callbacks / properties / methods) → call
AppDesignerAgentInterface.open("C:/path/MyApp.m")first.open()both releases AD and snapshots the existing.minto the model so your code verbs edit real content instead of an empty model. Then apply code verbs,save(),finalize()again.
Both release() and open() run the same posture-A guard: a clean open copy is
closed (disk holds the truth); an open copy with unsaved edits is rejected
(AppDesignerAgentInterface:appOpenAndModified) — save or close it in App Designer first.
finalize() is otherwise the last action of a build or an edit — you do not
finalize between edits. The only reason to finalize, edit, and finalize again
is the iterate-to-preview loop above (small adjustments after seeing the app).
Gotchas specific to plaintext
Quote your string property values (rule 2 above). This is the most common first mistake coming from the mlapp path, where values are passed natively.
Keep the
create()handle; do notcreate()thenopen()before the firstsave()(the.mwill not exist yet).Do not call component verbs — they hard-error. Author components in the
.xml.The
.xmlfilename must be<ClassName>.xmland co-located with the.m(the loader resolvesAppConfigFilenameas./<ClassName>.xmlrelative to the.m).Never touch
<AppId>(rule 7 above) — preserve the seeded value verbatim on every edit; it is the app's stable identity.
Copyright 2026 The MathWorks, Inc.
Requirements and compatibility
Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta
“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.
Needs: Declares allowed tools
Security
No issues found by our static scan· No issues found
A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.
Attribution and licence
- Created by
- MathWorks
- Publisher
- MathWorks (Official)
- Source
- matlab/matlab-agentic-toolkit · skills-catalog/matlab-app-building/matlab-build-app · commit 2a7f215
- Licence
- BSD 2-Clause License (redistribution allowed)
- LICENSE (added by AutoGineer from LICENSE.md)
- ATTRIBUTION.md (written by AutoGineer)
- Synced
AutoGineer is not affiliated with or endorsed by MathWorks.
Get it from the source
5 of this skill’s files are not mirrored here, so there is no ZIP. Get the complete skill from its source: matlab/matlab-agentic-toolkit