src/skills/shared-monorepo-nx/SKILL.md
Nx monorepo build system — workspace configuration, project graph, task pipelines, caching, generators, plugins, and release management
npx skillsauth add agents-inc/skills shared-monorepo-nxInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
Quick Guide: Nx 22 for monorepo orchestration and build intelligence. Project graph for dependency analysis. Task pipelines with topological ordering and
dependsOn. Local computation caching + Nx Cloud remote caching for massive speed gains. Inferred tasks (Project Crystal) auto-detect targets from tool config files.nx affectedruns only what changed.nx releasefor versioning, changelogs, and publishing. Generators scaffold code, executors run tasks.
<critical_requirements>
All code must follow project conventions in CLAUDE.md (kebab-case, named exports, import ordering,
import type, named constants)
(You MUST enable caching with "cache": true on cacheable targets — builds, tests, linting — and set "cache": false or omit for side-effect tasks like serve)
(You MUST define dependsOn: ["^build"] in targetDefaults for build tasks to ensure topological ordering across the project graph)
(You MUST declare inputs and outputs for cached targets so Nx knows what to hash and what to restore)
(You MUST use inferred tasks (Project Crystal) as the default — only add project.json targets when overriding inferred configuration)
(You MUST use nx affected -t <target> in CI to only run tasks for changed projects and their dependents)
</critical_requirements>
Auto-detection: Nx workspace, nx.json, project.json, nx generate, nx affected, nx graph, nx release, @nx/ plugins, Nx Cloud, inferred tasks, Project Crystal, nx migrate, targetDefaults, namedInputs, nx run-many, nx serve
When to use:
nx release (versioning, changelogs, publishing)nx migrateWhen NOT to use:
npm workspaces without task orchestrationKey patterns covered:
targetDefaults and dependsOnnx release)Additional resources:
Nx is a build intelligence platform for monorepos. Unlike simple task runners, Nx understands the structure of your codebase through the project graph — a directed acyclic graph of projects and their dependencies. This graph enables intelligent task scheduling, fine-grained caching, and affected analysis.
Nx's core value proposition: never run a task that has already been computed, and never run more tasks than necessary.
Key principles:
nx affected uses git diff + project graph to determine the minimum set of projects impacted by a change.When to use Nx:
When NOT to use Nx:
The nx.json file is the central configuration for task behavior, caching, plugins, and workspace-wide defaults.
{
"$schema": "./node_modules/nx/schemas/nx-schema.json",
"namedInputs": {
"production": [
"default",
"!{projectRoot}/**/*.spec.ts",
"!{projectRoot}/**/*.test.ts"
]
},
"targetDefaults": {
"build": {
"dependsOn": ["^build"],
"inputs": ["production", "^production"],
"outputs": ["{projectRoot}/dist"],
"cache": true
}
},
"plugins": [
{ "plugin": "@nx/vite/plugin", "options": { "buildTargetName": "build" } }
]
}
Why good: namedInputs exclude test files from build cache keys, dependsOn: ["^build"] enforces topological ordering, plugins auto-detect targets
For complete nx.json examples, see examples/core.md.
Task pipelines define execution order using the dependsOn property. The ^ prefix means "run this target on dependencies first" (topological ordering).
{
"targetDefaults": {
"build": { "dependsOn": ["^build"] },
"test": { "dependsOn": ["build"] },
"e2e": { "dependsOn": [{ "target": "serve", "params": "ignore" }] },
"serve": { "continuous": true, "cache": false }
}
}
"^build" — Run build on dependency projects first (topological)"build" — Run build on the same project first{ "target": "serve", "params": "ignore" } — Object form, prevents parameter forwarding"continuous": true — Long-running task (Nx 21+), dependents start immediatelyFor pipeline examples and ordering walkthrough, see examples/tasks.md.
Nx caches task results locally by default. When inputs have not changed, cached outputs are restored instantly. Nx Cloud extends this with remote caching shared across the team.
{
"namedInputs": {
"production": ["default", "!{projectRoot}/**/*.test.ts"]
},
"targetDefaults": {
"build": {
"inputs": ["production", "^production"],
"outputs": ["{projectRoot}/dist"],
"cache": true
},
"test": {
"inputs": [
"default",
"^production",
{ "externalDependencies": ["vitest"] }
],
"cache": true
},
"serve": { "cache": false, "continuous": true }
}
}
Key concepts: production excludes test files from build cache keys, externalDependencies invalidates cache on test runner upgrades, cache: false on serve prevents caching dev servers
For cache strategies and namedInputs scenarios, see examples/tasks.md.
Since Nx 18, plugins automatically infer tasks from tool configuration files. For example, @nx/vite/plugin detects vite.config.ts and creates build, serve, and test targets without any project.json.
{
"plugins": [
{
"plugin": "@nx/vite/plugin",
"options": { "buildTargetName": "build", "testTargetName": "test" }
},
{
"plugin": "@nx/jest/plugin",
"include": ["packages/**/*"],
"exclude": ["**/*-e2e/**/*"]
}
]
}
1. Plugin inferred config (lowest priority)
2. targetDefaults in nx.json
3. project.json or package.json targets (highest priority)
When to use: Always prefer inferred tasks as default. Only add project.json targets when overriding:
{
"name": "my-app",
"targets": {
"build": { "outputs": ["{projectRoot}/custom-dist"] }
}
}
nx affected uses git diff combined with the project graph to determine which projects need to be rebuilt/tested. This is the primary CI optimization.
npx nx affected -t test # Test affected projects
npx nx affected -t build test lint # Multiple targets
npx nx affected -t test --base=origin/main --head=HEAD # Explicit base
npx nx affected --graph # Visualize impact
Why good: Only runs tasks for changed projects and their dependents
For CI pipeline examples with affected commands, see examples/ci.md.
Generators create and modify code from templates. Set defaults in nx.json "generators" to enforce organizational standards (bundler, test runner, style format). Use npx nx g <plugin>:<generator> to scaffold projects, libraries, and components.
npx nx g @nx/react:library my-lib --directory=libs/shared/my-lib
npx nx g @nx/workspace:move --project=my-lib --destination=packages/shared/my-lib
For built-in generators, custom generator implementation, and generator defaults, see examples/generators.md.
nx release orchestrates versioning, changelog generation, and publishing. Supports fixed and independent strategies.
{
"release": {
"projects": ["packages/*"],
"projectsRelationship": "independent",
"version": { "conventionalCommits": true, "updateDependents": "always" },
"changelog": {
"projectChangelogs": {
"file": "{projectRoot}/CHANGELOG.md",
"createRelease": "github"
}
},
"releaseTag": { "pattern": "{projectName}-v{version}" },
"git": { "commit": true, "tag": true }
}
}
npx nx release # Full release
npx nx release --dry-run # Preview
npx nx release plan minor -m "Add new API endpoints" # Version plans
For release configuration examples, see examples/ci.md.
Nx provides first-class module federation support, enabling independent teams to deploy separately.
npx nx g @nx/react:host shell --directory=apps/shell
npx nx g @nx/react:remote shop --directory=apps/shop --host=shell
npx nx serve shell --devRemotes=shop,cart
When to use: Large teams with independent deployment cadences. When to avoid: Small teams where a single app suffices.
For module federation examples, see examples/ci.md.
</patterns>Cache Hit Metrics (typical monorepo with 20+ projects):
Optimization Strategies:
namedInputs to exclude test/spec files from build cache keysoutputs precisely to only cache what is needed (exclude framework caches)nx affected in CI to skip unchanged projects entirelyparallel in nx.json to control concurrencymaxCacheSize to prevent unbounded cache growthnpx nx build my-app --skip-nx-cache # Skip cache for a specific run
npx nx reset # Clear all cached artifacts
</performance>
<decision_framework>
Is this a monorepo with shared code?
├─ NO → Standard build tools (Vite, esbuild, tsc)
└─ YES → Do you need task orchestration and caching?
├─ NO → npm/pnpm/bun workspaces alone may suffice
└─ YES → Do you need a project graph and affected analysis?
├─ YES → Nx
└─ NO → Turborepo may be simpler
Which monorepo tool?
├─ Need project graph analysis → Nx
├─ Need generators and code scaffolding → Nx
├─ Need module federation support → Nx
├─ Need distributed task execution (Nx Agents) → Nx
├─ Need simplest possible config → Turborepo
├─ Already using Vercel ecosystem → Turborepo
└─ Need polyglot support (.NET, Java, Gradle) → Nx
New code to write?
├─ Deployable application → apps/
├─ Shared across 2+ apps → libs/ or packages/
├─ App-specific code → Feature folder within the app
├─ Build tooling or generators → tools/
└─ Shared configuration → packages/ (e.g., eslint-config, tsconfig)
How to version packages?
├─ All packages always release together → "fixed" (default)
├─ Packages have different consumers → "independent"
├─ Internal-only packages → Fixed (simpler)
└─ Published to npm with different audiences → Independent
For comprehensive decision trees and anti-patterns, see reference.md.
</decision_framework>
Nx integrates with your tools through its plugin system. Each @nx/* plugin detects its tool's config file and infers targets automatically (Project Crystal). You do not need to manually configure targets for supported tools -- install the plugin, add it to nx.json plugins array, and inferred tasks appear.
Plugin model: @nx/<tool>/plugin reads the tool's config file (e.g., vite.config.ts, eslint.config.js) and registers targets. Use nx show project <name> to see what a plugin inferred.
Package managers: Nx works with npm, pnpm, Bun, or Yarn workspaces. No lock-in.
Nx Cloud: Remote caching (Nx Replay) and distributed task execution (Nx Agents). Connect with nx connect.
Replaces / Conflicts with:
<red_flags>
High Priority Issues:
dependsOn: ["^build"] for build targets — dependencies may not build first, causing import errorscache: true on cacheable targets — every run recomputes from scratch, negating Nx's primary valueserve and dev must have cache: falsenx run-many -t test in CI instead of nx affected -t test — wastes compute on unchanged projectsinputs on cached targets — Nx cannot determine when cache is stale, leading to incorrect cache hitsMedium Priority Issues:
project.json when plugins can auto-detectnamedInputs for production — test file changes invalidate build caches unnecessarilyoutputs — caching framework cache directories (.next/cache/) bloats cache storageCommon Mistakes:
dependsOn: ["build"] (same project) when dependsOn: ["^build"] (dependency projects) was intendedcontinuous: true on serve tasks — dependent e2e tasks wait forever for serve to "complete"nx migrate without --run-migrations — migrations are generated but not applieddefaultBase in nx.json — affected analysis defaults to main which may not be your branchGotchas & Edge Cases:
dependsOn: ["^task"] runs the target on dependency projects; dependsOn: ["task"] runs it on the same project. Mixing these up causes subtle ordering bugs.nx affected requires git history — in CI, ensure fetch-depth: 0 (full history) or at least fetch-depth: 2 for shallow comparison.nx.json matters — when multiple plugins create the same target name, the last plugin wins.maxCacheSize: "0" means unlimited, not zero. To disable caching, use cache: false on targets.project.json and package.json scripts. If both define the same target, project.json takes precedence for configuration but package.json scripts are still registered as targets.nx reset clears the local cache AND shuts down the Nx Daemon. Use nx reset --only-cache to preserve the daemon.</red_flags>
<critical_reminders>
All code must follow project conventions in CLAUDE.md
(You MUST enable caching with "cache": true on cacheable targets — builds, tests, linting — and set "cache": false or omit for side-effect tasks like serve)
(You MUST define dependsOn: ["^build"] in targetDefaults for build tasks to ensure topological ordering across the project graph)
(You MUST declare inputs and outputs for cached targets so Nx knows what to hash and what to restore)
(You MUST use inferred tasks (Project Crystal) as the default — only add project.json targets when overriding inferred configuration)
(You MUST use nx affected -t <target> in CI to only run tasks for changed projects and their dependents)
Failure to follow these rules will cause incorrect builds, stale caches, wasted CI compute, and broken task ordering.
</critical_reminders>
development
Material Design component library for Vue 3
development
VitePress 1.x — Vue-powered static site generator for documentation sites, built on Vite
tools
Docusaurus 3.x documentation framework — site configuration, docs/blog plugins, sidebars, versioning, MDX, swizzling, and deployment
development
TanStack Form patterns - useForm, form.Field, validators, arrays, linked fields, createFormHook, type safety