About vercel-microfrontends
Vercel Microfrontends is a skill for splitting a large application into independently deployed units that render as one app. It covers Vercel routing configuration, group management, and local development across several frameworks.
Key features
- 01Independent microfrontend deployments
- 02Routing through microfrontends.json
- 03CLI for group management
- 04Local development proxy and port tools
- 05Framework guidance for Next.js, SvelteKit, React Router, and Vite
Use cases
- 01Splitting a large application into deployable units
- 02Creating and managing microfrontend groups
- 03Running microfrontends in local development
- 04Looking up routing and framework configuration
Install
Copy the command and run it in a terminal.
npx skills add https:/After installing, type/vercel-microfrontendsin Claude Code to confirm it loaded.
Bundled files
References and scripts installed along with SKILL.md.
metadata.jsonREADME.mdreferences/configuration.mdlocal-development.mdmanaging-microfrontends.mdpath-routing.mdsecurity.mdtroubleshooting.mdDetails
From the project READMEVercel 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),--yesto skip confirmation prompt); note:--non-interactiveis 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:--yesskips project-link prompt only)delete-group— delete a group and all its settings, irreversible; requires interactive terminal (option:--groupto pre-select group)pull— pull remotemicrofrontends.jsonfor 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.