@bleedingdev/modern-js-app-tools 3.5.0-ultramodern.100 → 3.5.0-ultramodern.102

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

@@ -1,11 +1,6 @@
----
-sidebar_position: 3
----
-
 # Config Routes
 
-By default, Modern.js recommends using [Convention Routes](./routes.mdx) as the way to define routes. At the same time, Modern.js also provides a config-based routing capability that can be used together with convention routes or used separately.
-
+By default, Modern.js recommends using [Convention Routes](/guides/basic-features/routes/routes.md) as the way to define routes. At the same time, Modern.js also provides a config-based routing capability that can be used together with convention routes or used separately.
 
 ## When to Use Config Routes
 
@@ -34,15 +29,16 @@ export default defineRoutes(({ route, layout, page, $ }, fileRoutes) => {
 ### Function Signature Description
 
 `defineRoutes` accepts a callback function with two parameters:
+
 1. `routeFunctions`: An object containing `route`, `layout`, `page`, `$` functions
 2. `fileRoutes`: An array of route configurations generated by convention routes
 
 Basic signature of route functions:
+
 - First parameter: File path relative to `modern.routes.ts`
 - Second parameter: Route path (optional, must be a string)
 - Third parameter: Array of child routes (optional)
 
-
 ## Route Functions
 
 Modern.js provides four main route configuration functions:
@@ -50,6 +46,7 @@ Modern.js provides four main route configuration functions:
 :::tip Path Description
 
 The first parameter (path) of all route functions is a **relative path**, which will be concatenated with the parent path to generate the final route path:
+
 - **Root path**: `"/"` or `""` represents the root path of the current level
 - **Relative path**: Child route paths will be concatenated relative to the parent path
 - **Dynamic path**: Use `:param` syntax to represent dynamic parameters
@@ -93,6 +90,7 @@ export default defineRoutes(({ route }, fileRoutes) => {
 ```
 
 **Use cases**:
+
 - Quick route configuration without explicitly specifying page or layout
 - Simplify the complexity of route configuration
 
@@ -113,6 +111,7 @@ export default defineRoutes(({ layout, page }, fileRoutes) => {
 ```
 
 **Use cases**:
+
 - Need to explicitly specify a component as a layout component
 - Provide common layout structure for multiple pages
 - Need to share navigation, sidebar and other UI components across multiple routes
@@ -133,6 +132,7 @@ export default defineRoutes(({ layout, page }, fileRoutes) => {
 ```
 
 **Use cases**:
+
 - Need to explicitly specify a component as a page component
 - Ensure the component does not contain `<Outlet>` child component rendering
 - Provide clearer semantic expression
@@ -154,6 +154,7 @@ export default defineRoutes(({ layout, page, $ }, fileRoutes) => {
 ```
 
 **Use cases**:
+
 - Custom 404 pages
 - Handle all unmatched requests under specific paths
 
@@ -161,7 +162,6 @@ export default defineRoutes(({ layout, page, $ }, fileRoutes) => {
 The `$` function has the same functionality as the `$.tsx` file in convention routes, used to catch unmatched route requests.
 :::
 
-
 ## Configuring Routes
 
 ### Basic Example
@@ -195,6 +195,7 @@ export default defineRoutes(({ layout, page }, fileRoutes) => {
 ```
 
 The above configuration will generate:
+
 - `/login` → `auth/layout.tsx` + `login/page.tsx`
 - `/register` → `auth/layout.tsx` + `register/page.tsx`
 
@@ -210,7 +211,6 @@ export default defineRoutes(({ page }, fileRoutes) => {
 })
 ```
 
-
 ### Dynamic Routes
 
 Config routes support dynamic route parameters:
@@ -227,7 +227,6 @@ export default defineRoutes(({ page }, fileRoutes) => {
 })
 ```
 
-
 ## Automatic Route-Related File Discovery
 
 Config routes automatically discover component-related files without manual configuration. For any component file specified in `modern.routes.ts`, Modern.js will automatically find the following related files:
@@ -257,7 +256,7 @@ Modern.js will automatically find and load:
 
 :::tip
 
-For more detailed information about data fetching, please refer to the [Data Fetching](../data/data-fetch.mdx) documentation. For Loading component usage, please refer to [Convention Routes - Loading](./routes.mdx#loading-experimental).
+For more detailed information about data fetching, please refer to the [Data Fetching](/guides/basic-features/data/data-fetch.md) documentation. For Loading component usage, please refer to [Convention Routes - Loading](/guides/basic-features/routes/routes.md#loading-experimental).
 
 :::
 

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.