@bleedingdev/modern-js-create 3.2.0-ultramodern.6 → 3.2.0-ultramodern.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/dist/index.js +23 -0
  2. package/package.json +1 -1
  3. package/template-workspace/.agents/rstackjs-agent-skills-LICENSE +21 -0
  4. package/template-workspace/.agents/skills/rsbuild-best-practices/SKILL.md +57 -0
  5. package/template-workspace/.agents/skills/rsdoctor-analysis/SKILL.md +96 -0
  6. package/template-workspace/.agents/skills/rsdoctor-analysis/references/command-map.md +113 -0
  7. package/template-workspace/.agents/skills/rsdoctor-analysis/references/common-analysis-patterns.md +190 -0
  8. package/template-workspace/.agents/skills/rsdoctor-analysis/references/install-rsdoctor-common.md +88 -0
  9. package/template-workspace/.agents/skills/rsdoctor-analysis/references/install-rsdoctor-rspack.md +138 -0
  10. package/template-workspace/.agents/skills/rsdoctor-analysis/references/install-rsdoctor-webpack.md +71 -0
  11. package/template-workspace/.agents/skills/rsdoctor-analysis/references/install-rsdoctor.md +39 -0
  12. package/template-workspace/.agents/skills/rsdoctor-analysis/references/rsdoctor-data-types.md +103 -0
  13. package/template-workspace/.agents/skills/rslib-best-practices/SKILL.md +58 -0
  14. package/template-workspace/.agents/skills/rslib-modern-package/SKILL.md +173 -0
  15. package/template-workspace/.agents/skills/rspack-best-practices/SKILL.md +70 -0
  16. package/template-workspace/.agents/skills/rspack-tracing/SKILL.md +75 -0
  17. package/template-workspace/.agents/skills/rspack-tracing/references/bottlenecks.md +47 -0
  18. package/template-workspace/.agents/skills/rspack-tracing/references/tracing-guide.md +38 -0
  19. package/template-workspace/.agents/skills/rspack-tracing/scripts/analyze_trace.js +184 -0
  20. package/template-workspace/.agents/skills/rstest-best-practices/SKILL.md +133 -0
  21. package/template-workspace/.agents/skills-lock.json +56 -0
  22. package/template-workspace/AGENTS.md +28 -0
  23. package/template-workspace/scripts/validate-ultramodern-workspace.mjs.handlebars +67 -0
@@ -0,0 +1,138 @@
1
+ # Install Rsdoctor Plugin for Rspack Projects
2
+
3
+ This guide covers installation for Rspack-based projects, including:
4
+
5
+ - Rspack CLI
6
+ - Rsbuild
7
+ - Modern.js
8
+ - Rslib
9
+ - Rspress
10
+
11
+ ## Step 1: Install Dependencies
12
+
13
+ For projects based on Rspack, such as Rsbuild or Rslib:
14
+
15
+ **Note:** Prefer using the latest versions of the above dependencies when available.
16
+
17
+ ```bash
18
+ npm add @rsdoctor/rspack-plugin -D
19
+ pnpm add @rsdoctor/rspack-plugin -D
20
+ ```
21
+
22
+ ## Step 2: Register Plugin
23
+
24
+ After the dependency installation, check the installed `@rsdoctor/rspack-plugin` version before changing config or running a build. Do not infer plugin capabilities from `@rsdoctor/agent-cli --version`.
25
+
26
+ Required version gate (use exactly this if/else order):
27
+
28
+ 1. Set `pluginName = '@rsdoctor/rspack-plugin'`.
29
+ 2. Determine `pluginVersion` from local files first: dependency declarations in `package.json`, lockfile entries, then `node_modules/@rsdoctor/rspack-plugin/package.json` if installed. Use `pnpm why @rsdoctor/rspack-plugin` / `npm ls @rsdoctor/rspack-plugin` only as a fallback. When repeating analysis, reuse a valid `.rsdoctor-analysis-cache.json` plugin entry before re-reading files; invalidate it if `package.json`, lock files, or the plugin package file modification time changed.
30
+ 3. Choose one branch; do not merge branches:
31
+
32
+ ```text
33
+ if @rsdoctor/rspack-plugin is missing:
34
+ install/register @rsdoctor/rspack-plugin, then configure output.mode='brief' and output.options.type=['json']; build with RSDOCTOR=true only
35
+ else if pluginVersion is unknown:
36
+ resolve pluginVersion first; if still unknown, configure output.mode='brief' and output.options.type=['json']; build with RSDOCTOR=true only
37
+ else if pluginVersion >= 1.5.11:
38
+ do not modify plugin config just for JSON; build with RSDOCTOR_OUTPUT=json and RSDOCTOR=true if needed
39
+ else: # pluginVersion < 1.5.11
40
+ MUST configure output.mode='brief' and output.options.type=['json']; build with RSDOCTOR=true only
41
+ ```
42
+
43
+ Preflight every build command: `RSDOCTOR_OUTPUT=json` is allowed only in the `pluginVersion >= 1.5.11` branch. For missing, unknown, or `< 1.5.11`, `RSDOCTOR_OUTPUT=json` is forbidden. For example, when `@rsdoctor/rspack-plugin` is `1.5.7`, this command is incorrect:
44
+
45
+ ```bash
46
+ RSDOCTOR_OUTPUT=json RSDOCTOR=true pnpm run build:rspack
47
+ ```
48
+
49
+ Below are configuration examples for old Rspack plugin versions, unknown versions, missing plugins, or projects that still need to register the plugin:
50
+
51
+ ### Rspack CLI
52
+
53
+ Initialize the plugin in the [plugins](https://www.rspack.rs/config/plugins.html#plugins) of `rspack.config.ts`:
54
+
55
+ ```ts title="rspack.config.ts"
56
+ import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
57
+
58
+ export default {
59
+ plugins: [
60
+ // Only register the plugin when RSDOCTOR is true, as the plugin will increase the build time.
61
+ process.env.RSDOCTOR &&
62
+ new RsdoctorRspackPlugin({
63
+ disableClientServer: true,
64
+ // Required for @rsdoctor/rspack-plugin < 1.5.11.
65
+ output: {
66
+ mode: 'brief',
67
+ options: {
68
+ type: ['json'],
69
+ },
70
+ },
71
+ }),
72
+ ],
73
+ };
74
+ ```
75
+
76
+ ### Rsbuild/Rslib/Modern.js
77
+
78
+ See [Rsbuild - Use Rsdoctor](https://rsbuild.rs/guide/debug/rsdoctor) for more details.
79
+ If this is Modern.js project can see [tools.rspack](https://modernjs.dev/configure/app/tools/rspack) of `modern.config.ts`:
80
+
81
+ For `@rsdoctor/rspack-plugin` < `1.5.11`, configure JSON output in `rsbuild.config.ts`:
82
+
83
+ ```ts title="rsbuild.config.ts"
84
+ import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
85
+
86
+ export default {
87
+ tools: {
88
+ rspack: {
89
+ plugins: [
90
+ process.env.RSDOCTOR === 'true' &&
91
+ new RsdoctorRspackPlugin({
92
+ disableClientServer: true, // Prevent starting local server
93
+ output: {
94
+ mode: 'brief', // Required for plugin versions < 1.5.11
95
+ options: {
96
+ type: ['json'], // Only generate JSON data
97
+ },
98
+ },
99
+ }),
100
+ ],
101
+ },
102
+ },
103
+ };
104
+ ```
105
+
106
+ ### Rspress
107
+
108
+ For Rspress projects, configure the plugin in `builderConfig.tools.rspack`:
109
+
110
+ ```ts title="rspress.config.ts"
111
+ import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
112
+ import { defineConfig } from 'rspress/config';
113
+
114
+ export default defineConfig({
115
+ builderConfig: {
116
+ tools: {
117
+ rspack: {
118
+ plugins: [
119
+ process.env.RSDOCTOR === 'true' &&
120
+ new RsdoctorRspackPlugin({
121
+ disableClientServer: true, // Prevent starting local server
122
+ output: {
123
+ mode: 'brief', // Required for plugin versions < 1.5.11
124
+ options: {
125
+ type: ['json'], // Only generate JSON data
126
+ },
127
+ },
128
+ }),
129
+ ],
130
+ },
131
+ },
132
+ },
133
+ });
134
+ ```
135
+
136
+ ## Step 3 & 4: Locate and Use rsdoctor-data.json
137
+
138
+ For steps on locating the `rsdoctor-data.json` file and using it for analysis, see the [common installation guide](./install-rsdoctor-common.md).
@@ -0,0 +1,71 @@
1
+ # Install Rsdoctor Plugin for Webpack Projects
2
+
3
+ This guide covers installation for Webpack projects (webpack >= 5).
4
+
5
+ ## Step 1: Install Dependencies
6
+
7
+ Rsdoctor only supports webpack >= 5.
8
+
9
+ For projects based on webpack:
10
+
11
+ ```bash
12
+ npm add @rsdoctor/webpack-plugin -D
13
+ pnpm add @rsdoctor/webpack-plugin -D
14
+ ```
15
+
16
+ ## Step 2: Register Plugin
17
+
18
+ After the dependency installation, check the installed `@rsdoctor/webpack-plugin` version before changing config or running a build. Do not infer plugin capabilities from `@rsdoctor/agent-cli --version`.
19
+
20
+ Required version gate (use exactly this if/else order):
21
+
22
+ 1. Set `pluginName = '@rsdoctor/webpack-plugin'`.
23
+ 2. Determine `pluginVersion` from local files first: dependency declarations in `package.json`, lockfile entries, then `node_modules/@rsdoctor/webpack-plugin/package.json` if installed. Use `pnpm why @rsdoctor/webpack-plugin` / `npm ls @rsdoctor/webpack-plugin` only as a fallback. When repeating analysis, reuse a valid `.rsdoctor-analysis-cache.json` plugin entry before re-reading files; invalidate it if `package.json`, lock files, or the plugin package file modification time changed.
24
+ 3. Choose one branch; do not merge branches:
25
+
26
+ ```text
27
+ if @rsdoctor/webpack-plugin is missing:
28
+ install/register @rsdoctor/webpack-plugin, then configure output.mode='brief' and output.options.type=['json']; build with RSDOCTOR=true only
29
+ else if pluginVersion is unknown:
30
+ resolve pluginVersion first; if still unknown, configure output.mode='brief' and output.options.type=['json']; build with RSDOCTOR=true only
31
+ else if pluginVersion >= 1.5.11:
32
+ do not modify plugin config just for JSON; build with RSDOCTOR_OUTPUT=json and RSDOCTOR=true if needed
33
+ else: # pluginVersion < 1.5.11
34
+ MUST configure output.mode='brief' and output.options.type=['json']; build with RSDOCTOR=true only
35
+ ```
36
+
37
+ Preflight every build command: `RSDOCTOR_OUTPUT=json` is allowed only in the `pluginVersion >= 1.5.11` branch. For missing, unknown, or `< 1.5.11`, `RSDOCTOR_OUTPUT=json` is forbidden. For example, when `@rsdoctor/webpack-plugin` is `1.5.7`, this command is incorrect:
38
+
39
+ ```bash
40
+ RSDOCTOR_OUTPUT=json RSDOCTOR=true pnpm run build
41
+ ```
42
+
43
+ ### Webpack
44
+
45
+ For old Webpack plugin versions, unknown versions, missing plugins, or projects that still need to register the plugin, initialize it in the [plugins](https://webpack.js.org/configuration/plugins/#plugins) of `webpack.config.js`:
46
+
47
+ ```js title="webpack.config.js"
48
+ const { RsdoctorWebpackPlugin } = require('@rsdoctor/webpack-plugin');
49
+
50
+ module.exports = {
51
+ // ...
52
+ plugins: [
53
+ // Only register the plugin when RSDOCTOR is true, as the plugin will increase the build time.
54
+ process.env.RSDOCTOR &&
55
+ new RsdoctorWebpackPlugin({
56
+ disableClientServer: true,
57
+ // Required for @rsdoctor/webpack-plugin < 1.5.11.
58
+ output: {
59
+ mode: 'brief',
60
+ options: {
61
+ type: ['json'],
62
+ },
63
+ },
64
+ }),
65
+ ].filter(Boolean),
66
+ };
67
+ ```
68
+
69
+ ## Step 3 & 4: Locate and Use rsdoctor-data.json
70
+
71
+ For steps on locating the `rsdoctor-data.json` file and using it for analysis, see the [common installation guide](./install-rsdoctor-common.md).
@@ -0,0 +1,39 @@
1
+ # Install Rsdoctor Plugin
2
+
3
+ This documentation has been split into project-specific guides:
4
+
5
+ ## Choose Your Project Type
6
+
7
+ - **For Rspack/Rsbuild/Modern.js projects:** See [install-rsdoctor-rspack.md](./install-rsdoctor-rspack.md)
8
+ - **For Webpack projects:** See [install-rsdoctor-webpack.md](./install-rsdoctor-webpack.md)
9
+
10
+ ## Quick Decision Guide
11
+
12
+ **Determine your project type:**
13
+
14
+ 1. **Check project type** (`projectType`):
15
+ - If project uses **Rspack** (including Rsbuild, Rslib, or any Rspack-based project) → Use `projectType: 'rspack'` → See [install-rsdoctor-rspack.md](./install-rsdoctor-rspack.md)
16
+ - If project uses **Webpack** (webpack >= 5) → Use `projectType: 'webpack'` → See [install-rsdoctor-webpack.md](./install-rsdoctor-webpack.md)
17
+
18
+ 2. **Check framework** (`framework`):
19
+ - If using **Rspack CLI** → `framework: 'rspack'` → See [install-rsdoctor-rspack.md](./install-rsdoctor-rspack.md)
20
+ - If using **Rsbuild** → `framework: 'rsbuild'` → See [install-rsdoctor-rspack.md](./install-rsdoctor-rspack.md)
21
+ - If using **Modern.js** → `framework: 'modern.js'` → See [install-rsdoctor-rspack.md](./install-rsdoctor-rspack.md)
22
+ - If using **Rslib** → `framework: 'rslib'` → See [install-rsdoctor-rspack.md](./install-rsdoctor-rspack.md)
23
+ - If using **Rspress** → `framework: 'rspress'` → See [install-rsdoctor-rspack.md](./install-rsdoctor-rspack.md)
24
+ - If using **Webpack** → `framework: 'webpack'` → See [install-rsdoctor-webpack.md](./install-rsdoctor-webpack.md)
25
+
26
+ **Decision flow:**
27
+
28
+ ```
29
+ User's project
30
+ ├─ Is it Rspack-based? (Rsbuild, Rslib, Rspress, etc.)
31
+ │ ├─ Yes → projectType: 'rspack'
32
+ │ │ ├─ Rspack CLI? → framework: 'rspack' → install-rsdoctor-rspack.md
33
+ │ │ ├─ Rsbuild? → framework: 'rsbuild' → install-rsdoctor-rspack.md
34
+ │ │ ├─ Rslib? → framework: 'rslib' → install-rsdoctor-rspack.md
35
+ │ │ ├─ Rspress? → framework: 'rspress' → install-rsdoctor-rspack.md
36
+ │ │ └─ Modern.js? → framework: 'modern.js' → install-rsdoctor-rspack.md
37
+ │ └─ No → Is it Webpack >= 5?
38
+ │ └─ Yes → projectType: 'webpack', framework: 'webpack' → install-rsdoctor-webpack.md
39
+ ```
@@ -0,0 +1,103 @@
1
+ # Rsdoctor Data Type Context
2
+
3
+ Use this reference when a task requires understanding raw `rsdoctor-data.json` fields, schema, or nested data attributes.
4
+
5
+ ## Source of Truth
6
+
7
+ Read type definitions from the published npm package `@rsdoctor/types`. Do not use local repository `dist/` artifacts unless the user explicitly asks for local development branch behavior.
8
+
9
+ Brief JSON output has this wrapper shape:
10
+
11
+ ```ts
12
+ import type { Manifest, SDK } from '@rsdoctor/types';
13
+
14
+ export interface RsdoctorDataJson {
15
+ data: SDK.BuilderStoreData;
16
+ clientRoutes: Manifest.RsdoctorManifestClientRoutes[];
17
+ }
18
+ ```
19
+
20
+ The core payload type is `SDK.BuilderStoreData`.
21
+
22
+ ## npm Lookup Flow
23
+
24
+ Prefer the npm registry/package interface.
25
+
26
+ Use the latest published package unless the user gives a specific Rsdoctor package version or asks to match an installed project version.
27
+
28
+ ```bash
29
+ npm view @rsdoctor/types version dist.tarball --json
30
+ ```
31
+
32
+ If command execution is unavailable, use the registry endpoint directly:
33
+
34
+ ```text
35
+ https://registry.npmjs.org/@rsdoctor%2Ftypes/latest
36
+ ```
37
+
38
+ Read the `dist.tarball` URL from the response, download the tarball, and inspect `.d.ts` files under `package/dist/`.
39
+
40
+ If matching an installed project version is important:
41
+
42
+ 1. Inspect the project package versions for `@rsdoctor/rspack-plugin`, `@rsdoctor/webpack-plugin`, `@rsdoctor/core`, `@rsdoctor/sdk`, or `@rsdoctor/types`.
43
+ 2. Query the matching type package:
44
+
45
+ ```bash
46
+ npm view @rsdoctor/types@<version> version dist.tarball --json
47
+ ```
48
+
49
+ 3. If that exact version does not exist, use the closest compatible published `@rsdoctor/types` version and state the version mismatch.
50
+
51
+ ## Files to Inspect
52
+
53
+ Start here:
54
+
55
+ - `package/dist/index.d.ts`: namespace exports. `SDK` comes from `./sdk/index.js`; `Manifest` comes from `./manifest.js`.
56
+ - `package/dist/sdk/index.d.ts`: exports all SDK data subtypes.
57
+ - `package/dist/sdk/result.d.ts`: defines `BuilderStoreData`, the `rsdoctor-data.json.data` payload.
58
+ - `package/dist/manifest.d.ts`: defines client routes and manifest types.
59
+
60
+ Then load nested files as needed:
61
+
62
+ - `package/dist/sdk/module.d.ts`: `moduleGraph`, modules, dependencies, source ranges, module code, tree-shaking-linked module data.
63
+ - `package/dist/sdk/chunk.d.ts`: `chunkGraph`, assets, chunks, entrypoints.
64
+ - `package/dist/sdk/package.d.ts`: `packageGraph`, package dependency data, duplicate package reports, other reports.
65
+ - `package/dist/sdk/loader.d.ts`: loader timing/input/output data.
66
+ - `package/dist/sdk/resolver.d.ts`: resolver data.
67
+ - `package/dist/sdk/plugin.d.ts`: plugin hook/tap timing data.
68
+ - `package/dist/sdk/summary.d.ts`: build summary/cost data.
69
+ - `package/dist/sdk/config.d.ts`: collected bundler config data.
70
+ - `package/dist/sdk/envinfo.d.ts`: environment info data.
71
+ - `package/dist/rule/data.d.ts`: `errors`/rule store data.
72
+
73
+ ## Field Map
74
+
75
+ `SDK.BuilderStoreData` contains:
76
+
77
+ - `hash`: build hash.
78
+ - `root`: project root.
79
+ - `pid`: process id.
80
+ - `envinfo`: environment information.
81
+ - `errors`: rule/error store data.
82
+ - `configs`: collected bundler config data.
83
+ - `summary`: build summary data.
84
+ - `resolver`: resolver events.
85
+ - `loader`: loader transform events.
86
+ - `plugin`: plugin hook/tap events.
87
+ - `moduleGraph`: module graph data.
88
+ - `chunkGraph`: asset/chunk/entrypoint graph data.
89
+ - `packageGraph`: package/dependency graph data.
90
+ - `moduleCodeMap`: module source/code map data.
91
+ - `treeShaking`: optional tree-shaking data.
92
+ - `otherReports`: optional extra report payloads.
93
+
94
+ In brief JSON mode, `moduleCodeMap` is normally `{}` and `treeShaking` is normally absent unless generated by a mode that includes it.
95
+
96
+ ## Usage Guidance
97
+
98
+ - Cite the npm package version used when explaining fields.
99
+ - Distinguish wrapper fields (`data`, `clientRoutes`) from `SDK.BuilderStoreData` fields.
100
+ - When a nested field is unclear, inspect the specific `.d.ts` file instead of guessing.
101
+ - Use these types to construct `@rsdoctor/agent-cli --filter` field selections before each data fetch. Prefer the smallest field set that can answer the current question.
102
+ - Match filters to the relevant data domain: chunks from `chunkGraph`, modules and tree-shaking module details from `moduleGraph`/`treeShaking`, packages from `packageGraph`, loader cost from `loader`, build cost from `summary`, and rule findings from `errors`.
103
+ - For analysis recommendations, prefer `@rsdoctor/agent-cli` commands. Use these types for schema explanation, prompt grounding, or validating raw JSON field names.
@@ -0,0 +1,58 @@
1
+ ---
2
+ name: rslib-best-practices
3
+ description: Rslib best practices for config, CLI workflow, output, declaration files, dependency handling, build optimization and toolchain integration. Use when writing, reviewing, or troubleshooting Rslib projects.
4
+ ---
5
+
6
+ # Rslib Best Practices
7
+
8
+ Apply these rules when writing or reviewing Rslib library projects.
9
+
10
+ ## Configuration
11
+
12
+ - Use `rslib.config.ts` and `defineConfig`
13
+ - Check Rslib-specific configurations first (e.g., `lib.*`), and also leverage Rsbuild configurations (e.g., `source.*`, `output.*`, `tools.*`) as needed
14
+ - For deep-level or advanced configuration needs, use `tools.rspack` or `tools.bundlerChain` to access Rspack's native configurations
15
+ - In TypeScript projects, prefer `tsconfig.json` path aliases
16
+
17
+ ## CLI
18
+
19
+ - Use `rslib` to build
20
+ - Use `rslib --watch` to build in watch mode for local development
21
+ - Use `rslib inspect` to inspect final Rslib/Rsbuild/Rspack configs
22
+
23
+ ## Output
24
+
25
+ - Prefer to build pure-ESM package with `"type": "module"` in `package.json`
26
+ - Prefer to use bundleless mode with `output.target` set to `'web'` when building component libraries
27
+ - Prefer to use bundle mode when building Node.js utility libraries
28
+ - Ensure `exports` field in `package.json` is correctly configured and matches the actual JavaScript output and declaration files output of different formats (ESM, CJS, etc.)
29
+
30
+ ## Declaration files
31
+
32
+ - Prefer to enable declaration file generation with `lib.dts: true` or detailed configurations
33
+ - For faster type generation, enable `lib.dts.tsgo` experimental feature with `@typescript/native-preview` installed
34
+
35
+ ## Dependencies
36
+
37
+ - Prefer to place dependencies to be bundled in `devDependencies` in bundle mode and dependencies in `dependencies` and `peerDependencies` will be automatically externalized (not bundled) by default
38
+ - Verify the build output and dependency specifiers in `package.json` carefully to ensure no missing dependency errors occur when consumers install and use this package
39
+
40
+ ## Build optimization
41
+
42
+ - Keep syntax target in `lib.syntax` aligned with real compatibility requirements to enable better optimizations
43
+ - Avoid format-specific APIs in source code for better compatibility with different output formats
44
+ - Prefer lightweight dependencies to reduce bundle size
45
+
46
+ ## Toolchain integration
47
+
48
+ - Prefer to use Rstest with `@rstest/adapter-rslib` for writing tests
49
+ - Prefer to use Rspress for writing library documentation, with `@rspress/plugin-preview` and `@rspress/plugin-api-docgen` for component previews and API docs
50
+
51
+ ## Debugging
52
+
53
+ - Run with `DEBUG=rsbuild` when diagnosing config resolution or plugin behavior
54
+ - Read generated files in `dist/.rsbuild` to confirm final Rsbuild/Rspack config, not assumed config
55
+
56
+ ## Documentation
57
+
58
+ - For the latest Rslib docs, read https://rslib.rs/llms.txt
@@ -0,0 +1,173 @@
1
+ ---
2
+ name: rslib-modern-package
3
+ description: Opinionated Rslib recommendations for modern JS/TS npm package design covering pure ESM, strict TypeScript, explicit exports, small stable APIs, pragmatic dependencies, accurate sideEffects, correct declarations, package validation, provenance, README.md, and AGENTS.md. Use when the user wants to make a JS/TS package more modern, check whether the current package setup is healthy, review package.json/exports/types/dependencies/docs/release readiness, or apply a modern library baseline.
4
+ ---
5
+
6
+ # Rslib Modern Package
7
+
8
+ Use this skill when creating a new Rslib library, modernizing an existing JS/TS package, or reviewing a package against an opinionated modern library standard.
9
+
10
+ This skill is opinionated: it describes a recommended modern package contract and may suggest breaking changes when they make the package simpler, safer, and easier for modern consumers.
11
+
12
+ ## Standard
13
+
14
+ Default recommendation for new JS/TS libraries:
15
+
16
+ - ESM-first, preferably pure ESM.
17
+ - Strict TypeScript and correct declaration files.
18
+ - Explicit public API through `package.json#exports`.
19
+ - Small named-export API surface.
20
+ - Few runtime dependencies, without treating zero dependencies as a religion.
21
+ - Small, tree-shakeable output with accurate `sideEffects`.
22
+ - Clear dependency placement: runtime dependencies, peer dependencies, optional dependencies, and dev dependencies are not interchangeable.
23
+ - Published package is tested as an artifact, not just as source files.
24
+ - Release flow is automated, traceable, and SemVer-aware.
25
+ - README.md explains usage for humans; AGENTS.md preserves package invariants for future agents.
26
+
27
+ ## Workflow
28
+
29
+ 1. **Inspect the package contract first**
30
+ - Read `package.json`, lockfile/package manager, `rslib.config.*`, `tsconfig*`, CI/release config, README.md, AGENTS.md, and existing `dist` output.
31
+ - Identify package kind: Node utility, browser library, isomorphic utility, CLI, UI/component library, framework plugin, SDK, or adapter.
32
+ - List supported runtimes, current entry points, deep imports, runtime dependencies, peer dependencies, optional integrations, files with side effects, and published files.
33
+ - Run `npm pack --dry-run` early when changing package shape so the real tarball contents guide the review.
34
+
35
+ 2. **Define target environments explicitly**
36
+ - Do not say "supports modern environments" without defining them.
37
+ - Verify the current Node.js release schedule before choosing `engines`.
38
+ - As of May 9, 2026, Node.js 22 and 24 are LTS, and Node.js 20 is EOL. For new Node-facing packages, recommend `engines.node >=22` unless real consumers need an older runtime.
39
+ - Browser packages should state whether they require native ESM, a bundler, Workers support, SSR compatibility, DOM APIs, CSS processing, or specific browser baselines.
40
+ - Compatibility drops are breaking changes: old Node/browser versions, undocumented deep imports, default/named export shape, bundled vs external dependency behavior, and import side effects.
41
+
42
+ 3. **Prefer pure ESM, but explain compatibility cost**
43
+ - New packages should use `"type": "module"` and ESM source/output.
44
+ - Rslib's default format is ESM; keep that default unless there is a clear reason to add another format.
45
+ - Evaluate compatibility from real consumers and supported runtimes instead of assuming every historical module format is required.
46
+ - Modern Node.js can load synchronous ESM from CommonJS via `require(esm)`; do not assume CJS consumers always require a separate CJS build.
47
+ - If you rely on `require(esm)` compatibility, document and test its constraints: supported Node versions, no top-level `await` in the loaded graph, namespace-object return shape, default export behavior, and CJS/ESM cycle limits.
48
+ - Prefer Node built-in specifiers such as `node:fs/promises`.
49
+
50
+ 4. **Make `exports` the public API**
51
+ - Treat `package.json#exports` as the product contract.
52
+ - Export only paths users are meant to import.
53
+ - Do not allow imports like `pkg/dist/foo.js` by exporting `./dist/*`. That makes the generated output layout part of the public API and turns internal file moves into breaking changes.
54
+ - Instead, expose only intentional public paths such as `pkg` and `pkg/foo.js`, mapped to the actual files in `dist`.
55
+ - Keep subpath style consistent: either all with extensions such as `./foo.js`, or all without extensions. Prefer paths with extensions when browser import maps matter.
56
+ - Keep `"types"` first inside conditional exports.
57
+ - Adding `exports` to an older package can be breaking because undeclared deep imports stop working.
58
+ - Add `./package.json` only when consumers legitimately need package metadata.
59
+
60
+ 5. **Design a small API surface**
61
+ - Prefer named exports for multi-API packages.
62
+ - Avoid default-export objects that gather every function into one object.
63
+ - Public functions should be few, stable, well-named, and semver-maintained.
64
+ - Keep internal types, caches, helper functions, adapter details, and error internals private unless they are part of the contract.
65
+ - Avoid top-level work during import: file scans, network calls, timers, process mutation, global registration, DOM access, prototype mutation, or environment detection with side effects.
66
+ - Async APIs that may be canceled should accept `AbortSignal`.
67
+ - Prefer stable error classes, error codes, or typed error shapes over string matching.
68
+
69
+ 6. **Use Rslib as the implementation path, not the whole standard**
70
+ - For detailed Rslib configuration guidance, use the `rslib-best-practices` skill.
71
+ - In this skill, only check whether Rslib output, declarations, `package.json#exports`, `files`, dependencies, and docs agree with the modern package contract.
72
+ - Keep Rslib configuration small and intentional; avoid adding build complexity that does not improve the package contract.
73
+
74
+ 7. **Keep dependencies small and intentional**
75
+ - Start from platform APIs, not from dependency search.
76
+ - Prefer built-ins when the runtime supports them: `URL`, `URLSearchParams`, `Intl`, `fetch`, `AbortController`, `structuredClone`, `crypto.randomUUID`, Web Streams, `TextEncoder`, `TextDecoder`, `node:fs/promises`, and `node:crypto`.
77
+ - Small runtime dependencies are fine when they reduce maintenance risk or implementation complexity.
78
+ - Avoid large utility packages for one or two helpers.
79
+ - Evaluate dependencies for ESM support, `exports`, types, transitive dependency count, package size, license, maintenance activity, security history, install scripts, side effects, native install fragility, and granular imports.
80
+ - Put required runtime packages in `dependencies`.
81
+ - Put host-owned frameworks and toolchains in `peerDependencies`, such as React, Vue, Svelte, Rspack, Rsbuild, webpack, TypeScript, and framework runtimes.
82
+ - Keep peer ranges reasonably broad; do not pin peers to a patch version unless required.
83
+ - Put build tools, test tools, type tools, docs tools, and Rsbuild/Rspack plugins in `devDependencies`.
84
+ - Use `optionalDependencies` or optional peers via `peerDependenciesMeta` for optional integrations.
85
+
86
+ 8. **Make TypeScript strict and package-oriented**
87
+ - Prefer TypeScript source for TS libraries; otherwise use high-quality JSDoc plus generated declarations.
88
+ - With TypeScript 6 or tsgo-era defaults, strict checking may already be enabled; preserve that default and do not turn it off. For older TypeScript versions or inherited configs, set `strict: true` explicitly.
89
+ - In Rslib projects, consider enabling `lib.dts.tsgo` to speed up declaration generation when the project can use tsgo.
90
+ - Keep `module` and `moduleResolution` aligned with how declarations are emitted and how consumers resolve the package; NodeNext and bundler-style resolution are both valid in the right toolchain.
91
+ - Use `verbatimModuleSyntax` so type-only imports/exports are explicit.
92
+ - Use `isolatedDeclarations` when practical so exported APIs are explicit enough for declaration-oriented tooling.
93
+ - Emit declarations; use declaration maps when editor navigation matters.
94
+ - Use `import type` and `export type` for type-only dependencies.
95
+ - Do not rely on consumers setting `skipLibCheck` to hide broken package types.
96
+ - Test declarations as consumers see them, especially when using subpath exports.
97
+
98
+ 9. **Keep `sideEffects` accurate**
99
+ - Use `sideEffects: false` only when importing package files has no top-level side effects.
100
+ - If CSS, polyfills, registrations, global listeners, prototype changes, or other import-time mutations exist, list the files with side effects instead.
101
+ - Do not set `sideEffects: false` just to improve bundle size; incorrect values can remove required CSS or setup code.
102
+ - Do not change globals just because a file is imported. If setup is required, expose an explicit `setup()` or `install()` function and let users call it themselves.
103
+
104
+ 10. **Make `package.json` authoritative**
105
+ - Required modern shape: `"type": "module"`, explicit `exports`, correct declarations, `files` allowlist, accurate `sideEffects`, sensible `engines`, and release scripts.
106
+ - Include README.md, AGENTS.md, and LICENSE in `files` when they exist.
107
+ - `files` should prevent tests, fixtures, private docs, build caches, local configs, and large generated artifacts from leaking into the tarball.
108
+ - Avoid stale `main`/`module` fields unless compatibility evidence requires them; if kept, they must agree with `exports`.
109
+ - Keep runtime dependency fields accurate. A package that works locally only because a runtime dependency is in `devDependencies` is broken.
110
+
111
+ 11. **Validate the published artifact**
112
+ - Run normal lint, typecheck, tests, and `rslib build`.
113
+ - Smoke test built ESM output.
114
+ - Run type-level tests when the public API is type-heavy.
115
+ - Run `npm pack --dry-run` and inspect included files.
116
+ - In Rslib, prefer `rsbuild-plugin-publint` to run publint after build; use `npx publint` as a CLI fallback.
117
+ - In Rslib, prefer `rsbuild-plugin-arethetypeswrong` to run Are The Types Wrong after build when declarations are shipped; use `npx --yes @arethetypeswrong/cli --pack .` as a CLI fallback.
118
+ - Install the packed tarball into clean consumer fixtures for important packages.
119
+ - Test ESM import, bundler import for browser/component libraries, CLI execution for `bin` packages, and every public subpath export.
120
+
121
+ 12. **Prepare README.md and AGENTS.md before publishing**
122
+ - Always check whether both files exist before publishing or modernizing a package.
123
+ - If either file is missing, recommend adding it; for implementation tasks, create a concise version unless the user asks not to.
124
+ - README.md should include: package name, one-sentence purpose, install/usage, key features or API links, supported environments, docs/related links, changelog or contribution link, and license.
125
+ - AGENTS.md should include: stack, package contract, common commands, source layout, code style, validation commands, and release checklist.
126
+ - Keep both files synchronized with `package.json#exports`, supported runtimes, and actual Rslib output.
127
+
128
+ 13. **Publish with supply-chain hygiene**
129
+ - Follow SemVer and document breaking changes.
130
+ - Maintain a changelog for user-visible changes.
131
+ - Use prerelease versions and dist-tags for beta/next channels.
132
+ - Prefer CI publishing with npm provenance or trusted publishing.
133
+ - Avoid long-lived publish tokens where trusted publishing is available.
134
+ - Remember that a published package name/version pair cannot be reused safely.
135
+
136
+ ## Review Red Flags
137
+
138
+ - `exports` is missing, points to files not emitted by Rslib, or allows public imports such as `pkg/dist/foo.js`.
139
+ - `module`/`main` fields disagree with `exports`.
140
+ - Type declarations do not match runtime entry points.
141
+ - Runtime dependency is accidentally listed only in `devDependencies`.
142
+ - React/Vue/Svelte/Rspack/Rsbuild/webpack/TypeScript is bundled or placed in `dependencies` when it should be a peer.
143
+ - `sideEffects: false` is set while importing CSS, polyfills, global registrations, global listeners, or prototype changes.
144
+ - Package has install scripts without a strong reason.
145
+ - Top-level import reads user files, starts timers, touches the network, mutates globals, or assumes `window`/`process`.
146
+ - Published tarball contains private source maps, tests/fixtures that are not useful to consumers, large generated docs, local config secrets, or build caches.
147
+
148
+ ## Checklist
149
+
150
+ - [ ] Supported environments are explicit.
151
+ - [ ] Package is ESM-first, preferably pure ESM.
152
+ - [ ] `package.json` has `"type": "module"`.
153
+ - [ ] Public entry points are declared in `exports`.
154
+ - [ ] No accidental reliance on undeclared deep imports.
155
+ - [ ] Rslib output, declarations, `exports`, and `files` agree.
156
+ - [ ] TypeScript strict mode is enabled.
157
+ - [ ] Declarations are emitted and validated.
158
+ - [ ] Runtime dependencies are justified and small.
159
+ - [ ] Host frameworks/toolchains are peers.
160
+ - [ ] Build/test/type/docs tools are dev dependencies.
161
+ - [ ] `sideEffects` is accurate.
162
+ - [ ] `npm pack --dry-run` has been inspected.
163
+ - [ ] `publint` passes.
164
+ - [ ] Are The Types Wrong check passes when declarations are shipped.
165
+ - [ ] Built ESM smoke test passes.
166
+ - [ ] README.md exists.
167
+ - [ ] AGENTS.md exists.
168
+ - [ ] Release flow uses SemVer, changelog, and provenance/trusted publishing when available.
169
+
170
+ ## Documentation
171
+
172
+ - For the latest Rslib docs, read https://rslib.rs/llms.txt
173
+ - Shipping ESM for CommonJS consumers: https://nodejs.github.io/package-examples/04-cjs-esm-interop/shipping-esm-for-cjs/
@@ -0,0 +1,70 @@
1
+ ---
2
+ name: rspack-best-practices
3
+ description: Rspack best practices for config, CLI workflow, type checking, CSS, bundle optimization, assets and profiling. Use when writing, reviewing, or troubleshooting Rspack projects.
4
+ ---
5
+
6
+ # Rspack Best Practices
7
+
8
+ Apply these rules when writing or reviewing Rspack projects.
9
+
10
+ ## Configuration
11
+
12
+ - Use `rspack.config.ts` and `defineConfig`
13
+ - Define explicit `entry` values for multi-page applications
14
+ - Keep one main config and branch by `process.env.NODE_ENV` only when needed
15
+ - Keep rule conditions narrow and explicit (`test`, `include`, `exclude`, `resourceQuery`)
16
+ - Prefer built-in Rspack plugins/loaders over community JS alternatives when equivalent features exist
17
+
18
+ ## CLI
19
+
20
+ If `@rspack/cli` is installed:
21
+
22
+ - Use `rspack dev` for local development
23
+ - Use `rspack build` for production build
24
+ - Use `rspack preview` only for local production preview
25
+
26
+ ## Type checking
27
+
28
+ - Use `ts-checker-rspack-plugin` for integrated dev/build type checks
29
+ - Or run `tsc --noEmit`/`vue-tsc --noEmit` as an explicit script step
30
+
31
+ ## CSS
32
+
33
+ Choose one strategy:
34
+
35
+ - Built-in CSS (`type: 'css' | 'css/auto' | 'css/module'`) for modern setups
36
+ - `css-loader` + `CssExtractRspackPlugin` for webpack migration compatibility
37
+ - `style-loader` for pure style-in-JS runtime injection scenarios
38
+
39
+ Optional:
40
+
41
+ - Use `builtin:lightningcss-loader` when goals are syntax downgrade + vendor prefixing
42
+ - Use `sass-loader`/`less-loader` for preprocessing Sass/Less files
43
+ - Use `@tailwindcss/webpack` for Tailwind CSS integration
44
+
45
+ ## Bundle size optimization
46
+
47
+ - Prefer dynamic `import()` for non-critical code paths
48
+ - Prefer lightweight libraries where possible
49
+ - Keep `target` aligned with real compatibility requirements
50
+
51
+ ## Asset management
52
+
53
+ - Import source-managed assets from project source directories, not from `public`
54
+ - Reference `public` files by absolute URL path
55
+ - Prefer asset modules (`asset`, `asset/resource`, `asset/inline`, `asset/source`) over legacy `file-loader`/`url-loader`/`raw-loader`
56
+
57
+ ## Profiling
58
+
59
+ - Use Node CPU profiling (`--cpu-prof`) when JavaScript-side overhead is suspected
60
+ - Use `RSPACK_PROFILE=OVERVIEW` and analyze trace output for compiler-phase bottlenecks
61
+ - Replace known slow stacks first (`babel-loader`, PostCSS, terser) with Rspack built-ins when feasible
62
+
63
+ ## Security
64
+
65
+ - Do not publish `.map` files to public servers/CDNs when production source maps are enabled
66
+
67
+ ## Documentation
68
+
69
+ - For the latest (v2) docs, read http://rspack.rs/llms.txt
70
+ - For Rspack v1 docs, read http://v1.rspack.rs/llms.txt