Name: mfe-skills
Author: lucamezzalira

MFE Skills

Micro-frontend architecture governance for AI code assistants.

Two skills that give your code assistant deep knowledge of micro-frontend boundary design, the eight boundary rules from Building Micro-Frontends (O'Reilly), violation detection, and remediation patterns. Covers Module Federation v1/v2, Native Federation (Angular), and Single SPA.

Skills included:

understanding-mfe-architecture activates on adoption decisions, boundary design, and composition patterns (pairs with the separate micro-frontend-canvas skill for Canvas facilitation)
reviewing-mfe-boundaries activates on code review, shell generation, violation detection, and cross-MFE communication

Why use these skills?

AI assistants are good at scaffolding Module Federation quickly. Without governance, they often produce tutorial-style micro-frontends that compile and demo well but erode team autonomy over time.

We ran a controlled experiment: two agents, same brief (React 19, Module Federation, ecommerce shell + home + catalog MFEs). One built without these skills; one built with AGENTS.md and reviewing-mfe-boundaries.

Reference implementation (with skills): lucamezzalira/mfe-with-skills — ThreadTales (Module Federation 2.0, runtime discovery, vendored skills + AGENTS.md).

Branch	Purpose
`main`	Starting point: `AGENTS.md`, `docs/SPEC.md`, skills — no app code
`ecommerce-init-implementation`	Runnable app — AppShell + five remotes, discovery service (`pnpm install` / `pnpm start`)

Use ecommerce-init-implementation for Start Here and code review; use main to bootstrap a new project from spec only.

Before vs after (experiment)

Area	Without skills	With skills
Cross-MFE imports	Shell imports `catalogMfe/productUtils`	No imports across remotes; each MFE exposes only its app entry
Mount contract	`shellUser`, `cart`, `formatPrice`, `onNavigate`	`userId` + `platformBus` (chrome only)
Shared state	`window.__SHOP_CART__` global singleton	No shared store; URL + platform events
Routing	Shell knows home + catalog pages	Shell loads first URL segment only (manifest/discovery); MFE owns deeper paths like `/catalog/product/:id`
Adding a route/MFE	Edit shell `App.tsx`	Add entry in manifest/discovery config (no shell domain-page code changes)
Remote URLs	Hard-coded in webpack config	Runtime discovery (`remotes.json` or `frontend-discovery.json`)
Failure handling	`Suspense` only	Shell `ErrorBoundary` + fallback per remote
Shell events	N/A (navigation via callbacks/globals)	`shell:alert`, `shell:modal:` allowed — no `catalog:` / `checkout:*` in shell

The without-skills build had critical boundary violations (cross-imports, shared state, fat API). The with-skills build aligned with the eight rules and stayed extensible without redeploying the shell for every catalog sub-page. Details: docs/experiment.md · code: mfe-with-skills.

What you get

Fewer distributed-monolith traps — agents stop “sharing utils” and global stores across team boundaries
Shell stays thin — dynamic first-level routes, platform chrome only, no domain logic baked into the host
Reviews that mean something — violations tied to rules, severity, and remediation — not generic React advice
Works across assistants — same governance in Claude Code skills, Cursor .mdc rules, and Codex AGENTS.md

Pair the skills with your project’s CLAUDE.md / AGENTS.md (team ownership, toolchain, known exceptions) so the agent applies general rules to your system.

Companion skill: micro-frontend-canvas — Micro-Frontend Canvas worksheets and facilitation (not included in this repo).

Optional governance template: docs/governance.md — policy YAML + ts-arch/jest fitness-function starter for teams that want CI enforcement.

Advanced governance extensions

Beyond the eight core boundary rules, the skills also guide these advanced topics:

MFE Skills

Micro-frontend architecture governance for AI code assistants.

Skills included:

understanding-mfe-architecture activates on adoption decisions, boundary design, and composition patterns (pairs with the separate micro-frontend-canvas skill for Canvas facilitation)
reviewing-mfe-boundaries activates on code review, shell generation, violation detection, and cross-MFE communication

Why use these skills?

Reference implementation (with skills): lucamezzalira/mfe-with-skills — ThreadTales (Module Federation 2.0, runtime discovery, vendored skills + AGENTS.md).

Branch	Purpose
`main`	Starting point: `AGENTS.md`, `docs/SPEC.md`, skills — no app code
`ecommerce-init-implementation`	Runnable app — AppShell + five remotes, discovery service (`pnpm install` / `pnpm start`)

Use ecommerce-init-implementation for Start Here and code review; use main to bootstrap a new project from spec only.

Before vs after (experiment)

Area	Without skills	With skills
Cross-MFE imports	Shell imports `catalogMfe/productUtils`	No imports across remotes; each MFE exposes only its app entry
Mount contract	`shellUser`, `cart`, `formatPrice`, `onNavigate`	`userId` + `platformBus` (chrome only)
Shared state	`window.__SHOP_CART__` global singleton	No shared store; URL + platform events
Routing	Shell knows home + catalog pages	Shell loads first URL segment only (manifest/discovery); MFE owns deeper paths like `/catalog/product/:id`
Adding a route/MFE	Edit shell `App.tsx`	Add entry in manifest/discovery config (no shell domain-page code changes)
Remote URLs	Hard-coded in webpack config	Runtime discovery (`remotes.json` or `frontend-discovery.json`)
Failure handling	`Suspense` only	Shell `ErrorBoundary` + fallback per remote
Shell events	N/A (navigation via callbacks/globals)	`shell:alert`, `shell:modal:` allowed — no `catalog:` / `checkout:*` in shell

What you get

Fewer distributed-monolith traps — agents stop “sharing utils” and global stores across team boundaries
Shell stays thin — dynamic first-level routes, platform chrome only, no domain logic baked into the host
Reviews that mean something — violations tied to rules, severity, and remediation — not generic React advice
Works across assistants — same governance in Claude Code skills, Cursor .mdc rules, and Codex AGENTS.md

Pair the skills with your project’s CLAUDE.md / AGENTS.md (team ownership, toolchain, known exceptions) so the agent applies general rules to your system.

Companion skill: micro-frontend-canvas — Micro-Frontend Canvas worksheets and facilitation (not included in this repo).

Optional governance template: docs/governance.md — policy YAML + ts-arch/jest fitness-function starter for teams that want CI enforcement.

Advanced governance extensions

Beyond the eight core boundary rules, the skills also guide these advanced topics:

Help us improve

Find plugins for your project

Help us improve

mfe-skills

Popularity

What's Inside

README

Help us improve

Health & Quality

Confidence

MFE Skills

Why use these skills?

Before vs after (experiment)

What you get

Advanced governance extensions

Similar Plugins

microservices-patterns

microservices-architect

sdlc-team-fullstack

frontend-craft

frontend-skills

ui-ux-pro-max

MFE Skills

Why use these skills?

Before vs after (experiment)

What you get

Advanced governance extensions