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…

🔥🔥🔥✓ 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.

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

Inspect the full instructions your agent will receiveExpand

This is the exact playbook injected into your agent when the skill activates — shown here so you can audit it before installing. You don't need to read it to use the skill.

by 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 ZIPGitHub40

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:

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.