nx

SKILL.md

Nx Monorepo Development

You are an expert in Nx, the smart, fast, and extensible build system for monorepos.

Project Structure

Organize projects following Nx conventions:

apps/ - Application projects (web apps, APIs, mobile apps)

libs/ - Library projects (shared code, features, utilities)

Use consistent naming patterns: scope-type-name (e.g., shared-ui-button)

Group related libraries under feature folders

Workspace Configuration

Configure nx.json for workspace-wide settings:
{
  "targetDefaults": {
    "build": {
      "dependsOn": ["^build"],
      "cache": true
    },
    "test": {
      "cache": true
    }
  },
  "defaultBase": "main"
}

Use project.json for project-specific configuration

Define proper tags for enforcing module boundaries

Project Configuration

Each project should have a project.json:

{
  "name": "my-app",
  "sourceRoot": "apps/my-app/src",
  "projectType": "application",
  "tags": ["scope:web", "type:app"],
  "targets": {
    "build": { },
    "serve": { },
    "test": { }
  }
}

Define clear project types: application or library

Use tags for enforcing dependency constraints

Code Generation

Use Nx generators for consistent code scaffolding:

nx g @nx/react:app my-app - Generate React application

nx g @nx/react:lib my-lib - Generate React library

nx g @nx/react:component my-component --project=my-lib - Generate component

Create custom generators for project-specific patterns

Use --dry-run to preview changes before execution

Module Boundaries

Enforce boundaries using ESLint rules:

{
  "@nx/enforce-module-boundaries": [
    "error",
    {
      "depConstraints": [
        { "sourceTag": "type:app", "onlyDependOnLibsWithTags": ["type:lib", "type:util"] },
        { "sourceTag": "type:lib", "onlyDependOnLibsWithTags": ["type:lib", "type:util"] },
        { "sourceTag": "scope:web", "onlyDependOnLibsWithTags": ["scope:web", "scope:shared"] }
      ]
    }
  ]
}

Define clear dependency rules between project types

Use scopes to separate domain boundaries

Caching and Performance

Enable computation caching for faster builds

Configure Nx Cloud for distributed caching and task execution

Use affected commands to only run tasks for changed projects:

nx affected:build

nx affected:test

nx affected:lint

Define proper inputs and outputs for accurate caching

Task Execution

Run tasks with Nx CLI:

nx build my-app - Build specific project

nx run-many -t build - Build all projects

nx affected -t test - Test affected projects

Use task pipelines for proper dependency ordering

Configure parallel execution for independent tasks

Testing Strategy

Use Jest for unit testing with Nx presets

Configure Cypress or Playwright for E2E testing

Implement component testing for UI libraries

Use nx affected:test in CI for efficient test runs

CI/CD Integration

Use Nx Cloud for distributed task execution

Configure GitHub Actions with Nx:
- uses: nrwl/nx-set-shas@v4
- run: nx affected -t lint test build

Implement proper caching strategies

Use nx-cloud record for capturing metrics

Best Practices

Keep applications thin; move logic to libraries

Create shared utility libraries for common code

Use barrel exports (index.ts) for clean imports

Implement proper type exports from libraries

Document library purposes and public APIs

Use Nx Console VS Code extension for visual project management

Leverage the project graph for understanding dependencies: nx graph