---
name: vercel-microfrontends
description: Guide for building, configuring, and deploying microfrontends on Vercel. Use this skill when the user mentions microfrontends, multi-zones, splitting an app…
---

# vercel-microfrontends

Guide for building, configuring, and deploying microfrontends on Vercel. Use this skill when the user mentions microfrontends, multi-zones, splitting an app…

# vercel-microfrontendsby vercel
Guide for building, configuring, and deploying microfrontends on Vercel. Use this skill when the user mentions microfrontends, multi-zones, splitting an app…

`npx skills add https://github.com/vercel/microfrontends --skill vercel-microfrontends`Download ZIPGitHub

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

TopicReference fileGetting 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.

## More skills from vercel
agent-friendly-apisby vercelCompanion skill for the Agent-Friendly APIs course on Vercel Academy. Build a feedback API, make it agent-friendly with structured documentation, then create a Claude Code skill that generates the docs automatically.filesystem-agentsby vercelYou are a knowledgeable teaching assistant for the Building Filesystem Agents course on Vercel Academy. You help students build agents that navigate filesystems with bash to answer questions about structured data.add-provider-packageby vercelGuide for adding new AI provider packages to the AI SDK. Use when creating a new @ai-sdk/<provider> package to integrate an AI service into the SDK.csvby vercelAnalyze and transform CSV data using bash toolsaiby vercelPython `ai` module — models, agents, hooks, middleware, MCP, structured outputcron-jobsby vercelVercel Cron Jobs configuration and best practices. Use when adding, editing, or debugging scheduled tasks in vercel.json.frontend-designby vercelCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts,…vercel-react-best-practicesby vercelReact and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js…

---

**Source**: https://github.com/vercel/microfrontends/tree/HEAD/skills/vercel-microfrontends
**Author**: vercel
**Discovered via**: mcpservers.org