Micro-Frontend Architect

Download SKILL.mdGet Murage How skills work

Open source. macOS, Windows and Linux.

At a glance

What it is

Expert guidance for designing and implementing micro-frontend architectures using module federation, single-spa, routing strategies, shared state, and team coordination patterns.

A skill is a written procedure a bot loads when a job calls for it. This one is a single file, SKILL.md, and the whole file is on this page.

File: SKILL.md
Length: 443 lines1,726 words, about 8 min read
Category: Web developmentfrontend frameworks
Level: Intermediate
License: Apache-2.0

More web development skills.

The full skill.

The whole file, exactly as it downloads. Read it before you rely on it.

SKILL.md

443 lines · 1,726 words

Download

Micro-Frontend Architect

You are an expert micro-frontend architect who designs and implements independently deployable frontend applications that compose into a unified user experience. You guide teams through module federation, single-spa orchestration, routing strategies, shared state management, design system integration, and the organizational patterns that make micro-frontends successful. You balance technical sophistication with pragmatic decisions about when the complexity is justified.

When to Use Micro-Frontends

Decision Matrix

Put this skill to work.

Questions.

What is the Micro-Frontend Architect skill?

Expert guidance for designing and implementing micro-frontend architectures using module federation, single-spa, routing strategies, shared state, and team coordination patterns.

How much does it cost?

Nothing. It ships with Murage, which is open source. Your bots run on the AI plan you already have.

Can I change it?

Yes. Open it in Settings → Skills to read, edit or duplicate it. Skill Guard scans it again after every edit.

Give your first job to Murage.

Download the app, connect the AI you already pay for, and tell your Chief of Staff what needs doing. Plan on about ten minutes from install to a working team.

Download Murage

No account needed · Runs on the AI plan you already pay for

Team count	3+ independent teams	1-2 teams
Deploy cadence	Teams need independent deploys	Coordinated releases acceptable
Tech diversity	Different frameworks per domain	Single framework across app
Codebase age	Legacy + new coexisting	Greenfield or recent
Domain boundaries	Clear, stable domain boundaries	Highly interconnected features
Organization	Conway's law alignment needed	Single product team

Test Type	Scope	Tool
Unit tests	Individual MFE components	Jest/Vitest + Testing Library
Integration tests	MFE in isolation	Cypress component testing
Contract tests	MFE-to-MFE interfaces	Pact or custom schema validation
E2E tests	Full composed application	Playwright across all MFEs
Visual regression	Design system consistency	Chromatic / Percy

Micro-Frontend Architect

More web development skills.

The full skill.

Micro-Frontend Architect

When to Use Micro-Frontends

Decision Matrix

Put this skill to work.

Questions.

Give your first job to Murage.

Search murage.ai

Micro-Frontend Architect

More web development skills.

The full skill.

Micro-Frontend Architect

When to Use Micro-Frontends

Decision Matrix

Put this skill to work.

Questions.

Give your first job to Murage.

Create a bot and use this skill.

Ask Ember to create the bot

Open the bot’s skills

Find Micro-Frontend Architect and switch it on

Ask the bot for the job

About this skill.

Anti-Patterns to Avoid

Module Federation (Webpack 5 / Rspack)

Host Application Configuration

Remote Application Configuration

Dynamic Remote Loading

Error Boundary for Remote Components

Single-SPA Orchestration

Root Config

Routing Strategies

Cross-MFE Navigation Events

Shared State Patterns

Event Bus for Cross-MFE Communication

Shared Auth State

Design System and Shared Dependencies

Versioning Strategy

Build and Deploy Pipeline

Independent Deploy Pipeline (per micro-frontend)

Runtime Remote Resolution

Testing Strategy

Architecture Checklist

Output Format

Example

Edge Cases