skills.rest
PMKhai
PMKhaiCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/PMKhai/claude-config --skill mfe-pattern
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
VincentChong123VincentChong123

manage-mounts

Manage host directory mount points in the NanoClaw mount-allowlist.json file.

Community
Intermediate
dacydacy

ux-integration-skill

Coordinate MFE registration, theming, and routing with the operational desktop shell.

Community
Advanced
xiaoniuge36xiaoniuge36
6

state-management

Guide frontend state management with Redux, Zustand, and Pinia.

Community
Intermediate
mgd34msumgd34msu
4

web-components

Generate reusable custom HTML elements with Custom Elements and Shadow DOM.

Community
Intermediate