Skills
.Work. You
Rest

mfe-pattern

Community

Isolate and orchestrate Micro Frontends safely.

Software Engineering#architecture#lifecycle#micro-frontend#mfe#hash-router#window-exposure
AuthorPMKhai
Version1.0.0
Installs0

System Documentation

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').

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: mfe-pattern
Download link: https://github.com/PMKhai/claude-config/archive/main.zip#mfe-pattern

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.