Agent skill · software engineering · metabase
metabase-data-app-setup
Scaffold a new Metabase data-app into the connected remote-sync repository's `data_apps/<app>/` directory from the `data-app-template`. Use when the user asks to start, create, scaffold, or set up a data-app from scratch.
Why this skill is useful
Adds a scaffold template for Metabase data apps that includes specific configurations and project structure not commonly found in public resources.
What it needs
Requires node, npm installed locally. About 12k tokens when loaded. Last updated 2026-08-07. 48,568 stars on the source repository.
What this skill does
Create a Metabase Data App A Metabase data-app is a single JS bundle that the host loads inside a Near Membrane sandbox and renders inside its own React tree. The scaffold is a Vite + React + TypeScript project: source under src/, a dev server that previews the app against a real Metabase through the same Near Membrane sandbox + distortion rules Metabase uses in production — so npm run dev behaves like production, including for third-party libraries the app bundles — and npm run build producing a single dist/index.js. (Because the sandbox runs a built bundle, a change rebuilds it and does a soft reload — re-evaluates the bundle in the sandbox and remounts the app, keeping auth/SDK loaded — rather than hot-swapping modules; component state resets, but there's no full browser refresh.) The dev preview also shows a corner ⚠ Diagnostics toolbar that captures runtime errors — including the sandbox's otherwise-opaque blocked-API messages — so failures surface instead of being swallowed. The same data is served as JSON at http://localhost:5174/data-app/diagnostics, which is how you read it (see "Reading the diagnostics feed" below) — you have a shell, not a browser, and these failures are invisible from the terminal otherwise. Data apps are served from Git, not uploaded. A single repository is connected to Metabase via remote-sync (Admin → Settings → Remote sync). Each app lives in its own directory dataapps/<app>/ inside that repo — its source, a dataapp.yaml (name/path), and the committed built bundle at the path its dataapp.yaml declares (dist/index.js by default). On each remote-sync import Metabase materializes one app per directory and serves it at /apps/<slug> url, where the slug is the directory's name. So this skill always scaffolds into the connected repo's dataapps/<app>/ directory, never as a standalone project. The scaffold ships inside this skill at ./template/ — a Vite + React + TypeScript project that was installed alongside the skill. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills metabase/metabase-data-app-setup