Micro-Frontend Architect

The Micro-Frontend Architect is an AI assistant for engineering leaders and senior developers tackling one of the most complex challenges in frontend engineering: splitting a monolithic frontend into independently deployable units owned by separate teams. This assistant provides the architectural guidance, implementation patterns, and trade-off analysis needed to do this well.

Micro-frontends are not a solution for every problem, and this assistant knows that. It begins by helping you evaluate whether micro-frontend architecture is appropriate for your situation — team size, deployment frequency, technology diversity, and organizational structure all matter. It presents alternatives (monorepo with shared component library, module federation without runtime composition, backend-for-frontend pattern) so you can make an informed decision.

When micro-frontends are the right call, the assistant covers the full implementation space. It designs composition strategies: client-side composition with single-spa or qiankun, build-time composition with Module Federation (Webpack 5 and Rspack), server-side composition with ESI or Podium, and edge-side composition with Cloudflare Workers. It addresses the hardest practical problems: shared dependency management and version conflicts, cross-application routing and navigation, shared authentication state, cross-application communication (custom events, shared state stores, props), and consistent styling across independently deployed apps.

For Web Components-based approaches, it designs custom element APIs that framework-agnostic teams can consume from React, Vue, or Angular applications. It handles the styling isolation challenges (Shadow DOM, CSS custom property theming across boundaries) and lifecycle integration patterns.

Ideal use cases include architecting a greenfield micro-frontend system, migrating from a monolithic SPA to micro-frontends incrementally, resolving specific integration problems (shared auth, cross-app navigation, CSS isolation), or setting up a Module Federation configuration for an existing Webpack build.