home / skills / harborgrid-justin / lexiflow-premium / micro-frontend-federation

micro-frontend-federation skill

/frontend/.github-skills/micro-frontend-federation

This skill helps orchestrate distributed React applications using Module Federation and shared contexts, enabling seamless remotes, synchronized state, and

npx playbooks add skill harborgrid-justin/lexiflow-premium --skill micro-frontend-federation

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

857 B

---
name: micro-frontend-federation
description: Orchestrate distributed React applications using Module Federation and shared context bridges.
---

# Micro-Frontend Federation (React 18)

## Summary
Orchestrate distributed React applications using Module Federation and shared context bridges.

## Key Capabilities
- Share React Context across federation boundaries.
- Manage version skew in shared dependencies at runtime.
- Isolate styling and event propagation between remote modules.

## PhD-Level Challenges
- Design a fault-tolerant loading strategy for failing remotes.
- Prove type-safety across dynamic module boundaries.
- Analyze memory overhead of duplicate dependency loading.

## Acceptance Criteria
- Deploy a host app with seamlessly integrated remotes.
- Demonstrate shared state synchronization.
- Document the dependency sharing policy.

Overview

This skill helps orchestrate distributed React applications using Module Federation and shared context bridges. It focuses on sharing React Context across remote boundaries, managing runtime dependency version skew, and isolating styling and event propagation. The outcome is a predictable, integratable micro-frontend platform for complex web apps.

How this skill works

The skill wires a host application to load remote React modules via Module Federation and establishes a lightweight context bridge to propagate React Context values across those boundaries. It inspects shared dependency metadata at runtime and applies a policy to decide whether to reuse host versions or fall back to remote bundles. It also includes isolation strategies for CSS and DOM events to prevent cross-remote leakage.

When to use it

Building a large web product split across independently deployable React teams
When multiple teams must share application state or authentication context across micro-frontends
To reduce bundle duplication while handling runtime version mismatches of common libs
When you need to isolate remote styling or prevent event collisions between modules
For progressive migration of a monolith into independent React remotes

Best practices

Define a clear shared dependency policy (prefer host, pin critical libs) and document it
Expose minimal, well-typed context slices rather than entire stores
Implement a fallback UI and lazy retry strategy for failed remote loads
Use CSS isolation (shadow DOM or CSS modules) to avoid style bleed
Monitor memory and bundle duplication in production to detect version skew costs

Example use cases

Host app loads an authentication remote that shares user context to all remotes
Teams independently deploy feature modules (dashboard, billing, docs) with shared UI library
A legal management platform integrates contract editor remote while keeping styling isolated
Graceful degradation: show core features if a non-essential remote fails to load
Runtime enforcement: detect incompatible React versions and switch to an adapter

FAQ

How does the context bridge affect performance?

The bridge passes references and subscriptions, minimizing re-renders; measure update frequency and memoize selectors to keep overhead low.

What if a remote uses a different React version?

Apply a version policy: prefer host singleton for core libs or load the remote in an isolated boundary and use an adapter to translate APIs when necessary.