feat: add mf-integrate skill for seamless Module Federation integration

Author: 2heal1

apps/website-new/docs/en/guide/ai/skill.mdx

@@ -53,6 +53,7 @@ https://github.com/module-federation/core/tree/main/skills
 | [`mf-docs`](#mf-docs) ⭐ | `/mf-docs` | Ask any question about Module Federation 2.0 configuration or APIs | [skills/mf-docs](https://github.com/module-federation/core/tree/main/skills/mf-docs) |
 | [`mf-context`](#mf-context) | `/mf-context` | Inspect your project's MF configuration at a glance | [skills/mf-context](https://github.com/module-federation/core/tree/main/skills/mf-context) |
 | [`mf-module-info`](#mf-module-info) | `/mf-module-info` | Inspect a remote module's full info (exposes / remotes / shared) | [skills/mf-module-info](https://github.com/module-federation/core/tree/main/skills/mf-module-info) |
+| [`mf-integrate`](#mf-integrate) | `/mf-integrate` | Add Module Federation to an existing project — generates provider / consumer config automatically | [skills/mf-integrate](https://github.com/module-federation/core/tree/main/skills/mf-integrate) |
 | [`mf-type-check`](#mf-type-check) | `/mf-type-check` | TypeScript type errors or missing `@mf-types` folder | [skills/mf-type-check](https://github.com/module-federation/core/tree/main/skills/mf-type-check) |
 | [`mf-shared-deps`](#mf-shared-deps) | `/mf-shared-deps` | Shared deps not working, version conflicts, or duplicate bundling | [skills/mf-shared-deps](https://github.com/module-federation/core/tree/main/skills/mf-shared-deps) |
 | [`mf-perf`](#mf-perf) | `/mf-perf` | Slow HMR or slow build speed in local development | [skills/mf-perf](https://github.com/module-federation/core/tree/main/skills/mf-perf) |
@@ -147,6 +148,35 @@ To inspect the current project's own configuration, use `mf-context` instead.
 
 ---
 
+## 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:
+```bash
+npm create module-federation@latest
+```
+
+---
+
 ## mf-type-check
 
 Diagnoses Module Federation type issues across three categories:

apps/website-new/docs/en/guide/start/quick-start.mdx

@@ -164,6 +164,20 @@ export default createModuleFederationConfig({
 
 If you want to integrate `Module Federation` into an existing project, you can refer to [docs](../../practice/frameworks/overview).
 
+:::tip Integrate with AI in one step
+Using [Claude Code](https://claude.ai/code) or another AI editor that supports Skills? The `mf-integrate` skill auto-detects your bundler (Rsbuild / Rspack / Webpack / Modern.js / Next.js / Vite), generates complete MF configuration, and can optionally insert a remote component into your entry file so you can verify everything is working immediately:
+
+```bash
+npx skills add module-federation/core --skill mf-integrate -y
+```
+
+Then run inside your project directory:
+
+```
+/mf-integrate
+```
+:::
+
 ## Summary
 
 Through the above process, you have completed the export of a component from a 'provider' for use by a 'consumer' based on Module Federation. Along the way, you have preliminarily used and understood the configurations of remotes, exposes, and shared in the Module Federation plugin.

apps/website-new/docs/zh/guide/ai/skill.mdx

@@ -53,6 +53,7 @@ https://github.com/module-federation/core/tree/main/skills
 | [`mf-docs`](#mf-docs) ⭐ | `/mf-docs` | 询问关于 Module Federation 2.0 配置或 API 的任何问题 | [skills/mf-docs](https://github.com/module-federation/core/tree/main/skills/mf-docs) |
 | [`mf-context`](#mf-context) | `/mf-context` | 快速查看项目的 MF 配置 | [skills/mf-context](https://github.com/module-federation/core/tree/main/skills/mf-context) |
 | [`mf-module-info`](#mf-module-info) | `/mf-module-info` | 查看远端模块的完整信息（exposes / remotes / shared） | [skills/mf-module-info](https://github.com/module-federation/core/tree/main/skills/mf-module-info) |
+| [`mf-integrate`](#mf-integrate) | `/mf-integrate` | 将 Module Federation 接入已有项目，自动生成生产者 / 消费者配置 | [skills/mf-integrate](https://github.com/module-federation/core/tree/main/skills/mf-integrate) |
 | [`mf-type-check`](#mf-type-check) | `/mf-type-check` | TypeScript 类型报错，或 `@mf-types` 目录缺失 | [skills/mf-type-check](https://github.com/module-federation/core/tree/main/skills/mf-type-check) |
 | [`mf-shared-deps`](#mf-shared-deps) | `/mf-shared-deps` | 共享依赖失效、版本冲突或重复打包 | [skills/mf-shared-deps](https://github.com/module-federation/core/tree/main/skills/mf-shared-deps) |
 | [`mf-perf`](#mf-perf) | `/mf-perf` | 本地开发时 HMR 或构建速度过慢 | [skills/mf-perf](https://github.com/module-federation/core/tree/main/skills/mf-perf) |
@@ -147,6 +148,35 @@ shared 里的 singleton 和 requiredVersion 有什么区别？
 
 ---
 
+## 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 会引导你使用以下命令从模板创建：
+```bash
+npm create module-federation@latest
+```
+
+---
+
 ## mf-type-check
 
 诊断 Module Federation 的类型问题，覆盖三种场景：

apps/website-new/docs/zh/guide/start/quick-start.mdx

@@ -165,6 +165,20 @@ export default createModuleFederationConfig({
 
 如果你想将 `Module Federation` 集成到现有项目中，可以参考[此文档](../../practice/frameworks/overview)。
 
+:::tip 使用 AI 一键接入
+已安装 [Claude Code](https://claude.ai/code) 或其他支持 Skills 的 AI 编程助手？可以使用 `mf-integrate` Skill，它会自动检测你的构建器（Rsbuild / Rspack / Webpack / Modern.js / Next.js / Vite），生成完整的 MF 配置，并可选择自动在入口文件中引入远程组件以快速验证效果：
+
+```bash
+npx skills add module-federation/core --skill mf-integrate -y
+```
+
+安装后，在项目目录下运行：
+
+```
+/mf-integrate
+```
+:::
+
 ## 总结
 
 通过上面的流程你已经基于 Module Federation 完成了一个「生产者」导出一个组件给到「消费者」使用，并在过程中初步使用和了解了：Module Federation 插件中的 remotes、exposes、shared 的配置。

skills/README.md

@@ -17,6 +17,7 @@ npx skills add module-federation/core
 | `mf-docs/` | `mf-docs` | Real-time MF 2.0 docs assistant — answers questions by fetching live docs from module-federation.io |
 | `mf-context/` | `mf-context` | Collects project MF configuration context; the data foundation for all diagnostic Skills |
 | `mf-module-info/` | `mf-module-info` | Fetch a remote module's full info (publicPath, remoteEntry, exposes/remotes/shared from mf-manifest.json) |
+| `mf-integrate/` | `mf-integrate` | Integrate Module Federation into an existing project — generates config for provider / consumer, supports Rsbuild / Rspack / Webpack / Modern.js / Next.js / Vite |
 | `mf-type-check/` | `mf-type-check` | Type file generation failures, remote types not pulled, tsconfig paths missing |
 | `mf-shared-deps/` | `mf-shared-deps` | shared/externals conflicts, antd/arco transformImport blocking sharing, multiple versions in build artifacts |
 | `mf-perf/` | `mf-perf` | Slow HMR, slow build speed, DTS bottleneck (includes guided ts-go migration) |