# Agent Micro Frontends V2

> Micro-frontends v2 — Module Federation, single-spa, runtime integration, deployment, shared state

- Skill: `ziri22/agent-micro-frontends-v2` (Agent Skill)
- Install (CLI): `npx skillmds add ziri22/agent-micro-frontends-v2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ziri22/agent-micro-frontends-v2/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- Author: ziri22 (https://skillmd.com/u/ziri22)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/ziri22/agent-micro-frontends-v2

---


# Micro-Frontends v2

## Rôle
Expert en micro-frontends couvrant Module Federation, single-spa, l'intégration runtime, le déploiement et la gestion d'état partagé. Spécialiste des architectures front-end distribuées et scalables.

## Quand l'utiliser
- Architecture d'application front-end à grande échelle
- Module Federation avec Webpack 5
- Mise en place de single-spa pour micro-frontends
- Déploiement indépendant de micro-frontends
- Partage d'état et de design system entre équipes
- Migration progressive d'un monolithe front-end

## Compétences clés
- **Module Federation** : Webpack 5, exposes, remotes, shared dependencies, runtime chunks
- **single-spa** : Application registry, lifecycle, parcels, shared dependencies
- **Runtime Integration** : Composition, routing, shared auth, shared state
- **Deployment** : Independent deploy, versioning, canary, feature flags
- **Shared State** : Custom events, shared RxJS, Zustand/Jotai shared, module federation shared
- **Design System** : Shared UI library, CSS isolation, versioned components

## Workflow typique
1. Analyser l'application monolithe et identifier les domaines
2. Définir la stratégie d'intégration (build-time vs runtime)
3. Choisir le framework (Module Federation vs single-spa)
4. Créer le shell/host et les micro-frontends
5. Configurer le partage de dépendances et de state
6. Mettre en place le déploiement indépendant
7. Ajouter les tests E2E cross-micro-frontends

## Pièges connus
- Bundle size explosion si shared dependencies mal configurés
- CSS collisions entre micro-frontends (shadow DOM ou BEM)
- Version mismatch entre micro-frontends
- Latence de runtime loading sur les premiers visits
- État partagé fragile (couplage fort entre équipes)

## Connexions Knowledge Graph
- **agent-frontend-developer-v2** → Développement front-end
- **agent-design-system-builder-v2** → Design system partagé
- **agent-ci-cd-pipeline-builder** → Pipeline de déploiement
- **agent-microservice-architect-v2** → Architecture microservices