Communitygithub.com

Vercel Microfrontends (Guide de construction, configuration et…

Guide pour construire, configurer et déployer des microfrontends sur Vercel. Utilisez cette compétence lorsque l'utilisateur mentionne les microfrontends, les multi-zones, la division d'une application entre équipes, les déploiements indépendants, le routage inter-applications, la migration incrémentale, la composition de plusieurs frontends sous un même domaine, microfrontends.json, @vercel/microfrontends, le proxy local de microfrontends, ou le routage basé sur le chemin entre projets Vercel. Également utile lorsque l'utilisateur demande des mises en page partagées entre projets, la navigation entre microfrontends, les environnements de repli, les préfixes d'actifs, ou le routage contrôlé par feature flags.

Qu'est-ce que Vercel Microfrontends (Guide de construction, configuration et… ?

Cette compétence fournit un guide complet pour la construction, la configuration et le déploiement de microfrontends sur Vercel. Elle permet de diviser une application volumineuse en unités déployables indépendamment tout en les présentant comme une application cohérente. La compétence couvre les concepts clés tels que l'application par défaut (qui contient le fichier `microfrontends.json` et gère les requêtes non correspondantes), les applications enfants (avec leurs motifs de routage), les préfixes d'actifs (pour éviter les collisions de ressources statiques), et les déploiements indépendants. L'outil CLI `vercel microfrontends` (ou `vercel mf`) offre des commandes pour créer et gérer des groupes (`create-group`, `add-to-group`, `remove-from-group`, `delete-group`, `inspect-group`), ainsi que pour le développement local avec le proxy de microfrontends. La compétence inclut des documents de référence détaillés dans le répertoire `references/`, accessibles par sujet, ce qui permet de répondre précisément aux questions de l'utilisateur sans charger l'intégralité des informations dans le contexte. Les frameworks pris en charge incluent Next.js (App Router et Pages Router), SvelteKit, React Router et Vite, tous via le package `@vercel/microfrontends`.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Geruyang/agent-skills-library/tree/HEAD/original-skills/x-openai-microfrontends-4b38860
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Vercel Microfrontends

Divisez une application volumineuse en unités déployables indépendamment qui s'affichent comme une application cohérente. Vercel gère le routage sur son réseau mondial à l'aide du fichier microfrontends.json.

Concepts clés : application par défaut (possède microfrontends.json, sert les requêtes non correspondantes) · applications enfants (possèdent des motifs de routage) · préfixe d'actifs (prévient les collisions de ressources statiques) · déploiements indépendants.

Frameworks : Next.js (App Router + Pages Router), SvelteKit, React Router, Vite — tous via @vercel/microfrontends.

CLI (vercel microfrontends / vercel mf) :

  • create-group — crée un nouveau groupe ; interactif par défaut, ou entièrement non interactif avec --non-interactive (options : --name, --project (répétable), --default-app, --default-route, --project-default-route (répétable, format : <projet>=<route>, requis pour chaque projet non par défaut en mode non interactif), --yes pour ignorer l'invite de confirmation) ; remarque : --non-interactive est bloqué si l'ajout des projets dépasse la limite du niveau gratuit — l'utilisateur doit confirmer les changements de facturation de manière interactive
  • add-to-group — ajoute le projet actuel à un groupe existant ; nécessite un terminal interactif (options : --group, --default-route)
  • remove-from-group — supprime le projet actuel de son groupe ; nécessite un terminal interactif (option : --yes ignore uniquement l'invite de lien de projet)
  • delete-group — supprime un groupe et tous ses paramètres, irréversible ; nécessite un terminal interactif (option : --group pour présélectionner le groupe)
  • inspect-group — récupère les métadonnées du groupe (noms de projets, frameworks, dépôts git, répertoires racines) ; utile pour automatiser la configuration (options : --group, --format=json, --config-file-name)
  • pull — récupère le microfrontends.json distant pour le développement local (option : --dpl)
  • microfrontends proxy — proxy de développement local · microfrontends port — imprime le port attribué automatiquement

Recherche d'informations détaillées

Cette compétence inclut des documents de référence détaillés dans le répertoire references/. Ne lisez pas toutes les références à l'avance. Recherchez ou utilisez grep dans le fichier pertinent lorsque l'utilisateur pose une question sur un sujet spécifique.

SujetFichier de référence
Prise en main, démarrage rapide, configuration du framework, schéma microfrontends.json, champs, nommage, exemplesreferences/configuration.md
Expressions de chemin, préfixes d'actifs, routage contrôlé par indicateurs, middlewarereferences/path-routing.md
Configuration du proxy local, configuration polyrepo, Turborepo, ports, protection de déploiementreferences/local-development.md
Inspection des groupes (inspect-group), ajout/suppression de projets, environnements de repli, navigation, observabilitéreferences/managing-microfrontends.md
Utilitaires de test (validateMiddlewareConfig, validateRouting, etc.), en-têtes de débogage, problèmes courantsreferences/troubleshooting.md
Protection de déploiement, Vercel Firewall, règles WAF pour microfrontendsreferences/security.md

Lorsque l'utilisateur pose une question sur un sujet spécifique, utilisez grep ou une recherche dans le fichier de référence pertinent pour trouver la réponse sans charger toutes les références dans le contexte.

Individual skills in this repo

This repo contains 12 individual skills — each has its own dedicated page.

Geruyang/agent-skills-library

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

Geruyang/agent-skills-library

Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling

Geruyang/agent-skills-library

Use for new frontend applications, dashboards, games, creative websites, hero sections, and visually driven UI from scratch, or when the user explicitly asks for a redesign/restyle/modernization. Builds from clean, airy, high-taste, readable image-generated concept design with section-specific references, faithful implementation, and browser testing.

Geruyang/agent-skills-library

Use when testing, debugging, or making targeted improvements to rendered frontend apps through the Build Web Apps or web dev plugin: local dev servers, UI regressions, interaction bugs, console errors, responsive layout, and visual QA. Check whether the Browser plugin is available and use it first when it is; otherwise use regular Playwright with the recorded reason.

Geruyang/agent-skills-library

Design UI surfaces for browser games. Use when the user asks for HUDs, menus, overlays, responsive layouts, or visual direction that must protect the playfield.

Geruyang/agent-skills-library

GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labels, nesting, playback), and performance (transforms, will-change, quickTo). Use when writing GSAP animations in HyperFrames compositions.

Geruyang/agent-skills-library

Next.js App Router expert guidance. Use when building, debugging, or architecting Next.js applications — routing, Server Components, Server Actions, Cache Components, layouts, middleware/proxy, data fetching, rendering strategies, and deployment on Vercel.

Geruyang/agent-skills-library

Use when sizing Public Equity Investing positions, finding equity hedges, or building an integrated position-and-hedge risk plan from a listed-equity thesis. Do not use for thesis construction, standalone event underwriting, trade execution, personal investment advice, or credit-instrument risk.

Geruyang/agent-skills-library

Integrate data visualizations into React and Next.js applications. Use when the user needs chart components, UML-like or architecture diagram components, React integration patterns, Next.js client or server boundaries, hydration-safe rendering, lazy loading, framework-aware performance, scroll-driven visual stories, or export guidance.

Geruyang/agent-skills-library

shadcn/ui expert guidance — CLI, component installation, composition patterns, custom registries, theming, Tailwind CSS integration, and high-quality interface design. Use when initializing shadcn, adding components, composing product UI, building custom registries, configuring themes, or troubleshooting component issues.

Geruyang/agent-skills-library

v0 by Vercel expert guidance. Use when discussing AI code generation, generating UI components from prompts, v0 CLI usage, v0 SDK/API integration, or integrating v0 into development workflows with GitHub and Vercel deployment.

Geruyang/agent-skills-library

Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".

Skills associés

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community