Vercel Microfrontends
Split a large web app into Vercel microfrontends with microfrontends.json, path routing, asset prefixes, and local proxy for team-independent deploys.
Overview
vercel-microfrontends is an agent skill most often used in Build (also Ship, Operate) that guides configuring and deploying Vercel microfrontends with microfrontends.json and cross-project routing.
Install
npx skills add https://github.com/vercel/microfrontends --skill vercel-microfrontendsWhat is this skill?
- Default app vs child apps model with path-based routing on Vercel’s edge
- microfrontends.json configuration and @vercel/microfrontends for Next.js, SvelteKit, React Router, Vite
- Asset prefix strategy to avoid static file collisions across zones
- vercel microfrontends CLI: create-group, local proxy, fallback environments
- Incremental migration and feature-flag controlled routing between projects
Adoption & trust: 1 installs on skills.sh; 39 GitHub stars; 2/3 security scanners passed (skills.sh audits); trending (+100% hot-view momentum).
What problem does it solve?
Your frontend has grown across teams but one repo and one deploy bottleneck block safe, frequent releases.
Who is it for?
Builders on Vercel splitting a large Next.js or multi-framework frontend for parallel team shipping.
Skip if: Single-route marketing sites, non-Vercel hosts, or backends-only work with no composable frontend routing.
When should I use this skill?
User mentions microfrontends, multi-zones, microfrontends.json, @vercel/microfrontends, local proxy, cross-app routing, or shared layouts on Vercel.
What do I get? / Deliverables
You get a workable multi-zone layout—routing rules, asset prefixes, CLI group setup, and local proxy patterns—for independently deployable apps on one domain.
- microfrontends.json layout
- Routing and asset-prefix checklist
- CLI create-group and local dev proxy steps
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Architecture and routing land in Build, but the same skill supports Ship launch prep and Operate routing changes after go-live. Frontend is the canonical shelf because composition, shared layouts, and cross-app navigation are UI/platform concerns.
Where it fits
Define default app and child path patterns before extracting a checkout zone to its own repo.
Validate fallback environments and asset prefixes so launch day routing does not 404 static chunks.
Toggle feature-flag controlled routing between microfrontends without redeploying the entire monolith.
Run vercel microfrontends create-group non-interactively for CI-driven platform setup.
How it compares
Vercel-native microfrontend routing guide—not a generic module-federation tutorial for self-hosted webpack only.
Common Questions / FAQ
Who is vercel-microfrontends for?
Solo technical founders and small frontend/platform teams deploying multiple Vercel projects that must behave as one app.
When should I use vercel-microfrontends?
During Build when splitting zones, before Ship when validating launch routing and asset prefixes, or in Operate when changing paths, fallbacks, or feature-flag routing.
Is vercel-microfrontends safe to install?
Check the Security Audits panel on this Prism page and review any CLI or config changes before applying to production Vercel projects.
SKILL.md
READMESKILL.md - Vercel Microfrontends
# 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 interactively - `add-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) - `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. # Vercel Microfrontends An agent skill for building, configuring, and deploying microfrontends on Vercel. ## Structure - `SKILL.md` - Core skill with concepts, quickstart, and pointers to references - `references/` - Detailed reference documentation - `configuration.md` - `microfrontends.json` schema, field details, naming, examples - `path-routing.md` - Path expressions, asset prefixes, flag-controlled routing - `local