@rubix0270/arboris 1.0.1 → 1.0.3

package/prisma/skills/angular-developer/references/components.md

@@ -1,117 +0,0 @@
-# Components
-
-Angular components are the fundamental building blocks of an application. Each component consists of a TypeScript class with behaviors, an HTML template, and a CSS selector.
-
-## Component Definition
-
-Use the `@Component` decorator to define a component's metadata.
-
-```ts
-@Component({
-  selector: 'app-profile',
-  template: `
-    <img src="profile.jpg" alt="Profile photo" />
-    <button (click)="save()">Save</button>
-  `,
-  styles: `
-    img {
-      border-radius: 50%;
-    }
-  `,
-})
-export class Profile {
-  save() {
-    /* ... */
-  }
-}
-```
-
-## Metadata Options
-
-- `selector`: The CSS selector that identifies this component in templates.
-- `template`: Inline HTML template (preferred for small templates).
-- `templateUrl`: Path to an external HTML file.
-- `styles`: Inline CSS styles.
-- `styleUrl` / `styleUrls`: Path(s) to external CSS file(s).
-- `imports`: Lists the components, directives, or pipes used in this component's template.
-
-## Using Components
-
-To use a component, add it to the `imports` array of the consuming component and use its selector in the template.
-
-```ts
-@Component({
-  selector: 'app-root',
-  imports: [Profile],
-  template: `<app-profile />`,
-})
-export class App {}
-```
-
-## Template Control Flow
-
-Angular uses built-in blocks for conditional rendering and loops.
-
-### Conditional Rendering (`@if`)
-
-Use `@if` to conditionally show content. You can include `@else if` and `@else` blocks.
-
-```html
-@if (user.isAdmin) {
-<admin-dashboard />
-} @else if (user.isModerator) {
-<mod-dashboard />
-} @else {
-<standard-dashboard />
-}
-```
-
-**Result aliasing**: Save the result of the expression for reuse.
-
-```html
-@if (user.settings(); as settings) {
-<p>Theme: {{ settings.theme }}</p>
-}
-```
-
-### Loops (`@for`)
-
-The `@for` block iterates over collections. The `track` expression is **required** for performance and DOM reuse.
-
-```html
-<ul>
-  @for (item of items(); track item.id; let i = $index, total = $count) {
-  <li>{{ i + 1 }}/{{ total }}: {{ item.name }}</li>
-  } @empty {
-  <li>No items to display.</li>
-  }
-</ul>
-```
-
-**Implicit Variables**: `$index`, `$count`, `$first`, `$last`, `$even`, `$odd`.
-
-### Switching Content (`@switch`)
-
-The `@switch` block renders content based on a value. It uses strict equality (`===`) and has **no fallthrough**.
-
-```html
-@switch (status()) { @case ('loading') { <app-spinner /> } @case ('error') { <app-error-msg /> }
-@case ('success') { <app-data-grid /> } @default {
-<p>Unknown status</p>
-} }
-```
-
-**Exhaustive Type Checking**: Use `@default never;` to ensure all cases of a union type are handled.
-
-```html
-@switch (state) { @case ('on') { ... } @case ('off') { ... } @default never; // Errors if a new
-state like 'standby' is added }
-```
-
-## Core Concepts
-
-- **Host Element**: The DOM element that matches the component's selector.
-- **View**: The DOM rendered by the component's template inside the host element.
-- **Standalone**: By default, components are standalone (since Angular 19, `standalone: true` is default). For older versions, `standalone: true` must be explicit or the component must be part of an `NgModule`.
-- **Component Tree**: Angular applications are structured as a tree of components, where each component can host child components.
-- **Component Naming**: Do not add suffixes the `Component` suffix for Component classes (e.g., AppComponent) unless the project has been configured to use that naming configuration.

package/prisma/skills/angular-developer/references/creating-services.md

@@ -1,97 +0,0 @@
-# Creating and Using Services
-
-Services in Angular are reusable pieces of code that handle data fetching, business logic, or state management that multiple components or other services need to access.
-
-## Creating a Service
-
-You can generate a service using the Angular CLI:
-
-```bash
-ng generate service my-data
-```
-
-Or you can manually create a TypeScript class and decorate it with `@Injectable()`.
-
-```ts
-import {Injectable} from '@angular/core';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class BasicDataStore {
-  private data: string[] = [];
-
-  addData(item: string): void {
-    this.data.push(item);
-  }
-
-  getData(): string[] {
-    return [...this.data];
-  }
-}
-```
-
-### The `providedIn: 'root'` Option
-
-Using `providedIn: 'root'` is the recommended approach for most services. It tells Angular to:
-
-- **Create a single instance (singleton)** for the entire application.
-- **Make it available everywhere** automatically, without needing to list it in any `providers` array.
-- **Enable tree-shaking**, meaning the service is only included in the final JavaScript bundle if it is actually injected somewhere.
-
-## Injecting a Service
-
-Once a service is created, you can inject it into components, directives, or other services using the `inject()` function.
-
-### Injecting into a Component
-
-```ts
-import {Component, inject} from '@angular/core';
-import {BasicDataStore} from './basic-data-store.service';
-
-@Component({
-  selector: 'app-example',
-  template: `
-    <div>
-      <p>Data items: {{ dataStore.getData().length }}</p>
-      <button (click)="dataStore.addData('New Item')">Add Item</button>
-    </div>
-  `,
-})
-export class Example {
-  // Inject the service as a class field
-  dataStore = inject(BasicDataStore);
-}
-```
-
-### Injecting into Another Service
-
-Services can inject other services in the exact same way.
-
-```ts
-import {Injectable, inject} from '@angular/core';
-import {AdvancedDataStore} from './advanced-data-store.service';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class BasicDataStore {
-  // Injecting another service
-  private advancedDataStore = inject(AdvancedDataStore);
-
-  private data: string[] = [];
-
-  getData(): string[] {
-    // Combine data from this service and the injected service
-    return [...this.data, ...this.advancedDataStore.getData()];
-  }
-}
-```
-
-## Advanced Service Patterns
-
-While `providedIn: 'root'` covers most scenarios, you may sometimes need:
-
-- **Component-specific instances**: If a component needs its own isolated instance of a service, provide it directly in the component's `@Component({ providers: [MyService] })` array.
-- **Factory providers**: For dynamic creation.
-- **Value providers**: For injecting configuration objects.

package/prisma/skills/angular-developer/references/data-resolvers.md

@@ -1,69 +0,0 @@
-# Data Resolvers
-
-Data resolvers fetch data before a route activates, ensuring components have the necessary data upon rendering.
-
-## Creating a Resolver
-
-Implement the `ResolveFn` type.
-
-```ts
-export const userResolver: ResolveFn<User> = (route, state) => {
-  const userService = inject(UserService);
-  const id = route.paramMap.get('id')!;
-  return userService.getUser(id);
-};
-```
-
-## Configuring the Route
-
-Add the resolver under the `resolve` key.
-
-```ts
-{
-  path: 'user/:id',
-  component: UserProfile,
-  resolve: {
-    user: userResolver
-  }
-}
-```
-
-## Accessing Resolved Data
-
-### 1. Via `ActivatedRoute` (Traditional)
-
-```ts
-private route = inject(ActivatedRoute);
-data = toSignal(this.route.data);
-user = computed(() => this.data().user);
-```
-
-### 2. Via Component Inputs (Modern)
-
-Enable `withComponentInputBinding()` in `provideRouter` to pass resolved data directly to `@Input` or `input()`.
-
-```ts
-// app.config.ts
-provideRouter(routes, withComponentInputBinding());
-
-// component.ts
-user = input.required<User>();
-```
-
-## Error Handling
-
-Navigation is blocked if a resolver fails.
-
-- Use `withNavigationErrorHandler` for global handling.
-- Use `catchError` within the resolver to return a `RedirectCommand` or fallback data.
-
-```ts
-return userService
-  .get(id)
-  .pipe(catchError(() => of(new RedirectCommand(router.parseUrl('/error')))));
-```
-
-## Best Practices
-
-- **Keep it lightweight**: Fetch only critical data.
-- **Provide feedback**: Listen to router events to show a global loading bar during navigation, as the UI stays on the old page until the resolver finishes.

package/prisma/skills/angular-developer/references/define-routes.md

@@ -1,67 +0,0 @@
-# Define Routes
-
-Routes are objects that define which component should render for a specific URL path.
-
-## Basic Configuration
-
-Define routes in a `Routes` array and provide them using `provideRouter` in your `appConfig`.
-
-```ts
-// app.routes.ts
-export const routes: Routes = [
-  {path: '', component: HomePage},
-  {path: 'admin', component: AdminPage},
-];
-
-// app.config.ts
-export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(routes)],
-};
-```
-
-## URL Paths
-
-- **Static**: Matches an exact string (e.g., `'admin'`).
-- **Route Parameters**: Dynamic segments prefixed with a colon (e.g., `'user/:id'`).
-- **Wildcard**: Matches any URL using `**`. Useful for "Not Found" pages. **Always place at the end of the array.**
-
-## Matching Strategy
-
-Angular uses a **first-match wins** strategy. Specific routes must come before less specific ones.
-
-## Redirects
-
-Use `redirectTo` to point one path to another.
-
-```ts
-{ path: 'articles', redirectTo: '/blog' },
-{ path: 'blog', component: Blog },
-```
-
-## Page Titles
-
-Associate titles with routes for accessibility. Titles can be static or dynamic (via `ResolveFn` or a custom `TitleStrategy`).
-
-```ts
-{ path: 'home', component: Home, title: 'Home Page' }
-```
-
-## Route Data and Providers
-
-- **Static Data**: Attach metadata using the `data` property.
-- **Route Providers**: Scope dependencies to a specific route and its children using the `providers` array.
-
-## Nested (Child) Routes
-
-Define sub-views using the `children` property. Parent components must include a `<router-outlet />`.
-
-```ts
-{
-  path: 'product/:id',
-  component: Product,
-  children: [
-    { path: 'info', component: ProductInfo },
-    { path: 'reviews', component: ProductReviews },
-  ],
-}
-```

package/prisma/skills/angular-developer/references/defining-providers.md

@@ -1,72 +0,0 @@
-# Defining Dependency Providers
-
-Angular offers automatic and manual ways to provide dependencies to its Dependency Injection (DI) system.
-
-## Automatic Provision
-
-The most common way to provide a service is using `providedIn: 'root'` on an `@Injectable()`.
-
-### InjectionToken
-
-Use `InjectionToken` for non-class dependencies (configuration objects, functions, primitives). An `InjectionToken` can also be automatically provided.
-
-```ts
-import {InjectionToken} from '@angular/core';
-
-export interface AppConfig {
-  apiUrl: string;
-}
-
-export const APP_CONFIG = new InjectionToken<AppConfig>('app.config', {
-  providedIn: 'root',
-  factory: () => ({apiUrl: 'https://api.example.com'}),
-});
-```
-
-## Manual Provision
-
-You use the `providers` array when a service lacks `providedIn`, when you want a new instance for a specific component, or when configuring runtime values.
-
-```ts
-@Component({
-  providers: [
-    // Shorthand for { provide: LocalService, useClass: LocalService }
-    LocalService,
-
-    // useClass: Swap implementations
-    {provide: Logger, useClass: BetterLogger},
-
-    // useValue: Provide static values
-    {provide: API_URL_TOKEN, useValue: 'https://api.example.com'},
-
-    // useFactory: Generate value dynamically
-    {
-      provide: ApiClient,
-      useFactory: (http = inject(HttpClient)) => new ApiClient(http),
-    },
-
-    // useExisting: Create an alias
-    {provide: OldLogger, useExisting: NewLogger},
-
-    // multi: Provide multiple values for the same token as an array
-    {provide: INTERCEPTOR_TOKEN, useClass: AuthInterceptor, multi: true},
-  ],
-})
-export class Example {}
-```
-
-## Scopes of Providers
-
-- **Application Bootstrap**: Global singletons. Use for HTTP clients, logging, or app-wide config.
-- **Component/Directive**: Isolated instances. Use for component-specific state or forms. Services are destroyed when the component is destroyed.
-- **Route**: Feature-specific services loaded only with specific routes.
-
-## Library Pattern: `provide*` functions
-
-Library authors should export functions that return provider arrays to encapsulate configuration:
-
-```ts
-export function provideAnalytics(config: AnalyticsConfig): Provider[] {
-  return [{provide: ANALYTICS_CONFIG, useValue: config}, AnalyticsService];
-}
-```

package/prisma/skills/angular-developer/references/di-fundamentals.md

@@ -1,120 +0,0 @@
-# Dependency Injection (DI) Fundamentals
-
-Dependency Injection (DI) is a design pattern used to organize and share code across an application by allowing you to "inject" features into different parts. This improves code maintainability, scalability, and testability.
-
-## How DI Works in Angular
-
-There are two primary ways code interacts with Angular's DI system:
-
-1. **Providing**: Making values (objects, functions, primitives) available to the DI system.
-2. **Injecting**: Asking the DI system for those values.
-
-Angular components, directives, and services automatically participate in DI.
-
-## Services
-
-A **service** is the most common way to share data and functionality across an application. It is a TypeScript class decorated with `@Injectable()`.
-
-### Creating a Service
-
-Use the `providedIn: 'root'` option in the `@Injectable` decorator to make the service a singleton available throughout the entire application. This is the recommended approach for most services.
-
-```ts
-import {Injectable} from '@angular/core';
-
-@Injectable({
-  providedIn: 'root', // Makes this a singleton available everywhere
-})
-export class AnalyticsLogger {
-  trackEvent(category: string, value: string) {
-    console.log('Analytics event logged:', {category, value});
-  }
-}
-```
-
-Common uses for services include:
-
-- Data clients (API calls)
-- State management
-- Authentication and authorization
-- Logging and error handling
-- Utility functions
-
-## Injecting Dependencies
-
-Use Angular's `inject()` function to request dependencies.
-
-### The `inject()` Function
-
-You can use the `inject()` function to get an instance of a service (or any other provided token).
-
-```ts
-import {Component, inject} from '@angular/core';
-import {Router} from '@angular/router';
-import {AnalyticsLogger} from './analytics-logger.service';
-
-@Component({
-  selector: 'app-navbar',
-  template: `<a href="#" (click)="navigateToDetail($event)">Detail Page</a>`,
-})
-export class Navbar {
-  // Injecting dependencies using class field initializers
-  private router = inject(Router);
-  private analytics = inject(AnalyticsLogger);
-
-  navigateToDetail(event: Event) {
-    event.preventDefault();
-    this.analytics.trackEvent('navigation', '/details');
-    this.router.navigate(['/details']);
-  }
-}
-```
-
-### Where can `inject()` be used? (Injection Context)
-
-You can call `inject()` in an **injection context**. The most common injection contexts are during the construction of a component, directive, or service.
-
-Valid places to call `inject()`:
-
-1. **Class field initializers** (Recommended)
-2. **Constructor body**
-3. **Route guards and resolvers** (which are executed in an injection context)
-4. **Factory functions** used in providers
-
-```typescript
-import {Component, Directive, Injectable, inject, ElementRef} from '@angular/core';
-import {HttpClient} from '@angular/common/http';
-
-// 1. In a Component (Field Initializer & Constructor)
-@Component({
-  /*...*/
-})
-export class Example {
-  private service1 = inject(MyService); // Valid field initializer
-
-  private service2: MyService;
-  constructor() {
-    this.service2 = inject(MyService); // Valid constructor body
-  }
-}
-
-// 2. In a Directive
-@Directive({
-  /*...*/
-})
-export class MyDirective {
-  private element = inject(ElementRef); // Valid field initializer
-}
-
-// 3. In a Service
-@Injectable({providedIn: 'root'})
-export class MyService {
-  private http = inject(HttpClient); // Valid field initializer
-}
-
-// 4. In a Route Guard (Functional)
-export const authGuard = () => {
-  const auth = inject(AuthService); // Valid route guard
-  return auth.isAuthenticated();
-};
-```

package/prisma/skills/angular-developer/references/e2e-testing.md

@@ -1,56 +0,0 @@
-# End-to-End (E2E) Testing
-
-Use E2E tests to cover critical user journeys in a real browser. Prefer the framework already configured in the Angular workspace, such as Cypress or Playwright.
-
-## Running E2E Tests
-
-Check `package.json` and `angular.json` for the project-specific command. Common patterns include:
-
-```shell
-npm run e2e
-pnpm e2e
-ng e2e
-```
-
-When the app must be built or served first, use the existing project scripts instead of inventing a parallel test entrypoint.
-
-## Test Structure
-
-- Keep E2E specs close to the configured test framework, such as `cypress/e2e/` or `e2e/`.
-- Put reusable login/setup helpers in the framework support directory.
-- Keep fixtures explicit and small enough that each test can explain the user state it depends on.
-
-### Cypress Example
-
-```typescript
-describe('Login flow', () => {
-  it('redirects to dashboard on valid credentials', () => {
-    cy.visit('/login');
-    cy.get('[data-cy=email]').type('user@example.com');
-    cy.get('[data-cy=password]').type('password123');
-    cy.get('[data-cy=submit]').click();
-    cy.url().should('include', '/dashboard');
-  });
-});
-```
-
-### Playwright Example
-
-```typescript
-import {expect, test} from '@playwright/test';
-
-test('redirects to dashboard on valid credentials', async ({page}) => {
-  await page.goto('/login');
-  await page.getByLabel('Email').fill('user@example.com');
-  await page.getByLabel('Password').fill('password123');
-  await page.getByRole('button', {name: 'Sign in'}).click();
-  await expect(page).toHaveURL(/dashboard/);
-});
-```
-
-## Best Practices
-
-- Prefer accessible locators (`getByRole`, `getByLabel`) or stable `data-*` attributes.
-- Avoid selectors that depend on CSS classes, DOM depth, or incidental text.
-- Wait for specific UI states, routes, or network responses instead of arbitrary sleeps.
-- Keep smoke tests short and reserve full workflow coverage for the highest-value paths.

package/prisma/skills/angular-developer/references/effects.md

@@ -1,83 +0,0 @@
-# Side Effects with `effect` and `afterRenderEffect`
-
-In Angular, an **effect** is an operation that runs whenever one or more signal values it tracks change.
-
-## When to use `effect`
-
-Effects are intended for syncing signal state to imperative, non-signal APIs.
-
-**Valid Use Cases:**
-
-- Logging analytics.
-- Syncing state to `localStorage` or `sessionStorage`.
-- Performing custom rendering to a `<canvas>` or 3rd-party charting library.
-
-**CRITICAL RULE: DO NOT use effects to propagate state.**
-If you find yourself using `.set()` or `.update()` on a signal _inside_ an effect to keep two signals in sync, you are making a mistake. This causes `ExpressionChangedAfterItHasBeenChecked` errors and infinite loops. **Always use `computed()` or `linkedSignal()` for state derivation.**
-
-## Basic Usage
-
-Effects execute asynchronously during the change detection process. They always run at least once.
-
-```ts
-import { Component, signal, effect } from '@angular/core';
-
-@Component({...})
-export class Example {
-  count = signal(0);
-
-  constructor() {
-    // Effect must be created in an injection context (e.g., a constructor)
-    effect((onCleanup) => {
-      console.log(`Count changed to ${this.count()}`);
-
-      const timer = setTimeout(() => console.log('Timer finished'), 1000);
-
-      // Cleanup function runs before the next execution, or when destroyed
-      onCleanup(() => clearTimeout(timer));
-    });
-  }
-}
-```
-
-## DOM Manipulation with `afterRenderEffect`
-
-Standard `effect` runs _before_ Angular updates the DOM. If you need to manually inspect or modify the DOM based on a signal change (e.g., integrating a 3rd party UI library), use `afterRenderEffect`.
-
-`afterRenderEffect` runs after Angular has finished rendering the DOM.
-
-### Render Phases
-
-To prevent reflows (forced layout thrashing), `afterRenderEffect` forces you to divide your DOM reads and writes into specific phases.
-
-```ts
-import { Component, afterRenderEffect, viewChild, ElementRef } from '@angular/core';
-
-@Component({...})
-export class Chart {
-  canvas = viewChild.required<ElementRef>('canvas');
-
-  constructor() {
-    afterRenderEffect({
-      // 1. Read from the DOM
-      earlyRead: () => {
-        return this.canvas().nativeElement.getBoundingClientRect().width;
-      },
-      // 2. Write to the DOM (receives the result of the previous phase)
-      write: (width) => {
-        // NEVER read from the DOM in the write phase.
-        setupChart(this.canvas().nativeElement, width);
-      }
-    });
-  }
-}
-```
-
-**Available Phases (executed in this order):**
-
-1. `earlyRead`
-2. `write` (Never read here)
-3. `mixedReadWrite` (Avoid if possible)
-4. `read` (Never write here)
-
-_Note: `afterRenderEffect` only runs on the client, never during Server-Side Rendering (SSR)._