@bleedingdev/modern-js-app-tools 3.5.0-ultramodern.99 → 3.8.1-ultramodern.2

package/docs/guides/basic-features/routes/{routes.mdx → routes.md}

@@ -1,10 +1,6 @@
----
-sidebar_position: 2
----
-
 # Routing
 
-Modern.js supports conventional routing on top of both [React Router](https://reactrouter.com/en/main) and [TanStack Router](https://tanstack.com/router), offering file convention-based routing capabilities and supporting the industry-popular **nested routing** pattern. When an entry is recognized as [conventional routing](/guides/concept/entries.html#conventional-routing), Modern.js automatically generates the corresponding routing structure based on the file system.
+Modern.js supports conventional routing on top of both [React Router](https://reactrouter.com/en/main) and [TanStack Router](https://tanstack.com/router), offering file convention-based routing capabilities and supporting the industry-popular **nested routing** pattern. When an entry is recognized as [conventional routing](/guides/concept/entries.md#conventional-routing), Modern.js automatically generates the corresponding routing structure based on the file system.
 
 :::note
 
@@ -13,7 +9,7 @@ The routing mentioned in this section all refers to conventional routing.
 :::
 
 :::tip
-This page uses React Router import paths in examples (`@modern-js/runtime/router`).  
+This page uses React Router import paths in examples (`@modern-js/runtime/router`).\
 If your project is created with `--router tanstack`, use `@modern-js/plugin-tanstack/runtime` instead.
 :::
 
@@ -155,7 +151,7 @@ Files and directories named with `[]` are turned into dynamic routes. For instan
 
 The `routes/[id]/page.tsx` file will be converted to the `/:id` route. Apart from the `/blog` route that can be exactly matched, all `/xxx` paths will match this route.
 
-In the component, you can use [useParams](/apis/app/runtime/router/router#useparams) to get parameters named accordingly.
+In the component, you can use [useParams](/apis/app/runtime/router/router.md#useparams) to get parameters named accordingly.
 
 ```tsx
 import { useParams } from '@modern-js/runtime/router';
@@ -232,7 +228,7 @@ When you visit `/blog/a` and no routes match, the page will render the `routes/b
 
 If you want `/blog` to match the `blog/$.tsx` file as well, you need to remove the `blog/layout.tsx` file from the same directory and ensure there are no other sub-routes under `blog`.
 
-Similarly, you can use [useParams](/apis/app/runtime/router/router#useparams) to capture the remaining part of the URL in the `$.tsx` component.
+Similarly, you can use [useParams](/apis/app/runtime/router/router.md#useparams) to capture the remaining part of the URL in the `$.tsx` component.
 
 ```ts title="$.tsx"
 import { useParams } from '@modern-js/runtime/router';
@@ -343,7 +339,7 @@ When accessed, the resulting route will have the following UI structure:
 
 ## Route Redirections
 
-In some applications, you may need to redirect to another route based on user identity or other data conditions. In Modern.js, you can use a [`Data Loader`](/guides/basic-features/data/data-fetch) file to fetch data or use traditional React components with `useEffect`.
+In some applications, you may need to redirect to another route based on user identity or other data conditions. In Modern.js, you can use a [`Data Loader`](/guides/basic-features/data/data-fetch.md) file to fetch data or use traditional React components with `useEffect`.
 
 ### Redirecting in Data Loader
 
@@ -389,9 +385,8 @@ In each directory under `routes/`, developers can define an `error.tsx` file tha
 
 `<ErrorBoundary>` can return the UI view when an error occurs. If the current level does not declare an `<ErrorBoundary>` component, errors will bubble up to higher-level components until they are caught or thrown. Additionally, when an error occurs within a component, it only affects the route component and its children, leaving the state and view of other components unaffected and interactive.
 
-{/* Todo API Routes */}
 
-In the `<ErrorBoundary>` component, you can use [useRouteError](/apis/app/runtime/router/router#userouteerror) to obtain specific error information:
+In the `<ErrorBoundary>` component, you can use [useRouteError](/apis/app/runtime/router/router.md#userouteerror) to obtain specific error information:
 
 ```tsx
 import { useRouteError } from '@modern-js/runtime/router';
@@ -474,7 +469,7 @@ For applications with higher performance requirements, prefetching can further e
 
 :::tip
 
-In SSR projects, same-origin route data returned by the [Data Loader](/guides/basic-features/data/data-fetch) is prefetched for matched routes with callable loaders. Set `handle.navigationWarmup.data` to `false` on a route when its loader data should not be requested before navigation.
+In SSR projects, same-origin route data returned by the [Data Loader](/guides/basic-features/data/data-fetch.md) is prefetched for matched routes with callable loaders. Set `handle.navigationWarmup.data` to `false` on a route when its loader data should not be requested before navigation.
 
 :::
 
@@ -507,9 +502,6 @@ export const handle = {
 
 :::
 
-import Motivation from '@site-docs-en/components/convention-routing-motivation';
-
-<Motivation />
 
 ## FAQ
 
@@ -528,5 +520,5 @@ If you encounter API usage issues, check the corresponding upstream docs:
 - TanStack Router docs for `@modern-js/plugin-tanstack/runtime`.
 
 :::note
-If you must directly use the React Router package's API (e.g., route behavior wrapped in a unified npm package), you can set [`source.alias`](/configure/app/source/alias) to point `react-router` to the project's dependency, avoiding the issue of two React Router versions.
+If you must directly use the React Router package's API (e.g., route behavior wrapped in a unified npm package), you can set [`source.alias`](/configure/app/source/alias.md) to point `react-router` to the project's dependency, avoiding the issue of two React Router versions.
 :::

package/docs/guides/basic-features/static-assets/{json-files.mdx → json-files.md}

@@ -1,7 +1,3 @@
----
-sidebar_position: 12
----
-
 # Import JSON Files
 
 Modern.js supports import JSON files in code by default. You can use Rsbuild plugins to support importing [YAML](https://yaml.org/) and [Toml](https://toml.io/en/) files and converting them to JSON format.

package/docs/guides/basic-features/static-assets/{svg-assets.mdx → svg-assets.md}

@@ -1,7 +1,3 @@
----
-sidebar_position: 11
----
-
 # Import SVG Assets
 
 Modern.js supports import SVG assets and transform SVG into React components or URLs.
@@ -42,7 +38,7 @@ export default () => <Logo />;
 
 ## Modify the Default Export
 
-You can modify the default export of SVG files through the [output.svgDefaultExport](/configure/app/output/svg-default-export) config. For example, set the default export as a React component:
+You can modify the default export of SVG files through the [output.svgDefaultExport](/configure/app/output/svg-default-export.md) config. For example, set the default export as a React component:
 
 ```ts
 export default {
@@ -74,11 +70,11 @@ When import an SVG in a CSS file, the SVG is treated as a normal static asset an
 
 When SVG is imported not as a React component but as a normal static asset, it is processed exactly the same as other static assets, and it is also affected by rules such as assets inlining and URL prefixing.
 
-Please read the [Import Static Assets](/guides/basic-features/static-assets) section to understand the processing rules for static assets.
+Please read the [Import Static Assets](/guides/basic-features/static-assets.md) section to understand the processing rules for static assets.
 
 ## Disable SVGR Processing
 
-By default, when an SVG resource is referenced in a JS file, Modern.js will call SVGR to convert the SVG into a React component. If you are sure that all SVG resources in your project are not being used as React components, you can turn off this conversion by setting [disableSvgr](/configure/app/output/disable-svgr) to true to improve build performance.
+By default, when an SVG resource is referenced in a JS file, Modern.js will call SVGR to convert the SVG into a React component. If you are sure that all SVG resources in your project are not being used as React components, you can turn off this conversion by setting [disableSvgr](/configure/app/output/disable-svgr.md) to true to improve build performance.
 
 ```js
 export default {

package/docs/guides/basic-features/static-assets/{wasm-assets.mdx → wasm-assets.md}

@@ -1,7 +1,3 @@
----
-sidebar_position: 13
----
-
 # Import Wasm Assets
 
 Modern.js supports import WebAssembly assets in code.
@@ -43,7 +39,7 @@ console.log(wasmURL).pathname; // "/static/wasm/[hash].module.wasm"
 
 When a `.wasm` asset is imported, it will be output by Modern.js to the `dist/static/wasm` directory by default.
 
-You can change the output directory of `.wasm` files via [output.distPath](/configure/app/output/dist-path) config.
+You can change the output directory of `.wasm` files via [output.distPath](/configure/app/output/dist-path.md) config.
 
 ```ts
 export default {

package/docs/guides/basic-features/{static-assets.mdx → static-assets.md}

@@ -1,7 +1,3 @@
----
-sidebar_position: 10
----
-
 # Import Static Assets
 
 Modern.js supports import static assets, including images, fonts, and medias.
@@ -21,7 +17,7 @@ The following are the formats supported by Modern.js by default:
 If you need to import assets in other formats, please refer to [Extend Asset Types](#extend-asset-types).
 
 :::tip SVG images
-SVG image is a special case. Modern.js support convert SVG to React components, so SVG is processed separately. For details, see [Import SVG Assets](/guides/basic-features/static-assets/svg-assets.html).
+SVG image is a special case. Modern.js support convert SVG to React components, so SVG is processed separately. For details, see [Import SVG Assets](/guides/basic-features/static-assets/svg-assets.md).
 :::
 
 ## Import Assets in JS file
@@ -35,7 +31,7 @@ import logo from './static/logo.png';
 export default () => <img src={logo} />;
 ```
 
-Import with [alias](/guides/basic-features/alias.html) are also supported:
+Import with [alias](/guides/basic-features/alias.md) are also supported:
 
 ```tsx
 import logo from '@/static/logo.png';
@@ -53,7 +49,7 @@ In CSS files, you can reference static assets in relative paths:
 }
 ```
 
-Import with [alias](/guides/basic-features/alias.html) are also supported:
+Import with [alias](/guides/basic-features/alias.md) are also supported:
 
 ```css
 .logo {
@@ -76,23 +72,23 @@ console.log(largeImage); // "/static/largeImage.6c12aba3.png"
 console.log(smallImage); // "data:image/png;base64,iVBORw0KGgo..."
 ```
 
-For a more detailed introduction to asset inlining, please refer to the [Static Asset Inlining](/guides/advanced-features/page-performance/inline-assets) chapter.
+For a more detailed introduction to asset inlining, please refer to the [Static Asset Inlining](/guides/advanced-features/page-performance/inline-assets.md) chapter.
 
 ## Output Files
 
 When static assets are imported, they will be output to the dist directory. You can:
 
-- Modify the output filename through [output.filename](/configure/app/output/filename).
-- Modify the output path through [output.distPath](/configure/app/output/dist-path).
+- Modify the output filename through [output.filename](/configure/app/output/filename.md).
+- Modify the output path through [output.distPath](/configure/app/output/dist-path.md).
 
-Please read [Output Files](/guides/basic-features/output-files) for details.
+Please read [Output Files](/guides/basic-features/output-files.md) for details.
 
 ## URL Prefix
 
 The URL returned after importing a asset will automatically include the path prefix:
 
-- In development, using [dev.assetPrefix](/configure/app/dev/asset-prefix) to set the path prefix.
-- In production, using [output.assetPrefix](/configure/app/output/asset-prefix) to set the path prefix.
+- In development, using [dev.assetPrefix](/configure/app/dev/asset-prefix.md) to set the path prefix.
+- In production, using [output.assetPrefix](/configure/app/output/asset-prefix.md) to set the path prefix.
 
 For example, you can set `output.assetPrefix` to `https://modern.com`:
 
@@ -123,7 +119,7 @@ After adding the type declaration, if the type error still exists, you can try t
 
 ## Extend Asset Types
 
-If the built-in asset types in Modern.js cannot meet your requirements, you can modify the built-in Rspack configuration and extend the asset types you need using [tools.bundlerChain](/configure/app/tools/bundler-chain).
+If the built-in asset types in Modern.js cannot meet your requirements, you can modify the built-in Rspack configuration and extend the asset types you need using [tools.bundlerChain](/configure/app/tools/bundler-chain.md).
 
 For example, if you want to treat `*.pdf` files as assets and directly output them to the dist directory, you can add the following configuration:
 

package/docs/guides/basic-features/testing/{playwright.mdx → playwright.md}

@@ -4,9 +4,18 @@ Playwright is a testing framework that allows you to run tests automatically in
 
 To use Playwright in Modern.js, you need to install the dependencies first. You can run the following commands:
 
-import { PackageManagerTabs } from '@theme';
 
-<PackageManagerTabs command={{ npm: "npm init playwright", yarn: "yarn create playwright", pnpm: "pnpm create playwright" }} />
+```sh [npm]
+npm init playwright
+```
+
+```sh [yarn]
+yarn create playwright
+```
+
+```sh [pnpm]
+pnpm create playwright
+```
 
 The above commands will automatically install Playwright dependencies and help you install and configure it in your project through a series of prompts, including adding a `playwright.config.ts` file.
 
@@ -108,4 +117,4 @@ Running 3 tests using 3 workers
 To open last HTML report run:
 
   npx playwright show-report
-```
+```

package/docs/guides/basic-features/testing/{rstest.mdx → rstest.md}

@@ -8,10 +8,26 @@ This guide explains how to integrate Rstest with Modern.js for web app testing.
 
 Install the base dependencies first:
 
-import { Prompt } from '@rspress/core/theme';
-import { PackageManagerTabs } from '@theme';
 
-<PackageManagerTabs command="add @rstest/core @modern-js/adapter-rstest -D" />
+```sh [npm]
+npm add @rstest/core @modern-js/adapter-rstest -D
+```
+
+```sh [yarn]
+yarn add @rstest/core @modern-js/adapter-rstest -D
+```
+
+```sh [pnpm]
+pnpm add @rstest/core @modern-js/adapter-rstest -D
+```
+
+```sh [bun]
+bun add @rstest/core @modern-js/adapter-rstest -D
+```
+
+```sh [deno]
+deno add npm:@rstest/core npm:@modern-js/adapter-rstest -D
+```
 
 Then create `rstest.config.ts`:
 
@@ -51,7 +67,26 @@ We generally recommend browser mode because it uses real browser APIs and behavi
 
 If you want to test in a real browser instead of a simulated DOM, install the browser mode dependencies:
 
-<PackageManagerTabs command="add @rstest/browser @rstest/browser-react playwright -D" />
+
+```sh [npm]
+npm add @rstest/browser @rstest/browser-react playwright -D
+```
+
+```sh [yarn]
+yarn add @rstest/browser @rstest/browser-react playwright -D
+```
+
+```sh [pnpm]
+pnpm add @rstest/browser @rstest/browser-react playwright -D
+```
+
+```sh [bun]
+bun add @rstest/browser @rstest/browser-react playwright -D
+```
+
+```sh [deno]
+deno add npm:@rstest/browser npm:@rstest/browser-react npm:playwright -D
+```
 
 Then enable browser mode in `rstest.config.ts`:
 
@@ -96,7 +131,26 @@ For more browser mode setup, Locator APIs, and assertions, refer to the [Rstest
 
 Install the DOM testing dependencies:
 
-<PackageManagerTabs command="add happy-dom @testing-library/react @testing-library/dom -D" />
+
+```sh [npm]
+npm add happy-dom @testing-library/react @testing-library/dom -D
+```
+
+```sh [yarn]
+yarn add happy-dom @testing-library/react @testing-library/dom -D
+```
+
+```sh [pnpm]
+pnpm add happy-dom @testing-library/react @testing-library/dom -D
+```
+
+```sh [bun]
+bun add happy-dom @testing-library/react @testing-library/dom -D
+```
+
+```sh [deno]
+deno add npm:happy-dom npm:@testing-library/react npm:@testing-library/dom -D
+```
 
 Update `rstest.config.ts` to use `happy-dom`:
 
@@ -172,10 +226,16 @@ If your project already uses Jest or Vitest, refer to the official Rstest migrat
 
 We recommend installing the `migrate-to-rstest` skill first, then copying this prompt to your coding agent. It keeps the Modern.js `@modern-js/adapter-rstest` integration during migration:
 
-<Prompt
-  title="Migrate to Rstest"
-  description="Copy this prompt and send it to your coding agent."
-  prompt={`Migrate this Modern.js project from Jest or Vitest to Rstest.
+
+For your Agent
+
+Migrate to Rstest
+
+Copy this prompt and send it to your coding agent.
+
+Copy Prompt
+
+Migrate this Modern.js project from Jest or Vitest to Rstest.
 
 First install and use the migrate-to-rstest skill. If it is not installed, install it with:
 npx skills add rstackjs/agent-skills --skill migrate-to-rstest
@@ -188,5 +248,4 @@ Modern.js-specific requirement:
 - Install and use @modern-js/adapter-rstest together with @rstest/core.
 - Create or update rstest.config.ts to import withModernConfig from @modern-js/adapter-rstest.
 - Reuse the Modern.js app configuration with extends: withModernConfig().
-- Do not replace this with a plain Rstest config unless the project explicitly does not need Modern.js config integration.`}
-/>
+- Do not replace this with a plain Rstest config unless the project explicitly does not need Modern.js config integration.

package/docs/guides/concept/{builder.mdx → builder.md}

@@ -1,7 +1,3 @@
----
-sidebar_position: 2
----
-
 # Build Engine
 
 Modern.js internally encapsulates [Rsbuild](https://v2.rsbuild.rs/), using Rspack as the bundler.
@@ -18,29 +14,10 @@ From the building perspective, Modern.js can be divided into three-layers, from
 - Build tool: Rsbuild.
 - Bundler: Rspack.
 
-import Mermaid from '@site/src/components/Mermaid';
-
-<Mermaid>
-{`
-flowchart TD
-    Framework("Upper-level Framework: Modern.js")
-    BuildTool("Build Tool: Rsbuild")
-    Bundler("Bundler: Rspack")
-
-    Framework --> BuildTool
-    BuildTool --> Bundler
-
-    style Framework fill:#FDE68A,stroke:#F59E0B,stroke-width:2px
-    style BuildTool fill:#86EFAC,stroke:#10B981,stroke-width:2px
-    style Bundler fill:#93C5FD,stroke:#3B82F6,stroke-width:2px
-
-`}
-
-</Mermaid>
 
 ## Build Documentation
 
-The documentation address of Rsbuild is: https://v2.rsbuild.rs/
+The documentation address of Rsbuild is: [https://v2.rsbuild.rs/](https://v2.rsbuild.rs/)
 
 In this documentation, you can learn about the detailed introduction of Rsbuild, and you can also find complete usage guides for various building capabilities.
 
@@ -50,8 +27,8 @@ If you want to understand the use of build configurations, it is recommended tha
 
 In Modern.js, you can register Rspack plugins or Rsbuild plugins:
 
-- Rspack plugins: Configured through [tools.bundlerChain](/configure/app/tools/bundler-chain).
-- Rsbuild plugins: Configured through [builderPlugins](/configure/app/builder-plugins).
+- Rspack plugins: Configured through [tools.bundlerChain](/configure/app/tools/bundler-chain.md).
+- Rsbuild plugins: Configured through [builderPlugins](/configure/app/builder-plugins.md).
 
 ## Build Capabilities
 

package/docs/guides/concept/{entries.mdx → entries.md}

@@ -1,7 +1,3 @@
----
-sidebar_position: 1
----
-
 # Page Entry
 
 Through this chapter, you can understand the entry conventions in Modern.js and how to customize entries.
@@ -32,9 +28,6 @@ The application initialized by Modern.js is a single-entry application with the
 
 In a Modern.js application, you can easily switch from single entry to multiple entries. To manually create multiple entries, follow these steps:
 
-import NewEntryTooltip from '@site-docs-en/components/new-entry-tooltip.mdx';
-
-<NewEntryTooltip />
 
 1. **Move the original entry code to a directory named after the `name` field in `package.json`**
 
@@ -103,18 +96,19 @@ Modern.js automatically scans directories to identify entries that meet the crit
 2. **Has an `App.tsx?` file** → Self-controlled routing entry
 3. **Has an `entry.tsx?` file** → Custom entry
 
-import EntryScanLogic from '@site-docs/components/entry-scan-logic.mdx';
+:::tip 入口扫描逻辑
 
-<EntryScanLogic />
+- 如果 `src/` 本身满足入口条件 → 单入口应用
+- 如果 `src/` 不满足条件 → 扫描 `src/` 下的子目录 → 多入口应用
+- 单入口应用中，默认入口名为 `index`
+
+:::
 
 :::tip Custom scanning directory
-You can modify the directory for identifying entries through [source.entriesDir](/configure/app/source/entries-dir).
+You can modify the directory for identifying entries through [source.entriesDir](/configure/app/source/entries-dir.md).
 
 :::
 
-import EntryMode from '@site-docs/components/entry-mode.mdx';
-
-<EntryMode />
 
 Next, we will introduce the usage of each entry type in detail.
 
@@ -144,7 +138,7 @@ Component correspondence
 | `routes/about/page.tsx`     | `/about`      | About page                    |
 | `routes/blog/[id]/page.tsx` | `/blog/:id`   | Dynamic route page            |
 
-For more details, please refer to [Routing Solution](/guides/basic-features/routes/routes#convention-routing).
+For more details, please refer to [Routing Solution](/guides/basic-features/routes/routes.md#convention-routing).
 
 ### Self-controlled Routing
 
@@ -244,10 +238,10 @@ In some cases, you may need to customize the entry configuration instead of usin
 
 For example, if you need to migrate a non-Modern.js application to Modern.js, and it is not structured according to Modern.js's directory structure, there might be some migration costs involved in changing it to the conventional structure. In such cases, you can use custom entries.
 
-Modern.js provides the following configuration options that you can set in [modern.config.ts](/configure/app/usage):
+Modern.js provides the following configuration options that you can set in [modern.config.ts](/configure/app/usage.md):
 
-- [source.entries](/configure/app/source/entries): Used to set custom entry objects.
-- [source.disableDefaultEntries](/configure/app/source/disable-default-entries): Used to disable Modern.js's default entry scanning behavior. When you use custom entries, parts of your project structure might coincidentally match the Modern.js conventional directory structure, but you may not want Modern.js to generate entry configurations for them. Enabling this option can help avoid this issue.
+- [source.entries](/configure/app/source/entries.md): Used to set custom entry objects.
+- [source.disableDefaultEntries](/configure/app/source/disable-default-entries.md): Used to disable Modern.js's default entry scanning behavior. When you use custom entries, parts of your project structure might coincidentally match the Modern.js conventional directory structure, but you may not want Modern.js to generate entry configurations for them. Enabling this option can help avoid this issue.
 
 ### Example
 

package/docs/guides/concept/{server.mdx → server.md}

@@ -10,7 +10,7 @@ Modern.js builds its Web server based on the [Hono framework](https://hono.dev/)
 
 The Web server flow in both Modern.js development and production environments is entirely isomorphic, so you don't need to worry about differences between them.
 
-As mentioned in the [Build Tools](/guides/concept/builder) section, Modern.js' underlying build capability is provided by Rsbuild, and some server-side capabilities in the development environment are coupled with the build tools, such as HMR. Modern.js needs to reuse these capabilities of the Rsbuild Dev Server.
+As mentioned in the [Build Tools](/guides/concept/builder.md) section, Modern.js' underlying build capability is provided by Rsbuild, and some server-side capabilities in the development environment are coupled with the build tools, such as HMR. Modern.js needs to reuse these capabilities of the Rsbuild Dev Server.
 
 In the development environment, Modern.js directly uses the middlewares provided by Rsbuild, which includes capabilities needed during the development stage such as HMR and Proxy. Additionally, Modern.js provides capabilities such as Mock, routing, and rendering on top of this:
 
@@ -26,10 +26,10 @@ Static asset files can be directly hosted by Modern.js' server, but it is highly
 
 Modern.js supports running built artifacts in any Node.js environment. Typically, the CI environment has already installed all application dependencies.
 
-You can run the [`modern build`](/apis/app/commands#modern-build) command to build the application and the [`modern serve`](/apis/app/commands#modern-serve) command to run the Web server, starting the UltraModern.js application.
+You can run the [`modern build`](/apis/app/commands.md#modern-build) command to build the application and the [`modern serve`](/apis/app/commands.md#modern-serve) command to run the Web server, starting the UltraModern.js application.
 
 ## Running in Production Environments
 
 When deploying to production, the artifact size should be as small as possible. The aforementioned method for running in CI environments keeps all artifacts from the original project. Therefore, it is not recommended to run the application using the above commands in a production environment.
 
-UltraModern.js offers a standalone deployment solution. When running the [`modern deploy`](/apis/app/commands#modern-deploy) command, the artifacts will include an entry file for running the Web server.
+UltraModern.js offers a standalone deployment solution. When running the [`modern deploy`](/apis/app/commands.md#modern-deploy) command, the artifacts will include an entry file for running the Web server.

package/docs/guides/get-started/{ai-coding-agents.mdx → ai-coding-agents.md}

@@ -1,8 +1,3 @@
----
-title: AI Tools
-sidebar_position: 6
----
-
 # Modern.js For AI
 
 Modern.js provides a toolkit for AI agents that makes your project agent-ready out of the box, helping you use AI to develop, upgrade, and migrate Modern.js applications more accurately and efficiently.
@@ -18,7 +13,7 @@ AI agents use them to get APIs, config, and conventions that exactly match your
 `AGENTS.md` gives AI coding agents project-level guidance — telling them to read the bundled docs before making changes and to follow Modern.js conventions. A `CLAUDE.md` is generated alongside it, reusing the same guidance for Claude Code via the `@AGENTS.md` import.
 
 - **New projects**: `npx @modern-js/create` generates both files by default; pass `--no-agents-md` to skip them.
-- **Existing projects**: run `npx @modern-js/create agents-md` at the project root to create or update them. Re-run it any time; your own additions are preserved.
+- **Existing projects**: run `npx @modern-js/create --agents-md-only` at the project root to create or update them. Re-run it any time; your own additions are preserved.
 
 Modern.js only maintains the content inside the `<!-- BEGIN:modernjs-agent-rules -->` markers in `AGENTS.md`; anything you write outside them is left untouched.
 
@@ -35,9 +30,9 @@ Use it when you need content beyond the bundled docs — just let your agent ret
 
 Skills are on-demand AI capabilities following the [Agent Skills open standard](https://github.com/vercel-labs/skills). User-facing Skills:
 
-| Skill | Identifier | Description |
-|---|---|---|
-| Upgrade to v3 | `modernjs-migrate-to-v3` | Migrate a v2 app to v3: safe rewrites + manual checklist + migration report |
+| Skill           | Identifier                | Description                                                                                     |
+| --------------- | ------------------------- | ----------------------------------------------------------------------------------------------- |
+| Upgrade to v3   | `modernjs-migrate-to-v3`  | Migrate a v2 app to v3: safe rewrites + manual checklist + migration report                     |
 | Enable features | `modernjs-feature-enable` | Enable BFF / SSG / styled-components for v3 apps, and scaffold Tailwind CSS / custom Web Server |
 
 > Skills are not force-installed or implicitly installed — you install them explicitly. RSC and micro-frontend setups are configuration or architecture decisions, not one-click `modernjs-feature-enable` actions.

package/docs/guides/get-started/glossary.md

@@ -0,0 +1,63 @@
+# Glossary
+
+## BFF
+
+BFF is short for "Backend For Frontend". It is an architecture pattern that involves creating a backend service for frontend applications.
+
+The BFF service acts as an intermediary between the frontend application and the server API, and can provide customized APIs for the frontend to use. This allows frontend developers to have more control over the data and functionality they need, without relying on the backend service to provide the corresponding capabilities.
+
+## Bundler
+
+Refers to module bundlers such as [Rspack](https://rspack.rs/).
+
+The main goal of bundlers is to bundle JavaScript, CSS and other files together, and the bundled files can be used in the browser, Node.js or other environments. When bundler processes the Web application, it builds a dependency graph and then combines every module into one or more bundles.
+
+## CSR
+
+CSR stands for "Client-Side Rendering". It means that the page is rendered in the browser using JavaScript, and logic such as data fetching, templates, and routing is completed on the client side rather than the server.
+
+In CSR, the server sends an empty HTML shell and some JavaScript scripts to the browser, and the browser fetching data from the server's API and renders dynamic content to the page.
+
+## Module Federation
+
+Module Federation (MF) is a technology solution that allows multiple JavaScript applications to share code and resources. Similar to microservices architecture on the server side, it allows you to split large applications into multiple independent smaller applications that can be developed, tested, and deployed independently, while dynamically loading modules from other applications at runtime.
+
+Module Federation solves the problem of code duplication across multiple frontend applications. In the traditional approach, if multiple applications need to use the same components or utility functions, you would need to duplicate this code in each application, leading to code duplication, high maintenance costs, and larger application sizes. With Module Federation, you can place common code in one application and have other applications load it dynamically as needed, enabling code sharing and reducing duplication.
+
+Module Federation 2.0 supports [Rspack](https://rspack.rs/) build tools, and provides enhanced features such as dynamic type hints, Manifest, Federation Runtime, runtime plugin system, and Chrome Devtools support for better development experience and debugging capabilities. You can visit the [Module Federation official documentation](https://module-federation.io/) to learn more.
+
+Modern.js provides an example project for Module Federation. Please refer to [module-federation-examples - modernjs](https://github.com/module-federation/module-federation-examples/tree/db5bdbeee56f779999a2c591fc553eb94eb20b36/modernjs).
+
+## Rsbuild
+
+[Rsbuild](https://v2.rsbuild.rs/) is an Rspack-based build tool for the web. The main goal of Rsbuild is to provide out-of-the-box build capabilities for Rspack users, allowing developers to start a web project with zero configuration.
+
+Rsbuild integrates high-performance Rust-based tools from the community, including Rspack and SWC, to provide first-class build speed and development experience.
+
+## Rspack
+
+[Rspack](https://rspack.rs/) is a high performance JavaScript bundler written in Rust. It offers strong compatibility with the webpack ecosystem, allowing for seamless replacement of webpack, and provides lightning fast build speeds.
+
+Compared to webpack, Rspack has significantly improved build performance, thanks not only to the language advantages brought by Rust, but also to its parallel architecture and incremental compilation features. Benchmarking has shown that Rspack can provide 5-10 times better compilation performance.
+
+## SSR
+
+SSR stands for "Server-Side Rendering". It means that the HTML of the web page is generated by the server and sent to the client, rather than sending only an empty HTML shell and relying on JavaScript to generate the page content.
+
+In traditional client-side rendering, the server sends an empty HTML shell and some JavaScript scripts to the client, and then fetching data from the server's API and fills the page with dynamic content. This leads to slow initial page loading times and is not conducive to user experience and SEO.
+
+With SSR, the server generates HTML that already contains dynamic content and sends it to the client. This makes the initial page loading faster and more SEO-friendly, as search engines can crawl the rendered page.
+
+## SSG
+
+SSG stands for "Static Site Generation". It means that web pages are pre-rendered as static HTML and served directly to the client, without the need for the server to generate HTML in real-time.
+
+In traditional SSR, the server generates HTML in real-time every time a user requests a page. With SSG, HTML can be generated in advance during the build process and hosted on a CDN or other static assets service.
+
+Compared to traditional SSR, SSG can provide faster loading speeds and less server-side overhead, as there is no need to maintain a server to generate HTML in real-time. However, SSG is not suitable for websites that require dynamic content, as the HTML is generated during the build process and does not support real-time updates.
+
+## SWC
+
+[SWC](https://SWC.rs/) (Speedy Web Compiler) is a transformer and minimizer for JavaScript and TypeScript based on `Rust`. SWC can provide the same abilities with Babel, and it's more than 10x faster than Babel.
+
+Modern.js has a out-of-box plugin for SWC, power your Web application with Polyfill and minification, we also port some common used Babel plugins to SWC.

package/docs/guides/get-started/{introduction.mdx → introduction.md}

@@ -1,8 +1,3 @@
----
-title: Introduction
-sidebar_position: 1
----
-
 # Introduction to Modern.js
 
 **Modern.js is a progressive web framework based on React**. At ByteDance, we use Modern.js to build upper-level frameworks that have supported the development of thousands of web applications.
@@ -42,4 +37,4 @@ Pelease refer to [Modern.js vs Remix](https://github.com/web-infra-dev/modern.js
 
 ## Next Step
 
-If you want to understand the compatibility-first differences between Modern.js v3 and UltraModern.js v3, read [UltraModern.js](/guides/get-started/ultramodern).
+If you want to understand the compatibility-first differences between Modern.js v3 and UltraModern.js v3, read [UltraModern.js](/guides/get-started/ultramodern.md).