Communitygithub.com

Vercel Microfrontends (Guía)

Guía para construir, configurar y desplegar microfrontends en Vercel. Usa esta habilidad cuando el usuario mencione microfrontends, multi-zonas, división de una aplicación entre equipos, despliegues independientes, enrutamiento entre aplicaciones, migración incremental, composición de varios frontends bajo un mismo dominio, microfrontends.json, @vercel/microfrontends, el proxy local de microfrontends o enrutamiento basado en rutas entre proyectos de Vercel. También úsala cuando el usuario pregunte sobre diseños compartidos entre proyectos, navegación entre microfrontends, entornos de respaldo, prefijos de assets o enrutamiento controlado por feature flags.

¿Qué es Vercel Microfrontends (Guía)?

Esta habilidad proporciona una guía completa para construir, configurar y desplegar microfrontends en la plataforma Vercel. Permite dividir una aplicación grande en unidades desplegables de forma independiente que se renderizan como una sola aplicación cohesiva, utilizando el enrutamiento global de Vercel gestionado a través del archivo `microfrontends.json`. Es compatible con frameworks modernos como Next.js (App Router y Pages Router), SvelteKit, React Router y Vite, todos integrados mediante el paquete `@vercel/microfrontends. La habilidad incluye una CLI (`vercel microfrontends` o `vercel mf`) con comandos como `create-group`, `add-to-group`, `remove-from-group`, `delete-group`, `inspect-group` y `pull`, además de un proxy local para desarrollo. También contiene referencias detalladas en el directorio `references/` sobre configuración, enrutamiento, desarrollo local, gestión de grupos, seguridad y solución de problemas, lo que permite a los desarrolladores buscar información específica sin necesidad de cargar todas las referencias en el contexto.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Geruyang/agent-skills-library/tree/HEAD/original-skills/x-openai-microfrontends-4b38860
Ver original→Ver todas las habilidades

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentación

Microfrontends en Vercel

Divide una aplicación grande en unidades desplegables de forma independiente que se renderizan como una sola aplicación cohesiva. Vercel gestiona el enrutamiento en su red global mediante microfrontends.json.

Conceptos clave: aplicación predeterminada (tiene microfrontends.json, maneja solicitudes no coincidentes) · aplicaciones hijas (tienen patrones de ruta routing) · prefijo de assets (evita colisiones de assets estáticos) · despliegues independientes.

Frameworks: Next.js (App Router + Pages Router), SvelteKit, React Router, Vite — todos a través de @vercel/microfrontends.

CLI (vercel microfrontends / vercel mf):

  • create-group — crea un nuevo grupo; interactivo por defecto, o completamente no interactivo con --non-interactive (opciones: --name, --project (repetible), --default-app, --default-route, --project-default-route (repetible, formato: <proyecto>=<ruta>, obligatorio para cada proyecto no predeterminado en modo no interactivo), --yes para omitir la confirmación); nota: --non-interactive está bloqueado si agregar los proyectos superaría el límite del plan gratuito — el usuario debe confirmar los cambios de facturación de forma interactiva
  • add-to-group — agrega el proyecto actual a un grupo existente; requiere terminal interactiva (opciones: --group, --default-route)
  • remove-from-group — elimina el proyecto actual de su grupo; requiere terminal interactiva (opción: --yes omite solo la confirmación del enlace del proyecto)
  • delete-group — elimina un grupo y toda su configuración, irreversible; requiere terminal interactiva (opción: --group para preseleccionar el grupo)
  • inspect-group — recupera metadatos del grupo (nombres de proyectos, frameworks, repositorios git, directorios raíz); útil para automatizar la configuración (opciones: --group, --format=json, --config-file-name)
  • pull — extrae microfrontends.json remoto para desarrollo local (opción: --dpl)
  • microfrontends proxy — proxy local de desarrollo · microfrontends port — imprime el puerto asignado automáticamente

Cómo Encontrar Información Detallada

Esta habilidad incluye documentación de referencia detallada en el directorio references/. No leas todas las referencias de antemano. En su lugar, busca o usa grep en el archivo relevante cuando el usuario pregunte sobre un tema específico:

TemaArchivo de referencia
Introducción, inicio rápido, configuración del framework, esquema de microfrontends.json, campos, nombres, ejemplosreferences/configuration.md
Expresiones de ruta, prefijos de assets, enrutamiento controlado por flags, middlewarereferences/path-routing.md
Configuración del proxy local, configuración de polirepositorio, Turborepo, puertos, protección de desplieguesreferences/local-development.md
Inspección de grupos (inspect-group), agregar/eliminar proyectos, entornos de respaldo, navegación, observabilidadreferences/managing-microfrontends.md
Utilidades de prueba (validateMiddlewareConfig, validateRouting, etc.), cabeceras de depuración, problemas comunesreferences/troubleshooting.md
Protección de despliegues, Firewall de Vercel, reglas WAF para microfrontendsreferences/security.md

Cuando el usuario pregunte sobre un tema específico, usa grep o busca en el archivo de referencia correspondiente para encontrar la respuesta sin cargar todas las referencias en el contexto.

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 relacionados

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