Labsco
vercel logo

vercel-microfrontends

✓ Official★ 40

by vercel · part of vercel/microfrontends

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 microf

🔥🔥🔥✓ VerifiedAccount requiredQuick setup
#payments#devops#git#security#monitoring
🧰 Not standalone. This skill ships with vercel/microfrontends and only works together with that tool — install the tool first, then add this skill.

This is the playbook your agent receives when the skill activates — you don't need to read it to use the skill, but it's here to audit before installing.

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 file
Getting started, quickstart, framework setup, microfrontends.json schema, fields, naming, examplesreferences/configuration.md
Path expressions, asset prefixes, flag-controlled routing, middlewarereferences/path-routing.md
Local proxy setup, polyrepo config, Turborepo, ports, deployment protectionreferences/local-development.md
Inspecting groups (inspect-group), adding/removing projects, fallback environments, navigation, observabilityreferences/managing-microfrontends.md
Testing utilities (validateMiddlewareConfig, validateRouting, etc.), debug headers, common issuesreferences/troubleshooting.md
Deployment protection, Vercel Firewall, WAF rules for microfrontendsreferences/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.