SuperAPI AI Directory
Partner中文AI newsFavorites
Skillsmodernjs-feature-enable

modernjs-feature-enable

General & other

View repository

Updated 10-16 08:43

About this skill

Enable Modern.js Features

Foran existing Modern.js v3 appenable optional features.

⚠️ modern new In Modern.js 3.0, it has been removed(see packages/document/docs/zh/guides/upgrade/other.md:107、:111: "Removed the modern new and modern upgrade commands; you need to follow the docs to operate manually" "themodern new command is no longer supported in Modern.js 3.0, and you cannot add entries or enable features via the command"). packages/document/docs/{zh,en}/apis/app/commands.mdx leftover in ## modern new is stale doc, and cannot be used as the current basis;do not ask users to run modern new. This skill is the automated equivalent of the officially recommended "follow the docs to operate manually".

Capability matrix (layered by automation level)

This does not mean "Modern.js v3 can only enable these few". In v3, many capabilities arebuilt-in conventions/config(Less/Sass are supported by default, Data Loader is the .data.ts convention, SSR/RSC are configuration/architecture choices), and there is no "enable plugin" step, so they are not in this matrix; micro-frontends are an architecture decision. This skill covers the optional capabilities that can be enabled by "installing a plugin/modifying config".

Feature Parameter values Level Current basis (current repository docs)
BFF (integrated backend) bff ✅ Can be automatically enabled guides/advanced-features/bff/function.mdx、components/enable-bff.mdx
Static Site Generation SSG ssg ✅ Can be automatically enabled components/enable-ssg.mdx、configure/app/output/ssg.mdx
styled-components styled-components ✅ Can be automatically enabled cli/plugin-styled-components、plugin/official/cli-plugins/plugin-styled-components.mdx
Tailwind CSS（v3） tailwindcss 🛠 Scaffold (skeleton automated + semantics manual) guides/basic-features/css/tailwindcss.mdx(Rsbuild native, not a @modern-js plugin)
Custom Web Server server 🛠 Scaffold (skeleton automated + semantics manual) guides/advanced-features/web-server.mdx、@modern-js/server-runtime

✅ Can be automatically enabled = install dependencies + modern.config plugin + necessary files, a fully automated closed loop. 🛠 Scaffold = automatically generate a buildable skeleton (server/modern.server.ts with middlewares/renderMiddlewares/plugins/onError fields + example comments; tailwind's config/postcss/css) + dependencies, but business semantics (server middleware logic, tailwind's CSS integration and v3·v4 choice) need to be filled in manually, and the report will state this clearly. Micro-frontends are not among the "enable-able items" in this matrix(v3 has no plugin-garfish; it is a Module Federation / masterApp architecture decision); it is still a Modern.js capability,enable.mjs microFrontend will output an executable checklist for an independent solution, see references/other-features.md, and will not make users think "this feature doesn't exist".

Execution steps

Step 1: Scan the project

node scripts/scan.mjs <projectDir>

Output context.json: determine whether it is v3 (for v2 projects, first use modernjs-migrate-to-v3 to upgrade), list whether each feature is currently enabled and whether automation is supported.

Step 2: Enable features

Execution discipline (important): Only when the userexplicitly says "enable X / enable X" and the project directory is clear and scan determines it is v3 , only then immediately run directly node scripts/enable.mjs X <projectDir>——Do not just describe, do not wait for a second confirmation, do not stop at "I will execute..." with no action; modify the source files in one command. Conversely: when the user is only asking "why / which ones can be enabled / scan it / current status",only run scan.mjs to provide the capability matrix and report, and never modify files。

one-step completion (automatic dependency installation): by default include --install, and once enabled it can be used directly with modern dev/build, with no need for the user to manually install dependencies again: node scripts/enable.mjs X <projectDir> --install。 Butin the following situationsdo not include --installfirst (only run enable, and tell the user the install command): the workspace hasuncommitted lockfile changes、offline/no network access, or the package manager is unclear—because install will modify the lockfile, take time, and depend on the network.

BFF (automated)(by default include --install one-step completion; in exceptional cases remove it according to the execution discipline above --install）：

node scripts/enable.mjs bff <projectDir> --install

automatic completion (based on components/enable-bff.mdx）：

  • dependencies: add @modern-js/plugin-bff, with the version kept consistent with @modern-js/app-tools (official packages use a unified version number)
  • configuration：modern.config.* top-level plugins append bffPlugin()(if already present, skip idempotently)
  • tsconfig: add paths["@api/*"] = ["./api/lambda/*"] and include add api(if non-standard JSON, add to the manual checklist)
  • end-to-end example(based on bff/function.mdx): generate/reuse api/lambda/hello.ts（export const get, do not overwrite existing api, prefer reusing existing GET/default), andwire into the real page—if the default template homepage can be safely replaced, modify src/routes/page.tsx（import { get as hello } from '@api/hello' + useEffect); if there is an existing business homepage, create a new src/routes/bff-demo/page.tsx(write the access path clearly in the report); for non-conventional routing, add to the manual checklist and provide an example

view .agents/runs/modernjs-feature-enable/report.json 's changed / manual。

other capabilities：styled-components(plugin, automatic),tailwindcss(Rsbuild native scaffold),server(generate server/modern.server.ts skeleton + @modern-js/server-runtime + tsconfig include, business semantics manual),microFrontend(output an executable checklist).

SSG (automated)(also by default include --install）：

node scripts/enable.mjs ssg <projectDir> --install

automatic completion (based on components/enable-ssg.mdx): add @modern-js/plugin-ssg(same version as app-tools),plugins append ssgPlugin(), top-level output merge ssg: true(if output already exists, do not overwrite other fields). See references/enable-ssg.md。

CJS（module.exports/require) configuration will insert const { xxxPlugin } = require(...); if insertion fails or the binding cannot be determined, add to the manual checklist, and do not write a half-finished product that is undefined at runtime.

Other features (manual): read references/other-features.md, and enable manually according to the current documentation.

Step 3: Install dependencies + verify

Read references/install-dependencies.md choose a package manager to install, then modern dev / modern build verify.

Security red lines

  • Rewriting prioritizes structured changes; anything that cannot be parsed (non-standard JSON, configuration object cannot be located) goes to the manual checklist, and is not blindly modified.
  • Do not overwrite existing api/ and other user files; already enabled features are skipped idempotently.
  • The report distinguishes changed(already automatically rewritten) / manual(manual intervention required); when encountering modern new such deprecated paths, clearly mark them and do not guide users to use them.