codeply-cli 0.3.0 → 0.4.0

package/skills/angular-developer/references/inputs.md

@@ -1,101 +1,101 @@
-# Inputs
-
-Inputs allow data to flow from a parent component to a child component. Angular recommends using the signal-based `input` API for modern applications.
-
-## Signal-based Inputs
-
-Declare inputs using the `input()` function. This returns an `InputSignal`.
-
-```ts
-import {Component, input, computed} from '@angular/core';
-
-@Component({
-  selector: 'app-user',
-  template: `<p>User: {{ name() }} ({{ age() }})</p>`,
-})
-export class User {
-  // Optional input with default value
-  name = input('Guest');
-
-  // Required input
-  age = input.required<number>();
-
-  // Inputs are reactive signals
-  label = computed(() => `Name: ${this.name()}`);
-}
-```
-
-### Usage in Template
-
-```html
-<app-user [name]="userName" [age]="25" />
-```
-
-## Configuration Options
-
-The `input` function accepts a config object:
-
-- **Alias**: Change the property name used in templates.
-- **Transform**: Modify the value before it reaches the component.
-
-```ts
-import { input, booleanAttribute } from '@angular/core';
-
-@Component({...})
-export class CustomButton {
-  // Alias example
-  label = input('', { alias: 'btnLabel' });
-
-  // Transform example using built-in helper
-  disabled = input(false, { transform: booleanAttribute });
-}
-```
-
-## Model Inputs (Two-Way Binding)
-
-Use `model()` to create an input that supports two-way data binding.
-
-```ts
-@Component({
-  selector: 'custom-counter',
-  template: `<button (click)="increment()">+</button>`,
-})
-export class CustomCounter {
-  value = model(0);
-
-  increment() {
-    this.value.update((v) => v + 1);
-  }
-}
-```
-
-### Usage
-
-```html
-<!-- Two-way binding with a signal -->
-<custom-counter [(value)]="mySignal" />
-
-<!-- Two-way binding with a plain property -->
-<custom-counter [(value)]="myProperty" />
-```
-
-## Decorator-based Inputs (@Input)
-
-The legacy API remains supported but is not recommended for new code.
-
-```ts
-import { Component, Input } from '@angular/core';
-
-@Component({...})
-export class Legacy {
-  @Input({ required: true }) value = 0;
-  @Input({ transform: trimString }) label = '';
-}
-```
-
-## Best Practices
-
-- **Prefer Signals**: Use `input()` instead of `@Input()` for better reactivity and type safety.
-- **Required Inputs**: Use `input.required()` for mandatory data to get build-time errors.
-- **Pure Transforms**: Ensure input transform functions are pure and statically analyzable.
-- **Avoid Collisions**: Do not use input names that collide with standard DOM properties (e.g., `id`, `title`).
+# Inputs
+
+Inputs allow data to flow from a parent component to a child component. Angular recommends using the signal-based `input` API for modern applications.
+
+## Signal-based Inputs
+
+Declare inputs using the `input()` function. This returns an `InputSignal`.
+
+```ts
+import {Component, input, computed} from '@angular/core';
+
+@Component({
+  selector: 'app-user',
+  template: `<p>User: {{ name() }} ({{ age() }})</p>`,
+})
+export class User {
+  // Optional input with default value
+  name = input('Guest');
+
+  // Required input
+  age = input.required<number>();
+
+  // Inputs are reactive signals
+  label = computed(() => `Name: ${this.name()}`);
+}
+```
+
+### Usage in Template
+
+```html
+<app-user [name]="userName" [age]="25" />
+```
+
+## Configuration Options
+
+The `input` function accepts a config object:
+
+- **Alias**: Change the property name used in templates.
+- **Transform**: Modify the value before it reaches the component.
+
+```ts
+import { input, booleanAttribute } from '@angular/core';
+
+@Component({...})
+export class CustomButton {
+  // Alias example
+  label = input('', { alias: 'btnLabel' });
+
+  // Transform example using built-in helper
+  disabled = input(false, { transform: booleanAttribute });
+}
+```
+
+## Model Inputs (Two-Way Binding)
+
+Use `model()` to create an input that supports two-way data binding.
+
+```ts
+@Component({
+  selector: 'custom-counter',
+  template: `<button (click)="increment()">+</button>`,
+})
+export class CustomCounter {
+  value = model(0);
+
+  increment() {
+    this.value.update((v) => v + 1);
+  }
+}
+```
+
+### Usage
+
+```html
+<!-- Two-way binding with a signal -->
+<custom-counter [(value)]="mySignal" />
+
+<!-- Two-way binding with a plain property -->
+<custom-counter [(value)]="myProperty" />
+```
+
+## Decorator-based Inputs (@Input)
+
+The legacy API remains supported but is not recommended for new code.
+
+```ts
+import { Component, Input } from '@angular/core';
+
+@Component({...})
+export class Legacy {
+  @Input({ required: true }) value = 0;
+  @Input({ transform: trimString }) label = '';
+}
+```
+
+## Best Practices
+
+- **Prefer Signals**: Use `input()` instead of `@Input()` for better reactivity and type safety.
+- **Required Inputs**: Use `input.required()` for mandatory data to get build-time errors.
+- **Pure Transforms**: Ensure input transform functions are pure and statically analyzable.
+- **Avoid Collisions**: Do not use input names that collide with standard DOM properties (e.g., `id`, `title`).

package/skills/angular-developer/references/linked-signal.md

@@ -1,59 +1,59 @@
-# Dependent State with `linkedSignal`
-
-The `linkedSignal` function lets you create writable state that is intrinsically linked to some other state. It is perfect for state that needs a default value derived from an input or another signal, but can still be independently modified by the user.
-
-If the source state changes, the `linkedSignal` resets to a new computed value.
-
-## Basic Usage
-
-When you only need to recompute based on a source, pass a computation function. `linkedSignal` works like `computed`, but the resulting signal is writable (you can call `.set()` or `.update()` on it).
-
-```ts
-import { Component, signal, linkedSignal } from '@angular/core';
-
-@Component({...})
-export class ShippingMethodPicker {
-  shippingOptions = signal(['Ground', 'Air', 'Sea']);
-
-  // Defaults to the first option.
-  // If shippingOptions changes, selectedOption resets to the new first option.
-  selectedOption = linkedSignal(() => this.shippingOptions()[0]);
-
-  changeShipping(index: number) {
-    // We can still manually update this signal!
-    this.selectedOption.set(this.shippingOptions()[index]);
-  }
-}
-```
-
-## Advanced Usage: Accounting for Previous State
-
-Sometimes, when the source state changes, you want to preserve the user's manual selection if it is still valid. To do this, use the object syntax providing `source` and `computation`.
-
-The `computation` function receives the new value of the source, and a `previous` object containing the previous source value and the previous `linkedSignal` value.
-
-```ts
-interface ShippingMethod { id: number; name: string; }
-
-@Component({...})
-export class ShippingMethodPicker {
-  shippingOptions = signal<ShippingMethod[]>([
-    {id: 0, name: 'Ground'}, {id: 1, name: 'Air'}, {id: 2, name: 'Sea'}
-  ]);
-
-  selectedOption = linkedSignal<ShippingMethod[], ShippingMethod>({
-    source: this.shippingOptions,
-    computation: (newOptions, previous) => {
-      // If the newly loaded options still contain the user's previously
-      // selected option, keep it selected. Otherwise, reset to the first option.
-      return newOptions.find(opt => opt.id === previous?.value.id) ?? newOptions[0];
-    }
-  });
-}
-```
-
-### When to use `linkedSignal` vs `computed` vs `effect`
-
-- Use `computed`: When state is **strictly** derived from other state and should never be manually updated.
-- Use `linkedSignal`: When state is derived from other state, but the user **must** be able to override or manually update it.
-- **Never** use `effect` to sync one piece of state to another. That is an anti-pattern. Use `computed` or `linkedSignal` instead.
+# Dependent State with `linkedSignal`
+
+The `linkedSignal` function lets you create writable state that is intrinsically linked to some other state. It is perfect for state that needs a default value derived from an input or another signal, but can still be independently modified by the user.
+
+If the source state changes, the `linkedSignal` resets to a new computed value.
+
+## Basic Usage
+
+When you only need to recompute based on a source, pass a computation function. `linkedSignal` works like `computed`, but the resulting signal is writable (you can call `.set()` or `.update()` on it).
+
+```ts
+import { Component, signal, linkedSignal } from '@angular/core';
+
+@Component({...})
+export class ShippingMethodPicker {
+  shippingOptions = signal(['Ground', 'Air', 'Sea']);
+
+  // Defaults to the first option.
+  // If shippingOptions changes, selectedOption resets to the new first option.
+  selectedOption = linkedSignal(() => this.shippingOptions()[0]);
+
+  changeShipping(index: number) {
+    // We can still manually update this signal!
+    this.selectedOption.set(this.shippingOptions()[index]);
+  }
+}
+```
+
+## Advanced Usage: Accounting for Previous State
+
+Sometimes, when the source state changes, you want to preserve the user's manual selection if it is still valid. To do this, use the object syntax providing `source` and `computation`.
+
+The `computation` function receives the new value of the source, and a `previous` object containing the previous source value and the previous `linkedSignal` value.
+
+```ts
+interface ShippingMethod { id: number; name: string; }
+
+@Component({...})
+export class ShippingMethodPicker {
+  shippingOptions = signal<ShippingMethod[]>([
+    {id: 0, name: 'Ground'}, {id: 1, name: 'Air'}, {id: 2, name: 'Sea'}
+  ]);
+
+  selectedOption = linkedSignal<ShippingMethod[], ShippingMethod>({
+    source: this.shippingOptions,
+    computation: (newOptions, previous) => {
+      // If the newly loaded options still contain the user's previously
+      // selected option, keep it selected. Otherwise, reset to the first option.
+      return newOptions.find(opt => opt.id === previous?.value.id) ?? newOptions[0];
+    }
+  });
+}
+```
+
+### When to use `linkedSignal` vs `computed` vs `effect`
+
+- Use `computed`: When state is **strictly** derived from other state and should never be manually updated.
+- Use `linkedSignal`: When state is derived from other state, but the user **must** be able to override or manually update it.
+- **Never** use `effect` to sync one piece of state to another. That is an anti-pattern. Use `computed` or `linkedSignal` instead.

package/skills/angular-developer/references/loading-strategies.md

@@ -1,61 +1,61 @@
-# Route Loading Strategies
-
-Angular supports two main strategies for loading routes and components to balance initial load time and navigation responsiveness.
-
-## Eager Loading
-
-Components are bundled into the initial JavaScript payload and are available immediately.
-
-```ts
-{ path: 'home', component: Home }
-```
-
-- **Pros**: Seamless transitions.
-- **Cons**: Increases initial bundle size.
-
-## Lazy Loading
-
-Components or routes are loaded only when the user navigates to them. This creates separate JavaScript "chunks".
-
-### Lazy Loading Components
-
-Use `loadComponent` to fetch the component on demand.
-
-```ts
-{
-  path: 'admin',
-  loadComponent: () => import('./admin/admin.component').then(m => m.AdminComponent)`,
-}
-```
-
-### Lazy Loading Child Routes
-
-Use `loadChildren` to fetch a set of routes.
-
-```ts
-{
-  path: 'settings',
-  loadChildren: () => import('./settings/settings.routes'),
-}
-```
-
-## Injection Context and Lazy Loading
-
-Loader functions run within the **injection context** of the current route. This allows you to call `inject()` to make context-aware loading decisions.
-
-```ts
-{
-  path: 'dashboard',
-  loadComponent: () => {
-    const flags = inject(FeatureFlags);
-    return flags.isPremium
-      ? import('./premium-dashboard')
-      : import('./basic-dashboard');
-  },
-}
-```
-
-## Recommendation
-
-- Use **Eager Loading** for the primary landing pages.
-- Use **Lazy Loading** for all other feature areas to keep the initial bundle small.
+# Route Loading Strategies
+
+Angular supports two main strategies for loading routes and components to balance initial load time and navigation responsiveness.
+
+## Eager Loading
+
+Components are bundled into the initial JavaScript payload and are available immediately.
+
+```ts
+{ path: 'home', component: Home }
+```
+
+- **Pros**: Seamless transitions.
+- **Cons**: Increases initial bundle size.
+
+## Lazy Loading
+
+Components or routes are loaded only when the user navigates to them. This creates separate JavaScript "chunks".
+
+### Lazy Loading Components
+
+Use `loadComponent` to fetch the component on demand.
+
+```ts
+{
+  path: 'admin',
+  loadComponent: () => import('./admin/admin.component').then(m => m.AdminComponent)`,
+}
+```
+
+### Lazy Loading Child Routes
+
+Use `loadChildren` to fetch a set of routes.
+
+```ts
+{
+  path: 'settings',
+  loadChildren: () => import('./settings/settings.routes'),
+}
+```
+
+## Injection Context and Lazy Loading
+
+Loader functions run within the **injection context** of the current route. This allows you to call `inject()` to make context-aware loading decisions.
+
+```ts
+{
+  path: 'dashboard',
+  loadComponent: () => {
+    const flags = inject(FeatureFlags);
+    return flags.isPremium
+      ? import('./premium-dashboard')
+      : import('./basic-dashboard');
+  },
+}
+```
+
+## Recommendation
+
+- Use **Eager Loading** for the primary landing pages.
+- Use **Lazy Loading** for all other feature areas to keep the initial bundle small.

package/skills/angular-developer/references/mcp.md

@@ -1,108 +1,108 @@
-# Angular CLI MCP Server
-
-The Angular CLI includes a Model Context Protocol (MCP) server that enables AI assistants (like Cursor, Gemini CLI, JetBrains AI, etc.) to interact directly with the Angular CLI. It provides tools for code generation, modernizing code, fetching examples, and running builds/tests.
-
-## Available Tools (Default)
-
-When the MCP server is enabled, AI agents have access to the following tools:
-
-| Name                        | Description                                                                                               |
-| :-------------------------- | :-------------------------------------------------------------------------------------------------------- |
-| `ai_tutor`                  | Launches an interactive AI-powered Angular tutor.                                                         |
-| `find_examples`             | Finds authoritative, best-practice code examples for modern Angular features.                             |
-| `get_best_practices`        | Retrieves the Angular Best Practices Guide (crucial for standalone components, typed forms, etc.).        |
-| `list_projects`             | Lists all applications and libraries in the workspace by reading `angular.json`.                          |
-| `onpush_zoneless_migration` | Analyzes code and provides a plan to migrate it to `OnPush` change detection (prerequisite for zoneless). |
-| `search_documentation`      | Searches the official documentation at `https://angular.dev`.                                             |
-
-## Experimental Tools
-
-Some tools must be enabled explicitly using the `--experimental-tool` (or `-E`) flag.
-
-| Name                       | Description                                                              |
-| :------------------------- | :----------------------------------------------------------------------- |
-| `build`                    | Performs a one-off build using `ng build`.                               |
-| `devserver.start`          | Asynchronously starts a dev server (`ng serve`). Returns immediately.    |
-| `devserver.stop`           | Stops the dev server.                                                    |
-| `devserver.wait_for_build` | Returns the logs of the most recent build in a running dev server.       |
-| `e2e`                      | Executes end-to-end tests.                                               |
-| `modernize`                | Performs code migrations to align with latest best practices and syntax. |
-| `test`                     | Runs the project's unit tests.                                           |
-
-## Configuration
-
-To use the MCP server, you configure your host environment (IDE or CLI) to run `npx @angular/cli mcp`.
-
-### Antigravity IDE
-
-Create a file named `.antigravity/mcp.json` in your project's root:
-
-```json
-{
-  "mcpServers": {
-    "angular-cli": {
-      "command": "npx",
-      "args": ["-y", "@angular/cli", "mcp"]
-    }
-  }
-}
-```
-
-### Gemini CLI
-
-Create `.gemini/settings.json` in the project root:
-
-```json
-{
-  "mcpServers": {
-    "angular-cli": {
-      "command": "npx",
-      "args": ["-y", "@angular/cli", "mcp"]
-    }
-  }
-}
-```
-
-### Cursor
-
-Create `.cursor/mcp.json` in the project root (or globally at `~/.cursor/mcp.json`):
-
-```json
-{
-  "mcpServers": {
-    "angular-cli": {
-      "command": "npx",
-      "args": ["-y", "@angular/cli", "mcp"]
-    }
-  }
-}
-```
-
-### VS Code
-
-Create `.vscode/mcp.json`:
-
-```json
-{
-  "servers": {
-    "angular-cli": {
-      "command": "npx",
-      "args": ["-y", "@angular/cli", "mcp"]
-    }
-  }
-}
-```
-
-## Command Options
-
-You can pass arguments to the MCP server in the `args` array of your configuration:
-
-- `--read-only`: Only registers tools that do not modify the project.
-- `--local-only`: Only registers tools that do not require an internet connection.
-- `--experimental-tool` (`-E`): Enables specific experimental tools (e.g., `-E build`, `-E devserver`).
-
-Example for read-only mode with experimental tools enabled:
-
-```json
-"args": ["-y", "@angular/cli", "mcp", "--read-only", "-E", "build", "-E", "modernize"]
-```
+# Angular CLI MCP Server
+
+The Angular CLI includes a Model Context Protocol (MCP) server that enables AI assistants (like Cursor, Gemini CLI, JetBrains AI, etc.) to interact directly with the Angular CLI. It provides tools for code generation, modernizing code, fetching examples, and running builds/tests.
+
+## Available Tools (Default)
+
+When the MCP server is enabled, AI agents have access to the following tools:
+
+| Name                        | Description                                                                                               |
+| :-------------------------- | :-------------------------------------------------------------------------------------------------------- |
+| `ai_tutor`                  | Launches an interactive AI-powered Angular tutor.                                                         |
+| `find_examples`             | Finds authoritative, best-practice code examples for modern Angular features.                             |
+| `get_best_practices`        | Retrieves the Angular Best Practices Guide (crucial for standalone components, typed forms, etc.).        |
+| `list_projects`             | Lists all applications and libraries in the workspace by reading `angular.json`.                          |
+| `onpush_zoneless_migration` | Analyzes code and provides a plan to migrate it to `OnPush` change detection (prerequisite for zoneless). |
+| `search_documentation`      | Searches the official documentation at `https://angular.dev`.                                             |
+
+## Experimental Tools
+
+Some tools must be enabled explicitly using the `--experimental-tool` (or `-E`) flag.
+
+| Name                       | Description                                                              |
+| :------------------------- | :----------------------------------------------------------------------- |
+| `build`                    | Performs a one-off build using `ng build`.                               |
+| `devserver.start`          | Asynchronously starts a dev server (`ng serve`). Returns immediately.    |
+| `devserver.stop`           | Stops the dev server.                                                    |
+| `devserver.wait_for_build` | Returns the logs of the most recent build in a running dev server.       |
+| `e2e`                      | Executes end-to-end tests.                                               |
+| `modernize`                | Performs code migrations to align with latest best practices and syntax. |
+| `test`                     | Runs the project's unit tests.                                           |
+
+## Configuration
+
+To use the MCP server, you configure your host environment (IDE or CLI) to run `npx @angular/cli mcp`.
+
+### Antigravity IDE
+
+Create a file named `.antigravity/mcp.json` in your project's root:
+
+```json
+{
+  "mcpServers": {
+    "angular-cli": {
+      "command": "npx",
+      "args": ["-y", "@angular/cli", "mcp"]
+    }
+  }
+}
+```
+
+### Gemini CLI
+
+Create `.gemini/settings.json` in the project root:
+
+```json
+{
+  "mcpServers": {
+    "angular-cli": {
+      "command": "npx",
+      "args": ["-y", "@angular/cli", "mcp"]
+    }
+  }
+}
+```
+
+### Cursor
+
+Create `.cursor/mcp.json` in the project root (or globally at `~/.cursor/mcp.json`):
+
+```json
+{
+  "mcpServers": {
+    "angular-cli": {
+      "command": "npx",
+      "args": ["-y", "@angular/cli", "mcp"]
+    }
+  }
+}
+```
+
+### VS Code
+
+Create `.vscode/mcp.json`:
+
+```json
+{
+  "servers": {
+    "angular-cli": {
+      "command": "npx",
+      "args": ["-y", "@angular/cli", "mcp"]
+    }
+  }
+}
+```
+
+## Command Options
+
+You can pass arguments to the MCP server in the `args` array of your configuration:
+
+- `--read-only`: Only registers tools that do not modify the project.
+- `--local-only`: Only registers tools that do not require an internet connection.
+- `--experimental-tool` (`-E`): Enables specific experimental tools (e.g., `-E build`, `-E devserver`).
+
+Example for read-only mode with experimental tools enabled:
+
+```json
+"args": ["-y", "@angular/cli", "mcp", "--read-only", "-E", "build", "-E", "modernize"]
+```