mfe-pattern

Expose and orchestrate micro frontends via window surface and hash-based routing.

Updated Apr 28, 2026

Search Tags:#architecture #lifecycle #micro-frontend #mfe #hash-router #window-exposure

Ready to run

npx skills add https://github.com/PMKhai/claude-config --skill mfe-pattern

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: mfe-pattern
Source: https://github.com/PMKhai/claude-config/tree/main/skills/mfe-pattern
Command: npx skills add https://github.com/PMKhai/claude-config --skill mfe-pattern

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Expose and orchestrate micro frontends by implementing a standard window surface, hash-based routing isolation, and host/remote lifecycle contracts.

Core Features & Use Cases

Global window exposure for MFE modules with a defined API surface and versioning.
Hash-based routing isolation to prevent host router conflicts.
Host/remote lifecycle contracts enabling clean mount/unmount and navigation.
Use cases include integrating multiple MFEs under a single shell while preserving independence and predictable navigation.

Quick Start

Mount the MFE on a host page by calling window.MFEName.render('container-id', config) with your initial route and then later invoking window.MFEName.navigate('/dashboard').

Frequently Asked Questions about mfe-pattern

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I orchestrate micro frontends and prevent host router conflicts?▼

Micro frontend orchestration prevents host router conflicts by implementing hash-based routing isolation, establishing host/remote lifecycle contracts, and exposing MFE modules through a standardized global window surface.

What is hash-based routing isolation for micro frontends?▼

Hash-based routing isolation for micro frontends is a mechanism that separates remote route lists from the host application's router, preventing navigation conflicts while preserving predictable routing across standalone MFEs integrated into a single shell.

How do host and remote lifecycle contracts work in micro frontend integration?▼

Host and remote lifecycle contracts in micro frontend integration define clean mount and unmount behaviors alongside navigation events, ensuring predictable loading and teardown when multiple MFEs are integrated under a single host shell.

Can I expose micro frontend modules globally without versioning conflicts?▼

You can expose micro frontend modules globally without versioning conflicts by utilizing a defined API surface on the window object that includes versioning, ensuring predictable host and remote communication across independent MFEs.

What are the limitations of using a window surface for micro frontend exposure?▼

Limitations of using a window surface for micro frontend exposure include potential global namespace collisions if versioning is ignored, requiring strict adherence to defined API surfaces and lifecycle contracts to maintain safe host and remote integration.