microfrontends

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

Updated Sep 17, 2026
One-click install
npx skills add https://github.com/ridhijain709/AIPORSCHE --skill microfrontends-ridhijain709
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: microfrontends
Source: https://github.com/ridhijain709/AIPORSCHE/tree/main/.agents/skills/microfrontends
Command: npx skills add https://github.com/ridhijain709/AIPORSCHE --skill microfrontends-ridhijain709

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Splitting a large frontend application into independently deployable units that render as one cohesive app is complex, requiring routing configuration, asset isolation, local development proxies, and cross-team deployment coordination on Vercel. ## Core Features & Use Cases - Routing Configuration: Define microfrontends.json with default and child applications, path expressions, asset prefixes, and flag-controlled routing via middleware. - 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: Use the vercel microfrontends CLI to create, inspect, add to, and delete microfrontends groups, plus configure fallback environments and observability routing. - 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. ## Quick Start Ask the assistant to set up a microfrontends group and generate a microfrontends.json routing /docs paths to a separate docs project.

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` before deploying.

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 <name>` manually.

Does @vercel/microfrontends support frameworks besides Next.js?▼

Yes, it supports Next.js App Router and Pages Router, SvelteKit, React Router, and Vite. SvelteKit and Vite integrations are exposed through experimental entry points like `@vercel/microfrontends/experimental/vite`.

How does flag-controlled routing work in microfrontends?▼

Add a `flag` field to a routing group in `microfrontends.json`, then implement middleware in the default Next.js app using `runMicrofrontendsMiddleware` with flag values. The middleware matcher must include all flagged paths plus `/.well-known/vercel/microfrontends/client-config`.

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 the prefix path is included in the app's routing paths.

What path expressions does microfrontends.json routing support?▼

Supported expressions include constant paths, single-segment wildcards like `/:path`, zero-or-more segments like `/prefix/:path*`, one-or-more segments with `:path+`, alternation, and negative lookahead. Overlapping paths and multi-segment wildcards not at the end are not supported.