Agent skill · software engineering · metabase
metabase-data-app-routing
Add client-side routing (multiple pages) to an existing Metabase data-app project using the host-provided `DataAppRouter`, `DataAppLink`, and `useDataAppLocation` primitives. Use when the user has an existing data-app project and wants more than one page.
Why this skill is useful
Provides specific implementation details for adding client-side routing to Metabase data-app projects using unique SDK primitives that the AI wouldn't reliably generate on its own.
What it needs
Requires vite installed locally. About 5k tokens when loaded. Last updated 2026-08-07. 48,568 stars on the source repository.
What this skill does
Add routing to a data-app A Metabase data-app bundle doesn't bundle a router library — it imports three small primitives from @metabase/embedding-sdk-react/data-app: API Purpose --- --- <DataAppRouter> Wrap the app once. Tracks the current sub-path. Auto-detects the iframe's URL prefix; bundle author writes no basename. <DataAppLink to="/customers/42"> Internal navigation link. Renders a real <a href> so middle-click / cmd-click open in a new tab. useDataAppLocation() Returns { pathname, navigate }. Use pathname for match-by-equality / startsWith rendering; use navigate(to) for programmatic nav. That's the entire surface. No react-router of any version, no <BrowserRouter>, no <HashRouter>. The API is deliberately decoupled from any router library so a future Metabase version can swap the underlying implementation without touching bundle code. When to use this skill The user has a working data-app project — scaffolded from the data-app-template repo, so a one-liner vite.config.ts (dataAppConfig()) and an src/index.tsx that exports a factory already exist. The dev preview has no in-project entry: the SDK's dev preset serves it. The user wants the bundle to render different content at different URLs (/overview, /customers/:id). Do not use this skill to scaffold a project from scratch — it only patches an existing data-app project. If there is no project yet, stop and tell the user to start with a new data-app scaffold before adding routing. The template already externalizes @metabase/embedding-sdk-react/data-app in vite.config.ts. You do NOT need to edit vite.config.ts to add routing — just edit src/App.tsx (and add more component files as needed) per the step below. Step 1 — Wrap App.tsx with <DataAppRouter> Import the routing primitives normally. <DataAppRouter> does NOT take a basename prop — it auto-detects the iframe's URL prefix (/embed/apps/<name>) in production and resolves to no prefix in the Vite dev preview. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills metabase/metabase-data-app-routing