Communitygithub.com

Vercel Microfrontends (Anleitung)

Leitfaden zum Erstellen, Konfigurieren und Bereitstellen von Microfrontends auf Vercel. Verwenden Sie diesen Skill, wenn der Benutzer Microfrontends, Multi-Zones, die Aufteilung einer App auf mehrere Teams, unabhängige Bereitstellungen, Cross-App-Routing, inkrementelle Migration, das Zusammenführen mehrerer Frontends unter einer Domain, microfrontends.json, @vercel/microfrontends, den lokalen Microfrontends-Proxy oder pfadbasiertes Routing zwischen Vercel-Projekten erwähnt. Auch zu verwenden, wenn der Benutzer nach gemeinsamen Layouts über mehrere Projekte, Navigation zwischen Microfrontends, Fallback-Umgebungen, Asset-Präfixen oder Feature-Flag-gesteuertem Routing fragt.

Was ist Vercel Microfrontends (Anleitung)?

Dieser Skill bietet eine umfassende Anleitung zur Implementierung von Microfrontends auf Vercel. Er erklärt, wie große Anwendungen in unabhängig bereitstellbare Einheiten aufgeteilt werden können, die dennoch als eine zusammenhängende App erscheinen. Der Skill behandelt Kernkonzepte wie die Standard-App (mit microfrontends.json), untergeordnete Apps (mit Routing-Pfaden), Asset-Präfixe und unabhängige Bereitstellungen. Unterstützt werden Frameworks wie Next.js, SvelteKit, React Router und Vite über die Bibliothek @vercel/microfrontends. Die CLI-Befehle `vercel microfrontends` (bzw. `vercel mf`) ermöglichen das Erstellen und Verwalten von Gruppen, das Hinzufügen und Entfernen von Projekten, das Überprüfen von Gruppenmetadaten sowie das lokale Entwickeln mit einem Proxy. Der Skill enthält detaillierte Referenzdokumentationen in einem `references/`-Verzeichnis, das thematisch aufgeteilt ist, um bei spezifischen Fragen gezielt durchsucht zu werden, anstatt alle Referenzen auf einmal zu laden.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Geruyang/agent-skills-library/tree/HEAD/original-skills/x-openai-microfrontends-4b38860
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Vercel Microfrontends

Teilen Sie eine große Anwendung in unabhängig bereitstellbare Einheiten auf, die als eine zusammenhängende App gerendert werden. Vercel übernimmt das Routing auf seinem globalen Netzwerk mithilfe von microfrontends.json.

Kernkonzepte: Standard-App (hat microfrontends.json, bedient nicht passende Anfragen) · untergeordnete Apps (haben routing-Pfadmuster) · Asset-Präfix (verhindert Kollisionen bei statischen Assets) · unabhängige Bereitstellungen.

Frameworks: Next.js (App Router + Pages Router), SvelteKit, React Router, Vite – alle über @vercel/microfrontends.

CLI (vercel microfrontends / vercel mf):

  • create-group — eine neue Gruppe erstellen; interaktiv standardmäßig, oder vollständig nicht-interaktiv mit --non-interactive (Optionen: --name, --project (wiederholbar), --default-app, --default-route, --project-default-route (wiederholbar, Format: <project>=<route>, erforderlich für jedes nicht standardmäßige Projekt im nicht-interaktiven Modus), --yes zum Überspringen der Bestätigungsabfrage); Hinweis: --non-interactive ist blockiert, wenn das Hinzufügen der Projekte das Kostenlos-Tier-Limit überschreiten würde – der Benutzer muss Änderungen an der Abrechnung interaktiv bestätigen
  • add-to-group — das aktuelle Projekt zu einer bestehenden Gruppe hinzufügen; erfordert ein interaktives Terminal (Optionen: --group, --default-route)
  • remove-from-group — das aktuelle Projekt aus seiner Gruppe entfernen; erfordert ein interaktives Terminal (Option: --yes überspringt nur die Projekt-Link-Abfrage)
  • delete-group — eine Gruppe und alle ihre Einstellungen unwiderruflich löschen; erfordert ein interaktives Terminal (Option: --group zum Vorauswählen der Gruppe)
  • inspect-group — Gruppenmetadaten abrufen (Projektnamen, Frameworks, Git-Repos, Root-Verzeichnisse); nützlich für die Automatisierung des Setups (Optionen: --group, --format=json, --config-file-name)
  • pull — entferntes microfrontends.json für die lokale Entwicklung abrufen (Option: --dpl)
  • microfrontends proxy — lokaler Entwicklungsproxy · microfrontends port — automatisch zugewiesenen Port ausgeben

Detaillierte Informationen finden

Dieser Skill enthält detaillierte Referenzdokumente im Verzeichnis references/. Lesen Sie nicht alle Referenzen auf einmal. Durchsuchen Sie stattdessen die relevante Datei, wenn der Benutzer nach einem bestimmten Thema fragt:

ThemaReferenzdatei
Erste Schritte, Schnellstart, Framework-Setup, Schema von microfrontends.json, Felder, Benennung, Beispielereferences/configuration.md
Pfadausdrücke, Asset-Präfixe, Flag-gesteuertes Routing, Middlewarereferences/path-routing.md
Lokales Proxy-Setup, Polyrepo-Konfiguration, Turborepo, Ports, Bereitstellungsschutzreferences/local-development.md
Gruppen überprüfen (inspect-group), Projekte hinzufügen/entfernen, Fallback-Umgebungen, Navigation, Observabilityreferences/managing-microfrontends.md
Testhilfsmittel (validateMiddlewareConfig, validateRouting usw.), Debug-Header, häufige Problemereferences/troubleshooting.md
Bereitstellungsschutz, Vercel Firewall, WAF-Regeln für Microfrontendsreferences/security.md

Wenn der Benutzer nach einem bestimmten Thema fragt, verwenden Sie grep oder eine Suche in der relevanten Referenzdatei, um die Antwort zu finden, ohne alle Referenzen in den Kontext zu laden.

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".

Verwandte Skills

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