@malamute/ai-rules 1.0.0 → 1.3.0

package/configs/_shared/skills/nx/nx-lib/SKILL.md

@@ -0,0 +1,375 @@
+---
+name: nx-lib
+description: Generate an Nx library for any framework with proper structure and tags
+argument-hint: <framework> <type> <scope>/<name>
+---
+
+# Generate Nx Library
+
+## Syntax
+
+```
+/nx-lib <framework> <type> <scope>/<name>
+```
+
+## Supported Frameworks
+
+| Framework | Generator Package |
+|-----------|-------------------|
+| `angular` | `@nx/angular` |
+| `react` | `@nx/react` |
+| `next` | `@nx/next` |
+| `nest` | `@nx/nest` |
+| `node` | `@nx/node` |
+| `js` | `@nx/js` (pure TypeScript) |
+| `dotnet` | `@nx-dotnet/core` |
+| `python` | `@nxlv/python` |
+
+## Library Types by Framework
+
+### Angular
+| Type | Description | Generator |
+|------|-------------|-----------|
+| `feature` | Smart components, pages, routing | `@nx/angular:lib --standalone` |
+| `ui` | Presentational components | `@nx/angular:lib --standalone` |
+| `data-access` | NgRx store, services | `@nx/angular:lib` + NgRx files |
+| `util` | Pure functions, types | `@nx/js:lib` |
+
+### React / Next.js
+| Type | Description | Generator |
+|------|-------------|-----------|
+| `feature` | Pages, containers | `@nx/react:lib` or `@nx/next:lib` |
+| `ui` | Presentational components | `@nx/react:lib` |
+| `data-access` | Zustand/Redux, API hooks | `@nx/react:lib` |
+| `util` | Pure functions, types | `@nx/js:lib` |
+
+### NestJS
+| Type | Description | Generator |
+|------|-------------|-----------|
+| `feature` | Module with controller | `@nx/nest:lib` + controller |
+| `data-access` | Repository, services | `@nx/nest:lib` |
+| `util` | Pure functions, types | `@nx/js:lib` |
+
+### Node / JS
+| Type | Description | Generator |
+|------|-------------|-----------|
+| `util` | Pure functions, types | `@nx/js:lib` |
+| `data-access` | Services, repositories | `@nx/js:lib` |
+
+### .NET
+| Type | Description | Generator |
+|------|-------------|-----------|
+| `webapi` | ASP.NET Core Web API | `@nx-dotnet/core:app --template webapi` |
+| `classlib` | Class library | `@nx-dotnet/core:lib --template classlib` |
+| `feature` | Feature library (CQRS) | `@nx-dotnet/core:lib` + MediatR handlers |
+| `data-access` | EF Core repositories | `@nx-dotnet/core:lib` + DbContext |
+| `util` | Shared utilities | `@nx-dotnet/core:lib --template classlib` |
+
+### Python
+| Type | Description | Generator |
+|------|-------------|-----------|
+| `app` | FastAPI/Flask app | `@nxlv/python:poetry-project` |
+| `lib` | Python library | `@nxlv/python:poetry-project --projectType=library` |
+| `util` | Utility functions | `@nxlv/python:poetry-project --projectType=library` |
+
+## Examples
+
+```bash
+# Angular feature library
+/nx-lib angular feature users/list
+
+# Angular data-access with NgRx
+/nx-lib angular data-access users
+
+# React UI component library
+/nx-lib react ui shared/button
+
+# NestJS feature module
+/nx-lib nest feature orders
+
+# Pure TypeScript utility
+/nx-lib js util shared/format
+
+# .NET class library
+/nx-lib dotnet classlib shared/domain
+
+# .NET Web API
+/nx-lib dotnet webapi orders
+
+# .NET data-access with EF Core
+/nx-lib dotnet data-access users
+
+# Python FastAPI app
+/nx-lib python app api
+
+# Python library
+/nx-lib python lib shared/utils
+```
+
+## Execution Steps
+
+### Step 1: Parse Arguments
+
+```
+/nx-lib angular data-access users/profile
+         │       │           │
+         │       │           └── scope: users, name: profile
+         │       └── type: data-access
+         └── framework: angular
+```
+
+### Step 2: Run Generator
+
+Based on framework and type:
+
+```bash
+# Angular feature/ui
+nx g @nx/angular:lib <name> \
+  --directory=libs/<scope>/<type>-<name> \
+  --tags="scope:<scope>,type:<type>" \
+  --standalone \
+  --style=scss \
+  --changeDetection=OnPush
+
+# Angular data-access
+nx g @nx/angular:lib <name> \
+  --directory=libs/<scope>/data-access \
+  --tags="scope:<scope>,type:data-access"
+# Then generate NgRx: actions, reducer, effects, selectors
+
+# React/Next feature/ui
+nx g @nx/react:lib <name> \
+  --directory=libs/<scope>/<type>-<name> \
+  --tags="scope:<scope>,type:<type>"
+
+# NestJS feature
+nx g @nx/nest:lib <name> \
+  --directory=libs/<scope>/feature-<name> \
+  --tags="scope:<scope>,type:feature"
+# Then generate controller
+
+# Pure JS/TS util
+nx g @nx/js:lib <name> \
+  --directory=libs/<scope>/util-<name> \
+  --tags="scope:<scope>,type:util" \
+  --bundler=none
+
+# .NET class library
+nx g @nx-dotnet/core:lib <name> \
+  --directory=libs/<scope>/<type>-<name> \
+  --template=classlib \
+  --tags="scope:<scope>,type:<type>,framework:dotnet"
+
+# .NET Web API
+nx g @nx-dotnet/core:app <name> \
+  --directory=apps/<name> \
+  --template=webapi \
+  --tags="scope:<scope>,type:webapi,framework:dotnet"
+
+# Python library
+nx g @nxlv/python:poetry-project <name> \
+  --directory=libs/<scope>/<type>-<name> \
+  --projectType=library \
+  --tags="scope:<scope>,type:<type>,framework:python"
+
+# Python app
+nx g @nxlv/python:poetry-project <name> \
+  --directory=apps/<name> \
+  --projectType=application \
+  --tags="scope:<scope>,type:app,framework:python"
+```
+
+### Step 3: Generate Boilerplate by Type
+
+#### Angular `data-access`
+```
+libs/<scope>/data-access/src/lib/
+├── +state/
+│   ├── <name>.actions.ts
+│   ├── <name>.reducer.ts
+│   ├── <name>.effects.ts
+│   ├── <name>.selectors.ts
+│   └── <name>.state.ts
+├── services/
+│   └── <name>.service.ts
+└── index.ts
+```
+
+#### Angular `feature`
+```
+libs/<scope>/feature-<name>/src/lib/
+├── <name>.component.ts
+├── <name>.component.html
+├── <name>.component.scss
+├── <name>.routes.ts
+└── index.ts
+```
+
+#### Angular `ui`
+```
+libs/<scope>/ui-<name>/src/lib/
+├── <name>.component.ts
+├── <name>.component.html
+├── <name>.component.scss
+└── index.ts
+```
+
+#### React `data-access`
+```
+libs/<scope>/data-access/src/lib/
+├── store/
+│   └── <name>.store.ts      # Zustand store
+├── hooks/
+│   └── use-<name>.ts        # Custom hooks
+├── api/
+│   └── <name>.api.ts        # API calls
+└── index.ts
+```
+
+#### NestJS `feature`
+```
+libs/<scope>/feature-<name>/src/lib/
+├── <name>.module.ts
+├── <name>.controller.ts
+├── <name>.service.ts
+├── dto/
+│   ├── create-<name>.dto.ts
+│   └── update-<name>.dto.ts
+└── index.ts
+```
+
+#### JS/TS `util`
+```
+libs/<scope>/util-<name>/src/lib/
+├── <name>.ts                # Functions
+├── <name>.types.ts          # Types/interfaces
+├── <name>.spec.ts           # Tests
+└── index.ts
+```
+
+#### .NET `webapi`
+```
+apps/<name>/
+├── Controllers/
+│   └── <Name>Controller.cs
+├── Program.cs
+├── appsettings.json
+├── <Name>.Api.csproj
+└── project.json
+```
+
+#### .NET `classlib`
+```
+libs/<scope>/<type>-<name>/
+├── src/
+│   └── <Name>.cs
+├── <Scope>.<Type>.<Name>.csproj
+└── project.json
+```
+
+#### .NET `data-access`
+```
+libs/<scope>/data-access/
+├── src/
+│   ├── DbContext/
+│   │   └── AppDbContext.cs
+│   ├── Repositories/
+│   │   ├── I<Name>Repository.cs
+│   │   └── <Name>Repository.cs
+│   └── Entities/
+│       └── <Name>.cs
+├── <Scope>.DataAccess.csproj
+└── project.json
+```
+
+#### .NET `feature` (CQRS)
+```
+libs/<scope>/feature-<name>/
+├── src/
+│   ├── Commands/
+│   │   ├── Create<Name>/
+│   │   │   ├── Create<Name>Command.cs
+│   │   │   └── Create<Name>Handler.cs
+│   │   └── Update<Name>/
+│   │       ├── Update<Name>Command.cs
+│   │       └── Update<Name>Handler.cs
+│   ├── Queries/
+│   │   └── Get<Name>/
+│   │       ├── Get<Name>Query.cs
+│   │       └── Get<Name>Handler.cs
+│   └── DependencyInjection.cs
+├── <Scope>.Feature.<Name>.csproj
+└── project.json
+```
+
+#### Python `app` (FastAPI)
+```
+apps/<name>/
+├── src/
+│   └── <name>/
+│       ├── __init__.py
+│       ├── main.py
+│       ├── routers/
+│       │   └── <name>_router.py
+│       ├── schemas/
+│       │   └── <name>_schema.py
+│       └── services/
+│           └── <name>_service.py
+├── tests/
+│   └── test_<name>.py
+├── pyproject.toml
+└── project.json
+```
+
+#### Python `lib`
+```
+libs/<scope>/<type>-<name>/
+├── src/
+│   └── <name>/
+│       ├── __init__.py
+│       └── <name>.py
+├── tests/
+│   └── test_<name>.py
+├── pyproject.toml
+└── project.json
+```
+
+### Step 4: Configure project.json
+
+```json
+{
+  "name": "<scope>-<type>-<name>",
+  "tags": ["scope:<scope>", "type:<type>", "framework:<framework>"]
+}
+```
+
+### Step 5: Update Public API (index.ts)
+
+Export all public items appropriately for the type.
+
+### Step 6: Verify
+
+```bash
+nx lint <project-name>
+nx test <project-name>
+```
+
+## Output Summary
+
+```
+✓ Created library: libs/<scope>/<type>-<name>
+
+  Import path: @<org>/<scope>/<type>-<name>
+  Project name: <scope>-<type>-<name>
+  Tags: scope:<scope>, type:<type>, framework:<framework>
+
+  Files created:
+  - libs/<scope>/<type>-<name>/src/index.ts
+  - libs/<scope>/<type>-<name>/src/lib/...
+  - libs/<scope>/<type>-<name>/project.json
+
+  Next steps:
+  - Add business logic
+  - Export public API from index.ts
+  - Run: nx test <scope>-<type>-<name>
+```

package/configs/angular/CLAUDE.md

@@ -4,33 +4,32 @@
 
 ## Stack
 
-- Angular 21+ (latest)
+- Angular 21+ (Zoneless, Signals)
 - Nx monorepo
-- NgRx (store, effects, entity)
-- Vitest
+- NgRx (Entity Adapter, Functional Effects)
+- Vitest, Playwright
 - TypeScript strict mode
 
-## Architecture - Nx Structure
+## Architecture - Nx
 
 ```
-apps/
-  [app-name]/
+apps/[app-name]/
 
 libs/
-  [domain]/                   # Ex: users, products, checkout
-    feature/                  # Smart components, pages, routing (lazy-loaded)
-    data-access/              # Services API + NgRx state
+  [domain]/                   # users, products, checkout
+    feature/                  # Smart components, pages (lazy-loaded)
+    data-access/              # NgRx store, API services
       src/lib/+state/         # Actions, reducers, effects, selectors
     ui/                       # Dumb/presentational components
-    util/                     # Domain-specific helpers
+    util/                     # Domain helpers
 
   shared/
-    ui/                       # Reusable UI components
-    data-access/              # Shared services (auth, http interceptors)
-    util/                     # Pure functions, helpers
+    ui/                       # Design system components
+    data-access/              # Auth, interceptors
+    util/                     # Pure functions
 ```
 
-### Dependency Rules (enforce via Nx tags)
+### Dependency Rules (Nx tags)
 
 | Type | Can import |
 |------|------------|
@@ -39,213 +38,22 @@ libs/
 | `data-access` | `data-access`, `util` only |
 | `util` | `util` only |
 
-## Angular 21 - Core Principles
-
-### Zoneless by Default
-
-- No zone.js - use signals for reactivity
-- Use `ChangeDetectionStrategy.OnPush` on all components
-- Never rely on zone.js for change detection
-
-### Signals Everywhere
-
-```typescript
-// State
-count = signal(0);
-items = signal<Item[]>([]);
-
-// Derived state
-doubleCount = computed(() => this.count() * 2);
-isEmpty = computed(() => this.items().length === 0);
-
-// Effects for side effects
-effect(() => {
-  console.log('Count changed:', this.count());
-});
-```
-
-### Signal Forms (experimental but preferred)
-
-```typescript
-// Use signal forms, NOT reactive forms
-import { SignalForm } from '@angular/forms';
-
-form = signalForm({
-  name: '',
-  email: '',
-});
-
-// Access values
-form.value();        // { name: '', email: '' }
-form.controls.name();  // ''
-form.valid();        // boolean signal
-```
-
-### Standalone Components (Default)
-
-- No NgModules for components
-- `standalone: true` is the default - don't add it
-- Import dependencies directly in component
-- Always use separate template files (`.html`)
-
-```typescript
-@Component({
-  selector: 'app-example',
-  imports: [RouterModule],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: './example.component.html',
-  styleUrl: './example.component.scss',
-})
-export class ExampleComponent {}
-```
-
-### Inject Function
-
-```typescript
-// Preferred
-export class MyComponent {
-  private readonly store = inject(Store);
-  private readonly http = inject(HttpClient);
-}
-
-// Avoid constructor injection
-```
-
-### Signal Inputs/Outputs (not decorators)
-
-```typescript
-// Inputs - use input() function, NOT @Input() decorator
-name = input<string>();              // Optional
-name = input('default');             // With default
-name = input.required<string>();     // Required
-
-// Outputs - use output() function, NOT @Output() decorator
-clicked = output<void>();
-selected = output<Item>();
-
-// Two-way binding - use model() function
-value = model<string>('');           // Creates input + output pair
-value = model.required<string>();    // Required two-way binding
-```
-
-## Component Architecture
-
-### Smart Components (feature/)
-
-- Located in `feature/` libs
-- Inject store, dispatch actions
-- Handle routing logic
-- Pass data to UI components via inputs
-
-```typescript
-// user-list-page.component.ts
-@Component({
-  selector: 'app-user-list-page',
-  imports: [UserListComponent],
-  templateUrl: './user-list-page.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class UserListPageComponent {
-  private readonly store = inject(Store);
-
-  users = this.store.selectSignal(selectAllUsers);
-  loading = this.store.selectSignal(selectUsersLoading);
-
-  onUserSelect(user: User): void {
-    this.store.dispatch(UserActions.selectUser({ user }));
-  }
-}
-```
-
-```html
-<!-- user-list-page.component.html -->
-<app-user-list
-  [users]="users()"
-  [loading]="loading()"
-  (userSelected)="onUserSelect($event)"
-/>
-```
-
-### UI Components (ui/)
-
-- Located in `ui/` libs
-- NO store injection - never!
-- Pure inputs/outputs only
-- Fully presentational
-
-```typescript
-// user-list.component.ts
-@Component({
-  selector: 'app-user-list',
-  templateUrl: './user-list.component.html',
-  styleUrl: './user-list.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class UserListComponent {
-  users = input.required<User[]>();
-  loading = input(false);
-  userSelected = output<User>();
-}
-```
-
-```html
-<!-- user-list.component.html -->
-@for (user of users(); track user.id) {
-  <div class="user-item" (click)="userSelected.emit(user)">
-    {{ user.name }}
-  </div>
-} @empty {
-  <p>No users found</p>
-}
-```
-
-## Build & Commands
+## Commands
 
 ```bash
-# Development
-nx serve [app-name]
-
-# Build
-nx build [app-name]
-nx build [app-name] --configuration=production
-
-# Test
-nx test [lib-name]              # Single lib
-nx run-many -t test             # All tests
-nx affected -t test             # Only affected
-
-# Lint
-nx lint [project-name]
-nx run-many -t lint
-
-# Generate
+nx serve [app]                    # Dev server
+nx build [app] --configuration=production
+nx test [lib]                     # Unit tests
+nx affected -t test               # Test affected
+nx e2e [app]-e2e                  # E2E tests
 nx g @nx/angular:component [name] --project=[lib]
 nx g @nx/angular:library [name] --directory=libs/[domain]
 ```
 
 ## Code Style
 
-- Prefix: configurable per project (default: `app`)
-- File structure: folder-based (`user-list/user-list.component.ts`)
-- Always explicit return types on public methods
-- Use `readonly` for injected services
-- Use `track` in `@for` loops
-
-## RxJS Guidelines
-
-- Prefer signals over observables when possible
-- Use `toSignal()` to convert observables
-- Clean subscriptions with `takeUntilDestroyed()`
-- Avoid nested subscribes - use operators
-
-```typescript
-// Convert observable to signal
-data = toSignal(this.http.get<Data[]>('/api/data'), { initialValue: [] });
-
-// If you must use observables
-private readonly destroyRef = inject(DestroyRef);
-
-this.source$.pipe(
-  takeUntilDestroyed(this.destroyRef)
-).subscribe();
-```
+- Folder-based structure: `user-list/user-list.component.ts`
+- Explicit return types on public methods
+- `readonly` for injected services
+- `track` required in `@for` loops
+- Prefix configurable per project (default: `app`)