Context

Use this skill when the task is to consume a remote Micro-Frontend (MFE) inside the host application. It covers two scenarios:

1. Static consumption — call createRemoteComponent once at module level and render the result directly.
2. Dynamic consumption — use the LoadComponent helper to register and render a remote lazily, driven by a runtime MFEConfig object.

Do not use this skill to create or modify the remote MFE itself. This skill only concerns the host-side consumer code.

Inputs (placeholders)

Architecture Rule: Component Folder Pattern

All consumer components generated by this skill MUST strictly follow the Component Folder Pattern. Flat .tsx files are strictly forbidden.

Every new consumer must be generated inside its own PascalCase subfolder containing exactly:

1. [CONSUMER_NAME].tsx (The main component)
2. types.ts or [CONSUMER_NAME].types.ts (Interfaces and types)
3. index.ts (Barrel export)
4. SDD_[CONSUMER_NAME].md (Software Design Document)

The service file itself (src/api/services/module-federation/moduleFederationService.tsx) must never be modified. It is a read-only reference.

Step 1 — Define MFEConfig

Create the config object conforming to the MFEConfig interface. Place this constant inside the consumer's dedicated folder (either in the main .tsx or a separate config.ts inside the folder).

import type { MFEConfig } from '<RELATIVE_PATH_TO_SERVICE>/moduleFederationService';

export const MFE_NAME_Config: MFEConfig = {
  mfe:       'MFE_NAME',
  url:       'MFE_URL',
  component: 'COMPONENT_EXPOSE',
};

Step 2 — Static consumer (module-level)

Use createRemoteComponent when the remote URL and component are known at build time:

import React from 'react';
import { createRemoteComponent } from '<RELATIVE_PATH_TO_SERVICE>/moduleFederationService';
import { MFE_NAME_Config } from './config'; // Or defined in the same file

const CONSUMER_NAME = createRemoteComponent(MFE_NAME_Config);

export const CONSUMER_NAMEWrapper: React.FC<Record<string, unknown>> = (props) => (
  <React.Suspense fallback={<div>Loading CONSUMER_NAME…</div>}>
    <CONSUMER_NAME {...props} />
  </React.Suspense>
);

export default CONSUMER_NAMEWrapper;

Step 3 — Dynamic consumer (runtime LoadComponent)

Use LoadComponent when the MFEConfig is received at runtime (e.g. from an API response or a prop):

import React from 'react';
import { LoadComponent } from '<RELATIVE_PATH_TO_SERVICE>/moduleFederationService';
import type { MFEConfig } from '<RELATIVE_PATH_TO_SERVICE>/moduleFederationService';
import type { CONSUMER_NAMEProps } from './types';

export const CONSUMER_NAME: React.FC<CONSUMER_NAMEProps> = ({ config, ...rest }) => (
  <LoadComponent
    lazyElement={config}
    loading={<div>Loading…</div>}
    fallback={({ error }) => <div>Error: {error.message}</div>}
    {...rest}
  />
);

export default CONSUMER_NAME;

Step 4 — Barrel export

Inside the component's folder index.ts:

export { default as CONSUMER_NAME } from './CONSUMER_NAME';

And add the folder to the category barrel (src/components/CATEGORY_NAME/index.ts):

export * from './CONSUMER_NAME';

MFEConfig interface reference

createRemoteComponent vs LoadComponent

Hard rules

1. Never modify moduleFederationService.tsx — it is a shared service layer.
2. Always use MFEConfig — do not call registerRemotes or loadRemote directly in consumer code.
3. mfe must match exactly the name field in the remote's module-federation.config.ts.
4. Idempotency is guaranteed by the service — do not add manual deduplication logic in consumers.
5. No inline style={{ }} in consumer components — Tailwind className only.
6. Typed props — consumer components must declare explicit TypeScript interfaces; no any.
7. Resolve <RELATIVE_PATH_TO_SERVICE> dynamically — before generating any import, calculate the relative path from the consumer file's location to src/api/services/module-federation/. For example:
   • Consumer at src/components/dashboard/OptionPageRemote/OptionPageRemote.tsx → ../../../api/services/module-federation
   • Consumer at src/components/party/search/PartySearchRemote/PartySearchRemote.tsx → ../../../../api/services/module-federation Never hardcode an absolute path like src/api/services/.... Always emit a ../-based relative path.

Goal

A correctly wired, type-safe MFE consumer: a component that registers the remote idempotently, loads it lazily via the service layer, and renders it with proper Suspense and error boundaries — ready for composition in the host application.

Cross-reference — Component Folder Pattern

All consumer components generated by this skill must follow the Component Folder Pattern defined in the react-component skill. This means:

• Every consumer component lives in its own PascalCase subfolder.
• The subfolder contains exactly: ConsumerName.tsx, ConsumerName.types.ts, index.ts, SDD_ConsumerName.md.
• Flat .tsx files are strictly forbidden.

✅ src/components/dashboard/DashboardRemote/
      DashboardRemote.tsx
      DashboardRemote.types.ts
      index.ts
      SDD_DashboardRemote.md

❌ src/components/dashboard/DashboardRemote.tsx   ← FORBIDDEN

See react-component skill → Hard Rules section for the full specification.