@malamute/ai-rules 1.0.0 → 1.2.0

package/configs/angular/.claude/rules/ui/pipes-directives.md

@@ -0,0 +1,335 @@
+---
+paths:
+  - "**/*.pipe.ts"
+  - "**/*.directive.ts"
+  - "**/pipes/**"
+  - "**/directives/**"
+---
+
+# Angular Pipes & Directives
+
+## Custom Pipes
+
+### Pure Pipe (default, memoized)
+
+```typescript
+// pipes/time-ago.pipe.ts
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'timeAgo',
+  })
+export class TimeAgoPipe implements PipeTransform {
+  public transform(value: Date | string | number): string {
+    const date = new Date(value);
+    const now = new Date();
+    const seconds = Math.floor((now.getTime() - date.getTime()) / 1000);
+
+    if (seconds < 60) return 'just now';
+    if (seconds < 3600) return `${Math.floor(seconds / 60)} minutes ago`;
+    if (seconds < 86400) return `${Math.floor(seconds / 3600)} hours ago`;
+    if (seconds < 2592000) return `${Math.floor(seconds / 86400)} days ago`;
+
+    return date.toLocaleDateString();
+  }
+}
+
+// Usage: {{ createdAt | timeAgo }}
+```
+
+### Pipe with Parameters
+
+```typescript
+// pipes/truncate.pipe.ts
+@Pipe({
+  name: 'truncate',
+  })
+export class TruncatePipe implements PipeTransform {
+  public transform(
+    value: string,
+    limit: number = 100,
+    trail: string = '...'
+  ): string {
+    if (!value || value.length <= limit) {
+      return value;
+    }
+    return value.substring(0, limit).trim() + trail;
+  }
+}
+
+// Usage: {{ description | truncate:50:'…' }}
+```
+
+### Filter Pipe
+
+```typescript
+// pipes/filter.pipe.ts
+@Pipe({
+  name: 'filter',
+  })
+export class FilterPipe implements PipeTransform {
+  public transform<T>(
+    items: T[],
+    field: keyof T,
+    value: unknown
+  ): T[] {
+    if (!items || !field || value === undefined) {
+      return items;
+    }
+    return items.filter(item => item[field] === value);
+  }
+}
+
+// Usage: @for (user of users() | filter:'status':'active'; track user.id)
+```
+
+### Safe HTML Pipe
+
+```typescript
+// pipes/safe-html.pipe.ts
+import { Pipe, PipeTransform, inject } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+
+@Pipe({
+  name: 'safeHtml',
+  })
+export class SafeHtmlPipe implements PipeTransform {
+  private readonly sanitizer = inject(DomSanitizer);
+
+  public transform(value: string): SafeHtml {
+    return this.sanitizer.bypassSecurityTrustHtml(value);
+  }
+}
+
+// Usage: <div [innerHTML]="content | safeHtml"></div>
+// ⚠️ Only use with trusted content!
+```
+
+## Custom Directives
+
+### Attribute Directive
+
+```typescript
+// directives/highlight.directive.ts
+import { Directive, ElementRef, HostListener, input, inject } from '@angular/core';
+
+@Directive({
+  selector: '[appHighlight]',
+  })
+export class HighlightDirective {
+  private readonly el = inject(ElementRef);
+
+  public readonly appHighlight = input<string>('#ffff00');
+  public readonly defaultColor = input<string>('transparent');
+
+  @HostListener('mouseenter')
+  public onMouseEnter(): void {
+    this.highlight(this.appHighlight() || '#ffff00');
+  }
+
+  @HostListener('mouseleave')
+  public onMouseLeave(): void {
+    this.highlight(this.defaultColor());
+  }
+
+  private highlight(color: string): void {
+    this.el.nativeElement.style.backgroundColor = color;
+  }
+}
+
+// Usage: <p appHighlight="#e0e0e0">Hover me</p>
+```
+
+### Click Outside Directive
+
+```typescript
+// directives/click-outside.directive.ts
+import { Directive, ElementRef, output, inject } from '@angular/core';
+import { fromEvent } from 'rxjs';
+import { filter } from 'rxjs/operators';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+@Directive({
+  selector: '[appClickOutside]',
+  })
+export class ClickOutsideDirective {
+  private readonly el = inject(ElementRef);
+
+  public readonly appClickOutside = output<void>();
+
+  constructor() {
+    fromEvent<MouseEvent>(document, 'click')
+      .pipe(
+        filter(event => !this.el.nativeElement.contains(event.target)),
+        takeUntilDestroyed(),
+      )
+      .subscribe(() => this.appClickOutside.emit());
+  }
+}
+
+// Usage: <div appClickOutside (appClickOutside)="closeDropdown()">
+```
+
+### Auto Focus Directive
+
+```typescript
+// directives/auto-focus.directive.ts
+import { Directive, ElementRef, AfterViewInit, input, inject } from '@angular/core';
+
+@Directive({
+  selector: '[appAutoFocus]',
+  })
+export class AutoFocusDirective implements AfterViewInit {
+  private readonly el = inject(ElementRef);
+
+  public readonly appAutoFocus = input<boolean>(true);
+
+  public ngAfterViewInit(): void {
+    if (this.appAutoFocus()) {
+      setTimeout(() => this.el.nativeElement.focus(), 0);
+    }
+  }
+}
+
+// Usage: <input appAutoFocus />
+```
+
+### Structural Directive
+
+```typescript
+// directives/permission.directive.ts
+import { Directive, TemplateRef, ViewContainerRef, input, effect, inject } from '@angular/core';
+import { AuthService } from '../services/auth.service';
+
+@Directive({
+  selector: '[appHasPermission]',
+  })
+export class HasPermissionDirective {
+  private readonly templateRef = inject(TemplateRef<unknown>);
+  private readonly viewContainer = inject(ViewContainerRef);
+  private readonly authService = inject(AuthService);
+
+  public readonly appHasPermission = input.required<string | string[]>();
+
+  private hasView = false;
+
+  constructor() {
+    effect(() => {
+      const permissions = this.appHasPermission();
+      const permissionArray = Array.isArray(permissions) ? permissions : [permissions];
+      const hasPermission = this.authService.hasAnyPermission(permissionArray);
+
+      if (hasPermission && !this.hasView) {
+        this.viewContainer.createEmbeddedView(this.templateRef);
+        this.hasView = true;
+      } else if (!hasPermission && this.hasView) {
+        this.viewContainer.clear();
+        this.hasView = false;
+      }
+    });
+  }
+}
+
+// Usage: <button *appHasPermission="'users.create'">Create User</button>
+```
+
+### Debounce Input Directive
+
+```typescript
+// directives/debounce-input.directive.ts
+import { Directive, ElementRef, output, input, inject, OnInit, DestroyRef } from '@angular/core';
+import { fromEvent, debounceTime, distinctUntilChanged, map } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+@Directive({
+  selector: 'input[appDebounce]',
+  })
+export class DebounceInputDirective implements OnInit {
+  private readonly el = inject(ElementRef<HTMLInputElement>);
+  private readonly destroyRef = inject(DestroyRef);
+
+  public readonly appDebounce = input<number>(300);
+  public readonly debounceValue = output<string>();
+
+  public ngOnInit(): void {
+    fromEvent<Event>(this.el.nativeElement, 'input')
+      .pipe(
+        map(event => (event.target as HTMLInputElement).value),
+        debounceTime(this.appDebounce()),
+        distinctUntilChanged(),
+        takeUntilDestroyed(this.destroyRef),
+      )
+      .subscribe(value => this.debounceValue.emit(value));
+  }
+}
+
+// Usage: <input appDebounce [appDebounce]="500" (debounceValue)="onSearch($event)" />
+```
+
+## Composition
+
+```typescript
+// components/user-list.component.ts
+@Component({
+  selector: 'app-user-list',
+    imports: [
+    TimeAgoPipe,
+    TruncatePipe,
+    FilterPipe,
+    HighlightDirective,
+    HasPermissionDirective,
+  ],
+  template: `
+    @for (user of users() | filter:'status':'active'; track user.id) {
+      <div appHighlight="#f0f0f0">
+        <h3>{{ user.name }}</h3>
+        <p>{{ user.bio | truncate:100 }}</p>
+        <span>{{ user.createdAt | timeAgo }}</span>
+
+        <button *appHasPermission="'users.delete'">Delete</button>
+      </div>
+    }
+  `,
+})
+export class UserListComponent {
+  protected readonly users = input.required<User[]>();
+}
+```
+
+## Anti-patterns
+
+```typescript
+// BAD: Impure pipe for filtering (causes performance issues)
+@Pipe({ name: 'filter', pure: false })
+
+// GOOD: Use pure pipe (default) + signal for reactivity
+@Pipe({ name: 'filter' })
+// And update source data via signals
+
+
+// BAD: Direct DOM manipulation
+this.el.nativeElement.innerHTML = '<b>text</b>';
+
+// GOOD: Use Renderer2 or Angular bindings
+@HostBinding('innerHTML') content = '<b>text</b>';
+
+
+// BAD: Adding standalone: true (it's the default since Angular 19)
+@Pipe({ name: 'myPipe', standalone: true })
+
+// GOOD: Omit standalone (defaults to true)
+@Pipe({ name: 'myPipe' })
+
+
+// BAD: Using @Input() in directives
+@Directive({ selector: '[appHighlight]' })
+export class HighlightDirective {
+  @Input() appHighlight: string;  // Use input() instead
+}
+
+// GOOD: Use signal inputs
+@Directive({ selector: '[appHighlight]' })
+export class HighlightDirective {
+  public readonly appHighlight = input<string>();
+}
+```

package/configs/angular/.claude/settings.json

@@ -26,6 +26,7 @@
     ]
   },
   "env": {
+    "NODE_ENV": "development",
     "NX_DAEMON": "true"
   }
 }

package/configs/angular/.claude/skills/ngrx-slice/SKILL.md

@@ -0,0 +1,362 @@
+---
+name: ngrx-slice
+description: Generate a complete NgRx store slice with actions, reducer, effects, selectors, and Entity Adapter
+argument-hint: <domain> [--entity <EntityName>]
+---
+
+# Generate NgRx Store Slice
+
+Generate a complete NgRx store slice following best practices with Entity Adapter.
+
+## Syntax
+
+```
+/ngrx-slice <domain> [--entity <EntityName>]
+```
+
+## Examples
+
+```bash
+/ngrx-slice users
+/ngrx-slice products --entity Product
+/ngrx-slice orders --entity Order
+```
+
+## Generated Structure
+
+```
+libs/<domain>/data-access/src/lib/+state/
+├── <domain>.actions.ts      # Action groups with createActionGroup
+├── <domain>.reducer.ts      # Reducer with Entity Adapter
+├── <domain>.effects.ts      # Functional effects
+├── <domain>.selectors.ts    # Memoized selectors
+├── <domain>.state.ts        # State interface
+└── <domain>.adapter.ts      # Entity Adapter config
+```
+
+## File Templates
+
+### 1. State Interface (`<domain>.state.ts`)
+
+```typescript
+import { EntityState } from '@ngrx/entity';
+
+export interface <Entity> {
+  id: string;
+  // Add entity properties
+}
+
+export interface <Entity>State extends EntityState<<Entity>> {
+  selectedId: string | null;
+  loading: boolean;
+  error: string | null;
+}
+```
+
+### 2. Entity Adapter (`<domain>.adapter.ts`)
+
+```typescript
+import { createEntityAdapter, EntityAdapter } from '@ngrx/entity';
+import { <Entity>, <Entity>State } from './<domain>.state';
+
+export const <entity>Adapter: EntityAdapter<<Entity>> = createEntityAdapter<<Entity>>({
+  selectId: (<entity>) => <entity>.id,
+  sortComparer: (a, b) => a.name.localeCompare(b.name),
+});
+
+export const initial<Entity>State: <Entity>State = <entity>Adapter.getInitialState({
+  selectedId: null,
+  loading: false,
+  error: null,
+});
+```
+
+### 3. Actions (`<domain>.actions.ts`)
+
+```typescript
+import { createActionGroup, emptyProps, props } from '@ngrx/store';
+import { Update } from '@ngrx/entity';
+import { <Entity> } from './<domain>.state';
+
+export const <Entity>Actions = createActionGroup({
+  source: '<Entities>',
+  events: {
+    // Load
+    'Load <Entities>': emptyProps(),
+    'Load <Entities> Success': props<{ <entities>: <Entity>[] }>(),
+    'Load <Entities> Failure': props<{ error: string }>(),
+
+    // Load Single
+    'Load <Entity>': props<{ id: string }>(),
+    'Load <Entity> Success': props<{ <entity>: <Entity> }>(),
+    'Load <Entity> Failure': props<{ error: string }>(),
+
+    // Create
+    'Create <Entity>': props<{ <entity>: Omit<<Entity>, 'id'> }>(),
+    'Create <Entity> Success': props<{ <entity>: <Entity> }>(),
+    'Create <Entity> Failure': props<{ error: string }>(),
+
+    // Update
+    'Update <Entity>': props<{ update: Update<<Entity>> }>(),
+    'Update <Entity> Success': props<{ <entity>: <Entity> }>(),
+    'Update <Entity> Failure': props<{ error: string }>(),
+
+    // Delete
+    'Delete <Entity>': props<{ id: string }>(),
+    'Delete <Entity> Success': props<{ id: string }>(),
+    'Delete <Entity> Failure': props<{ error: string }>(),
+
+    // Selection
+    'Select <Entity>': props<{ id: string }>(),
+    'Clear Selection': emptyProps(),
+  },
+});
+```
+
+### 4. Reducer (`<domain>.reducer.ts`)
+
+```typescript
+import { createReducer, on } from '@ngrx/store';
+import { <Entity>Actions } from './<domain>.actions';
+import { <entity>Adapter, initial<Entity>State } from './<domain>.adapter';
+
+export const <entity>Reducer = createReducer(
+  initial<Entity>State,
+
+  // Load All
+  on(<Entity>Actions.load<Entities>, (state) => ({
+    ...state,
+    loading: true,
+    error: null,
+  })),
+  on(<Entity>Actions.load<Entities>Success, (state, { <entities> }) =>
+    <entity>Adapter.setAll(<entities>, { ...state, loading: false })
+  ),
+  on(<Entity>Actions.load<Entities>Failure, (state, { error }) => ({
+    ...state,
+    loading: false,
+    error,
+  })),
+
+  // Load Single
+  on(<Entity>Actions.load<Entity>Success, (state, { <entity> }) =>
+    <entity>Adapter.upsertOne(<entity>, state)
+  ),
+
+  // Create
+  on(<Entity>Actions.create<Entity>Success, (state, { <entity> }) =>
+    <entity>Adapter.addOne(<entity>, state)
+  ),
+
+  // Update
+  on(<Entity>Actions.update<Entity>Success, (state, { <entity> }) =>
+    <entity>Adapter.updateOne({ id: <entity>.id, changes: <entity> }, state)
+  ),
+
+  // Delete
+  on(<Entity>Actions.delete<Entity>Success, (state, { id }) =>
+    <entity>Adapter.removeOne(id, state)
+  ),
+
+  // Selection
+  on(<Entity>Actions.select<Entity>, (state, { id }) => ({
+    ...state,
+    selectedId: id,
+  })),
+  on(<Entity>Actions.clearSelection, (state) => ({
+    ...state,
+    selectedId: null,
+  })),
+);
+```
+
+### 5. Selectors (`<domain>.selectors.ts`)
+
+```typescript
+import { createFeatureSelector, createSelector } from '@ngrx/store';
+import { <Entity>State } from './<domain>.state';
+import { <entity>Adapter } from './<domain>.adapter';
+
+export const select<Entity>State = createFeatureSelector<<Entity>State>('<entities>');
+
+const { selectAll, selectEntities, selectIds, selectTotal } =
+  <entity>Adapter.getSelectors();
+
+export const selectAll<Entities> = createSelector(select<Entity>State, selectAll);
+
+export const select<Entity>Entities = createSelector(select<Entity>State, selectEntities);
+
+export const select<Entity>Ids = createSelector(select<Entity>State, selectIds);
+
+export const select<Entity>Total = createSelector(select<Entity>State, selectTotal);
+
+export const select<Entities>Loading = createSelector(
+  select<Entity>State,
+  (state) => state.loading
+);
+
+export const select<Entities>Error = createSelector(
+  select<Entity>State,
+  (state) => state.error
+);
+
+export const selectSelected<Entity>Id = createSelector(
+  select<Entity>State,
+  (state) => state.selectedId
+);
+
+export const selectSelected<Entity> = createSelector(
+  select<Entity>Entities,
+  selectSelected<Entity>Id,
+  (entities, selectedId) => (selectedId ? entities[selectedId] : null)
+);
+```
+
+### 6. Effects (`<domain>.effects.ts`)
+
+```typescript
+import { inject } from '@angular/core';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { catchError, exhaustMap, map, of } from 'rxjs';
+import { <Entity>Actions } from './<domain>.actions';
+import { <Entity>Service } from '../services/<domain>.service';
+
+export const load<Entities>$ = createEffect(
+  (
+    actions$ = inject(Actions),
+    <entity>Service = inject(<Entity>Service)
+  ) =>
+    actions$.pipe(
+      ofType(<Entity>Actions.load<Entities>),
+      exhaustMap(() =>
+        <entity>Service.getAll().pipe(
+          map((<entities>) => <Entity>Actions.load<Entities>Success({ <entities> })),
+          catchError((error) =>
+            of(<Entity>Actions.load<Entities>Failure({ error: error.message }))
+          )
+        )
+      )
+    ),
+  { functional: true }
+);
+
+export const load<Entity>$ = createEffect(
+  (
+    actions$ = inject(Actions),
+    <entity>Service = inject(<Entity>Service)
+  ) =>
+    actions$.pipe(
+      ofType(<Entity>Actions.load<Entity>),
+      exhaustMap(({ id }) =>
+        <entity>Service.getById(id).pipe(
+          map((<entity>) => <Entity>Actions.load<Entity>Success({ <entity> })),
+          catchError((error) =>
+            of(<Entity>Actions.load<Entity>Failure({ error: error.message }))
+          )
+        )
+      )
+    ),
+  { functional: true }
+);
+
+export const create<Entity>$ = createEffect(
+  (
+    actions$ = inject(Actions),
+    <entity>Service = inject(<Entity>Service)
+  ) =>
+    actions$.pipe(
+      ofType(<Entity>Actions.create<Entity>),
+      exhaustMap(({ <entity> }) =>
+        <entity>Service.create(<entity>).pipe(
+          map((<entity>) => <Entity>Actions.create<Entity>Success({ <entity> })),
+          catchError((error) =>
+            of(<Entity>Actions.create<Entity>Failure({ error: error.message }))
+          )
+        )
+      )
+    ),
+  { functional: true }
+);
+
+export const update<Entity>$ = createEffect(
+  (
+    actions$ = inject(Actions),
+    <entity>Service = inject(<Entity>Service)
+  ) =>
+    actions$.pipe(
+      ofType(<Entity>Actions.update<Entity>),
+      exhaustMap(({ update }) =>
+        <entity>Service.update(update.id as string, update.changes).pipe(
+          map((<entity>) => <Entity>Actions.update<Entity>Success({ <entity> })),
+          catchError((error) =>
+            of(<Entity>Actions.update<Entity>Failure({ error: error.message }))
+          )
+        )
+      )
+    ),
+  { functional: true }
+);
+
+export const delete<Entity>$ = createEffect(
+  (
+    actions$ = inject(Actions),
+    <entity>Service = inject(<Entity>Service)
+  ) =>
+    actions$.pipe(
+      ofType(<Entity>Actions.delete<Entity>),
+      exhaustMap(({ id }) =>
+        <entity>Service.delete(id).pipe(
+          map(() => <Entity>Actions.delete<Entity>Success({ id })),
+          catchError((error) =>
+            of(<Entity>Actions.delete<Entity>Failure({ error: error.message }))
+          )
+        )
+      )
+    ),
+  { functional: true }
+);
+```
+
+## Execution Steps
+
+1. **Parse Arguments**
+   - Extract domain name (e.g., "users")
+   - Extract entity name (e.g., "User") or derive from domain
+
+2. **Create Files**
+   - Generate all 6 files with proper naming
+   - Replace placeholders with actual names
+
+3. **Update Public API**
+   - Export all from `index.ts`
+
+4. **Provide Registration**
+   - Show how to register in `app.config.ts`
+
+## Output
+
+```typescript
+// app.config.ts
+import { provideState } from '@ngrx/store';
+import { provideEffects } from '@ngrx/effects';
+import { <entity>Reducer } from '@app/<domain>/data-access';
+import * as <entity>Effects from '@app/<domain>/data-access';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideStore(),
+    provideState('<entities>', <entity>Reducer),
+    provideEffects(<entity>Effects),
+  ],
+};
+```
+
+## Placeholders
+
+| Placeholder | Example (users) |
+|-------------|-----------------|
+| `<domain>` | users |
+| `<entity>` | user |
+| `<Entity>` | User |
+| `<entities>` | users |
+| `<Entities>` | Users |