@smartsoft001-mobilems/claude-plugins 2.58.0

package/plugins/flow/skills/nx-conventions/SKILL.md

@@ -0,0 +1,327 @@
+---
+name: nx-conventions
+description: Nx monorepo patterns, workspace organization, and build conventions
+---
+
+# Nx Conventions
+
+This skill provides guidance on Nx monorepo patterns for this project.
+
+## 1. Workspace Structure
+
+```
+/
+├── apps/
+│   ├── web/              # Main Angular SSR application
+│   └── web-e2e/          # Cypress E2E tests
+├── libs/
+│   └── shared/
+│       └── angular/      # Shared Angular library
+├── tools/
+│   ├── specs/            # Project specifications
+│   └── mockups/          # Design mockups
+├── nx.json               # Nx workspace configuration
+├── tsconfig.base.json    # Base TypeScript config
+└── package.json
+```
+
+## 2. Project Naming
+
+| Type         | Pattern                   | Example                  |
+| ------------ | ------------------------- | ------------------------ |
+| Apps         | `{name}`                  | `web`, `api`             |
+| E2E          | `{app}-e2e`               | `web-e2e`                |
+| Feature libs | `{domain}-feature-{name}` | `museum-feature-objects` |
+| UI libs      | `{scope}-ui`              | `shared-ui`              |
+| Data libs    | `{domain}-data-access`    | `museum-data-access`     |
+| Util libs    | `{scope}-util-{name}`     | `shared-util-forms`      |
+
+## 3. Common Nx Commands
+
+### Development
+
+```bash
+# Serve application
+nx serve web
+
+# Serve with specific configuration
+nx serve web --configuration=development
+
+# Build application
+nx build web
+
+# Build for production
+nx build web --configuration=production
+```
+
+### Testing
+
+```bash
+# Run unit tests
+nx test web
+nx test shared-angular
+
+# Run tests with coverage
+nx test web --coverage
+
+# Run tests in watch mode
+nx test web --watch
+
+# Run E2E tests
+nx e2e web-e2e
+
+# Open Cypress
+nx open-cypress web-e2e
+```
+
+### Linting
+
+```bash
+# Lint project
+nx lint web
+nx lint shared-angular
+
+# Lint all affected projects
+nx affected --target=lint
+```
+
+### Building
+
+```bash
+# Build single project
+nx build web
+
+# Build affected projects
+nx affected --target=build
+
+# Show dependency graph
+nx graph
+```
+
+## 4. Affected Commands
+
+Run tasks only on changed projects:
+
+```bash
+# Test affected
+nx affected --target=test
+
+# Lint affected
+nx affected --target=lint
+
+# Build affected
+nx affected --target=build
+
+# Specify base branch
+nx affected --target=test --base=main
+```
+
+## 5. Project Configuration
+
+### project.json
+
+```json
+{
+  "name": "web",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "sourceRoot": "apps/web/src",
+  "prefix": "app",
+  "targets": {
+    "build": {
+      "executor": "@angular-devkit/build-angular:application",
+      "options": {
+        "outputPath": "dist/apps/web",
+        "index": "apps/web/src/index.html",
+        "browser": "apps/web/src/main.ts",
+        "polyfills": ["zone.js"],
+        "tsConfig": "apps/web/tsconfig.app.json"
+      },
+      "configurations": {
+        "production": {
+          "budgets": [
+            {
+              "type": "initial",
+              "maximumWarning": "2MB",
+              "maximumError": "4MB"
+            }
+          ],
+          "outputHashing": "all"
+        },
+        "development": {
+          "optimization": false,
+          "sourceMap": true
+        }
+      },
+      "defaultConfiguration": "development"
+    },
+    "serve": {
+      "executor": "@angular-devkit/build-angular:dev-server",
+      "options": {
+        "port": 4210
+      }
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "options": {
+        "jestConfig": "apps/web/jest.config.ts",
+        "passWithNoTests": true
+      },
+      "configurations": {
+        "ci": {
+          "codeCoverage": true
+        }
+      }
+    }
+  }
+}
+```
+
+## 6. Path Mappings
+
+In `tsconfig.base.json`:
+
+```json
+{
+  "compilerOptions": {
+    "paths": {
+      "@shared/angular": ["libs/shared/angular/src/index.ts"],
+      "@shared/angular/*": ["libs/shared/angular/src/lib/*"]
+    }
+  }
+}
+```
+
+Usage:
+
+```typescript
+import { SharedModule } from '@shared/angular';
+import { MyService } from '@shared/angular/services';
+```
+
+## 7. Library Types
+
+### Feature Library
+
+Contains smart components, routes, and business logic.
+
+```typescript
+// libs/museum/feature-objects/src/index.ts
+export * from './lib/objects.routes';
+export * from './lib/containers';
+```
+
+### UI Library
+
+Contains presentational (dumb) components only.
+
+```typescript
+// libs/shared/ui/src/index.ts
+export * from './lib/button/button.component';
+export * from './lib/card/card.component';
+```
+
+### Data Access Library
+
+Contains services, state management, and API calls.
+
+```typescript
+// libs/museum/data-access/src/index.ts
+export * from './lib/services/objects.service';
+export * from './lib/+state/objects.facade';
+```
+
+### Utility Library
+
+Contains pure functions, helpers, and utilities.
+
+```typescript
+// libs/shared/util-forms/src/index.ts
+export * from './lib/validators';
+export * from './lib/form-helpers';
+```
+
+## 8. Caching
+
+Nx caches task results. Configure in `nx.json`:
+
+```json
+{
+  "targetDefaults": {
+    "build": {
+      "cache": true,
+      "dependsOn": ["^build"]
+    },
+    "test": {
+      "cache": true
+    },
+    "lint": {
+      "cache": true
+    }
+  }
+}
+```
+
+## 9. Task Dependencies
+
+Define task execution order:
+
+```json
+{
+  "targetDefaults": {
+    "build": {
+      "dependsOn": ["^build"]
+    },
+    "test": {
+      "dependsOn": ["build"]
+    }
+  }
+}
+```
+
+- `^build` means build dependencies first
+- `build` means build this project first
+
+## 10. Generators
+
+Create new code with generators:
+
+```bash
+# Generate Angular component
+nx g @nx/angular:component my-component --project=shared-angular
+
+# Generate Angular service
+nx g @nx/angular:service my-service --project=shared-angular
+
+# Generate library
+nx g @nx/angular:library my-lib --directory=shared
+
+# Dry run (preview changes)
+nx g @nx/angular:component my-component --dry-run
+```
+
+## 11. CI/CD Integration
+
+```yaml
+# Example GitHub Actions
+- name: Install dependencies
+  run: npm ci
+
+- name: Run affected lint
+  run: npx nx affected --target=lint --base=origin/main
+
+- name: Run affected test
+  run: npx nx affected --target=test --base=origin/main --configuration=ci
+
+- name: Run affected build
+  run: npx nx affected --target=build --base=origin/main --configuration=production
+```
+
+## 12. Best Practices
+
+1. **Keep apps thin** - Business logic in libraries
+2. **Use affected** - Only build/test what changed
+3. **Leverage caching** - Let Nx cache task results
+4. **Consistent naming** - Follow naming conventions
+5. **Define boundaries** - Use tags and constraints
+6. **Path aliases** - Use `@scope/lib` imports