Communitygithub.com

Vercel Microfrontends

Guia para construir, configurar e implantar microfrontends no Vercel. Use esta skill quando o usuário mencionar microfrontends, multi-zonas, dividir um aplicativo entre equipes, implantações independentes, roteamento entre aplicativos, migração incremental, composição de múltiplos frontends sob um domínio, microfrontends.json, @vercel/microfrontends, o proxy local de microfrontends ou roteamento baseado em caminho entre projetos Vercel. Também use quando o usuário perguntar sobre layouts compartilhados entre projetos, navegação entre microfrontends, ambientes fallback, prefixos de assets ou roteamento controlado por feature flags.

O que é Vercel Microfrontends?

Esta skill fornece um guia completo para arquitetar, configurar e implantar microfrontends na plataforma Vercel. Ela explica os conceitos centrais, como o aplicativo padrão (que contém o arquivo `microfrontends.json`) e aplicativos filhos (que definem padrões de roteamento), além de gerenciar prefixos de assets estáticos para evitar colisões e permitir implantações independentes. A skill cobre frameworks populares como Next.js, SvelteKit, React Router e Vite, todos integrados via `@vercel/microfrontends`. Os comandos CLI (`vercel microfrontends` ou `vercel mf`) permitem criar, gerenciar grupos de projetos, inspecionar configurações e configurar um proxy de desenvolvimento local. Ao utilizar referências detalhadas em arquivos separados, a skill ajuda o usuário a acessar informações específicas sob demanda, sem sobrecarregar o contexto.

Funciona com~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→Navegar por todas as habilidades

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentação

O que Vercel Microfrontends faz?

Divida uma aplicação grande em unidades implantáveis independentes que se renderizam como um aplicativo coeso. O Vercel gerencia o roteamento em sua rede global usando microfrontends.json.

Conceitos principais: aplicativo padrão (possui microfrontends.json, atende requisições não correspondentes) · aplicativos filhos (possuem padrões de rota routing) · prefixo de assets (evita colisões de assets estáticos) · implantações independentes.

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

CLI (vercel microfrontends / vercel mf):

  • create-group — cria um novo grupo; interativo por padrão, ou totalmente não interativo com --non-interactive (opções: --name, --project (repetível), --default-app, --default-route, --project-default-route (repetível, formato: <projeto>=<rota>, obrigatório para cada projeto não padrão no modo não interativo), --yes para pular o prompt de confirmação); nota: --non-interactive é bloqueado se adicionar os projetos exceder o limite do plano gratuito — o usuário deve confirmar alterações de cobrança interativamente
  • add-to-group — adiciona o projeto atual a um grupo existente; requer terminal interativo (opções: --group, --default-route)
  • remove-from-group — remove o projeto atual do seu grupo; requer terminal interativo (opção: --yes pula apenas o prompt de link do projeto)
  • delete-group — exclui um grupo e todas as suas configurações, irreversível; requer terminal interativo (opção: --group para pré-selecionar grupo)
  • inspect-group — recupera metadados do grupo (nomes de projetos, frameworks, repositórios git, diretórios raiz); útil para automatizar configuração (opções: --group, --format=json, --config-file-name)
  • pull — baixa o microfrontends.json remoto para desenvolvimento local (opção: --dpl)
  • microfrontends proxy — proxy local de desenvolvimento · microfrontends port — exibe a porta atribuída automaticamente

Encontrando Informações Detalhadas

Esta skill inclui documentos de referência detalhados no diretório references/. Não leia todas as referências antecipadamente. Em vez disso, pesquise ou use grep no arquivo relevante quando o usuário perguntar sobre um tópico específico:

TópicoArquivo de referência
Introdução, início rápido, configuração de framework, esquema microfrontends.json, campos, nomenclatura, exemplosreferences/configuration.md
Expressões de caminho, prefixos de assets, roteamento controlado por flags, middlewarereferences/path-routing.md
Configuração de proxy local, configuração de polirepositório, Turborepo, portas, proteção de implantaçãoreferences/local-development.md
Inspecionando grupos (inspect-group), adicionando/removendo projetos, ambientes fallback, navegação, observabilidadereferences/managing-microfrontends.md
Utilitários de teste (validateMiddlewareConfig, validateRouting, etc.), cabeçalhos de depuração, problemas comunsreferences/troubleshooting.md
Proteção de implantação, Firewall Vercel, regras WAF para microfrontendsreferences/security.md

Quando o usuário perguntar sobre um tópico específico, use grep ou pesquise no arquivo de referência relevante para encontrar a resposta sem carregar todas as referências no 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".

Habilidades Relacionadas

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