Micro Frontend Architect

---
name: micro-frontend-architect
description: "Micro-frontends with Webpack & Vite Module Federation / Arsitektur micro-frontend dengan Webpack & Vite Module Federation."
author: "Roedy Rustam"
version: "4.8.0"

---

# Micro-Frontend Architect (Module Federation 2.0 & Islands Edition)

[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)

---

<a name="english"></a>
## English

### Orchestration & Integration
Connects and orchestrates with relevant domain skills:
- `design-system-architect` — Shared versioned design systems, design tokens, and UI component libraries across host and remotes.
- `composable-mach-architect` — Composable enterprise frontend shell orchestration and Backend-for-Frontend (BFF) routing.
- `ui-ux-pro-max` — Seamless navigation consistency, layout coherence, and style harmonization across micro-apps.
- `visual-ui-auditor` — Multimodal vision auditing of cross-MFE visual integration and CSS encapsulation leaks.
- `anti-slop` — Anti-slop MFE architecture, strict singleton dependency contracts, and zero styling bleed.
- `senior-frontend` & `vue-frontend-expert` — React 19 and Vue 3 host/remote implementations.
- `monorepo-architect` — Managing multiple MFEs within a unified Turborepo/pnpm workspace.
- **Cross-Domain Synergy & Subagent Swarm Integration**: `nextjs-app-router-expert`, `spa-orchestrator`

### Description
Production-grade guidance for decomposing large enterprise frontend monoliths into independently deployable **Micro-Frontends (MFE)**. Covers **Module Federation 2.0 (`@module-federation/enhanced` & Vite plugin)** with dynamic TypeScript remote types, isolated **Error & Suspense Boundaries** per remote, typed cross-MFE communication via the browser `CustomEvent` bus, and CSS Cascade Layers (`@layer`) isolation.

### Trigger Conditions
- Splitting a large frontend codebase into independent domain verticals (Host Shell + Checkout/Analytics/Admin Remotes).
- Configuring Module Federation 2.0 in Vite, Rspack, or Webpack.
- Enforcing singleton framework sharing (`react`, `react-dom`, `vue`, `pinia`, `@tanstack/react-query`).
- Preventing a crashed remote micro-app from taking down the entire host application shell.

### Hard Guardrails (Declarative Invariants)
- **Strict Singleton Sharing for Stateful Runtimes**: Always declare `singleton: true` on `react`, `react-dom`, `react-router`, `vue`, `pinia`, and `@tanstack/react-query` in Module Federation configs to prevent dual-instance hook crashes.
- **Fault-Isolated Error & Suspense Boundary per Remote**: Wrap every remote micro-frontend mount point in its own `ErrorBoundary` and `<Suspense>` fallback so a broken remote never crashes the host shell.
- **Zero Coupled Global Store Across Remotes**: Never import or mutate a host Redux/Zustand store directly from a remote MFE; communicate exclusively via URL parameters or a typed `CustomEvent` contract.
- **CSS Cascade Layer (`@layer`) Encapsulation**: Scope every remote's styles inside a dedicated `@layer mfe-<name>` or CSS Module namespace so remote stylesheets never override host shell layout tokens.
- **Dynamic Runtime Manifest Versioning**: Load remotes via `mf-manifest.json` with health-checked fallback URLs rather than hardcoding static bundle hashes.
- **Sub-App Cleanup on Unmount**: Ensure every remote unregisters `window` event listeners, WebSocket subscriptions, and timers when unmounted by the host router.

---

### Micro-Frontend Composition Matrix

| Composition Pattern | Integration Layer | Framework Agnostic | Best For |
| :--- | :--- | :---: | :--- |
| **Module Federation 2.0** | Client/SSR Runtime (`mf-manifest.json`) | ✅ | Dynamic runtime composition with shared singleton libraries |
| **Astro Server Islands** | HTML Edge / Server Assembly | ✅ | Mixing React, Vue, and Svelte islands with zero client baseline JS |
| **Multi-Zone Routing** | Reverse Proxy / Edge Path Rewrite | ✅ | Hard isolation between `/app/*`, `/docs/*`, and `/checkout/*` |
| **Web Components (Shadow DOM)** | Custom Elements (`customElements.define`) | ✅ | Strict CSS & DOM encapsulation for embedded widgets |

---

### Core Implementation Patterns

#### 1. Vite / Module Federation 2.0 Config with Strict Singletons
Always configure `singleton: true` on stateful libraries (`react`, `react-dom`, `react-router`, `@tanstack/react-query`) so two runtime copies never collide:

```typescript
// apps/host-shell/vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { federation } from '@module-federation/vite';

export default defineConfig({
  plugins: [
    react(),
    federation({
      name: 'host_shell',
      remotes: {
        billing_remote: {
          type: 'module',
          name: 'billing_remote',
          entry: process.env.VITE_BILLING_REMOTE_URL ?? 'http://localhost:5001/mf-manifest.json',
        },
      },
      shared: {
        react: { singleton: true, requiredVersion: '^19.0.0' },
        'react-dom': { singleton: true, requiredVersion: '^19.0.0' },
        '@tanstack/react-query': { singleton: true, requiredVersion: '^5.0.0' },
      },
    }),
  ],
  build: {
    target: 'chrome115',
  },
});
```

---

#### 2. Resilient Remote Loader with Fault-Isolated Error Boundary
A remote micro-frontend deployment or CDN outage must never crash the Host Shell. Wrap every remote import in a dedicated Error Boundary + Suspense fallback:

```tsx
// apps/host-shell/src/components/RemoteSlot.tsx
import React, { Component, Suspense, type ReactNode } from 'react';

interface RemoteSlotProps {
  remoteName: string;
  children: ReactNode;
}

interface RemoteSlotState {
  hasError: boolean;
  errorMessage: string | null;
}

export class RemoteSlot extends Component<RemoteSlotProps, RemoteSlotState> {
  state: RemoteSlotState = { hasError: false, errorMessage: null };

  static getDerivedStateFromError(error: Error): RemoteSlotState {
    return { hasError: true, errorMessage: error.message };
  }

  private handleRetry = () => {
    this.setState({ hasError: false, errorMessage: null });
  };

  render() {
    if (this.state.hasError) {
      return (
        <section
          role="alert"
          className="rounded-xl border border-neutral-800 bg-neutral-950 p-6 text-neutral-200"
        >
          <p className="text-xs font-mono uppercase tracking-wider text-amber-400">
            Module Unavailable: {this.props.remoteName}
          </p>
          <p className="mt-1 text-sm text-neutral-400">
            This micro-application failed to load ({this.state.errorMessage}). Other workspace modules remain active.
          </p>
          <button
            type="button"
            onClick={this.handleRetry}
            className="mt-4 rounded-lg border border-neutral-700 bg-neutral-900 px-3.5 py-1.5 text-xs font-medium text-neutral-100 hover:bg-neutral-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-400"
          >
            Reload Module
          </button>
        </section>
      );
    }

    return (
      <Suspense
        fallback={
          <div className="h-48 w-full animate-pulse rounded-xl border border-neutral-800 bg-neutral-900/50" />
        }
      >
        {this.props.children}
      </Suspense>
    );
  }
}
```

---

#### 3. Typed Cross-MFE Event Bus (Zero Coupled State)
Avoid sharing global Redux/Zustand stores across team boundaries. Use a typed contract over native DOM `CustomEvent`:

```typescript
// packages/mfe-contracts/src/event-bus.ts
export interface MfeEventMap {
  'mfe:cart:item-added': { sku: string; quantity: number; priceMinor: number };
  'mfe:auth:tenant-switched': { tenantId: string; role: 'admin' | 'member' };
}

export function emitMfeEvent<K extends keyof MfeEventMap>(
  eventName: K,
  payload: MfeEventMap[K]
): void {
  window.dispatchEvent(new CustomEvent(eventName, { detail: payload }));
}

export function onMfeEvent<K extends keyof MfeEventMap>(
  eventName: K,
  handler: (payload: MfeEventMap[K]) => void
): () => void {
  const listener = (event: Event) => {
    const customEvent = event as CustomEvent<MfeEventMap[K]>;
    handler(customEvent.detail);
  };
  window.addEventListener(eventName, listener);
  return () => window.removeEventListener(eventName, listener);
}
```

---

#### 4. Dynamic Runtime Remote Registry & Health-Checked Loader (`@module-federation/enhanced/runtime`)
Register and load remote micro-frontends dynamically at runtime based on tenant feature flags with automatic fallback if a remote CDN is unreachable:

```typescript
// apps/host-shell/src/federation/runtime-loader.ts
export interface RemoteManifestEntry {
  readonly name: string;
  readonly entryUrl: string;
  readonly fallbackUrl?: string;
}

export async function verifyAndResolveRemoteEntry(entry: RemoteManifestEntry, timeoutMs = 2500): Promise<string> {
  const controller = new AbortController();
  const timer = setTimeout(() => controller.abort(), timeoutMs);

  try {
    const response = await fetch(entry.entryUrl, {
      method: 'HEAD',
      signal: controller.signal,
    });
    if (response.ok) {
      return entry.entryUrl;
    }
    if (entry.fallbackUrl) {
      return entry.fallbackUrl;
    }
    throw new Error(`Remote ${entry.name} returned HTTP ${response.status}`);
  } catch (err) {
    if (entry.fallbackUrl) {
      return entry.fallbackUrl;
    }
    throw err;
  } finally {
    clearTimeout(timer);
  }
}
```

---

#### 5. CSS Cascade Layer (`@layer`) Isolation Contract Between Host & Remotes
Prevent remote micro-frontend utility classes from clobbering host shell navigation or modal z-index stacking contexts by enforcing explicit `@layer` priority order:

```css
/* apps/host-shell/src/styles/layers.css */
@layer reset, design-tokens, mfe-analytics, mfe-billing, host-shell, host-overlays;

@layer design-tokens {
  :root {
    --surface-bg: #090a0f;
    --surface-border: #1e2029;
    --text-primary: #f3f4f6;
  }
}

@layer host-shell {
  .host-GlobalHeader {
    position: sticky;
    top: 0;
    z-index: 40;
    border-bottom: 1px solid var(--surface-border);
    background-color: var(--surface-bg);
  }
}
```

---

#### 6. Web Component Shadow DOM Bridge for Framework-Agnostic Remotes
Mount a Vue 3 or SolidJS remote micro-app inside a React 19 Host Shell with strict Shadow DOM style encapsulation and lifecycle cleanup:

```typescript
// packages/mfe-bridge/src/shadow-mount.ts
export interface MicroAppLifecycle {
  mount: (container: HTMLElement, props: Record<string, unknown>) => void;
  unmount: (container: HTMLElement) => void;
}

export function registerMicroAppCustomElement(
  tagName: string,
  lifecycle: MicroAppLifecycle,
  scopedCssText: string
): void {
  if (customElements.get(tagName)) return;

  class MicroAppElement extends HTMLElement {
    private mountRoot: HTMLDivElement | null = null;

    connectedCallback(): void {
      const shadow = this.shadowRoot ?? this.attachShadow({ mode: 'open' });
      shadow.innerHTML = '';

      const styleEl = document.createElement('style');
      styleEl.textContent = scopedCssText;
      shadow.appendChild(styleEl);

      this.mountRoot = document.createElement('div');
      shadow.appendChild(this.mountRoot);

      lifecycle.mount(this.mountRoot, {
        tenantId: this.getAttribute('data-tenant-id') ?? '',
      });
    }

    disconnectedCallback(): void {
      if (this.mountRoot) {
        lifecycle.unmount(this.mountRoot);
        this.mountRoot = null;
      }
    }
  }

  customElements.define(tagName, MicroAppElement);
}
```

---

### Verification Checklist
- [ ] Core framework packages (`react`, `react-dom`, `vue`) are configured with `singleton: true` in Module Federation.
- [ ] Every remote MFE mount point is wrapped in a fault-isolated `ErrorBoundary` and `<Suspense>` skeleton.
- [ ] Cross-MFE communication uses URL search params or a typed `CustomEvent` contract rather than coupled global state.
- [ ] CSS rules are scoped via CSS Modules, Tailwind prefix/layers (`@layer mfe-billing`), or Shadow DOM to prevent style bleed.

### Sovereign Execution, Token Efficiency & Invariants
| Dimension | Sovereign Mandate & Deterministic Contract |
| :--- | :--- |
| **Frontier Model Cascade** | Medium / High (`Gemini 4 Argon`, `Claude Sonnet 5.5 High`, `Muse Wonder High`, `Composer 2.5 Fast`) |
| **Availability Fallback** | `Gemini 4 Argon/Pro` -> `Gemini 3.8 Flash`; `Claude Opus 5.5` -> `Claude Opus 4.6` (Zero unhandled missing-model errors) |
| **KV-Cache & Token Protocol** | Pin static instructions & schemas at prompt prefix (`kv-cache-prefix-optimizer`); pass surgical `CONTEXT_MAP.md` slices (<250 tokens/call) during Swarm Fan-Out |
| **SaaT CLI & MCP Dispatch** | CLI: `vibes skill exec micro-frontend-architect <audit\|eval\|verify\|generate\|blueprint>` / MCP: `vibes_skill_dispatch`, `vibes_visual_audit`, `vibes_ast_query`, `vibes_verify_gate` |
| **NFR & Anti-Slop Invariants** | LCP < 1.8s, INP < 100ms, CLS < 0.05, 1px crisp borders, 3-tier radius (6px/8px/12px), `tabular-nums`, 5-state interactive contract; 100% complete zero-placeholder output verified via `node scripts/check-anti-slop.js --strict` |

---


---

<a name="bahasa-indonesia"></a>
## Bahasa Indonesia

### Integrasi Orkestrasi
Terhubung dan mengorkestrasi skill domain yang relevan:
- `design-system-architect` — Sistem desain terversi bersama, token desain, dan pustaka komponen UI lintas host dan remote.
- `composable-mach-architect` — Orkestrasi shell frontend enterprise komposabel dan routing BFF.
- `ui-ux-pro-max` — Konsistensi navigasi mulus, koherensi tata letak, dan harmonisasi gaya antar aplikasi mikro.
- `visual-ui-auditor` — Audit visual multimodal untuk integrasi visual lintas MFE dan kebocoran enkapsulasi CSS.
- `anti-slop` — Arsitektur MFE anti-slop, kontrak dependensi singleton yang ketat, dan nol kebocoran styling.
- `senior-frontend` & `vue-frontend-expert` — Implementasi host/remote React 19 dan Vue 3.
- `monorepo-architect` — Pengelolaan multi-MFE dalam workspace Turborepo/pnpm terpadu.
- **Sinergi Lintas Domain & Integrasi Swarm Subagent**: `nextjs-app-router-expert`, `spa-orchestrator`

### Deskripsi
Panduan kelas produksi untuk memecah aplikasi frontend monolitik berskala besar menjadi **Micro-Frontends (MFE)** yang dapat di-deploy secara independen menggunakan **Module Federation 2.0**, lengkap dengan isolasi *Error Boundary* per modul, *Event Bus* bertipe kuat, dan enkapsulasi CSS.

### Panduan Arsitektur Inti
1. **Singleton Dependency Sharing**: Wajib tandai `react`, `react-dom`, `vue`, dan `@tanstack/react-query` dengan `singleton: true` agar browser tidak memuat dua instance runtime yang saling bertabrakan.
2. **Isolasi Kegagalan (Fault Isolation)**: Bungkus setiap komponen Remote di dalam `ErrorBoundary` dan `<Suspense>` khusus agar gangguan pada satu MFE tidak mematikan Host Shell utama.
3. **Komunikasi Terdekopel**: Gunakan kontrak `CustomEvent` bertipe di `window` atau parameter URL, hindari berbagi global store secara langsung antar tim.

### Daftar Periksa Verifikasi (Checklist)
- [ ] Pustaka utama (`react`, `react-dom`, `vue`) ditandai sebagai `singleton: true`.
- [ ] Setiap titik muat Remote dibungkus dengan `ErrorBoundary` dan skeleton `<Suspense>`.
- [ ] Komunikasi lintas MFE menggunakan `CustomEvent` bertipe kuat.
- [ ] CSS dienkapsulasi dengan CSS `@layer` atau CSS Modules agar tidak bocor antar aplikasi.

### Matriks Eksekusi Berdaulat, Efisiensi Token & Invarian
| Dimensi | Mandat Berdaulat & Kontrak Deterministik |
| :--- | :--- |
| **Kaskade Model Frontier** | Medium / High (`Gemini 4 Argon`, `Claude Sonnet 5.5 High`, `Muse Wonder High`, `Composer 2.5 Fast`) |
| **Invarian Fallback Ketersediaan** | `Gemini 4 Argon/Pro` -> `Gemini 3.8 Flash`; `Claude Opus 5.5` -> `Claude Opus 4.6` (Bebas gagal saat model belum tersedia/kuota penuh) |
| **Protokol Hemat Token & KV-Cache** | Kunci instruksi & skema statis di prefix awal (`kv-cache-prefix-optimizer`); kirim potongan `CONTEXT_MAP.md` (<250 token/panggilan) saat Fan-Out |
| **Eksekusi SaaT CLI & MCP** | CLI: `vibes skill exec micro-frontend-architect <audit\|eval\|verify\|generate\|blueprint>` / MCP: `vibes_skill_dispatch`, `vibes_visual_audit`, `vibes_ast_query`, `vibes_verify_gate` |
| **Invarian NFR & Anti-Slop** | LCP < 1.8s, INP < 100ms, CLS < 0.05, border tegas 1px, radius 3-tier (6px/8px/12px), `tabular-nums`, kontrak interaktif 5-state; kode 100% tuntas tanpa placeholder diverifikasi melalui `node scripts/check-anti-slop.js --strict` |