microfrontends

Configure and deploy Vercel microfrontends with path-based routing across independent projects.

Updated Jul 31, 2026
One-click install
npx skills add https://github.com/AarnavBaddam/skills --skill microfrontends-aarnavbaddam
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: microfrontends
Source: https://github.com/AarnavBaddam/skills/tree/main/microfrontends
Command: npx skills add https://github.com/AarnavBaddam/skills --skill microfrontends-aarnavbaddam

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @vercel/microfrontends, and includes references (resource) components.

What problem does it solve? Splitting a large frontend into independently deployable applications while serving them as one cohesive site requires complex routing, asset isolation, and local development orchestration that is difficult to configure manually. ## Core Features & Use Cases - Routing Configuration: Define microfrontends.json with path expressions, asset prefixes, and feature-flag-controlled routing between default and child applications. - Local Development Proxy: Run only the microfrontend you are working on while the proxy routes other requests to production fallbacks, with Turborepo and polyrepo support. - Group Management via CLI: Create, inspect, add to, and delete microfrontends groups using vercel microfrontends commands, including JSON output for automation. - Use Case: A platform team splits a monolithic Next.js app into web, docs, and dashboard projects so each team deploys independently, while users see one unified domain with shared navigation. ## Quick Start Ask the assistant to help you create a microfrontends group and generate a microfrontends.json routing config for your Vercel projects.

Frequently Asked Questions about microfrontends

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up microfrontends on Vercel?

Create a microfrontends group with `vercel microfrontends create-group`, add a `microfrontends.json` to the default app defining routing paths, install `@vercel/microfrontends` in every app, and wrap each framework config with `withMicrofrontends` or the Vite plugin. Routing takes effect once the config deploys to production.

How do I run Vercel microfrontends locally?

Use the local development proxy, which listens on port 3024 by default and routes requests between locally running apps and production fallbacks. With Turborepo it starts automatically via `turbo run dev`; otherwise run `microfrontends proxy --local-apps <names>` alongside your dev server.

Which frameworks does @vercel/microfrontends support?

It supports Next.js App Router and Pages Router via `withMicrofrontends`, plus SvelteKit, React Router, and Vite through the experimental Vite plugin. Flag-controlled routing and cross-zone prefetching are currently Next.js-only features.

How does flag-controlled routing work in microfrontends?

Add a `flag` field to a routing group in microfrontends.json, then call `runMicrofrontendsMiddleware` in the default app's Next.js middleware with flag evaluation functions. The middleware matcher must include all flagged paths and the `/.well-known/vercel/microfrontends/client-config` path.

Why are my microfrontend assets returning 404 errors?

Asset 404s usually mean the asset prefix is not routed in microfrontends.json or Next.js `public/` files were not moved into a subdirectory matching the prefix. Verify `withMicrofrontends` is applied and that the prefix path is included in the app's routing paths.

How do I debug microfrontend routing decisions in production?

Enable Routing Debug Mode in the Vercel Toolbar or set the `VERCEL_MFE_DEBUG=1` cookie to receive response headers like `x-vercel-mfe-app` and `x-vercel-mfe-matched-path`. You can also inspect routing in the Deployment Summary or session traces.