#Skills

Module Federation provides a set of Agent Skills — loadable instruction sets for AI coding assistants that give them built-in knowledge of Module Federation 2.0 internals. These skills help you diagnose configuration issues, resolve type errors, detect shared dependency conflicts, and more, all within your editor.

#What are Agent Skills?

Agent Skills are self-contained SKILL.md files that teach an AI coding assistant how to handle a specific task domain. They work with Claude Code, Cursor, Windsurf, and other popular AI editors. The MF skills live in the skills/ directory of the module-federation/core repository, and they are completely free of any company-internal infrastructure — you can use them in any MF project.

#Installation

Use the skills package to install Module Federation skills:

npx skills add module-federation/core

Pick the skills you want interactively — they will be installed automatically and Claude Code will load them.

To install all skills without prompts:

npx skills add module-federation/core --all -y

To install specific skills only:

npx skills add module-federation/core --skill mf-docs --skill mf-context

npx skills add module-federation/core --skill mf-docs -y

If you can't use the CLI, you can also manually copy any skill directory from GitHub into your project's skills folder:

https://github.com/module-federation/core/tree/main/skills

#Skills Overview

#mf-docs

The Module Federation 2.0 documentation assistant. Once installed, the agent fetches the latest docs from module-federation.io in real time before answering, ensuring responses are based on accurate and current content rather than outdated training data.

Coverage: configuration options, Runtime API, build plugins (Webpack / Rspack / Rsbuild / Vite), framework integration (React / Vue / Next.js / Modern.js / Angular), shared dependencies, exposes, remotes, debugging, and troubleshooting.

Usage:

/mf-docs

Then ask any question in plain language, for example:

/mf-docs

What's the difference between singleton and requiredVersion in shared?
How do I use Module Federation with Next.js App Router?

#mf-context

Collects the current project's Module Federation context (MFContext): bundler, config file, remotes/exposes/shared fields, installed MF package versions, and recent error events. This is the data foundation for all diagnostic skills.

Usage:

/mf-context [project-root]

What it collects:

• Package manager (pnpm / yarn / npm)
• Bundler and config file (rspack.config.ts, webpack.config.js, rsbuild.config.ts, …)
• MF role (host / remote / host+remote / unknown)
• remotes, exposes, and shared fields
• All installed MF-related package versions
• Build artifacts: dist/mf-manifest.json, dist/mf-stats.json (if present)

#mf-module-info

Fetches metadata and full manifest info (remotes / exposes / shared) for a remote module from its mf-manifest.json.

Two modes:

• Inside a consumer project: pass the module name only — the entry URL is resolved from mfConfig.remotes
• Anywhere: pass the module name plus the remoteEntry URL directly, no local config needed

Usage:

# Inside a consumer project
/mf-module-info <module-name>

# Anywhere (provide the remoteEntry URL)
/mf-module-info <module-name> <remoteEntry-url>

Example:

/mf-module-info shop
/mf-module-info shop https://cdn.example.com/shop/remoteEntry.js

Output fields:

#mf-integrate

Adds Module Federation to an existing project. The skill auto-detects your bundler, collects the required parameters (app name, role, module paths), generates complete configuration files, and installs the necessary packages. The default role is consumer — you can connect to the public demo provider immediately to see MF in action.

Supported bundlers: Rsbuild, Rspack, Webpack, Modern.js, Next.js (deprecated, Pages Router only), Vite

Usage:

/mf-integrate [project-root]

Interactive flow:

1. Auto-detect bundler and existing MF configuration
2. Choose role: consumer (default) / provider / both
3. Enter app name (suggested from package.json name field)
4. Consumer: connect to the public demo provider, or provide custom remote URLs
5. Provider: specify the modules to expose
6. Optionally auto-insert the remote component into the entry file for an instant preview

Starting from scratch?

If no bundler is detected, the skill will prompt you to create a new project from a template:

npm create module-federation@latest

#mf-type-check

Diagnoses Module Federation type issues across three categories:

1. Producer — type file generation failed (TYPE-001)
2. Consumer — remote types not pulled (@mf-types folder missing)
3. Consumer — tsconfig.json missing the paths mapping for @mf-types

Usage:

/mf-type-check [project-root]

Scenarios handled:

Quick fix for TSCONFIG_PATHS_MISSING:

{
  "compilerOptions": {
    "paths": {
      "*": ["./@mf-types/*"]
    }
  }
}

#mf-shared-deps

Detects three common shared dependency problems: shared/externals conflicts, antd/arco UI library sharing silently broken by transformImport, and multiple versions of the same package in build artifacts.

Usage:

/mf-shared-deps [project-root]

What it detects:

Fix reference:

• SHARED-EXTERNALS-CONFLICT: remove the library from either shared or externals
• SHARED-TRANSFORM-IMPORT: set source.transformImport = false in Modern.js / Rsbuild; remove babel-plugin-import for other bundlers
• SHARED-MULTI-VERSION: add an alias in your bundler config so all projects resolve to the same physical file

#mf-perf

Detects missing performance optimization options in your local development configuration that cause slow HMR and slow build speed.

Usage:

/mf-perf [project-root]

Recommendations:

// rsbuild.config.ts
export default {
  dev: { disableAssetsAnalyze: true },
  output: { splitChunks: { chunks: 'async' } },
};

#mf-config-check

Validates your Module Federation build configuration across three areas: MF plugin selection, async entry setup, and exposes path validity.

Usage:

/mf-config-check [project-root]

What it detects:

Plugin reference:

Tip: @module-federation/modern-js-v3 and @module-federation/modern-js handle async entry internally — no manual config needed. For all other bundlers, Rspack requires version > 1.7.4 to support experiments.asyncStartup.

#mf-bridge-check

Verifies that producers correctly export export-app and that consumers use the recommended Bridge API instead of manually concatenating remote URLs.

Usage:

/mf-bridge-check [project-root]

What it detects:

Producer fix — add an export-app entry to exposes:

// module-federation.config.ts
exposes: {
  './export-app': './src/export-app.tsx',
}

The exported module must return an object with render and destroy methods (the Bridge spec).