mfe-boundary-remediation

Remediation patterns

Version: 1.2 | Skill: reviewing-mfe-boundaries | Source: Building Micro-Frontends (O'Reilly)

Each section maps to one of the eight boundary rules.

---

Rule 1 — Reframing a component as a micro-frontend (or vice versa)

If a unit named or behaving as a UI component is being integrated as a micro-frontend, the fix is to decide which it actually is:

If it is truly a shared UI primitive (button, form field, layout wrapper): move it to an npm design system package. Remove the runtime integration overhead. It should be a versioned package dependency, not a deployed micro-frontend.

If it is truly a business capability masquerading as a component: rename it to reflect the domain, assign a single team to own it, and ensure it fetches its own data rather than receiving domain objects as props.

If the boundary is ambiguous: run the boundary health check from understanding-mfe-architecture/references/rules.md. If it fails two or more tests, it is in the wrong category.

---

Rule 2 — Reducing an oversized API surface

Before — container owns context:

<CheckoutMicrofrontend
  user={user}
  cart={cart}
  shippingOptions={shippingOptions}
  paymentMethods={paymentMethods}
  discountCodes={discountCodes}
/>

After — step 1: identify which props are domain data the micro-frontend should fetch itself.

In this example: shippingOptions, paymentMethods, and discountCodes are checkout domain data. The checkout micro-frontend should retrieve them from its own backend (BFF or API layer), not receive them from the container.

After — step 2: reduce to the minimum context identifiers:

// The checkout MFE fetches its own shipping options, payment methods, discounts
<CheckoutMicrofrontend userId={userId} cartId={cartId} />

After — step 3: inside the checkout micro-frontend, fetch domain data directly:

// Inside checkout-mfe — fetches its own data
function CheckoutApp({ userId, cartId }) {
  const cart = useCartData(cartId)           // own API call
  const shippingOptions = useShipping()      // own API call
  const paymentMethods = usePaymentMethods() // own API call
}