#Skills

Module Federation 提供了一组 Agent Skills —— 可被 AI 编程助手加载的指令集，让其具备 Module Federation 2.0 内部原理的专业知识。这些技能可以帮助你诊断配置问题、解决类型错误、检测共享依赖冲突等，所有操作均可在你的编辑器中完成。

#什么是 Agent Skills？

Agent Skills 是独立的 SKILL.md 文件，可以教会 AI 编程助手如何处理特定领域的任务。支持 Claude Code、Cursor、Windsurf 等主流 AI 编辑器。MF Skills 存放在 module-federation/core 仓库的 skills/ 目录中，完全不依赖任何公司内部基础设施，可在任何 MF 项目中使用。

#安装

使用 skills 包安装 Module Federation Skills：

npx skills add module-federation/core

交互式选择后，Skills 会自动安装到你的项目中，Claude Code 会自动加载。

如需安装全部技能（跳过交互）：

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

如需只安装特定技能：

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

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

如果无法使用命令行安装，也可以直接从 GitHub 手动复制对应目录到项目的 skills 目录下：

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

#技能总览

#mf-docs

Module Federation 2.0 文档助手。安装后，Agent 在回答 MF 相关问题前会实时从 module-federation.io 拉取最新文档，确保答案基于真实、最新的内容，而不是过时的训练数据。

覆盖范围： 配置选项、Runtime API、构建插件（Webpack / Rspack / Rsbuild / Vite）、框架集成（React / Vue / Next.js / Modern.js / Angular）、共享依赖、exposes、remotes、调试与 Troubleshooting。

使用方式：

/mf-docs

之后用自然语言提问即可，例如：

/mf-docs

shared 里的 singleton 和 requiredVersion 有什么区别？
如何在 Modern.js 里使用 Module Federation？

#mf-context

收集当前项目的 Module Federation 上下文（MFContext）：包括构建器、配置文件、remotes / exposes / shared 字段、已安装的 MF 包版本，以及最近的错误事件。这是所有诊断技能的数据基础。

使用方式：

/mf-context [project-root]

收集内容：

• 包管理器（pnpm / yarn / npm）
• 构建器及配置文件（rspack.config.ts、webpack.config.js、rsbuild.config.ts 等）
• MF 角色（host / remote / host+remote / unknown）
• remotes、exposes 和 shared 字段
• 所有已安装的 MF 相关包版本
• 构建产物：dist/mf-manifest.json、dist/mf-stats.json（如存在）

#mf-module-info

获取远端模块的元数据及 mf-manifest.json 中的完整配置信息（remotes / exposes / shared）。

支持两种调用模式：

• 消费者项目内：只传模块名，entry URL 自动从 mfConfig.remotes 解析
• 任意目录：传模块名 + remoteEntry URL，无需依赖本地配置

使用方式：

# 消费者项目内
/mf-module-info <module-name>

# 任意目录（需提供 remoteEntry URL）
/mf-module-info <module-name> <remoteEntry-url>

示例：

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

输出字段：

#mf-integrate

将 Module Federation 接入已有项目。Skill 会自动检测当前项目的构建器，收集必要参数（应用名、角色、模块路径），然后生成完整配置并安装依赖。默认角色为消费者，可一键接入公开 Demo 生产者立即看到效果。

支持的构建器： Rsbuild、Rspack、Webpack、Modern.js、Next.js（已弃用，仅 Pages Router）、Vite

使用方式：

/mf-integrate [project-root]

交互流程：

1. 自动检测构建器和已有 MF 配置
2. 询问角色：consumer（默认）/ provider / both
3. 询问应用名（建议取自 package.json 的 name）
4. 消费者：选择接入公开 Demo 生产者，或填写自定义 remote URL
5. 生产者：填写要暴露的模块路径
6. 询问是否自动将远程组件插入入口文件以立即预览

全新项目？

如果目录下没有检测到构建器，Skill 会引导你使用以下命令从模板创建：

npm create module-federation@latest

#mf-type-check

诊断 Module Federation 的类型问题，覆盖三种场景：

1. Producer —— 类型文件生成失败（TYPE-001）
2. Consumer —— 未拉取远端类型（@mf-types 目录缺失）
3. Consumer —— tsconfig.json 缺少 @mf-types 的 paths 映射

使用方式：

/mf-type-check [project-root]

处理场景：

TSCONFIG_PATHS_MISSING 快速修复：

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

#mf-shared-deps

检测 Module Federation 共享依赖的三类常见问题：shared 与 externals 重复配置、antd/arco UI 库因 transformImport 导致共享失效、构建产物中存在同一包的多个版本。

使用方式：

/mf-shared-deps [project-root]

检测内容：

修复参考：

• SHARED-EXTERNALS-CONFLICT：将该库从 shared 或 externals 中移除其中一个
• SHARED-TRANSFORM-IMPORT：Modern.js / Rsbuild 设置 source.transformImport = false；其他构建器移除 babel-plugin-import
• SHARED-MULTI-VERSION：在构建器配置中添加 alias，让所有项目解析到同一个物理文件

#mf-perf

检测本地开发配置中缺少的性能优化选项，这些选项的缺失会导致 HMR 和构建速度缓慢。

使用方式：

/mf-perf [project-root]

优化建议：

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

#mf-config-check

校验 Module Federation 的构建配置，涵盖三个维度：MF 插件选型、异步入口配置、exposes 路径合法性。

使用方式：

/mf-config-check [project-root]

检测内容：

插件选型参考：

提示： 使用 @module-federation/modern-js-v3 或 @module-federation/modern-js 时，无需手动配置异步入口。其他构建器下，Rspack 需版本 > 1.7.4 才支持 experiments.asyncStartup。

#mf-bridge-check

验证 Producer 是否正确导出了 export-app，以及 Consumer 是否使用了推荐的 Bridge API（而非手动拼接远端 URL）。

使用方式：

/mf-bridge-check [project-root]

检测内容：

Producer 修复 —— 在 exposes 中添加 export-app 入口：

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

导出模块须返回包含 render 和 destroy 方法的对象（Bridge 规范要求）。