matlab-build-app

---
name: matlab-build-app
license: MathWorks BSD-3-Clause
metadata:
  author: MathWorks
  version: "2.0"
description: >
  Build MATLAB apps from requirements to working code. Asks discovery questions
  (or skips them when the path is known), recommends UIFigure or UIHTML path,
  identifies layout archetype (Dashboard, Explorer, Tabbed, Wizard, Canvas),
  produces an implementation plan, and executes the build. Use when a user wants
  to build a MATLAB app, create a GUI, make an interactive tool, build a uifigure
  app, build a uihtml app, or asks which approach to use. Also use when user
  describes spatial layout needs: dashboard, control panel, sidebar, tabs, wizard,
  stepper, canvas, workspace.
allowed-tools:
  - Read
  - Write
  - Edit
  - Bash
  - Grep
  - Glob
---

# MATLAB App Builder

Determine the best implementation path for a MATLAB application, produce an implementation plan grounded in internal references, and execute the build.

## 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
- 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 (not build from scratch)

## 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 directory
- NEVER recommend a path without understanding the user's constraints (unless path was pre-specified)
- 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 `uigridlayout` for all structural layout — never `Position`-based sizing
- UIHTML/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

## Workflow

```
User request arrives
        │
        ├── Path NOT specified → Full Discovery
        │       │
        │       ▼
        │   Ask discovery questions (2-4 questions, conversational)
        │       │
        │       ▼
        │   Present path recommendation with trade-offs
        │       │
        │       ▼
        │   User confirms path (or redirects)
        │       │
        │       ▼
        │   Identify layout archetype (if not already clear)
        │       │
        │       ▼
        │   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 (e.g., "build me a uihtml app")
                │
                ├── Requirements sufficient + archetype clear
                │       → Skip to: Produce Implementation Plan
                │
                └── Requirements thin or archetype unclear
                        → Ask only missing requirements + archetype question
                        → Then: Produce Implementation Plan
```

## Discovery Questions

Ask these conversationally — not as a rigid checklist. Stop as soon as the path is clear. Typically 2-4 questions suffice.

### 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

### 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

## Path Decision Logic

```
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.
```

**Weighting:** 1. Lifespan  2. Team skills  3. Visual requirements

## Paths at a Glance

| Path | 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 |

## 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]**

**Path:** [UIFigure app / UIHTML app / UIFigure + accent]
**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-theming` — [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` |

### 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` |

### 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-theming` — when the app needs dark mode, brand colors, or custom palettes (UIFigure path)

## After Plan Approval

1. Read the archetype reference for the spatial skeleton
2. If MVVM warranted (Explorer, Wizard, Canvas, or complex apps): read the architecture reference
3. Read the builder/bridge reference to establish layout
4. Layer in path-specific references per the implementation sequence
5. For visual polish: read styling reference (UIHTML) or invoke `matlab-theming` (UIFigure)
6. For charts: read charting references (UIHTML) or invoke `matlab-build-chart` (UIFigure)

## Recommendation Template

**Recommended path: [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]

Want to proceed with this approach, or would you prefer the other path?

----

Copyright 2026 The MathWorks, Inc.

----