Vercel Microfrontends
Split a large application into independently deployable units that render as one cohesive app. Vercel handles routing on its global network using microfrontends.json.
Core concepts: default app (has microfrontends.json, serves unmatched requests) · child apps (have routing path patterns) · asset prefix (prevents static-asset collisions) · independent deployments.
Frameworks: Next.js (App Router + Pages Router), SvelteKit, React Router, Vite — all via @vercel/microfrontends.
CLI (vercel microfrontends / vercel mf):
create-group — create a new group; interactive by default, or fully non-interactive with --non-interactive (options: --name, --project (repeatable), --default-app, --default-route, --project-default-route (repeatable, format: <project>=<route>, required for each non-default project in non-interactive mode), --yes to skip confirmation prompt); note: --non-interactive is blocked if adding the projects would exceed the free tier limit — the user must confirm billing changes interactivelyadd-to-group — add the current project to an existing group; requires interactive terminal (options: --group, --default-route)remove-from-group — remove the current project from its group; requires interactive terminal (option: --yes skips project-link prompt only)delete-group — delete a group and all its settings, irreversible; requires interactive terminal (option: --group to pre-select group)inspect-group — retrieve group metadata (project names, frameworks, git repos, root dirs); useful for automating setup (options: --group, --format=json, --config-file-name)pull — pull remote microfrontends.json for local development (option: --dpl)microfrontends proxy — local dev proxy · microfrontends port — print auto-assigned port
Finding Detailed Information
This skill includes detailed reference docs in the references/ directory. Do not read all references upfront. Instead, search or grep the relevant file when the user asks about a specific topic:
| Topic |
Reference file |
Getting started, quickstart, framework setup, microfrontends.json schema, fields, naming, examples |
references/configuration.md |
| Path expressions, asset prefixes, flag-controlled routing, middleware |
references/path-routing.md |
| Local proxy setup, polyrepo config, Turborepo, ports, deployment protection |
references/local-development.md |
Inspecting groups (inspect-group), adding/removing projects, fallback environments, navigation, observability |
references/managing-microfrontends.md |
Testing utilities (validateMiddlewareConfig, validateRouting, etc.), debug headers, common issues |
references/troubleshooting.md |
| Deployment protection, Vercel Firewall, WAF rules for microfrontends |
references/security.md |
When the user asks about a specific topic, use grep or search over the relevant reference file to find the answer without loading all references into context.
1---
2name: microfrontends
3description: Guide for building, configuring, and deploying microfrontends on Vercel. Use this skill when the user mentions microfrontends, multi-zones, splitting an app across teams, independent deployments, cross-app routing, incremental migration, composing multiple frontends under one domain, microfrontends.json, @vercel/microfrontends, the microfrontends local proxy, or path-based routing between Vercel projects. Also use when the user asks about shared layouts across projects, navigation between microfrontends, fallback environments, asset prefixes, or feature flag controlled routing.
4metadata:
5 priority: 7
6 docs:
7 - "https://vercel.com/docs/microfrontends"
8 pathPatterns:
9 - 'microfrontends.json'
10 - 'microfrontends.jsonc'
11 - 'apps/*/microfrontends.json'
12 - 'apps/*/microfrontends.jsonc'
13 bashPatterns:
14 - '\bvercel\s+microfrontends\b'
15 - '\bvercel\s+mf\b'
16 - '\bnpm\s+(install|i|add)\s+[^\n]*@vercel/microfrontends\b'
17 - '\bpnpm\s+(install|i|add)\s+[^\n]*@vercel/microfrontends\b'
18 - '\bbun\s+(install|i|add)\s+[^\n]*@vercel/microfrontends\b'
19 - '\byarn\s+add\s+[^\n]*@vercel/microfrontends\b'
20 importPatterns:
21 - '@vercel/microfrontends'
22retrieval:
23 aliases:
24 - microfrontends
25 - multi-zones
26 - multi zones
27 - mfe
28 - microfrontend routing
29 - cross-zone navigation
30 intents:
31 - split app into microfrontends
32 - set up microfrontends
33 - configure microfrontends.json
34 - add path routing between projects
35 - share layout across microfrontends
36 entities:
37 - microfrontends.json
38 - "@vercel/microfrontends"
39 - default app
40 - child app
41 - asset prefix
42 - microfrontends group
43chainTo:
44 -
45 pattern: 'runMicrofrontendsMiddleware|flag.*microfrontend|microfrontend.*flag'
46 targetSkill: routing-middleware
47 message: 'Flag-controlled microfrontend routing requires middleware in the default app — loading Routing Middleware guidance.'
48
49---
50
51# Vercel Microfrontends
52Split a large application into independently deployable units that render as one cohesive app. Vercel handles routing on its global network using `microfrontends.json`.
53
54**Core concepts:** default app (has `microfrontends.json`, serves unmatched requests) · child apps (have `routing` path patterns) · asset prefix (prevents static-asset collisions) · independent deployments.
55
56**Frameworks:** Next.js (App Router + Pages Router), SvelteKit, React Router, Vite — all via `@vercel/microfrontends`.
57
58**CLI (`vercel microfrontends` / `vercel mf`):**
59- `create-group` — create a new group; interactive by default, or fully non-interactive with `--non-interactive` (options: `--name`, `--project` (repeatable), `--default-app`, `--default-route`, `--project-default-route` (repeatable, format: `<project>=<route>`, required for each non-default project in non-interactive mode), `--yes` to skip confirmation prompt); note: `--non-interactive` is blocked if adding the projects would exceed the free tier limit — the user must confirm billing changes interactively
60- `add-to-group` — add the current project to an existing group; requires interactive terminal (options: `--group`, `--default-route`)
61- `remove-from-group` — remove the current project from its group; requires interactive terminal (option: `--yes` skips project-link prompt only)
62- `delete-group` — delete a group and all its settings, irreversible; requires interactive terminal (option: `--group` to pre-select group)
63- `inspect-group` — retrieve group metadata (project names, frameworks, git repos, root dirs); useful for automating setup (options: `--group`, `--format=json`, `--config-file-name`)
64- `pull` — pull remote `microfrontends.json` for local development (option: `--dpl`)
65- `microfrontends proxy` — local dev proxy · `microfrontends port` — print auto-assigned port
66
67## Finding Detailed Information
68
69This skill includes detailed reference docs in the `references/` directory. **Do not read all references upfront.** Instead, search or grep the relevant file when the user asks about a specific topic:
70
71| Topic | Reference file |
72|---|---|
73| Getting started, quickstart, framework setup, `microfrontends.json` schema, fields, naming, examples | `references/configuration.md` |
74| Path expressions, asset prefixes, flag-controlled routing, middleware | `references/path-routing.md` |
75| Local proxy setup, polyrepo config, Turborepo, ports, deployment protection | `references/local-development.md` |
76| Inspecting groups (`inspect-group`), adding/removing projects, fallback environments, navigation, observability | `references/managing-microfrontends.md` |
77| Testing utilities (`validateMiddlewareConfig`, `validateRouting`, etc.), debug headers, common issues | `references/troubleshooting.md` |
78| Deployment protection, Vercel Firewall, WAF rules for microfrontends | `references/security.md` |
79
80When the user asks about a specific topic, use grep or search over the relevant reference file to find the answer without loading all references into context.
vercel