@funnycode/myclaude 0.1.67 → 0.1.68

package/seed/marketplaces/ecc/skills/angular-developer/references/cli.md

@@ -1,86 +1,86 @@
-# Angular CLI Guide for Agents
-
-The Angular CLI (`ng`) is the primary tool for managing an Angular workspace. Always prefer CLI commands over manual file creation or generic `npm` commands when modifying project structure or adding Angular-specific dependencies.
-
-## 1. Managing Dependencies
-
-**ALWAYS use `ng add` for Angular libraries** instead of `npm install`. `ng add` installs the package AND runs initialization schematics (e.g., configuring `angular.json`, updating root providers).
-
-```bash
-ng add @angular/material
-ng add tailwindcss
-ng add @angular/fire
-```
-
-To update the application and its dependencies (which automatically runs code migrations):
-
-```bash
-ng update @angular/core@<latest or specific version> @angular/cli<latest or specific version>
-```
-
-## 2. Generating Code (`ng generate` or `ng g`)
-
-Always use the CLI to generate code to ensure it adheres to Angular standards and updates necessary configuration files automatically.
-
-| Target       | Command               | Notes                                                                                          |
-| :----------- | :-------------------- | :--------------------------------------------------------------------------------------------- |
-| Component    | `ng g c path/to/name` | Generates a component. Use `--inline-style` (`-s`) or `--inline-template` (`-t`) if requested. |
-| Service      | `ng g s path/to/name` | Generates an `@Injectable({providedIn: 'root'})` service.                                      |
-| Directive    | `ng g d path/to/name` | Generates a directive.                                                                         |
-| Pipe         | `ng g p path/to/name` | Generates a pipe.                                                                              |
-| Guard        | `ng g g path/to/name` | Generates a functional route guard.                                                            |
-| Environments | `ng g environments`   | Scaffolds `src/environments/` and updates `angular.json` with file replacements.               |
-
-_Note: There is no command to generate a single route definition. Generate a component, then manually add it to the `Routes` array in `app.routes.ts`._
-
-## 3. Development Server & Proxying
-
-Start the local development server with hot-module replacement (HMR):
-
-```bash
-ng serve
-```
-
-### Backend API Proxying
-
-To proxy API requests during development (e.g., rerouting `/api` to a local Node server):
-
-1. Create `src/proxy.conf.json`:
-   ```json
-   {
-     "/api/**": {"target": "http://localhost:3000", "secure": false}
-   }
-   ```
-2. Update `angular.json` under the `serve` target:
-   ```json
-   "serve": {
-     "builder": "@angular/build:dev-server",
-     "options": { "proxyConfig": "src/proxy.conf.json" }
-   }
-   ```
-
-## 4. Building the Application
-
-Compile the application into an output directory (default: `dist/<project-name>/browser`). Modern Angular uses the `@angular/build:application` builder (esbuild-based).
-
-```bash
-ng build
-```
-
-- `ng build` defaults to the production configuration, which enables Ahead-of-Time (AOT) compilation, minification, and tree-shaking.
-- Target specific configurations defined in `angular.json` using `--configuration`: `ng build --configuration=staging`.
-
-## 5. Testing
-
-- **Unit Tests**: Run `ng test` to execute unit tests via the configured test runner (e.g., Karma or Vitest).
-- **End-to-End (E2E)**: Run `ng e2e`. If no E2E framework is configured, the CLI will prompt to install one (Cypress, Playwright, Puppeteer, etc.).
-
-## 6. Deployment
-
-To deploy an application, you must first add a deployment builder, then run the deploy command:
-
-```bash
-# Example for Firebase
-ng add @angular/fire
-ng deploy
-```
+# Angular CLI Guide for Agents
+
+The Angular CLI (`ng`) is the primary tool for managing an Angular workspace. Always prefer CLI commands over manual file creation or generic `npm` commands when modifying project structure or adding Angular-specific dependencies.
+
+## 1. Managing Dependencies
+
+**ALWAYS use `ng add` for Angular libraries** instead of `npm install`. `ng add` installs the package AND runs initialization schematics (e.g., configuring `angular.json`, updating root providers).
+
+```bash
+ng add @angular/material
+ng add tailwindcss
+ng add @angular/fire
+```
+
+To update the application and its dependencies (which automatically runs code migrations):
+
+```bash
+ng update @angular/core@<latest or specific version> @angular/cli<latest or specific version>
+```
+
+## 2. Generating Code (`ng generate` or `ng g`)
+
+Always use the CLI to generate code to ensure it adheres to Angular standards and updates necessary configuration files automatically.
+
+| Target       | Command               | Notes                                                                                          |
+| :----------- | :-------------------- | :--------------------------------------------------------------------------------------------- |
+| Component    | `ng g c path/to/name` | Generates a component. Use `--inline-style` (`-s`) or `--inline-template` (`-t`) if requested. |
+| Service      | `ng g s path/to/name` | Generates an `@Injectable({providedIn: 'root'})` service.                                      |
+| Directive    | `ng g d path/to/name` | Generates a directive.                                                                         |
+| Pipe         | `ng g p path/to/name` | Generates a pipe.                                                                              |
+| Guard        | `ng g g path/to/name` | Generates a functional route guard.                                                            |
+| Environments | `ng g environments`   | Scaffolds `src/environments/` and updates `angular.json` with file replacements.               |
+
+_Note: There is no command to generate a single route definition. Generate a component, then manually add it to the `Routes` array in `app.routes.ts`._
+
+## 3. Development Server & Proxying
+
+Start the local development server with hot-module replacement (HMR):
+
+```bash
+ng serve
+```
+
+### Backend API Proxying
+
+To proxy API requests during development (e.g., rerouting `/api` to a local Node server):
+
+1. Create `src/proxy.conf.json`:
+   ```json
+   {
+     "/api/**": {"target": "http://localhost:3000", "secure": false}
+   }
+   ```
+2. Update `angular.json` under the `serve` target:
+   ```json
+   "serve": {
+     "builder": "@angular/build:dev-server",
+     "options": { "proxyConfig": "src/proxy.conf.json" }
+   }
+   ```
+
+## 4. Building the Application
+
+Compile the application into an output directory (default: `dist/<project-name>/browser`). Modern Angular uses the `@angular/build:application` builder (esbuild-based).
+
+```bash
+ng build
+```
+
+- `ng build` defaults to the production configuration, which enables Ahead-of-Time (AOT) compilation, minification, and tree-shaking.
+- Target specific configurations defined in `angular.json` using `--configuration`: `ng build --configuration=staging`.
+
+## 5. Testing
+
+- **Unit Tests**: Run `ng test` to execute unit tests via the configured test runner (e.g., Karma or Vitest).
+- **End-to-End (E2E)**: Run `ng e2e`. If no E2E framework is configured, the CLI will prompt to install one (Cypress, Playwright, Puppeteer, etc.).
+
+## 6. Deployment
+
+To deploy an application, you must first add a deployment builder, then run the deploy command:
+
+```bash
+# Example for Firebase
+ng add @angular/fire
+ng deploy
+```

package/seed/marketplaces/ecc/skills/angular-developer/references/component-harnesses.md

@@ -1,59 +1,59 @@
-# Testing with Component Harnesses
-
-Component harnesses are the standard, preferred way to interact with components in tests. They provide a robust, user-centric API that makes tests less brittle and easier to read by insulating them from changes to a component's internal DOM structure.
-
-## Why Use Harnesses?
-
-- **Robustness:** Tests don't break when you refactor a component's internal HTML or CSS classes.
-- **Readability:** Tests describe interactions from a user's perspective (e.g., `button.click()`, `slider.getValue()`) instead of through DOM queries (`fixture.nativeElement.querySelector(...)`).
-- **Reusability:** The same harness can be used in both unit tests and E2E tests.
-
-Angular Material provides a test harness for every component in its library.
-
-## Using a Harness in a Unit Test
-
-The `TestbedHarnessEnvironment` is the entry point for using harnesses in unit tests.
-
-### Example: Testing with a `MatButtonHarness`
-
-```ts
-import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
-import {MatButtonHarness} from '@angular/material/button/testing';
-import {MyButtonContainerComponent} from './my-button-container.component';
-
-describe('MyButtonContainerComponent', () => {
-  let fixture: ComponentFixture<MyButtonContainerComponent>;
-  let loader: HarnessLoader;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [MyButtonContainerComponent, MatButtonModule],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(MyButtonContainerComponent);
-    // Create a harness loader for the component's fixture
-    loader = TestbedHarnessEnvironment.loader(fixture);
-  });
-
-  it('should find a button with specific text', async () => {
-    // Load the harness for a MatButton with the text "Submit"
-    const submitButton = await loader.getHarness(MatButtonHarness.with({text: 'Submit'}));
-
-    // Use the harness API to interact with the component
-    expect(await submitButton.isDisabled()).toBe(false);
-    await submitButton.click();
-
-    // ... assertions
-  });
-});
-```
-
-### Key Concepts
-
-1. **`HarnessLoader`**: An object used to find and create harness instances. Get a loader for your component's fixture using `TestbedHarnessEnvironment.loader(fixture)`.
-
-2. **`loader.getHarness(HarnessClass)`**: Asynchronously finds and returns a harness instance for the first matching component.
-
-3. **`HarnessClass.with({ ... })`**: Many harnesses provide a static `with` method that returns a `HarnessPredicate`. This allows you to filter and find components based on their properties, like text, selector, or disabled state. Always use this to precisely target the component you want to test.
-
-4. **Harness API:** Once you have a harness instance, use its methods (e.g., `.click()`, `.getText()`, `.getValue()`) to interact with the component. These methods automatically handle waiting for async operations and change detection.
+# Testing with Component Harnesses
+
+Component harnesses are the standard, preferred way to interact with components in tests. They provide a robust, user-centric API that makes tests less brittle and easier to read by insulating them from changes to a component's internal DOM structure.
+
+## Why Use Harnesses?
+
+- **Robustness:** Tests don't break when you refactor a component's internal HTML or CSS classes.
+- **Readability:** Tests describe interactions from a user's perspective (e.g., `button.click()`, `slider.getValue()`) instead of through DOM queries (`fixture.nativeElement.querySelector(...)`).
+- **Reusability:** The same harness can be used in both unit tests and E2E tests.
+
+Angular Material provides a test harness for every component in its library.
+
+## Using a Harness in a Unit Test
+
+The `TestbedHarnessEnvironment` is the entry point for using harnesses in unit tests.
+
+### Example: Testing with a `MatButtonHarness`
+
+```ts
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {MatButtonHarness} from '@angular/material/button/testing';
+import {MyButtonContainerComponent} from './my-button-container.component';
+
+describe('MyButtonContainerComponent', () => {
+  let fixture: ComponentFixture<MyButtonContainerComponent>;
+  let loader: HarnessLoader;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MyButtonContainerComponent, MatButtonModule],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MyButtonContainerComponent);
+    // Create a harness loader for the component's fixture
+    loader = TestbedHarnessEnvironment.loader(fixture);
+  });
+
+  it('should find a button with specific text', async () => {
+    // Load the harness for a MatButton with the text "Submit"
+    const submitButton = await loader.getHarness(MatButtonHarness.with({text: 'Submit'}));
+
+    // Use the harness API to interact with the component
+    expect(await submitButton.isDisabled()).toBe(false);
+    await submitButton.click();
+
+    // ... assertions
+  });
+});
+```
+
+### Key Concepts
+
+1. **`HarnessLoader`**: An object used to find and create harness instances. Get a loader for your component's fixture using `TestbedHarnessEnvironment.loader(fixture)`.
+
+2. **`loader.getHarness(HarnessClass)`**: Asynchronously finds and returns a harness instance for the first matching component.
+
+3. **`HarnessClass.with({ ... })`**: Many harnesses provide a static `with` method that returns a `HarnessPredicate`. This allows you to filter and find components based on their properties, like text, selector, or disabled state. Always use this to precisely target the component you want to test.
+
+4. **Harness API:** Once you have a harness instance, use its methods (e.g., `.click()`, `.getText()`, `.getValue()`) to interact with the component. These methods automatically handle waiting for async operations and change detection.

package/seed/marketplaces/ecc/skills/angular-developer/references/component-styling.md

@@ -1,91 +1,91 @@
-# Component Styling
-
-Angular components can define styles that apply specifically to their template, enabling encapsulation and modularity.
-
-## Defining Styles
-
-Styles can be defined inline or in separate files.
-
-```ts
-@Component({
-  selector: 'app-photo',
-  // Inline styles
-  styles: `
-    img {
-      border-radius: 50%;
-    }
-  `,
-  // OR external file
-  styleUrl: 'photo.component.css',
-})
-export class Photo {}
-```
-
-## View Encapsulation
-
-Every component has a view encapsulation setting that determines how styles are scoped.
-
-| Mode                            | Behavior                                                                                      |
-| :------------------------------ | :-------------------------------------------------------------------------------------------- |
-| `Emulated` (Default)            | Scopes styles to the component using unique HTML attributes. Global styles can still leak in. |
-| `ShadowDom`                     | Uses the browser's native Shadow DOM API to isolate styles completely.                        |
-| `None`                          | Disables encapsulation. Component styles become global.                                       |
-| `ExperimentalIsolatedShadowDom` | Strictly guarantees that only the component's styles apply.                                   |
-
-### Usage
-
-```ts
-import { ViewEncapsulation } from '@angular/core';
-
-@Component({
-  ...,
-  encapsulation: ViewEncapsulation.None,
-})
-export class GlobalStyled {}
-```
-
-## Special Selectors
-
-### `:host`
-
-Targets the component's host element (the element matching the component's selector).
-
-```css
-:host {
-  display: block;
-  border: 1px solid black;
-}
-```
-
-### `:host-context()`
-
-Targets the host element based on some condition in its ancestry.
-
-```css
-/* Apply styles if any ancestor has the 'theme-dark' class */
-:host-context(.theme-dark) {
-  background-color: #333;
-}
-```
-
-### `::ng-deep`
-
-Disables view encapsulation for a specific rule, allowing it to "leak" into child components.
-**Note: The Angular team strongly discourages the use of `::ng-deep`.** It is supported only for backwards compatibility.
-
-## Styles in Templates
-
-You can use `<style>` elements directly in a component's template. View encapsulation rules still apply.
-
-```html
-<style>
-  .dynamic-class {
-    color: red;
-  }
-</style>
-<div class="dynamic-class">Hello</div>
-```
-
-## External Styles
-
-Using `<link>` or `@import` in CSS is treated as external styles. **External styles are not affected by emulated view encapsulation.**
+# Component Styling
+
+Angular components can define styles that apply specifically to their template, enabling encapsulation and modularity.
+
+## Defining Styles
+
+Styles can be defined inline or in separate files.
+
+```ts
+@Component({
+  selector: 'app-photo',
+  // Inline styles
+  styles: `
+    img {
+      border-radius: 50%;
+    }
+  `,
+  // OR external file
+  styleUrl: 'photo.component.css',
+})
+export class Photo {}
+```
+
+## View Encapsulation
+
+Every component has a view encapsulation setting that determines how styles are scoped.
+
+| Mode                            | Behavior                                                                                      |
+| :------------------------------ | :-------------------------------------------------------------------------------------------- |
+| `Emulated` (Default)            | Scopes styles to the component using unique HTML attributes. Global styles can still leak in. |
+| `ShadowDom`                     | Uses the browser's native Shadow DOM API to isolate styles completely.                        |
+| `None`                          | Disables encapsulation. Component styles become global.                                       |
+| `ExperimentalIsolatedShadowDom` | Strictly guarantees that only the component's styles apply.                                   |
+
+### Usage
+
+```ts
+import { ViewEncapsulation } from '@angular/core';
+
+@Component({
+  ...,
+  encapsulation: ViewEncapsulation.None,
+})
+export class GlobalStyled {}
+```
+
+## Special Selectors
+
+### `:host`
+
+Targets the component's host element (the element matching the component's selector).
+
+```css
+:host {
+  display: block;
+  border: 1px solid black;
+}
+```
+
+### `:host-context()`
+
+Targets the host element based on some condition in its ancestry.
+
+```css
+/* Apply styles if any ancestor has the 'theme-dark' class */
+:host-context(.theme-dark) {
+  background-color: #333;
+}
+```
+
+### `::ng-deep`
+
+Disables view encapsulation for a specific rule, allowing it to "leak" into child components.
+**Note: The Angular team strongly discourages the use of `::ng-deep`.** It is supported only for backwards compatibility.
+
+## Styles in Templates
+
+You can use `<style>` elements directly in a component's template. View encapsulation rules still apply.
+
+```html
+<style>
+  .dynamic-class {
+    color: red;
+  }
+</style>
+<div class="dynamic-class">Hello</div>
+```
+
+## External Styles
+
+Using `<link>` or `@import` in CSS is treated as external styles. **External styles are not affected by emulated view encapsulation.**