+ }
+ `,
+})
+export class Dashboard {
+ chartData = input.required();
+}
+```
+
+Defer triggers:
+- `on viewport` - When element enters viewport
+- `on idle` - When browser is idle
+- `on interaction` - On user interaction (click, focus)
+- `on hover` - On mouse hover
+- `on immediate` - Immediately after non-deferred content
+- `on timer(500ms)` - After specified delay
+- `when condition` - When expression becomes true
+
+```typescript
+@Component({
+ template: `
+ @defer (on interaction; prefetch on idle) {
+
+ } @placeholder {
+
+ }
+ `,
+})
+export class Post {
+ postId = input.required();
+}
+```
+
+## Attribute Directives on Components
+
+```typescript
+@Directive({
+ selector: '[appHighlight]',
+ host: {
+ '[style.backgroundColor]': 'color()',
+ },
+})
+export class Highlight {
+ color = input('yellow', { alias: 'appHighlight' });
+}
+
+// Usage on component
+@Component({
+ imports: [Highlight],
+ template: ``,
+})
+export class Page {}
+```
+
+## Error Boundaries
+
+```typescript
+@Component({
+ selector: 'app-error-boundary',
+ template: `
+ @if (hasError()) {
+
+
Something went wrong
+
+
+ } @else {
+
+ }
+ `,
+})
+export class ErrorBoundary {
+ hasError = signal(false);
+ private errorHandler = inject(ErrorHandler);
+
+ retry() {
+ this.hasError.set(false);
+ }
+}
+```
diff --git a/skills/angular-di/LICENSE.txt b/skills/angular-di/LICENSE.txt
new file mode 100644
index 0000000..7a4a3ea
--- /dev/null
+++ b/skills/angular-di/LICENSE.txt
@@ -0,0 +1,202 @@
+
+ Apache License
+ Version 2.0, January 2004
+ http://www.apache.org/licenses/
+
+ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+ 1. Definitions.
+
+ "License" shall mean the terms and conditions for use, reproduction,
+ and distribution as defined by Sections 1 through 9 of this document.
+
+ "Licensor" shall mean the copyright owner or entity authorized by
+ the copyright owner that is granting the License.
+
+ "Legal Entity" shall mean the union of the acting entity and all
+ other entities that control, are controlled by, or are under common
+ control with that entity. For the purposes of this definition,
+ "control" means (i) the power, direct or indirect, to cause the
+ direction or management of such entity, whether by contract or
+ otherwise, or (ii) ownership of fifty percent (50%) or more of the
+ outstanding shares, or (iii) beneficial ownership of such entity.
+
+ "You" (or "Your") shall mean an individual or Legal Entity
+ exercising permissions granted by this License.
+
+ "Source" form shall mean the preferred form for making modifications,
+ including but not limited to software source code, documentation
+ source, and configuration files.
+
+ "Object" form shall mean any form resulting from mechanical
+ transformation or translation of a Source form, including but
+ not limited to compiled object code, generated documentation,
+ and conversions to other media types.
+
+ "Work" shall mean the work of authorship, whether in Source or
+ Object form, made available under the License, as indicated by a
+ copyright notice that is included in or attached to the work
+ (an example is provided in the Appendix below).
+
+ "Derivative Works" shall mean any work, whether in Source or Object
+ form, that is based on (or derived from) the Work and for which the
+ editorial revisions, annotations, elaborations, or other modifications
+ represent, as a whole, an original work of authorship. For the purposes
+ of this License, Derivative Works shall not include works that remain
+ separable from, or merely link (or bind by name) to the interfaces of,
+ the Work and Derivative Works thereof.
+
+ "Contribution" shall mean any work of authorship, including
+ the original version of the Work and any modifications or additions
+ to that Work or Derivative Works thereof, that is intentionally
+ submitted to Licensor for inclusion in the Work by the copyright owner
+ or by an individual or Legal Entity authorized to submit on behalf of
+ the copyright owner. For the purposes of this definition, "submitted"
+ means any form of electronic, verbal, or written communication sent
+ to the Licensor or its representatives, including but not limited to
+ communication on electronic mailing lists, source code control systems,
+ and issue tracking systems that are managed by, or on behalf of, the
+ Licensor for the purpose of discussing and improving the Work, but
+ excluding communication that is conspicuously marked or otherwise
+ designated in writing by the copyright owner as "Not a Contribution."
+
+ "Contributor" shall mean Licensor and any individual or Legal Entity
+ on behalf of whom a Contribution has been received by Licensor and
+ subsequently incorporated within the Work.
+
+ 2. Grant of Copyright License. Subject to the terms and conditions of
+ this License, each Contributor hereby grants to You a perpetual,
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+ copyright license to reproduce, prepare Derivative Works of,
+ publicly display, publicly perform, sublicense, and distribute the
+ Work and such Derivative Works in Source or Object form.
+
+ 3. Grant of Patent License. Subject to the terms and conditions of
+ this License, each Contributor hereby grants to You a perpetual,
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+ (except as stated in this section) patent license to make, have made,
+ use, offer to sell, sell, import, and otherwise transfer the Work,
+ where such license applies only to those patent claims licensable
+ by such Contributor that are necessarily infringed by their
+ Contribution(s) alone or by combination of their Contribution(s)
+ with the Work to which such Contribution(s) was submitted. If You
+ institute patent litigation against any entity (including a
+ cross-claim or counterclaim in a lawsuit) alleging that the Work
+ or a Contribution incorporated within the Work constitutes direct
+ or contributory patent infringement, then any patent licenses
+ granted to You under this License for that Work shall terminate
+ as of the date such litigation is filed.
+
+ 4. Redistribution. You may reproduce and distribute copies of the
+ Work or Derivative Works thereof in any medium, with or without
+ modifications, and in Source or Object form, provided that You
+ meet the following conditions:
+
+ (a) You must give any other recipients of the Work or
+ Derivative Works a copy of this License; and
+
+ (b) You must cause any modified files to carry prominent notices
+ stating that You changed the files; and
+
+ (c) You must retain, in the Source form of any Derivative Works
+ that You distribute, all copyright, patent, trademark, and
+ attribution notices from the Source form of the Work,
+ excluding those notices that do not pertain to any part of
+ the Derivative Works; and
+
+ (d) If the Work includes a "NOTICE" text file as part of its
+ distribution, then any Derivative Works that You distribute must
+ include a readable copy of the attribution notices contained
+ within such NOTICE file, excluding those notices that do not
+ pertain to any part of the Derivative Works, in at least one
+ of the following places: within a NOTICE text file distributed
+ as part of the Derivative Works; within the Source form or
+ documentation, if provided along with the Derivative Works; or,
+ within a display generated by the Derivative Works, if and
+ wherever such third-party notices normally appear. The contents
+ of the NOTICE file are for informational purposes only and
+ do not modify the License. You may add Your own attribution
+ notices within Derivative Works that You distribute, alongside
+ or as an addendum to the NOTICE text from the Work, provided
+ that such additional attribution notices cannot be construed
+ as modifying the License.
+
+ You may add Your own copyright statement to Your modifications and
+ may provide additional or different license terms and conditions
+ for use, reproduction, or distribution of Your modifications, or
+ for any such Derivative Works as a whole, provided Your use,
+ reproduction, and distribution of the Work otherwise complies with
+ the conditions stated in this License.
+
+ 5. Submission of Contributions. Unless You explicitly state otherwise,
+ any Contribution intentionally submitted for inclusion in the Work
+ by You to the Licensor shall be under the terms and conditions of
+ this License, without any additional terms or conditions.
+ Notwithstanding the above, nothing herein shall supersede or modify
+ the terms of any separate license agreement you may have executed
+ with Licensor regarding such Contributions.
+
+ 6. Trademarks. This License does not grant permission to use the trade
+ names, trademarks, service marks, or product names of the Licensor,
+ except as required for reasonable and customary use in describing the
+ origin of the Work and reproducing the content of the NOTICE file.
+
+ 7. Disclaimer of Warranty. Unless required by applicable law or
+ agreed to in writing, Licensor provides the Work (and each
+ Contributor provides its Contributions) on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+ implied, including, without limitation, any warranties or conditions
+ of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+ PARTICULAR PURPOSE. You are solely responsible for determining the
+ appropriateness of using or redistributing the Work and assume any
+ risks associated with Your exercise of permissions under this License.
+
+ 8. Limitation of Liability. In no event and under no legal theory,
+ whether in tort (including negligence), contract, or otherwise,
+ unless required by applicable law (such as deliberate and grossly
+ negligent acts) or agreed to in writing, shall any Contributor be
+ liable to You for damages, including any direct, indirect, special,
+ incidental, or consequential damages of any character arising as a
+ result of this License or out of the use or inability to use the
+ Work (including but not limited to damages for loss of goodwill,
+ work stoppage, computer failure or malfunction, or any and all
+ other commercial damages or losses), even if such Contributor
+ has been advised of the possibility of such damages.
+
+ 9. Accepting Warranty or Additional Liability. While redistributing
+ the Work or Derivative Works thereof, You may choose to offer,
+ and charge a fee for, acceptance of support, warranty, indemnity,
+ or other liability obligations and/or rights consistent with this
+ License. However, in accepting such obligations, You may act only
+ on Your own behalf and on Your sole responsibility, not on behalf
+ of any other Contributor, and only if You agree to indemnify,
+ defend, and hold each Contributor harmless for any liability
+ incurred by, or claims asserted against, such Contributor by reason
+ of your accepting any such warranty or additional liability.
+
+ END OF TERMS AND CONDITIONS
+
+ APPENDIX: How to apply the Apache License to your work.
+
+ To apply the Apache License to your work, attach the following
+ boilerplate notice, with the fields enclosed by brackets "[]"
+ replaced with your own identifying information. (Don't include
+ the brackets!) The text should be enclosed in the appropriate
+ comment syntax for the file format. We also recommend that a
+ file or class name and description of purpose be included on the
+ same "printed page" as the copyright notice for easier
+ identification within third-party archives.
+
+ Copyright [yyyy] [name of copyright owner]
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
\ No newline at end of file
diff --git a/skills/angular-di/SKILL.md b/skills/angular-di/SKILL.md
new file mode 100644
index 0000000..1046488
--- /dev/null
+++ b/skills/angular-di/SKILL.md
@@ -0,0 +1,393 @@
+---
+name: angular-di
+description: Implement dependency injection in Angular v20+ using inject(), injection tokens, and provider configuration. Use for service architecture, providing dependencies at different levels, creating injectable tokens, and managing singleton vs scoped services. Triggers on service creation, configuring providers, using injection tokens, or understanding DI hierarchy.
+license: Complete terms in LICENSE.txt
+metadata:
+ category: development
+ source:
+ repository: https://github.com/analogjs/angular-skills
+ path: skills/angular-di
+---
+
+# Angular Dependency Injection
+
+Configure and use dependency injection in Angular v20+ with `inject()` and providers.
+
+## Basic Injection
+
+### Using inject()
+
+Prefer `inject()` over constructor injection:
+
+```typescript
+import { Component, inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { User } from './user.service';
+
+@Component({
+ selector: 'app-user-list',
+ template: `...`,
+})
+export class UserList {
+ // Inject dependencies
+ private http = inject(HttpClient);
+ private userService = inject(User);
+
+ // Can use immediately
+ users = this.userService.getUsers();
+}
+```
+
+### Injectable Services
+
+```typescript
+import { Injectable, inject, signal } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+@Injectable({
+ providedIn: 'root', // Singleton at root level
+})
+export class User {
+ private http = inject(HttpClient);
+
+ private users = signal([]);
+ readonly users$ = this.users.asReadonly();
+
+ async loadUsers() {
+ const users = await firstValueFrom(
+ this.http.get('/api/users')
+ );
+ this.users.set(users);
+ }
+}
+```
+
+## Provider Scopes
+
+### Root Level (Singleton)
+
+```typescript
+// Recommended: providedIn
+@Injectable({
+ providedIn: 'root',
+})
+export class Auth {}
+
+// Alternative: in app.config.ts
+export const appConfig: ApplicationConfig = {
+ providers: [
+ Auth,
+ ],
+};
+```
+
+### Component Level (Instance per Component)
+
+```typescript
+@Component({
+ selector: 'app-editor',
+ providers: [EditorState], // New instance for each component
+ template: `...`,
+})
+export class Editor {
+ private editorState = inject(EditorState);
+}
+```
+
+### Route Level
+
+```typescript
+export const routes: Routes = [
+ {
+ path: 'admin',
+ providers: [Admin], // Shared within this route tree
+ children: [
+ { path: '', component: AdminDashboard },
+ { path: 'users', component: AdminUsers },
+ ],
+ },
+];
+```
+
+## Injection Tokens
+
+### Creating Tokens
+
+```typescript
+import { InjectionToken } from '@angular/core';
+
+// Simple value token
+export const API_URL = new InjectionToken('API_URL');
+
+// Object token
+export interface AppConfig {
+ apiUrl: string;
+ features: {
+ darkMode: boolean;
+ analytics: boolean;
+ };
+}
+
+export const APP_CONFIG = new InjectionToken('APP_CONFIG');
+
+// Token with factory (self-providing)
+export const WINDOW = new InjectionToken('Window', {
+ providedIn: 'root',
+ factory: () => window,
+});
+
+export const LOCAL_STORAGE = new InjectionToken('LocalStorage', {
+ providedIn: 'root',
+ factory: () => localStorage,
+});
+```
+
+### Providing Token Values
+
+```typescript
+// app.config.ts
+export const appConfig: ApplicationConfig = {
+ providers: [
+ { provide: API_URL, useValue: 'https://api.example.com' },
+ {
+ provide: APP_CONFIG,
+ useValue: {
+ apiUrl: 'https://api.example.com',
+ features: { darkMode: true, analytics: true },
+ },
+ },
+ ],
+};
+```
+
+### Injecting Tokens
+
+```typescript
+@Injectable({ providedIn: 'root' })
+export class Api {
+ private apiUrl = inject(API_URL);
+ private config = inject(APP_CONFIG);
+ private window = inject(WINDOW);
+
+ getBaseUrl(): string {
+ return this.apiUrl;
+ }
+}
+```
+
+## Provider Types
+
+### useClass
+
+```typescript
+// Provide implementation
+{ provide: Logger, useClass: ConsoleLogger }
+
+// Conditional implementation
+{
+ provide: Logger,
+ useClass: environment.production
+ ? ProductionLogger
+ : ConsoleLogger,
+}
+```
+
+### useValue
+
+```typescript
+// Static values
+{ provide: API_URL, useValue: 'https://api.example.com' }
+
+// Configuration objects
+{ provide: APP_CONFIG, useValue: { theme: 'dark', language: 'en' } }
+```
+
+### useFactory
+
+```typescript
+// Factory with dependencies
+{
+ provide: User,
+ useFactory: (http: HttpClient, config: AppConfig) => {
+ return new User(http, config.apiUrl);
+ },
+ deps: [HttpClient, APP_CONFIG],
+}
+
+// Async factory (not recommended - use provideAppInitializer)
+{
+ provide: CONFIG,
+ useFactory: () => fetch('/config.json').then(r => r.json()),
+}
+```
+
+### useExisting
+
+```typescript
+// Alias to existing provider
+{ provide: AbstractLogger, useExisting: ConsoleLogger }
+
+// Multiple tokens pointing to same instance
+providers: [
+ ConsoleLogger,
+ { provide: Logger, useExisting: ConsoleLogger },
+ { provide: ErrorLogger, useExisting: ConsoleLogger },
+]
+```
+
+## Injection Options
+
+### Optional Injection
+
+```typescript
+@Component({...})
+export class My {
+ // Returns null if not provided
+ private analytics = inject(Analytics, { optional: true });
+
+ trackEvent(name: string) {
+ this.analytics?.track(name);
+ }
+}
+```
+
+### Self, SkipSelf, Host
+
+```typescript
+@Component({
+ providers: [Local],
+})
+export class Parent {
+ // Only look in this component's injector
+ private local = inject(Local, { self: true });
+}
+
+@Component({...})
+export class Child {
+ // Skip this component, look in parent
+ private parentService = inject(ParentSvc, { skipSelf: true });
+
+ // Only look up to host component
+ private hostService = inject(Host, { host: true });
+}
+```
+
+## Multi Providers
+
+Collect multiple values for same token:
+
+```typescript
+// Token for multiple validators
+export const VALIDATORS = new InjectionToken('Validators');
+
+// Provide multiple values
+providers: [
+ { provide: VALIDATORS, useClass: RequiredValidator, multi: true },
+ { provide: VALIDATORS, useClass: EmailValidator, multi: true },
+ { provide: VALIDATORS, useClass: MinLengthValidator, multi: true },
+]
+
+// Inject as array
+@Injectable()
+export class Validation {
+ private validators = inject(VALIDATORS); // Validator[]
+
+ validate(value: string): ValidationError[] {
+ return this.validators
+ .map(v => v.validate(value))
+ .filter(Boolean);
+ }
+}
+```
+
+### HTTP Interceptors (Multi Provider)
+
+```typescript
+// Interceptors use multi providers internally
+export const appConfig: ApplicationConfig = {
+ providers: [
+ provideHttpClient(
+ withInterceptors([
+ authInterceptor,
+ loggingInterceptor,
+ errorInterceptor,
+ ])
+ ),
+ ],
+};
+```
+
+## App Initializers
+
+Run async code before app starts using `provideAppInitializer`:
+
+```typescript
+import { provideAppInitializer, inject } from '@angular/core';
+
+export const appConfig: ApplicationConfig = {
+ providers: [
+ Config,
+ provideAppInitializer(() => {
+ const configService = inject(Config);
+ return configService.loadConfig();
+ }),
+ ],
+};
+```
+
+### Multiple Initializers
+
+```typescript
+providers: [
+ provideAppInitializer(() => {
+ const config = inject(Config);
+ return config.load();
+ }),
+ provideAppInitializer(() => {
+ const auth = inject(Auth);
+ return auth.checkSession();
+ }),
+]
+```
+
+## Environment Injector
+
+Create injectors programmatically:
+
+```typescript
+import { createEnvironmentInjector, EnvironmentInjector, inject } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+export class Plugin {
+ private parentInjector = inject(EnvironmentInjector);
+
+ loadPlugin(providers: Provider[]): EnvironmentInjector {
+ return createEnvironmentInjector(providers, this.parentInjector);
+ }
+}
+```
+
+## runInInjectionContext
+
+Run code with injection context:
+
+```typescript
+import { runInInjectionContext, EnvironmentInjector, inject } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+export class Utility {
+ private injector = inject(EnvironmentInjector);
+
+ executeWithDI(fn: () => T): T {
+ return runInInjectionContext(this.injector, fn);
+ }
+}
+
+// Usage
+utilityService.executeWithDI(() => {
+ const http = inject(HttpClient);
+ // Use http...
+});
+```
+
+For advanced patterns, see [references/di-patterns.md](references/di-patterns.md).
diff --git a/skills/angular-di/references/di-patterns.md b/skills/angular-di/references/di-patterns.md
new file mode 100644
index 0000000..03a9397
--- /dev/null
+++ b/skills/angular-di/references/di-patterns.md
@@ -0,0 +1,519 @@
+# Angular Dependency Injection Patterns
+
+## Table of Contents
+- [Service Patterns](#service-patterns)
+- [Abstract Classes as Tokens](#abstract-classes-as-tokens)
+- [Hierarchical Injection](#hierarchical-injection)
+- [Dynamic Providers](#dynamic-providers)
+- [Testing with DI](#testing-with-di)
+- [DestroyRef and Cleanup](#destroyref-and-cleanup)
+
+## Service Patterns
+
+### Facade Service
+
+Combine multiple services into a single API:
+
+```typescript
+@Injectable({ providedIn: 'root' })
+export class ShopFacade {
+ private productService = inject(Product);
+ private cartService = inject(Cart);
+ private orderService = inject(Order);
+
+ // Expose combined state
+ readonly products = this.productService.products;
+ readonly cart = this.cartService.items;
+ readonly cartTotal = this.cartService.total;
+
+ // Unified actions
+ addToCart(productId: string, quantity: number) {
+ const product = this.productService.getById(productId);
+ if (product) {
+ this.cartService.add(product, quantity);
+ }
+ }
+
+ async checkout() {
+ const items = this.cartService.items();
+ const order = await this.orderService.create(items);
+ this.cartService.clear();
+ return order;
+ }
+}
+```
+
+### State Service Pattern
+
+```typescript
+interface UserState {
+ user: User | null;
+ loading: boolean;
+ error: string | null;
+}
+
+@Injectable({ providedIn: 'root' })
+export class UserState {
+ private state = signal({
+ user: null,
+ loading: false,
+ error: null,
+ });
+
+ // Selectors
+ readonly user = computed(() => this.state().user);
+ readonly loading = computed(() => this.state().loading);
+ readonly error = computed(() => this.state().error);
+ readonly isAuthenticated = computed(() => this.state().user !== null);
+
+ // Actions
+ setUser(user: User) {
+ this.state.update(s => ({ ...s, user, loading: false, error: null }));
+ }
+
+ setLoading() {
+ this.state.update(s => ({ ...s, loading: true, error: null }));
+ }
+
+ setError(error: string) {
+ this.state.update(s => ({ ...s, loading: false, error }));
+ }
+
+ clear() {
+ this.state.set({ user: null, loading: false, error: null });
+ }
+}
+```
+
+### Repository Pattern
+
+```typescript
+// Generic repository interface
+export abstract class Repository {
+ abstract getAll(): Promise;
+ abstract getById(id: string): Promise;
+ abstract create(item: Omit): Promise;
+ abstract update(id: string, item: Partial): Promise;
+ abstract delete(id: string): Promise;
+}
+
+// HTTP implementation
+@Injectable()
+export class HttpUserRepo extends Repository {
+ private http = inject(HttpClient);
+ private apiUrl = inject(API_URL);
+
+ async getAll(): Promise {
+ return firstValueFrom(this.http.get(`${this.apiUrl}/users`));
+ }
+
+ async getById(id: string): Promise {
+ return firstValueFrom(
+ this.http.get(`${this.apiUrl}/users/${id}`).pipe(
+ catchError(() => of(null))
+ )
+ );
+ }
+
+ async create(user: Omit): Promise {
+ return firstValueFrom(this.http.post(`${this.apiUrl}/users`, user));
+ }
+
+ async update(id: string, user: Partial): Promise {
+ return firstValueFrom(this.http.patch(`${this.apiUrl}/users/${id}`, user));
+ }
+
+ async delete(id: string): Promise {
+ await firstValueFrom(this.http.delete(`${this.apiUrl}/users/${id}`));
+ }
+}
+
+// Provide implementation
+{ provide: Repository, useClass: HttpUserRepo }
+```
+
+## Abstract Classes as Tokens
+
+Use abstract classes for better type safety:
+
+```typescript
+// Abstract service definition
+export abstract class Logger {
+ abstract log(message: string): void;
+ abstract error(message: string, error?: Error): void;
+ abstract warn(message: string): void;
+}
+
+// Console implementation
+@Injectable()
+export class ConsoleLog extends Logger {
+ log(message: string) {
+ console.log(`[LOG] ${message}`);
+ }
+
+ error(message: string, error?: Error) {
+ console.error(`[ERROR] ${message}`, error);
+ }
+
+ warn(message: string) {
+ console.warn(`[WARN] ${message}`);
+ }
+}
+
+// Remote implementation
+@Injectable()
+export class RemoteLog extends Logger {
+ private http = inject(HttpClient);
+
+ log(message: string) {
+ this.send('log', message);
+ }
+
+ error(message: string, error?: Error) {
+ this.send('error', message, error);
+ }
+
+ warn(message: string) {
+ this.send('warn', message);
+ }
+
+ private send(level: string, message: string, error?: Error) {
+ this.http.post('/api/logs', { level, message, error: error?.message }).subscribe();
+ }
+}
+
+// Provide based on environment
+{
+ provide: Logger,
+ useClass: environment.production ? RemoteLog : ConsoleLog,
+}
+
+// Inject using abstract class
+@Injectable({ providedIn: 'root' })
+export class User {
+ private logger = inject(Logger);
+
+ createUser(user: UserData) {
+ this.logger.log(`Creating user: ${user.email}`);
+ // ...
+ }
+}
+```
+
+## Hierarchical Injection
+
+### Component Tree Injection
+
+```typescript
+// Parent provides service
+@Component({
+ selector: 'app-form-container',
+ providers: [FormState],
+ template: `
+
+
+
+ `,
+})
+export class FormContainer {
+ private formState = inject(FormState);
+}
+
+// Children share same instance
+@Component({
+ selector: 'app-form-body',
+ template: `...`,
+})
+export class FormBody {
+ // Gets same instance as parent
+ private formState = inject(FormState);
+}
+
+// Grandchildren also share
+@Component({
+ selector: 'app-form-field',
+ template: `...`,
+})
+export class FormField {
+ // Gets same instance from ancestor
+ private formState = inject(FormState);
+}
+```
+
+### viewProviders vs providers
+
+```typescript
+@Component({
+ selector: 'app-tabs',
+ // providers: Available to component AND content children
+ providers: [TabsSvc],
+
+ // viewProviders: Available to component AND view children only
+ // NOT available to content children ()
+ viewProviders: [InternalTabs],
+
+ template: `
+
+
+
+ `,
+})
+export class Tabs {}
+```
+
+## Dynamic Providers
+
+### Feature Flags
+
+```typescript
+export const FEATURE_FLAGS = new InjectionToken('FeatureFlags');
+
+interface FeatureFlags {
+ newDashboard: boolean;
+ betaFeatures: boolean;
+ experimentalApi: boolean;
+}
+
+// Load from API
+{
+ provide: FEATURE_FLAGS,
+ useFactory: async () => {
+ const response = await fetch('/api/features');
+ return response.json();
+ },
+}
+
+// Use in components
+@Component({...})
+export class Dashboard {
+ private features = inject(FEATURE_FLAGS);
+
+ showNewDashboard = this.features.newDashboard;
+}
+```
+
+### Platform-Specific Services
+
+```typescript
+export abstract class Storage {
+ abstract get(key: string): string | null;
+ abstract set(key: string, value: string): void;
+ abstract remove(key: string): void;
+}
+
+@Injectable()
+export class BrowserStorage extends Storage {
+ get(key: string) { return localStorage.getItem(key); }
+ set(key: string, value: string) { localStorage.setItem(key, value); }
+ remove(key: string) { localStorage.removeItem(key); }
+}
+
+@Injectable()
+export class ServerStorage extends Storage {
+ private store = new Map();
+
+ get(key: string) { return this.store.get(key) ?? null; }
+ set(key: string, value: string) { this.store.set(key, value); }
+ remove(key: string) { this.store.delete(key); }
+}
+
+// Provide based on platform
+import { PLATFORM_ID, isPlatformBrowser } from '@angular/common';
+
+{
+ provide: Storage,
+ useFactory: (platformId: object) => {
+ return isPlatformBrowser(platformId)
+ ? new BrowserStorage()
+ : new ServerStorage();
+ },
+ deps: [PLATFORM_ID],
+}
+```
+
+## Testing with DI
+
+### Mocking Services
+
+```typescript
+describe('UserCmpt', () => {
+ let userServiceSpy: jasmine.SpyObj;
+
+ beforeEach(async () => {
+ userServiceSpy = jasmine.createSpyObj('User', ['getUser', 'updateUser']);
+ userServiceSpy.getUser.and.returnValue(of({ id: '1', name: 'Test' }));
+
+ await TestBed.configureTestingModule({
+ imports: [UserCmpt],
+ providers: [
+ { provide: User, useValue: userServiceSpy },
+ ],
+ }).compileComponents();
+ });
+
+ it('should load user', () => {
+ const fixture = TestBed.createComponent(UserCmpt);
+ fixture.detectChanges();
+
+ expect(userServiceSpy.getUser).toHaveBeenCalled();
+ });
+});
+```
+
+### Overriding Providers
+
+```typescript
+describe('with different config', () => {
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [App],
+ })
+ .overrideProvider(APP_CONFIG, {
+ useValue: { apiUrl: 'http://test-api.com' },
+ })
+ .compileComponents();
+ });
+});
+```
+
+### Testing Injection Tokens
+
+```typescript
+describe('API_URL token', () => {
+ it('should provide correct URL', () => {
+ TestBed.configureTestingModule({
+ providers: [
+ { provide: API_URL, useValue: 'https://api.test.com' },
+ ],
+ });
+
+ const apiUrl = TestBed.inject(API_URL);
+ expect(apiUrl).toBe('https://api.test.com');
+ });
+});
+```
+
+## DestroyRef and Cleanup
+
+### Automatic Cleanup
+
+```typescript
+import { DestroyRef, inject } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+@Component({...})
+export class Data {
+ private destroyRef = inject(DestroyRef);
+ private dataService = inject(DataSvc);
+
+ constructor() {
+ // Auto-unsubscribe when component destroys
+ this.dataService.data$
+ .pipe(takeUntilDestroyed())
+ .subscribe(data => {
+ console.log(data);
+ });
+ }
+
+ // Or use DestroyRef directly
+ ngOnInit() {
+ const subscription = this.dataService.updates$.subscribe();
+
+ this.destroyRef.onDestroy(() => {
+ subscription.unsubscribe();
+ console.log('Cleaned up!');
+ });
+ }
+}
+```
+
+### In Services
+
+```typescript
+@Injectable()
+export class WebSocket {
+ private destroyRef = inject(DestroyRef);
+ private socket: WebSocket | null = null;
+
+ constructor() {
+ this.destroyRef.onDestroy(() => {
+ this.socket?.close();
+ });
+ }
+
+ connect(url: string) {
+ this.socket = new WebSocket(url);
+ }
+}
+```
+
+### takeUntilDestroyed Outside Constructor
+
+```typescript
+@Component({...})
+export class My {
+ private destroyRef = inject(DestroyRef);
+
+ loadData() {
+ // Pass destroyRef when using outside constructor
+ this.http.get('/api/data')
+ .pipe(takeUntilDestroyed(this.destroyRef))
+ .subscribe();
+ }
+}
+```
+
+## Injection Context Utilities
+
+### assertInInjectionContext
+
+```typescript
+import { assertInInjectionContext, inject } from '@angular/core';
+
+export function injectLogger(): Logger {
+ assertInInjectionContext(injectLogger);
+ return inject(Logger);
+}
+
+// Usage - must be called in injection context
+@Component({...})
+export class My2 {
+ private logger = injectLogger(); // OK
+
+ someMethod() {
+ // injectLogger(); // ERROR - not in injection context
+ }
+}
+```
+
+### Custom inject Functions
+
+```typescript
+// Create reusable injection utilities
+export function injectRouteParam(param: string): Signal {
+ assertInInjectionContext(injectRouteParam);
+
+ const route = inject(ActivatedRoute);
+ return toSignal(
+ route.paramMap.pipe(map(params => params.get(param))),
+ { initialValue: null }
+ );
+}
+
+export function injectQueryParam(param: string): Signal {
+ assertInInjectionContext(injectQueryParam);
+
+ const route = inject(ActivatedRoute);
+ return toSignal(
+ route.queryParamMap.pipe(map(params => params.get(param))),
+ { initialValue: null }
+ );
+}
+
+// Usage
+@Component({...})
+export class UserCmpt {
+ userId = injectRouteParam('id');
+ tab = injectQueryParam('tab');
+}
+```
diff --git a/skills/angular-directives/LICENSE.txt b/skills/angular-directives/LICENSE.txt
new file mode 100644
index 0000000..7a4a3ea
--- /dev/null
+++ b/skills/angular-directives/LICENSE.txt
@@ -0,0 +1,202 @@
+
+ Apache License
+ Version 2.0, January 2004
+ http://www.apache.org/licenses/
+
+ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+ 1. Definitions.
+
+ "License" shall mean the terms and conditions for use, reproduction,
+ and distribution as defined by Sections 1 through 9 of this document.
+
+ "Licensor" shall mean the copyright owner or entity authorized by
+ the copyright owner that is granting the License.
+
+ "Legal Entity" shall mean the union of the acting entity and all
+ other entities that control, are controlled by, or are under common
+ control with that entity. For the purposes of this definition,
+ "control" means (i) the power, direct or indirect, to cause the
+ direction or management of such entity, whether by contract or
+ otherwise, or (ii) ownership of fifty percent (50%) or more of the
+ outstanding shares, or (iii) beneficial ownership of such entity.
+
+ "You" (or "Your") shall mean an individual or Legal Entity
+ exercising permissions granted by this License.
+
+ "Source" form shall mean the preferred form for making modifications,
+ including but not limited to software source code, documentation
+ source, and configuration files.
+
+ "Object" form shall mean any form resulting from mechanical
+ transformation or translation of a Source form, including but
+ not limited to compiled object code, generated documentation,
+ and conversions to other media types.
+
+ "Work" shall mean the work of authorship, whether in Source or
+ Object form, made available under the License, as indicated by a
+ copyright notice that is included in or attached to the work
+ (an example is provided in the Appendix below).
+
+ "Derivative Works" shall mean any work, whether in Source or Object
+ form, that is based on (or derived from) the Work and for which the
+ editorial revisions, annotations, elaborations, or other modifications
+ represent, as a whole, an original work of authorship. For the purposes
+ of this License, Derivative Works shall not include works that remain
+ separable from, or merely link (or bind by name) to the interfaces of,
+ the Work and Derivative Works thereof.
+
+ "Contribution" shall mean any work of authorship, including
+ the original version of the Work and any modifications or additions
+ to that Work or Derivative Works thereof, that is intentionally
+ submitted to Licensor for inclusion in the Work by the copyright owner
+ or by an individual or Legal Entity authorized to submit on behalf of
+ the copyright owner. For the purposes of this definition, "submitted"
+ means any form of electronic, verbal, or written communication sent
+ to the Licensor or its representatives, including but not limited to
+ communication on electronic mailing lists, source code control systems,
+ and issue tracking systems that are managed by, or on behalf of, the
+ Licensor for the purpose of discussing and improving the Work, but
+ excluding communication that is conspicuously marked or otherwise
+ designated in writing by the copyright owner as "Not a Contribution."
+
+ "Contributor" shall mean Licensor and any individual or Legal Entity
+ on behalf of whom a Contribution has been received by Licensor and
+ subsequently incorporated within the Work.
+
+ 2. Grant of Copyright License. Subject to the terms and conditions of
+ this License, each Contributor hereby grants to You a perpetual,
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+ copyright license to reproduce, prepare Derivative Works of,
+ publicly display, publicly perform, sublicense, and distribute the
+ Work and such Derivative Works in Source or Object form.
+
+ 3. Grant of Patent License. Subject to the terms and conditions of
+ this License, each Contributor hereby grants to You a perpetual,
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+ (except as stated in this section) patent license to make, have made,
+ use, offer to sell, sell, import, and otherwise transfer the Work,
+ where such license applies only to those patent claims licensable
+ by such Contributor that are necessarily infringed by their
+ Contribution(s) alone or by combination of their Contribution(s)
+ with the Work to which such Contribution(s) was submitted. If You
+ institute patent litigation against any entity (including a
+ cross-claim or counterclaim in a lawsuit) alleging that the Work
+ or a Contribution incorporated within the Work constitutes direct
+ or contributory patent infringement, then any patent licenses
+ granted to You under this License for that Work shall terminate
+ as of the date such litigation is filed.
+
+ 4. Redistribution. You may reproduce and distribute copies of the
+ Work or Derivative Works thereof in any medium, with or without
+ modifications, and in Source or Object form, provided that You
+ meet the following conditions:
+
+ (a) You must give any other recipients of the Work or
+ Derivative Works a copy of this License; and
+
+ (b) You must cause any modified files to carry prominent notices
+ stating that You changed the files; and
+
+ (c) You must retain, in the Source form of any Derivative Works
+ that You distribute, all copyright, patent, trademark, and
+ attribution notices from the Source form of the Work,
+ excluding those notices that do not pertain to any part of
+ the Derivative Works; and
+
+ (d) If the Work includes a "NOTICE" text file as part of its
+ distribution, then any Derivative Works that You distribute must
+ include a readable copy of the attribution notices contained
+ within such NOTICE file, excluding those notices that do not
+ pertain to any part of the Derivative Works, in at least one
+ of the following places: within a NOTICE text file distributed
+ as part of the Derivative Works; within the Source form or
+ documentation, if provided along with the Derivative Works; or,
+ within a display generated by the Derivative Works, if and
+ wherever such third-party notices normally appear. The contents
+ of the NOTICE file are for informational purposes only and
+ do not modify the License. You may add Your own attribution
+ notices within Derivative Works that You distribute, alongside
+ or as an addendum to the NOTICE text from the Work, provided
+ that such additional attribution notices cannot be construed
+ as modifying the License.
+
+ You may add Your own copyright statement to Your modifications and
+ may provide additional or different license terms and conditions
+ for use, reproduction, or distribution of Your modifications, or
+ for any such Derivative Works as a whole, provided Your use,
+ reproduction, and distribution of the Work otherwise complies with
+ the conditions stated in this License.
+
+ 5. Submission of Contributions. Unless You explicitly state otherwise,
+ any Contribution intentionally submitted for inclusion in the Work
+ by You to the Licensor shall be under the terms and conditions of
+ this License, without any additional terms or conditions.
+ Notwithstanding the above, nothing herein shall supersede or modify
+ the terms of any separate license agreement you may have executed
+ with Licensor regarding such Contributions.
+
+ 6. Trademarks. This License does not grant permission to use the trade
+ names, trademarks, service marks, or product names of the Licensor,
+ except as required for reasonable and customary use in describing the
+ origin of the Work and reproducing the content of the NOTICE file.
+
+ 7. Disclaimer of Warranty. Unless required by applicable law or
+ agreed to in writing, Licensor provides the Work (and each
+ Contributor provides its Contributions) on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+ implied, including, without limitation, any warranties or conditions
+ of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+ PARTICULAR PURPOSE. You are solely responsible for determining the
+ appropriateness of using or redistributing the Work and assume any
+ risks associated with Your exercise of permissions under this License.
+
+ 8. Limitation of Liability. In no event and under no legal theory,
+ whether in tort (including negligence), contract, or otherwise,
+ unless required by applicable law (such as deliberate and grossly
+ negligent acts) or agreed to in writing, shall any Contributor be
+ liable to You for damages, including any direct, indirect, special,
+ incidental, or consequential damages of any character arising as a
+ result of this License or out of the use or inability to use the
+ Work (including but not limited to damages for loss of goodwill,
+ work stoppage, computer failure or malfunction, or any and all
+ other commercial damages or losses), even if such Contributor
+ has been advised of the possibility of such damages.
+
+ 9. Accepting Warranty or Additional Liability. While redistributing
+ the Work or Derivative Works thereof, You may choose to offer,
+ and charge a fee for, acceptance of support, warranty, indemnity,
+ or other liability obligations and/or rights consistent with this
+ License. However, in accepting such obligations, You may act only
+ on Your own behalf and on Your sole responsibility, not on behalf
+ of any other Contributor, and only if You agree to indemnify,
+ defend, and hold each Contributor harmless for any liability
+ incurred by, or claims asserted against, such Contributor by reason
+ of your accepting any such warranty or additional liability.
+
+ END OF TERMS AND CONDITIONS
+
+ APPENDIX: How to apply the Apache License to your work.
+
+ To apply the Apache License to your work, attach the following
+ boilerplate notice, with the fields enclosed by brackets "[]"
+ replaced with your own identifying information. (Don't include
+ the brackets!) The text should be enclosed in the appropriate
+ comment syntax for the file format. We also recommend that a
+ file or class name and description of purpose be included on the
+ same "printed page" as the copyright notice for easier
+ identification within third-party archives.
+
+ Copyright [yyyy] [name of copyright owner]
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
\ No newline at end of file
diff --git a/skills/angular-directives/SKILL.md b/skills/angular-directives/SKILL.md
new file mode 100644
index 0000000..f0370ef
--- /dev/null
+++ b/skills/angular-directives/SKILL.md
@@ -0,0 +1,443 @@
+---
+name: angular-directives
+description: Create custom directives in Angular v20+ for DOM manipulation and behavior extension. Use for attribute directives that modify element behavior/appearance, structural directives for portals/overlays, and host directives for composition. Triggers on creating reusable DOM behaviors, extending element functionality, or composing behaviors across components. Note - use native @if/@for/@switch for control flow, not custom structural directives.
+license: Complete terms in LICENSE.txt
+metadata:
+ category: development
+ source:
+ repository: https://github.com/analogjs/angular-skills
+ path: skills/angular-directives
+---
+
+# Angular Directives
+
+Create custom directives for reusable DOM manipulation and behavior in Angular v20+.
+
+## Attribute Directives
+
+Modify the appearance or behavior of an element:
+
+```typescript
+import { Directive, input, effect, inject, ElementRef } from '@angular/core';
+
+@Directive({
+ selector: '[appHighlight]',
+})
+export class Highlight {
+ private el = inject(ElementRef);
+
+ // Input with alias matching selector
+ color = input('yellow', { alias: 'appHighlight' });
+
+ constructor() {
+ effect(() => {
+ this.el.nativeElement.style.backgroundColor = this.color();
+ });
+ }
+}
+
+// Usage:
+```
diff --git a/skills/angular-forms/LICENSE.txt b/skills/angular-forms/LICENSE.txt
new file mode 100644
index 0000000..7a4a3ea
--- /dev/null
+++ b/skills/angular-forms/LICENSE.txt
@@ -0,0 +1,202 @@
+
+ Apache License
+ Version 2.0, January 2004
+ http://www.apache.org/licenses/
+
+ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+ 1. Definitions.
+
+ "License" shall mean the terms and conditions for use, reproduction,
+ and distribution as defined by Sections 1 through 9 of this document.
+
+ "Licensor" shall mean the copyright owner or entity authorized by
+ the copyright owner that is granting the License.
+
+ "Legal Entity" shall mean the union of the acting entity and all
+ other entities that control, are controlled by, or are under common
+ control with that entity. For the purposes of this definition,
+ "control" means (i) the power, direct or indirect, to cause the
+ direction or management of such entity, whether by contract or
+ otherwise, or (ii) ownership of fifty percent (50%) or more of the
+ outstanding shares, or (iii) beneficial ownership of such entity.
+
+ "You" (or "Your") shall mean an individual or Legal Entity
+ exercising permissions granted by this License.
+
+ "Source" form shall mean the preferred form for making modifications,
+ including but not limited to software source code, documentation
+ source, and configuration files.
+
+ "Object" form shall mean any form resulting from mechanical
+ transformation or translation of a Source form, including but
+ not limited to compiled object code, generated documentation,
+ and conversions to other media types.
+
+ "Work" shall mean the work of authorship, whether in Source or
+ Object form, made available under the License, as indicated by a
+ copyright notice that is included in or attached to the work
+ (an example is provided in the Appendix below).
+
+ "Derivative Works" shall mean any work, whether in Source or Object
+ form, that is based on (or derived from) the Work and for which the
+ editorial revisions, annotations, elaborations, or other modifications
+ represent, as a whole, an original work of authorship. For the purposes
+ of this License, Derivative Works shall not include works that remain
+ separable from, or merely link (or bind by name) to the interfaces of,
+ the Work and Derivative Works thereof.
+
+ "Contribution" shall mean any work of authorship, including
+ the original version of the Work and any modifications or additions
+ to that Work or Derivative Works thereof, that is intentionally
+ submitted to Licensor for inclusion in the Work by the copyright owner
+ or by an individual or Legal Entity authorized to submit on behalf of
+ the copyright owner. For the purposes of this definition, "submitted"
+ means any form of electronic, verbal, or written communication sent
+ to the Licensor or its representatives, including but not limited to
+ communication on electronic mailing lists, source code control systems,
+ and issue tracking systems that are managed by, or on behalf of, the
+ Licensor for the purpose of discussing and improving the Work, but
+ excluding communication that is conspicuously marked or otherwise
+ designated in writing by the copyright owner as "Not a Contribution."
+
+ "Contributor" shall mean Licensor and any individual or Legal Entity
+ on behalf of whom a Contribution has been received by Licensor and
+ subsequently incorporated within the Work.
+
+ 2. Grant of Copyright License. Subject to the terms and conditions of
+ this License, each Contributor hereby grants to You a perpetual,
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+ copyright license to reproduce, prepare Derivative Works of,
+ publicly display, publicly perform, sublicense, and distribute the
+ Work and such Derivative Works in Source or Object form.
+
+ 3. Grant of Patent License. Subject to the terms and conditions of
+ this License, each Contributor hereby grants to You a perpetual,
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+ (except as stated in this section) patent license to make, have made,
+ use, offer to sell, sell, import, and otherwise transfer the Work,
+ where such license applies only to those patent claims licensable
+ by such Contributor that are necessarily infringed by their
+ Contribution(s) alone or by combination of their Contribution(s)
+ with the Work to which such Contribution(s) was submitted. If You
+ institute patent litigation against any entity (including a
+ cross-claim or counterclaim in a lawsuit) alleging that the Work
+ or a Contribution incorporated within the Work constitutes direct
+ or contributory patent infringement, then any patent licenses
+ granted to You under this License for that Work shall terminate
+ as of the date such litigation is filed.
+
+ 4. Redistribution. You may reproduce and distribute copies of the
+ Work or Derivative Works thereof in any medium, with or without
+ modifications, and in Source or Object form, provided that You
+ meet the following conditions:
+
+ (a) You must give any other recipients of the Work or
+ Derivative Works a copy of this License; and
+
+ (b) You must cause any modified files to carry prominent notices
+ stating that You changed the files; and
+
+ (c) You must retain, in the Source form of any Derivative Works
+ that You distribute, all copyright, patent, trademark, and
+ attribution notices from the Source form of the Work,
+ excluding those notices that do not pertain to any part of
+ the Derivative Works; and
+
+ (d) If the Work includes a "NOTICE" text file as part of its
+ distribution, then any Derivative Works that You distribute must
+ include a readable copy of the attribution notices contained
+ within such NOTICE file, excluding those notices that do not
+ pertain to any part of the Derivative Works, in at least one
+ of the following places: within a NOTICE text file distributed
+ as part of the Derivative Works; within the Source form or
+ documentation, if provided along with the Derivative Works; or,
+ within a display generated by the Derivative Works, if and
+ wherever such third-party notices normally appear. The contents
+ of the NOTICE file are for informational purposes only and
+ do not modify the License. You may add Your own attribution
+ notices within Derivative Works that You distribute, alongside
+ or as an addendum to the NOTICE text from the Work, provided
+ that such additional attribution notices cannot be construed
+ as modifying the License.
+
+ You may add Your own copyright statement to Your modifications and
+ may provide additional or different license terms and conditions
+ for use, reproduction, or distribution of Your modifications, or
+ for any such Derivative Works as a whole, provided Your use,
+ reproduction, and distribution of the Work otherwise complies with
+ the conditions stated in this License.
+
+ 5. Submission of Contributions. Unless You explicitly state otherwise,
+ any Contribution intentionally submitted for inclusion in the Work
+ by You to the Licensor shall be under the terms and conditions of
+ this License, without any additional terms or conditions.
+ Notwithstanding the above, nothing herein shall supersede or modify
+ the terms of any separate license agreement you may have executed
+ with Licensor regarding such Contributions.
+
+ 6. Trademarks. This License does not grant permission to use the trade
+ names, trademarks, service marks, or product names of the Licensor,
+ except as required for reasonable and customary use in describing the
+ origin of the Work and reproducing the content of the NOTICE file.
+
+ 7. Disclaimer of Warranty. Unless required by applicable law or
+ agreed to in writing, Licensor provides the Work (and each
+ Contributor provides its Contributions) on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+ implied, including, without limitation, any warranties or conditions
+ of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+ PARTICULAR PURPOSE. You are solely responsible for determining the
+ appropriateness of using or redistributing the Work and assume any
+ risks associated with Your exercise of permissions under this License.
+
+ 8. Limitation of Liability. In no event and under no legal theory,
+ whether in tort (including negligence), contract, or otherwise,
+ unless required by applicable law (such as deliberate and grossly
+ negligent acts) or agreed to in writing, shall any Contributor be
+ liable to You for damages, including any direct, indirect, special,
+ incidental, or consequential damages of any character arising as a
+ result of this License or out of the use or inability to use the
+ Work (including but not limited to damages for loss of goodwill,
+ work stoppage, computer failure or malfunction, or any and all
+ other commercial damages or losses), even if such Contributor
+ has been advised of the possibility of such damages.
+
+ 9. Accepting Warranty or Additional Liability. While redistributing
+ the Work or Derivative Works thereof, You may choose to offer,
+ and charge a fee for, acceptance of support, warranty, indemnity,
+ or other liability obligations and/or rights consistent with this
+ License. However, in accepting such obligations, You may act only
+ on Your own behalf and on Your sole responsibility, not on behalf
+ of any other Contributor, and only if You agree to indemnify,
+ defend, and hold each Contributor harmless for any liability
+ incurred by, or claims asserted against, such Contributor by reason
+ of your accepting any such warranty or additional liability.
+
+ END OF TERMS AND CONDITIONS
+
+ APPENDIX: How to apply the Apache License to your work.
+
+ To apply the Apache License to your work, attach the following
+ boilerplate notice, with the fields enclosed by brackets "[]"
+ replaced with your own identifying information. (Don't include
+ the brackets!) The text should be enclosed in the appropriate
+ comment syntax for the file format. We also recommend that a
+ file or class name and description of purpose be included on the
+ same "printed page" as the copyright notice for easier
+ identification within third-party archives.
+
+ Copyright [yyyy] [name of copyright owner]
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
\ No newline at end of file
diff --git a/skills/angular-forms/SKILL.md b/skills/angular-forms/SKILL.md
new file mode 100644
index 0000000..cadd242
--- /dev/null
+++ b/skills/angular-forms/SKILL.md
@@ -0,0 +1,440 @@
+---
+name: angular-forms
+description: Build signal-based forms in Angular v21+ using the new Signal Forms API. Use for form creation with automatic two-way binding, schema-based validation, field state management, and dynamic forms. Triggers on form implementation, adding validation, creating multi-step forms, or building forms with conditional fields. Signal Forms are experimental but recommended for new Angular projects.
+license: Complete terms in LICENSE.txt
+metadata:
+ category: development
+ source:
+ repository: https://github.com/analogjs/angular-skills
+ path: skills/angular-forms
+---
+
+# Angular Signal Forms
+
+Build type-safe, reactive forms using Angular's Signal Forms API. Signal Forms provide automatic two-way binding, schema-based validation, and reactive field state.
+
+**Note:** Signal Forms are experimental in Angular v21. For production apps requiring stability, see [references/form-patterns.md](references/form-patterns.md) for Reactive Forms patterns.
+
+## Basic Setup
+
+```typescript
+import { Component, signal } from '@angular/core';
+import { form, FormField, required, email } from '@angular/forms/signals';
+
+interface LoginData {
+ email: string;
+ password: string;
+}
+
+@Component({
+ selector: 'app-login',
+ imports: [FormField],
+ template: `
+
+ `,
+})
+export class Login {
+ // Form model - a writable signal
+ loginModel = signal({
+ email: '',
+ password: '',
+ });
+
+ // Create form with validation schema
+ loginForm = form(this.loginModel, (schemaPath) => {
+ required(schemaPath.email, { message: 'Email is required' });
+ email(schemaPath.email, { message: 'Enter a valid email address' });
+ required(schemaPath.password, { message: 'Password is required' });
+ });
+
+ onSubmit(event: Event) {
+ event.preventDefault();
+ if (this.loginForm().valid()) {
+ const credentials = this.loginModel();
+ console.log('Submitting:', credentials);
+ }
+ }
+}
+```
+
+## Form Models
+
+Form models are writable signals that serve as the single source of truth:
+
+```typescript
+// Define interface for type safety
+interface UserProfile {
+ name: string;
+ email: string;
+ age: number | null;
+ preferences: {
+ newsletter: boolean;
+ theme: 'light' | 'dark';
+ };
+}
+
+// Create model signal with initial values
+const userModel = signal({
+ name: '',
+ email: '',
+ age: null,
+ preferences: {
+ newsletter: false,
+ theme: 'light',
+ },
+});
+
+// Create form from model
+const userForm = form(userModel);
+
+// Access nested fields via dot notation
+userForm.name // FieldTree
+userForm.preferences.theme // FieldTree<'light' | 'dark'>
+```
+
+### Reading Values
+
+```typescript
+// Read entire model
+const data = this.userModel();
+
+// Read field value via field state
+const name = this.userForm.name().value();
+const theme = this.userForm.preferences.theme().value();
+```
+
+### Updating Values
+
+```typescript
+// Replace entire model
+this.userModel.set({
+ name: 'Alice',
+ email: 'alice@example.com',
+ age: 30,
+ preferences: { newsletter: true, theme: 'dark' },
+});
+
+// Update single field
+this.userForm.name().value.set('Bob');
+this.userForm.age().value.update(age => (age ?? 0) + 1);
+```
+
+## Field State
+
+Each field provides reactive signals for validation, interaction, and availability:
+
+```typescript
+const emailField = this.form.email();
+
+// Validation state
+emailField.valid() // true if passes all validation
+emailField.invalid() // true if has validation errors
+emailField.errors() // array of error objects
+emailField.pending() // true if async validation in progress
+
+// Interaction state
+emailField.touched() // true after focus + blur
+emailField.dirty() // true after user modification
+
+// Availability state
+emailField.disabled() // true if field is disabled
+emailField.hidden() // true if field should be hidden
+emailField.readonly() // true if field is readonly
+
+// Value
+emailField.value() // current field value (signal)
+```
+
+### Form-Level State
+
+The form itself is also a field with aggregated state:
+
+```typescript
+// Form is valid when all interactive fields are valid
+this.form().valid()
+
+// Form is touched when any field is touched
+this.form().touched()
+
+// Form is dirty when any field is modified
+this.form().dirty()
+```
+
+## Validation
+
+### Built-in Validators
+
+```typescript
+import {
+ form, required, email, min, max,
+ minLength, maxLength, pattern
+} from '@angular/forms/signals';
+
+const userForm = form(this.userModel, (schemaPath) => {
+ // Required field
+ required(schemaPath.name, { message: 'Name is required' });
+
+ // Email format
+ email(schemaPath.email, { message: 'Invalid email' });
+
+ // Numeric range
+ min(schemaPath.age, 18, { message: 'Must be 18+' });
+ max(schemaPath.age, 120, { message: 'Invalid age' });
+
+ // String/array length
+ minLength(schemaPath.password, 8, { message: 'Min 8 characters' });
+ maxLength(schemaPath.bio, 500, { message: 'Max 500 characters' });
+
+ // Regex pattern
+ pattern(schemaPath.phone, /^\d{3}-\d{3}-\d{4}$/, {
+ message: 'Format: 555-123-4567',
+ });
+});
+```
+
+### Conditional Validation
+
+```typescript
+const orderForm = form(this.orderModel, (schemaPath) => {
+ required(schemaPath.promoCode, {
+ message: 'Promo code required for discounts',
+ when: ({ valueOf }) => valueOf(schemaPath.applyDiscount),
+ });
+});
+```
+
+### Custom Validators
+
+```typescript
+import { validate } from '@angular/forms/signals';
+
+const signupForm = form(this.signupModel, (schemaPath) => {
+ // Custom validation logic
+ validate(schemaPath.username, ({ value }) => {
+ if (value().includes(' ')) {
+ return { kind: 'noSpaces', message: 'Username cannot contain spaces' };
+ }
+ return null;
+ });
+});
+```
+
+### Cross-Field Validation
+
+```typescript
+const passwordForm = form(this.passwordModel, (schemaPath) => {
+ required(schemaPath.password);
+ required(schemaPath.confirmPassword);
+
+ // Compare fields
+ validate(schemaPath.confirmPassword, ({ value, valueOf }) => {
+ if (value() !== valueOf(schemaPath.password)) {
+ return { kind: 'mismatch', message: 'Passwords do not match' };
+ }
+ return null;
+ });
+});
+```
+
+### Async Validation
+
+```typescript
+import { validateHttp } from '@angular/forms/signals';
+
+const signupForm = form(this.signupModel, (schemaPath) => {
+ validateHttp(schemaPath.username, {
+ request: ({ value }) => `/api/check-username?u=${value()}`,
+ onSuccess: (response: { taken: boolean }) => {
+ if (response.taken) {
+ return { kind: 'taken', message: 'Username already taken' };
+ }
+ return null;
+ },
+ onError: () => ({
+ kind: 'networkError',
+ message: 'Could not verify username',
+ }),
+ });
+});
+```
+
+## Conditional Fields
+
+### Hidden Fields
+
+```typescript
+import { hidden } from '@angular/forms/signals';
+
+const profileForm = form(this.profileModel, (schemaPath) => {
+ hidden(schemaPath.publicUrl, ({ valueOf }) => !valueOf(schemaPath.isPublic));
+});
+```
+
+```html
+@if (!profileForm.publicUrl().hidden()) {
+
+}
+```
+
+### Disabled Fields
+
+```typescript
+import { disabled } from '@angular/forms/signals';
+
+const orderForm = form(this.orderModel, (schemaPath) => {
+ disabled(schemaPath.couponCode, ({ valueOf }) => valueOf(schemaPath.total) < 50);
+});
+```
+
+### Readonly Fields
+
+```typescript
+import { readonly } from '@angular/forms/signals';
+
+const accountForm = form(this.accountModel, (schemaPath) => {
+ readonly(schemaPath.username); // Always readonly
+});
+```
+
+## Form Submission
+
+```typescript
+import { submit } from '@angular/forms/signals';
+
+@Component({
+ template: `
+
+ `,
+})
+export class Login {
+ model = signal({ email: '', password: '' });
+ form = form(this.model, (schemaPath) => {
+ required(schemaPath.email);
+ required(schemaPath.password);
+ });
+
+ onSubmit(event: Event) {
+ event.preventDefault();
+
+ // submit() marks all fields touched and runs callback if valid
+ submit(this.form, async () => {
+ await this.authService.login(this.model());
+ });
+ }
+}
+```
+
+## Arrays and Dynamic Fields
+
+```typescript
+interface Order {
+ items: Array<{ product: string; quantity: number }>;
+}
+
+@Component({
+ template: `
+ @for (item of orderForm.items; track $index; let i = $index) {
+
+ }
+ `,
+})
+export class Form {
+ // Helper for cleaner templates
+ hasError(controlName: string, errorKey: string): boolean {
+ const control = this.form.get(controlName);
+ return control?.hasError(errorKey) && control?.touched || false;
+ }
+}
+```
+
+## Form Submission Pattern
+
+```typescript
+@Component({
+ template: `
+
+ `,
+})
+export class Form {
+ isSubmitting = false;
+
+ async onSubmit() {
+ if (this.form.invalid) {
+ this.form.markAllAsTouched();
+ return;
+ }
+
+ this.isSubmitting = true;
+ try {
+ await this.api.submit(this.form.getRawValue());
+ this.form.reset();
+ } catch (error) {
+ // Handle error
+ } finally {
+ this.isSubmitting = false;
+ }
+ }
+}
+```
diff --git a/skills/angular-http/LICENSE.txt b/skills/angular-http/LICENSE.txt
new file mode 100644
index 0000000..7a4a3ea
--- /dev/null
+++ b/skills/angular-http/LICENSE.txt
@@ -0,0 +1,202 @@
+
+ Apache License
+ Version 2.0, January 2004
+ http://www.apache.org/licenses/
+
+ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+ 1. Definitions.
+
+ "License" shall mean the terms and conditions for use, reproduction,
+ and distribution as defined by Sections 1 through 9 of this document.
+
+ "Licensor" shall mean the copyright owner or entity authorized by
+ the copyright owner that is granting the License.
+
+ "Legal Entity" shall mean the union of the acting entity and all
+ other entities that control, are controlled by, or are under common
+ control with that entity. For the purposes of this definition,
+ "control" means (i) the power, direct or indirect, to cause the
+ direction or management of such entity, whether by contract or
+ otherwise, or (ii) ownership of fifty percent (50%) or more of the
+ outstanding shares, or (iii) beneficial ownership of such entity.
+
+ "You" (or "Your") shall mean an individual or Legal Entity
+ exercising permissions granted by this License.
+
+ "Source" form shall mean the preferred form for making modifications,
+ including but not limited to software source code, documentation
+ source, and configuration files.
+
+ "Object" form shall mean any form resulting from mechanical
+ transformation or translation of a Source form, including but
+ not limited to compiled object code, generated documentation,
+ and conversions to other media types.
+
+ "Work" shall mean the work of authorship, whether in Source or
+ Object form, made available under the License, as indicated by a
+ copyright notice that is included in or attached to the work
+ (an example is provided in the Appendix below).
+
+ "Derivative Works" shall mean any work, whether in Source or Object
+ form, that is based on (or derived from) the Work and for which the
+ editorial revisions, annotations, elaborations, or other modifications
+ represent, as a whole, an original work of authorship. For the purposes
+ of this License, Derivative Works shall not include works that remain
+ separable from, or merely link (or bind by name) to the interfaces of,
+ the Work and Derivative Works thereof.
+
+ "Contribution" shall mean any work of authorship, including
+ the original version of the Work and any modifications or additions
+ to that Work or Derivative Works thereof, that is intentionally
+ submitted to Licensor for inclusion in the Work by the copyright owner
+ or by an individual or Legal Entity authorized to submit on behalf of
+ the copyright owner. For the purposes of this definition, "submitted"
+ means any form of electronic, verbal, or written communication sent
+ to the Licensor or its representatives, including but not limited to
+ communication on electronic mailing lists, source code control systems,
+ and issue tracking systems that are managed by, or on behalf of, the
+ Licensor for the purpose of discussing and improving the Work, but
+ excluding communication that is conspicuously marked or otherwise
+ designated in writing by the copyright owner as "Not a Contribution."
+
+ "Contributor" shall mean Licensor and any individual or Legal Entity
+ on behalf of whom a Contribution has been received by Licensor and
+ subsequently incorporated within the Work.
+
+ 2. Grant of Copyright License. Subject to the terms and conditions of
+ this License, each Contributor hereby grants to You a perpetual,
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+ copyright license to reproduce, prepare Derivative Works of,
+ publicly display, publicly perform, sublicense, and distribute the
+ Work and such Derivative Works in Source or Object form.
+
+ 3. Grant of Patent License. Subject to the terms and conditions of
+ this License, each Contributor hereby grants to You a perpetual,
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+ (except as stated in this section) patent license to make, have made,
+ use, offer to sell, sell, import, and otherwise transfer the Work,
+ where such license applies only to those patent claims licensable
+ by such Contributor that are necessarily infringed by their
+ Contribution(s) alone or by combination of their Contribution(s)
+ with the Work to which such Contribution(s) was submitted. If You
+ institute patent litigation against any entity (including a
+ cross-claim or counterclaim in a lawsuit) alleging that the Work
+ or a Contribution incorporated within the Work constitutes direct
+ or contributory patent infringement, then any patent licenses
+ granted to You under this License for that Work shall terminate
+ as of the date such litigation is filed.
+
+ 4. Redistribution. You may reproduce and distribute copies of the
+ Work or Derivative Works thereof in any medium, with or without
+ modifications, and in Source or Object form, provided that You
+ meet the following conditions:
+
+ (a) You must give any other recipients of the Work or
+ Derivative Works a copy of this License; and
+
+ (b) You must cause any modified files to carry prominent notices
+ stating that You changed the files; and
+
+ (c) You must retain, in the Source form of any Derivative Works
+ that You distribute, all copyright, patent, trademark, and
+ attribution notices from the Source form of the Work,
+ excluding those notices that do not pertain to any part of
+ the Derivative Works; and
+
+ (d) If the Work includes a "NOTICE" text file as part of its
+ distribution, then any Derivative Works that You distribute must
+ include a readable copy of the attribution notices contained
+ within such NOTICE file, excluding those notices that do not
+ pertain to any part of the Derivative Works, in at least one
+ of the following places: within a NOTICE text file distributed
+ as part of the Derivative Works; within the Source form or
+ documentation, if provided along with the Derivative Works; or,
+ within a display generated by the Derivative Works, if and
+ wherever such third-party notices normally appear. The contents
+ of the NOTICE file are for informational purposes only and
+ do not modify the License. You may add Your own attribution
+ notices within Derivative Works that You distribute, alongside
+ or as an addendum to the NOTICE text from the Work, provided
+ that such additional attribution notices cannot be construed
+ as modifying the License.
+
+ You may add Your own copyright statement to Your modifications and
+ may provide additional or different license terms and conditions
+ for use, reproduction, or distribution of Your modifications, or
+ for any such Derivative Works as a whole, provided Your use,
+ reproduction, and distribution of the Work otherwise complies with
+ the conditions stated in this License.
+
+ 5. Submission of Contributions. Unless You explicitly state otherwise,
+ any Contribution intentionally submitted for inclusion in the Work
+ by You to the Licensor shall be under the terms and conditions of
+ this License, without any additional terms or conditions.
+ Notwithstanding the above, nothing herein shall supersede or modify
+ the terms of any separate license agreement you may have executed
+ with Licensor regarding such Contributions.
+
+ 6. Trademarks. This License does not grant permission to use the trade
+ names, trademarks, service marks, or product names of the Licensor,
+ except as required for reasonable and customary use in describing the
+ origin of the Work and reproducing the content of the NOTICE file.
+
+ 7. Disclaimer of Warranty. Unless required by applicable law or
+ agreed to in writing, Licensor provides the Work (and each
+ Contributor provides its Contributions) on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+ implied, including, without limitation, any warranties or conditions
+ of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+ PARTICULAR PURPOSE. You are solely responsible for determining the
+ appropriateness of using or redistributing the Work and assume any
+ risks associated with Your exercise of permissions under this License.
+
+ 8. Limitation of Liability. In no event and under no legal theory,
+ whether in tort (including negligence), contract, or otherwise,
+ unless required by applicable law (such as deliberate and grossly
+ negligent acts) or agreed to in writing, shall any Contributor be
+ liable to You for damages, including any direct, indirect, special,
+ incidental, or consequential damages of any character arising as a
+ result of this License or out of the use or inability to use the
+ Work (including but not limited to damages for loss of goodwill,
+ work stoppage, computer failure or malfunction, or any and all
+ other commercial damages or losses), even if such Contributor
+ has been advised of the possibility of such damages.
+
+ 9. Accepting Warranty or Additional Liability. While redistributing
+ the Work or Derivative Works thereof, You may choose to offer,
+ and charge a fee for, acceptance of support, warranty, indemnity,
+ or other liability obligations and/or rights consistent with this
+ License. However, in accepting such obligations, You may act only
+ on Your own behalf and on Your sole responsibility, not on behalf
+ of any other Contributor, and only if You agree to indemnify,
+ defend, and hold each Contributor harmless for any liability
+ incurred by, or claims asserted against, such Contributor by reason
+ of your accepting any such warranty or additional liability.
+
+ END OF TERMS AND CONDITIONS
+
+ APPENDIX: How to apply the Apache License to your work.
+
+ To apply the Apache License to your work, attach the following
+ boilerplate notice, with the fields enclosed by brackets "[]"
+ replaced with your own identifying information. (Don't include
+ the brackets!) The text should be enclosed in the appropriate
+ comment syntax for the file format. We also recommend that a
+ file or class name and description of purpose be included on the
+ same "printed page" as the copyright notice for easier
+ identification within third-party archives.
+
+ Copyright [yyyy] [name of copyright owner]
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
\ No newline at end of file
diff --git a/skills/angular-http/SKILL.md b/skills/angular-http/SKILL.md
new file mode 100644
index 0000000..8c5eb93
--- /dev/null
+++ b/skills/angular-http/SKILL.md
@@ -0,0 +1,372 @@
+---
+name: angular-http
+description: Implement HTTP data fetching in Angular v20+ using resource(), httpResource(), and HttpClient. Use for API calls, data loading with signals, request/response handling, and interceptors. Triggers on data fetching, API integration, loading states, error handling, or converting Observable-based HTTP to signal-based patterns.
+license: Complete terms in LICENSE.txt
+metadata:
+ category: development
+ source:
+ repository: https://github.com/analogjs/angular-skills
+ path: skills/angular-http
+---
+
+# Angular HTTP & Data Fetching
+
+Fetch data in Angular using signal-based `resource()`, `httpResource()`, and the traditional `HttpClient`.
+
+## httpResource() - Signal-Based HTTP
+
+`httpResource()` wraps HttpClient with signal-based state management:
+
+```typescript
+import { Component, signal } from '@angular/core';
+import { httpResource } from '@angular/common/http';
+
+interface User {
+ id: number;
+ name: string;
+ email: string;
+}
+
+@Component({
+ selector: 'app-user-profile',
+ template: `
+ @if (userResource.isLoading()) {
+
+
+ @if (isLoading()) {
+
+ }
+
+ @if (hasMore()) {
+
+ }
+ `,
+})
+export class InfiniteUsers {
+ private http = inject(HttpClient);
+
+ private page = signal(1);
+ private users = signal([]);
+ private totalPages = signal(1);
+
+ allUsers = this.users.asReadonly();
+ isLoading = signal(false);
+ hasMore = computed(() => this.page() < this.totalPages());
+
+ constructor() {
+ this.loadPage(1);
+ }
+
+ loadMore() {
+ this.loadPage(this.page() + 1);
+ }
+
+ private async loadPage(page: number) {
+ this.isLoading.set(true);
+
+ try {
+ const response = await firstValueFrom(
+ this.http.get>('/api/users', {
+ params: { page: page.toString(), pageSize: '20' },
+ })
+ );
+
+ this.users.update(users => [...users, ...response.data]);
+ this.page.set(page);
+ this.totalPages.set(response.totalPages);
+ } finally {
+ this.isLoading.set(false);
+ }
+ }
+}
+```
+
+## File Upload
+
+### Single File Upload
+
+```typescript
+@Component({
+ template: `
+
+
+ @if (uploadProgress() !== null) {
+
+ }
+ `,
+})
+export class FileUpload {
+ private http = inject(HttpClient);
+
+ uploadProgress = signal(null);
+
+ onFileSelected(event: Event) {
+ const file = (event.target as HTMLInputElement).files?.[0];
+ if (!file) return;
+
+ const formData = new FormData();
+ formData.append('file', file);
+
+ this.http.post('/api/upload', formData, {
+ reportProgress: true,
+ observe: 'events',
+ }).subscribe(event => {
+ if (event.type === HttpEventType.UploadProgress && event.total) {
+ this.uploadProgress.set(Math.round(100 * event.loaded / event.total));
+ } else if (event.type === HttpEventType.Response) {
+ this.uploadProgress.set(null);
+ console.log('Upload complete:', event.body);
+ }
+ });
+ }
+}
+```
+
+### Multiple Files
+
+```typescript
+uploadFiles(files: FileList) {
+ const formData = new FormData();
+
+ for (let i = 0; i < files.length; i++) {
+ formData.append('files', files[i]);
+ }
+
+ return this.http.post<{ urls: string[] }>('/api/upload-multiple', formData);
+}
+```
+
+## Request Cancellation
+
+### With resource()
+
+```typescript
+// resource() automatically handles cancellation via abortSignal
+searchResource = resource({
+ params: () => ({ q: this.query() }),
+ loader: async ({ params, abortSignal }) => {
+ const response = await fetch(`/api/search?q=${params.q}`, {
+ signal: abortSignal, // Cancels if params change
+ });
+ return response.json();
+ },
+});
+```
+
+### With HttpClient
+
+```typescript
+@Component({...})
+export class Search implements OnDestroy {
+ private http = inject(HttpClient);
+ private destroyRef = inject(DestroyRef);
+
+ query = signal('');
+ results = signal([]);
+
+ private searchSubscription?: Subscription;
+
+ search() {
+ // Cancel previous request
+ this.searchSubscription?.unsubscribe();
+
+ this.searchSubscription = this.http
+ .get(`/api/search?q=${this.query()}`)
+ .pipe(takeUntilDestroyed(this.destroyRef))
+ .subscribe(results => this.results.set(results));
+ }
+}
+```
+
+### Debounced Search
+
+```typescript
+@Component({...})
+export class SearchDebounced {
+ query = signal('');
+
+ private http = inject(HttpClient);
+
+ results = toSignal(
+ toObservable(this.query).pipe(
+ debounceTime(300),
+ distinctUntilChanged(),
+ filter(q => q.length >= 2),
+ switchMap(q => this.http.get(`/api/search?q=${q}`)),
+ catchError(() => of([]))
+ ),
+ { initialValue: [] }
+ );
+}
+```
+
+## Testing HTTP
+
+### Testing httpResource
+
+```typescript
+describe('UserCmpt', () => {
+ let component: UserCmpt;
+ let httpMock: HttpTestingController;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ imports: [UserCmpt],
+ providers: [provideHttpClientTesting()],
+ });
+
+ component = TestBed.createComponent(UserCmpt).componentInstance;
+ httpMock = TestBed.inject(HttpTestingController);
+ });
+
+ it('should load user', () => {
+ component.userId.set('123');
+
+ const req = httpMock.expectOne('/api/users/123');
+ req.flush({ id: '123', name: 'Test User' });
+
+ expect(component.userResource.value()?.name).toBe('Test User');
+ });
+
+ afterEach(() => {
+ httpMock.verify();
+ });
+});
+```
+
+### Testing Services
+
+```typescript
+describe('User', () => {
+ let service: User;
+ let httpMock: HttpTestingController;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ providers: [
+ User,
+ provideHttpClient(),
+ provideHttpClientTesting(),
+ ],
+ });
+
+ service = TestBed.inject(User);
+ httpMock = TestBed.inject(HttpTestingController);
+ });
+
+ it('should create user', () => {
+ const newUser = { name: 'Test', email: 'test@example.com' };
+
+ service.create(newUser).subscribe(user => {
+ expect(user.id).toBeDefined();
+ expect(user.name).toBe('Test');
+ });
+
+ const req = httpMock.expectOne('/api/users');
+ expect(req.request.method).toBe('POST');
+ expect(req.request.body).toEqual(newUser);
+
+ req.flush({ id: '1', ...newUser });
+ });
+});
+```
diff --git a/skills/angular-routing/LICENSE.txt b/skills/angular-routing/LICENSE.txt
new file mode 100644
index 0000000..7a4a3ea
--- /dev/null
+++ b/skills/angular-routing/LICENSE.txt
@@ -0,0 +1,202 @@
+
+ Apache License
+ Version 2.0, January 2004
+ http://www.apache.org/licenses/
+
+ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+ 1. Definitions.
+
+ "License" shall mean the terms and conditions for use, reproduction,
+ and distribution as defined by Sections 1 through 9 of this document.
+
+ "Licensor" shall mean the copyright owner or entity authorized by
+ the copyright owner that is granting the License.
+
+ "Legal Entity" shall mean the union of the acting entity and all
+ other entities that control, are controlled by, or are under common
+ control with that entity. For the purposes of this definition,
+ "control" means (i) the power, direct or indirect, to cause the
+ direction or management of such entity, whether by contract or
+ otherwise, or (ii) ownership of fifty percent (50%) or more of the
+ outstanding shares, or (iii) beneficial ownership of such entity.
+
+ "You" (or "Your") shall mean an individual or Legal Entity
+ exercising permissions granted by this License.
+
+ "Source" form shall mean the preferred form for making modifications,
+ including but not limited to software source code, documentation
+ source, and configuration files.
+
+ "Object" form shall mean any form resulting from mechanical
+ transformation or translation of a Source form, including but
+ not limited to compiled object code, generated documentation,
+ and conversions to other media types.
+
+ "Work" shall mean the work of authorship, whether in Source or
+ Object form, made available under the License, as indicated by a
+ copyright notice that is included in or attached to the work
+ (an example is provided in the Appendix below).
+
+ "Derivative Works" shall mean any work, whether in Source or Object
+ form, that is based on (or derived from) the Work and for which the
+ editorial revisions, annotations, elaborations, or other modifications
+ represent, as a whole, an original work of authorship. For the purposes
+ of this License, Derivative Works shall not include works that remain
+ separable from, or merely link (or bind by name) to the interfaces of,
+ the Work and Derivative Works thereof.
+
+ "Contribution" shall mean any work of authorship, including
+ the original version of the Work and any modifications or additions
+ to that Work or Derivative Works thereof, that is intentionally
+ submitted to Licensor for inclusion in the Work by the copyright owner
+ or by an individual or Legal Entity authorized to submit on behalf of
+ the copyright owner. For the purposes of this definition, "submitted"
+ means any form of electronic, verbal, or written communication sent
+ to the Licensor or its representatives, including but not limited to
+ communication on electronic mailing lists, source code control systems,
+ and issue tracking systems that are managed by, or on behalf of, the
+ Licensor for the purpose of discussing and improving the Work, but
+ excluding communication that is conspicuously marked or otherwise
+ designated in writing by the copyright owner as "Not a Contribution."
+
+ "Contributor" shall mean Licensor and any individual or Legal Entity
+ on behalf of whom a Contribution has been received by Licensor and
+ subsequently incorporated within the Work.
+
+ 2. Grant of Copyright License. Subject to the terms and conditions of
+ this License, each Contributor hereby grants to You a perpetual,
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+ copyright license to reproduce, prepare Derivative Works of,
+ publicly display, publicly perform, sublicense, and distribute the
+ Work and such Derivative Works in Source or Object form.
+
+ 3. Grant of Patent License. Subject to the terms and conditions of
+ this License, each Contributor hereby grants to You a perpetual,
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+ (except as stated in this section) patent license to make, have made,
+ use, offer to sell, sell, import, and otherwise transfer the Work,
+ where such license applies only to those patent claims licensable
+ by such Contributor that are necessarily infringed by their
+ Contribution(s) alone or by combination of their Contribution(s)
+ with the Work to which such Contribution(s) was submitted. If You
+ institute patent litigation against any entity (including a
+ cross-claim or counterclaim in a lawsuit) alleging that the Work
+ or a Contribution incorporated within the Work constitutes direct
+ or contributory patent infringement, then any patent licenses
+ granted to You under this License for that Work shall terminate
+ as of the date such litigation is filed.
+
+ 4. Redistribution. You may reproduce and distribute copies of the
+ Work or Derivative Works thereof in any medium, with or without
+ modifications, and in Source or Object form, provided that You
+ meet the following conditions:
+
+ (a) You must give any other recipients of the Work or
+ Derivative Works a copy of this License; and
+
+ (b) You must cause any modified files to carry prominent notices
+ stating that You changed the files; and
+
+ (c) You must retain, in the Source form of any Derivative Works
+ that You distribute, all copyright, patent, trademark, and
+ attribution notices from the Source form of the Work,
+ excluding those notices that do not pertain to any part of
+ the Derivative Works; and
+
+ (d) If the Work includes a "NOTICE" text file as part of its
+ distribution, then any Derivative Works that You distribute must
+ include a readable copy of the attribution notices contained
+ within such NOTICE file, excluding those notices that do not
+ pertain to any part of the Derivative Works, in at least one
+ of the following places: within a NOTICE text file distributed
+ as part of the Derivative Works; within the Source form or
+ documentation, if provided along with the Derivative Works; or,
+ within a display generated by the Derivative Works, if and
+ wherever such third-party notices normally appear. The contents
+ of the NOTICE file are for informational purposes only and
+ do not modify the License. You may add Your own attribution
+ notices within Derivative Works that You distribute, alongside
+ or as an addendum to the NOTICE text from the Work, provided
+ that such additional attribution notices cannot be construed
+ as modifying the License.
+
+ You may add Your own copyright statement to Your modifications and
+ may provide additional or different license terms and conditions
+ for use, reproduction, or distribution of Your modifications, or
+ for any such Derivative Works as a whole, provided Your use,
+ reproduction, and distribution of the Work otherwise complies with
+ the conditions stated in this License.
+
+ 5. Submission of Contributions. Unless You explicitly state otherwise,
+ any Contribution intentionally submitted for inclusion in the Work
+ by You to the Licensor shall be under the terms and conditions of
+ this License, without any additional terms or conditions.
+ Notwithstanding the above, nothing herein shall supersede or modify
+ the terms of any separate license agreement you may have executed
+ with Licensor regarding such Contributions.
+
+ 6. Trademarks. This License does not grant permission to use the trade
+ names, trademarks, service marks, or product names of the Licensor,
+ except as required for reasonable and customary use in describing the
+ origin of the Work and reproducing the content of the NOTICE file.
+
+ 7. Disclaimer of Warranty. Unless required by applicable law or
+ agreed to in writing, Licensor provides the Work (and each
+ Contributor provides its Contributions) on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+ implied, including, without limitation, any warranties or conditions
+ of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+ PARTICULAR PURPOSE. You are solely responsible for determining the
+ appropriateness of using or redistributing the Work and assume any
+ risks associated with Your exercise of permissions under this License.
+
+ 8. Limitation of Liability. In no event and under no legal theory,
+ whether in tort (including negligence), contract, or otherwise,
+ unless required by applicable law (such as deliberate and grossly
+ negligent acts) or agreed to in writing, shall any Contributor be
+ liable to You for damages, including any direct, indirect, special,
+ incidental, or consequential damages of any character arising as a
+ result of this License or out of the use or inability to use the
+ Work (including but not limited to damages for loss of goodwill,
+ work stoppage, computer failure or malfunction, or any and all
+ other commercial damages or losses), even if such Contributor
+ has been advised of the possibility of such damages.
+
+ 9. Accepting Warranty or Additional Liability. While redistributing
+ the Work or Derivative Works thereof, You may choose to offer,
+ and charge a fee for, acceptance of support, warranty, indemnity,
+ or other liability obligations and/or rights consistent with this
+ License. However, in accepting such obligations, You may act only
+ on Your own behalf and on Your sole responsibility, not on behalf
+ of any other Contributor, and only if You agree to indemnify,
+ defend, and hold each Contributor harmless for any liability
+ incurred by, or claims asserted against, such Contributor by reason
+ of your accepting any such warranty or additional liability.
+
+ END OF TERMS AND CONDITIONS
+
+ APPENDIX: How to apply the Apache License to your work.
+
+ To apply the Apache License to your work, attach the following
+ boilerplate notice, with the fields enclosed by brackets "[]"
+ replaced with your own identifying information. (Don't include
+ the brackets!) The text should be enclosed in the appropriate
+ comment syntax for the file format. We also recommend that a
+ file or class name and description of purpose be included on the
+ same "printed page" as the copyright notice for easier
+ identification within third-party archives.
+
+ Copyright [yyyy] [name of copyright owner]
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
\ No newline at end of file
diff --git a/skills/angular-routing/SKILL.md b/skills/angular-routing/SKILL.md
new file mode 100644
index 0000000..7831c71
--- /dev/null
+++ b/skills/angular-routing/SKILL.md
@@ -0,0 +1,401 @@
+---
+name: angular-routing
+description: Implement routing in Angular v20+ applications with lazy loading, functional guards, resolvers, and route parameters. Use for navigation setup, protected routes, route-based data loading, and nested routing. Triggers on route configuration, adding authentication guards, implementing lazy loading, or reading route parameters with signals.
+license: Complete terms in LICENSE.txt
+metadata:
+ category: development
+ source:
+ repository: https://github.com/analogjs/angular-skills
+ path: skills/angular-routing
+---
+
+# Angular Routing
+
+Configure routing in Angular v20+ with lazy loading, functional guards, and signal-based route parameters.
+
+## Basic Setup
+
+```typescript
+// app.routes.ts
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [
+ { path: '', redirectTo: '/home', pathMatch: 'full' },
+ { path: 'home', component: Home },
+ { path: 'about', component: About },
+ { path: '**', component: NotFound },
+];
+
+// app.config.ts
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+ providers: [
+ provideRouter(routes),
+ ],
+};
+
+// app.component.ts
+import { Component } from '@angular/core';
+import { RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';
+
+@Component({
+ selector: 'app-root',
+ imports: [RouterOutlet, RouterLink, RouterLinkActive],
+ template: `
+
+
+ `,
+})
+export class App {}
+```
+
+## Lazy Loading
+
+Load feature modules on demand:
+
+```typescript
+// app.routes.ts
+export const routes: Routes = [
+ { path: '', redirectTo: '/home', pathMatch: 'full' },
+ { path: 'home', component: Home },
+
+ // Lazy load entire feature
+ {
+ path: 'admin',
+ loadChildren: () => import('./admin/admin.routes').then(m => m.adminRoutes),
+ },
+
+ // Lazy load single component
+ {
+ path: 'settings',
+ loadComponent: () => import('./settings/settings.component').then(m => m.Settings),
+ },
+];
+
+// admin/admin.routes.ts
+export const adminRoutes: Routes = [
+ { path: '', component: AdminDashboard },
+ { path: 'users', component: AdminUsers },
+ { path: 'settings', component: AdminSettings },
+];
+```
+
+## Route Parameters
+
+### With Signal Inputs (Recommended)
+
+```typescript
+// Route config
+{ path: 'users/:id', component: UserDetail }
+
+// Component - use input() for route params
+import { Component, input, computed } from '@angular/core';
+
+@Component({
+ selector: 'app-user-detail',
+ template: `
+
+ `,
+ animations: [
+ trigger('routeAnimations', [
+ transition('HomePage <=> AboutPage', [
+ style({ position: 'relative' }),
+ query(':enter, :leave', [
+ style({
+ position: 'absolute',
+ top: 0,
+ left: 0,
+ width: '100%',
+ }),
+ ]),
+ query(':enter', [style({ left: '-100%' })]),
+ query(':leave', animateChild()),
+ group([
+ query(':leave', [animate('300ms ease-out', style({ left: '100%' }))]),
+ query(':enter', [animate('300ms ease-out', style({ left: '0%' }))]),
+ ]),
+ ]),
+ ]),
+ ],
+})
+export class AppMain {
+ getRouteAnimationData() {
+ return this.route.firstChild?.snapshot.data['animation'];
+ }
+}
+```
+
+## Scroll Position Restoration
+
+```typescript
+// app.config.ts
+import {
+ provideRouter,
+ withInMemoryScrolling,
+ withRouterConfig
+} from '@angular/router';
+
+provideRouter(
+ routes,
+ withInMemoryScrolling({
+ scrollPositionRestoration: 'enabled', // or 'top'
+ anchorScrolling: 'enabled',
+ }),
+ withRouterConfig({
+ onSameUrlNavigation: 'reload',
+ })
+)
+```
diff --git a/skills/angular-signals/LICENSE.txt b/skills/angular-signals/LICENSE.txt
new file mode 100644
index 0000000..7a4a3ea
--- /dev/null
+++ b/skills/angular-signals/LICENSE.txt
@@ -0,0 +1,202 @@
+
+ Apache License
+ Version 2.0, January 2004
+ http://www.apache.org/licenses/
+
+ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+ 1. Definitions.
+
+ "License" shall mean the terms and conditions for use, reproduction,
+ and distribution as defined by Sections 1 through 9 of this document.
+
+ "Licensor" shall mean the copyright owner or entity authorized by
+ the copyright owner that is granting the License.
+
+ "Legal Entity" shall mean the union of the acting entity and all
+ other entities that control, are controlled by, or are under common
+ control with that entity. For the purposes of this definition,
+ "control" means (i) the power, direct or indirect, to cause the
+ direction or management of such entity, whether by contract or
+ otherwise, or (ii) ownership of fifty percent (50%) or more of the
+ outstanding shares, or (iii) beneficial ownership of such entity.
+
+ "You" (or "Your") shall mean an individual or Legal Entity
+ exercising permissions granted by this License.
+
+ "Source" form shall mean the preferred form for making modifications,
+ including but not limited to software source code, documentation
+ source, and configuration files.
+
+ "Object" form shall mean any form resulting from mechanical
+ transformation or translation of a Source form, including but
+ not limited to compiled object code, generated documentation,
+ and conversions to other media types.
+
+ "Work" shall mean the work of authorship, whether in Source or
+ Object form, made available under the License, as indicated by a
+ copyright notice that is included in or attached to the work
+ (an example is provided in the Appendix below).
+
+ "Derivative Works" shall mean any work, whether in Source or Object
+ form, that is based on (or derived from) the Work and for which the
+ editorial revisions, annotations, elaborations, or other modifications
+ represent, as a whole, an original work of authorship. For the purposes
+ of this License, Derivative Works shall not include works that remain
+ separable from, or merely link (or bind by name) to the interfaces of,
+ the Work and Derivative Works thereof.
+
+ "Contribution" shall mean any work of authorship, including
+ the original version of the Work and any modifications or additions
+ to that Work or Derivative Works thereof, that is intentionally
+ submitted to Licensor for inclusion in the Work by the copyright owner
+ or by an individual or Legal Entity authorized to submit on behalf of
+ the copyright owner. For the purposes of this definition, "submitted"
+ means any form of electronic, verbal, or written communication sent
+ to the Licensor or its representatives, including but not limited to
+ communication on electronic mailing lists, source code control systems,
+ and issue tracking systems that are managed by, or on behalf of, the
+ Licensor for the purpose of discussing and improving the Work, but
+ excluding communication that is conspicuously marked or otherwise
+ designated in writing by the copyright owner as "Not a Contribution."
+
+ "Contributor" shall mean Licensor and any individual or Legal Entity
+ on behalf of whom a Contribution has been received by Licensor and
+ subsequently incorporated within the Work.
+
+ 2. Grant of Copyright License. Subject to the terms and conditions of
+ this License, each Contributor hereby grants to You a perpetual,
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+ copyright license to reproduce, prepare Derivative Works of,
+ publicly display, publicly perform, sublicense, and distribute the
+ Work and such Derivative Works in Source or Object form.
+
+ 3. Grant of Patent License. Subject to the terms and conditions of
+ this License, each Contributor hereby grants to You a perpetual,
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+ (except as stated in this section) patent license to make, have made,
+ use, offer to sell, sell, import, and otherwise transfer the Work,
+ where such license applies only to those patent claims licensable
+ by such Contributor that are necessarily infringed by their
+ Contribution(s) alone or by combination of their Contribution(s)
+ with the Work to which such Contribution(s) was submitted. If You
+ institute patent litigation against any entity (including a
+ cross-claim or counterclaim in a lawsuit) alleging that the Work
+ or a Contribution incorporated within the Work constitutes direct
+ or contributory patent infringement, then any patent licenses
+ granted to You under this License for that Work shall terminate
+ as of the date such litigation is filed.
+
+ 4. Redistribution. You may reproduce and distribute copies of the
+ Work or Derivative Works thereof in any medium, with or without
+ modifications, and in Source or Object form, provided that You
+ meet the following conditions:
+
+ (a) You must give any other recipients of the Work or
+ Derivative Works a copy of this License; and
+
+ (b) You must cause any modified files to carry prominent notices
+ stating that You changed the files; and
+
+ (c) You must retain, in the Source form of any Derivative Works
+ that You distribute, all copyright, patent, trademark, and
+ attribution notices from the Source form of the Work,
+ excluding those notices that do not pertain to any part of
+ the Derivative Works; and
+
+ (d) If the Work includes a "NOTICE" text file as part of its
+ distribution, then any Derivative Works that You distribute must
+ include a readable copy of the attribution notices contained
+ within such NOTICE file, excluding those notices that do not
+ pertain to any part of the Derivative Works, in at least one
+ of the following places: within a NOTICE text file distributed
+ as part of the Derivative Works; within the Source form or
+ documentation, if provided along with the Derivative Works; or,
+ within a display generated by the Derivative Works, if and
+ wherever such third-party notices normally appear. The contents
+ of the NOTICE file are for informational purposes only and
+ do not modify the License. You may add Your own attribution
+ notices within Derivative Works that You distribute, alongside
+ or as an addendum to the NOTICE text from the Work, provided
+ that such additional attribution notices cannot be construed
+ as modifying the License.
+
+ You may add Your own copyright statement to Your modifications and
+ may provide additional or different license terms and conditions
+ for use, reproduction, or distribution of Your modifications, or
+ for any such Derivative Works as a whole, provided Your use,
+ reproduction, and distribution of the Work otherwise complies with
+ the conditions stated in this License.
+
+ 5. Submission of Contributions. Unless You explicitly state otherwise,
+ any Contribution intentionally submitted for inclusion in the Work
+ by You to the Licensor shall be under the terms and conditions of
+ this License, without any additional terms or conditions.
+ Notwithstanding the above, nothing herein shall supersede or modify
+ the terms of any separate license agreement you may have executed
+ with Licensor regarding such Contributions.
+
+ 6. Trademarks. This License does not grant permission to use the trade
+ names, trademarks, service marks, or product names of the Licensor,
+ except as required for reasonable and customary use in describing the
+ origin of the Work and reproducing the content of the NOTICE file.
+
+ 7. Disclaimer of Warranty. Unless required by applicable law or
+ agreed to in writing, Licensor provides the Work (and each
+ Contributor provides its Contributions) on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+ implied, including, without limitation, any warranties or conditions
+ of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+ PARTICULAR PURPOSE. You are solely responsible for determining the
+ appropriateness of using or redistributing the Work and assume any
+ risks associated with Your exercise of permissions under this License.
+
+ 8. Limitation of Liability. In no event and under no legal theory,
+ whether in tort (including negligence), contract, or otherwise,
+ unless required by applicable law (such as deliberate and grossly
+ negligent acts) or agreed to in writing, shall any Contributor be
+ liable to You for damages, including any direct, indirect, special,
+ incidental, or consequential damages of any character arising as a
+ result of this License or out of the use or inability to use the
+ Work (including but not limited to damages for loss of goodwill,
+ work stoppage, computer failure or malfunction, or any and all
+ other commercial damages or losses), even if such Contributor
+ has been advised of the possibility of such damages.
+
+ 9. Accepting Warranty or Additional Liability. While redistributing
+ the Work or Derivative Works thereof, You may choose to offer,
+ and charge a fee for, acceptance of support, warranty, indemnity,
+ or other liability obligations and/or rights consistent with this
+ License. However, in accepting such obligations, You may act only
+ on Your own behalf and on Your sole responsibility, not on behalf
+ of any other Contributor, and only if You agree to indemnify,
+ defend, and hold each Contributor harmless for any liability
+ incurred by, or claims asserted against, such Contributor by reason
+ of your accepting any such warranty or additional liability.
+
+ END OF TERMS AND CONDITIONS
+
+ APPENDIX: How to apply the Apache License to your work.
+
+ To apply the Apache License to your work, attach the following
+ boilerplate notice, with the fields enclosed by brackets "[]"
+ replaced with your own identifying information. (Don't include
+ the brackets!) The text should be enclosed in the appropriate
+ comment syntax for the file format. We also recommend that a
+ file or class name and description of purpose be included on the
+ same "printed page" as the copyright notice for easier
+ identification within third-party archives.
+
+ Copyright [yyyy] [name of copyright owner]
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
\ No newline at end of file
diff --git a/skills/angular-signals/SKILL.md b/skills/angular-signals/SKILL.md
new file mode 100644
index 0000000..db86b8d
--- /dev/null
+++ b/skills/angular-signals/SKILL.md
@@ -0,0 +1,308 @@
+---
+name: angular-signals
+description: Implement signal-based reactive state management in Angular v20+. Use for creating reactive state with signal(), derived state with computed(), dependent state with linkedSignal(), and side effects with effect(). Triggers on state management questions, converting from BehaviorSubject/Observable patterns to signals, or implementing reactive data flows.
+license: Complete terms in LICENSE.txt
+metadata:
+ category: development
+ source:
+ repository: https://github.com/analogjs/angular-skills
+ path: skills/angular-signals
+---
+
+# Angular Signals
+
+Signals are Angular's reactive primitive for state management. They provide synchronous, fine-grained reactivity.
+
+## Core Signal APIs
+
+### signal() - Writable State
+
+```typescript
+import { signal } from '@angular/core';
+
+// Create writable signal
+const count = signal(0);
+
+// Read value
+console.log(count()); // 0
+
+// Set new value
+count.set(5);
+
+// Update based on current value
+count.update(c => c + 1);
+
+// With explicit type
+const user = signal(null);
+user.set({ id: 1, name: 'Alice' });
+```
+
+### computed() - Derived State
+
+```typescript
+import { signal, computed } from '@angular/core';
+
+const firstName = signal('John');
+const lastName = signal('Doe');
+
+// Derived signal - automatically updates when dependencies change
+const fullName = computed(() => `${firstName()} ${lastName()}`);
+
+console.log(fullName()); // "John Doe"
+firstName.set('Jane');
+console.log(fullName()); // "Jane Doe"
+
+// Computed with complex logic
+const items = signal([]);
+const filter = signal('');
+
+const filteredItems = computed(() => {
+ const query = filter().toLowerCase();
+ return items().filter(item =>
+ item.name.toLowerCase().includes(query)
+ );
+});
+
+const totalPrice = computed(() =>
+ filteredItems().reduce((sum, item) => sum + item.price, 0)
+);
+```
+
+### linkedSignal() - Dependent State with Reset
+
+```typescript
+import { signal, linkedSignal } from '@angular/core';
+
+const options = signal(['A', 'B', 'C']);
+
+// Resets to first option when options change
+const selected = linkedSignal(() => options()[0]);
+
+console.log(selected()); // "A"
+selected.set('B'); // User selects B
+console.log(selected()); // "B"
+options.set(['X', 'Y']); // Options change
+console.log(selected()); // "X" - auto-reset to first
+
+// With previous value access
+const items = signal([]);
+
+const selectedItem = linkedSignal({
+ source: () => items(),
+ computation: (newItems, previous) => {
+ // Try to preserve selection if item still exists
+ const prevItem = previous?.value;
+ if (prevItem && newItems.some(i => i.id === prevItem.id)) {
+ return prevItem;
+ }
+ return newItems[0] ?? null;
+ },
+});
+```
+
+### effect() - Side Effects
+
+```typescript
+import { signal, effect, inject, DestroyRef } from '@angular/core';
+
+@Component({...})
+export class Search {
+ query = signal('');
+
+ constructor() {
+ // Effect runs when query changes
+ effect(() => {
+ console.log('Search query:', this.query());
+ });
+
+ // Effect with cleanup
+ effect((onCleanup) => {
+ const timer = setInterval(() => {
+ console.log('Current query:', this.query());
+ }, 1000);
+
+ onCleanup(() => clearInterval(timer));
+ });
+ }
+}
+```
+
+**Effect rules:**
+- Run in injection context (constructor or with `runInInjectionContext`)
+- Automatically cleaned up when component destroys
+
+## Component State Pattern
+
+```typescript
+@Component({
+ selector: 'app-todo-list',
+ template: `
+
+
+
+
+ @for (todo of filteredTodos(); track todo.id) {
+
+ {{ todo.text }}
+
+
+ }
+
+
+
{{ remaining() }} remaining
+ `,
+})
+export class TodoList {
+ // State
+ todos = signal([]);
+ newTodo = signal('');
+ filter = signal<'all' | 'active' | 'done'>('all');
+
+ // Derived state
+ canAdd = computed(() => this.newTodo().trim().length > 0);
+
+ filteredTodos = computed(() => {
+ const todos = this.todos();
+ switch (this.filter()) {
+ case 'active': return todos.filter(t => !t.done);
+ case 'done': return todos.filter(t => t.done);
+ default: return todos;
+ }
+ });
+
+ remaining = computed(() =>
+ this.todos().filter(t => !t.done).length
+ );
+
+ // Actions
+ addTodo() {
+ const text = this.newTodo().trim();
+ if (text) {
+ this.todos.update(todos => [
+ ...todos,
+ { id: crypto.randomUUID(), text, done: false }
+ ]);
+ this.newTodo.set('');
+ }
+ }
+
+ toggleTodo(id: string) {
+ this.todos.update(todos =>
+ todos.map(t => t.id === id ? { ...t, done: !t.done } : t)
+ );
+ }
+}
+```
+
+## RxJS Interop
+
+### toSignal() - Observable to Signal
+
+```typescript
+import { toSignal } from '@angular/core/rxjs-interop';
+import { interval } from 'rxjs';
+
+@Component({...})
+export class Timer {
+ private http = inject(HttpClient);
+
+ // From observable - requires initial value or allowUndefined
+ counter = toSignal(interval(1000), { initialValue: 0 });
+
+ // From HTTP - undefined until loaded
+ users = toSignal(this.http.get('/api/users'));
+
+ // With requireSync for synchronous observables (BehaviorSubject)
+ private user$ = new BehaviorSubject(null);
+ currentUser = toSignal(this.user$, { requireSync: true });
+}
+```
+
+### toObservable() - Signal to Observable
+
+```typescript
+import { toObservable } from '@angular/core/rxjs-interop';
+import { switchMap, debounceTime } from 'rxjs';
+
+@Component({...})
+export class Search {
+ query = signal('');
+
+ private http = inject(HttpClient);
+
+ // Convert signal to observable for RxJS operators
+ results = toSignal(
+ toObservable(this.query).pipe(
+ debounceTime(300),
+ switchMap(q => this.http.get(`/api/search?q=${q}`))
+ ),
+ { initialValue: [] }
+ );
+}
+```
+
+## Signal Equality
+
+```typescript
+// Custom equality function
+const user = signal(
+ { id: 1, name: 'Alice' },
+ { equal: (a, b) => a.id === b.id }
+);
+
+// Only triggers updates when ID changes
+user.set({ id: 1, name: 'Alice Updated' }); // No update
+user.set({ id: 2, name: 'Bob' }); // Triggers update
+```
+
+## Untracked Reads
+
+```typescript
+import { untracked } from '@angular/core';
+
+const a = signal(1);
+const b = signal(2);
+
+// Only depends on 'a', not 'b'
+const result = computed(() => {
+ const aVal = a();
+ const bVal = untracked(() => b());
+ return aVal + bVal;
+});
+```
+
+## Service State Pattern
+
+```typescript
+@Injectable({ providedIn: 'root' })
+export class Auth {
+ // Private writable state
+ private _user = signal(null);
+ private _loading = signal(false);
+
+ // Public read-only signals
+ readonly user = this._user.asReadonly();
+ readonly loading = this._loading.asReadonly();
+ readonly isAuthenticated = computed(() => this._user() !== null);
+
+ private http = inject(HttpClient);
+
+ async login(credentials: Credentials): Promise {
+ this._loading.set(true);
+ try {
+ const user = await firstValueFrom(
+ this.http.post('/api/login', credentials)
+ );
+ this._user.set(user);
+ } finally {
+ this._loading.set(false);
+ }
+ }
+
+ logout(): void {
+ this._user.set(null);
+ }
+}
+```
+
+For advanced patterns including resource(), see [references/signal-patterns.md](references/signal-patterns.md).
diff --git a/skills/angular-signals/references/signal-patterns.md b/skills/angular-signals/references/signal-patterns.md
new file mode 100644
index 0000000..ec6f3fc
--- /dev/null
+++ b/skills/angular-signals/references/signal-patterns.md
@@ -0,0 +1,404 @@
+# Angular Signal Patterns
+
+## Table of Contents
+- [Resource API](#resource-api)
+- [Signal Store Pattern](#signal-store-pattern)
+- [Form State with Signals](#form-state-with-signals)
+- [Async Operations](#async-operations)
+- [Testing Signals](#testing-signals)
+
+## Resource API
+
+The `resource()` API handles async data fetching with signals:
+
+```typescript
+import { resource, signal, computed } from '@angular/core';
+
+@Component({...})
+export class UserProfile {
+ userId = signal('');
+
+ // Resource fetches data when params change
+ userResource = resource({
+ params: () => ({ id: this.userId() }),
+ loader: async ({ params, abortSignal }) => {
+ const response = await fetch(`/api/users/${params.id}`, {
+ signal: abortSignal,
+ });
+ return response.json() as Promise;
+ },
+ });
+
+ // Access resource state
+ user = computed(() => this.userResource.value());
+ isLoading = computed(() => this.userResource.isLoading());
+ error = computed(() => this.userResource.error());
+}
+```
+
+### Resource Status
+
+```typescript
+const userResource = resource({...});
+
+// Status signals
+userResource.value(); // Current value or undefined
+userResource.hasValue(); // Boolean - has resolved value
+userResource.error(); // Error or undefined
+userResource.isLoading(); // Boolean - currently loading
+userResource.status(); // 'idle' | 'loading' | 'reloading' | 'resolved' | 'error' | 'local'
+
+// Manual reload
+userResource.reload();
+
+// Local updates
+userResource.set(newValue);
+userResource.update(current => ({ ...current, name: 'Updated' }));
+```
+
+### Resource with Default Value
+
+```typescript
+const todosResource = resource({
+ defaultValue: [] as Todo[],
+ params: () => ({ filter: this.filter() }),
+ loader: async ({ params }) => {
+ const response = await fetch(`/api/todos?filter=${params.filter}`);
+ return response.json();
+ },
+});
+
+// value() returns Todo[] (never undefined due to defaultValue)
+```
+
+### Conditional Loading
+
+```typescript
+const userId = signal(null);
+
+const userResource = resource({
+ params: () => {
+ const id = userId();
+ // Return undefined to skip loading
+ return id ? { id } : undefined;
+ },
+ loader: async ({ params }) => {
+ return fetch(`/api/users/${params.id}`).then(r => r.json());
+ },
+});
+// Status is 'idle' when params returns undefined
+```
+
+## Signal Store Pattern
+
+For complex state, create a dedicated store:
+
+```typescript
+interface ProductState {
+ products: Product[];
+ selectedId: string | null;
+ filter: string;
+ loading: boolean;
+ error: string | null;
+}
+
+@Injectable({ providedIn: 'root' })
+export class ProductSt {
+ // Private state
+ private state = signal({
+ products: [],
+ selectedId: null,
+ filter: '',
+ loading: false,
+ error: null,
+ });
+
+ // Selectors (computed signals)
+ readonly products = computed(() => this.state().products);
+ readonly selectedId = computed(() => this.state().selectedId);
+ readonly filter = computed(() => this.state().filter);
+ readonly loading = computed(() => this.state().loading);
+ readonly error = computed(() => this.state().error);
+
+ readonly filteredProducts = computed(() => {
+ const { products, filter } = this.state();
+ if (!filter) return products;
+ return products.filter(p =>
+ p.name.toLowerCase().includes(filter.toLowerCase())
+ );
+ });
+
+ readonly selectedProduct = computed(() => {
+ const { products, selectedId } = this.state();
+ return products.find(p => p.id === selectedId) ?? null;
+ });
+
+ private http = inject(HttpClient);
+
+ // Actions
+ setFilter(filter: string): void {
+ this.state.update(s => ({ ...s, filter }));
+ }
+
+ selectProduct(id: string | null): void {
+ this.state.update(s => ({ ...s, selectedId: id }));
+ }
+
+ async loadProducts(): Promise {
+ this.state.update(s => ({ ...s, loading: true, error: null }));
+
+ try {
+ const products = await firstValueFrom(
+ this.http.get('/api/products')
+ );
+ this.state.update(s => ({ ...s, products, loading: false }));
+ } catch (err) {
+ this.state.update(s => ({
+ ...s,
+ loading: false,
+ error: 'Failed to load products'
+ }));
+ }
+ }
+
+ async addProduct(product: Omit): Promise {
+ const newProduct = await firstValueFrom(
+ this.http.post('/api/products', product)
+ );
+ this.state.update(s => ({
+ ...s,
+ products: [...s.products, newProduct],
+ }));
+ }
+}
+```
+
+## Form State with Signals
+
+```typescript
+interface FormState {
+ value: T;
+ touched: boolean;
+ dirty: boolean;
+ valid: boolean;
+ errors: string[];
+}
+
+function createFormField(
+ initialValue: T,
+ validators: ((value: T) => string | null)[] = []
+) {
+ const value = signal(initialValue);
+ const touched = signal(false);
+ const dirty = signal(false);
+
+ const errors = computed(() => {
+ return validators
+ .map(v => v(value()))
+ .filter((e): e is string => e !== null);
+ });
+
+ const valid = computed(() => errors().length === 0);
+
+ return {
+ value,
+ touched: touched.asReadonly(),
+ dirty: dirty.asReadonly(),
+ errors,
+ valid,
+
+ setValue(newValue: T) {
+ value.set(newValue);
+ dirty.set(true);
+ },
+
+ markTouched() {
+ touched.set(true);
+ },
+
+ reset() {
+ value.set(initialValue);
+ touched.set(false);
+ dirty.set(false);
+ },
+ };
+}
+
+// Usage
+@Component({...})
+export class Signup {
+ email = createFormField('', [
+ v => !v ? 'Email is required' : null,
+ v => !v.includes('@') ? 'Invalid email' : null,
+ ]);
+
+ password = createFormField('', [
+ v => !v ? 'Password is required' : null,
+ v => v.length < 8 ? 'Password must be at least 8 characters' : null,
+ ]);
+
+ formValid = computed(() =>
+ this.email.valid() && this.password.valid()
+ );
+}
+```
+
+## Async Operations
+
+### Debounced Search
+
+```typescript
+@Component({...})
+export class Search {
+ query = signal('');
+
+ private http = inject(HttpClient);
+
+ // Debounced search using toObservable
+ results = toSignal(
+ toObservable(this.query).pipe(
+ debounceTime(300),
+ distinctUntilChanged(),
+ filter(q => q.length >= 2),
+ switchMap(q => this.http.get(`/api/search?q=${q}`)),
+ catchError(() => of([]))
+ ),
+ { initialValue: [] }
+ );
+
+ // Loading state
+ private searching = signal(false);
+ readonly isSearching = this.searching.asReadonly();
+
+ constructor() {
+ // Track loading state
+ effect(() => {
+ const q = this.query();
+ if (q.length >= 2) {
+ this.searching.set(true);
+ }
+ });
+
+ effect(() => {
+ this.results(); // Subscribe to results
+ this.searching.set(false);
+ });
+ }
+}
+```
+
+### Optimistic Updates
+
+```typescript
+@Injectable({ providedIn: 'root' })
+export class Todo {
+ private todos = signal([]);
+ readonly items = this.todos.asReadonly();
+
+ private http = inject(HttpClient);
+
+ async toggleTodo(id: string): Promise {
+ // Optimistic update
+ const previousTodos = this.todos();
+ this.todos.update(todos =>
+ todos.map(t => t.id === id ? { ...t, done: !t.done } : t)
+ );
+
+ try {
+ await firstValueFrom(
+ this.http.patch(`/api/todos/${id}/toggle`, {})
+ );
+ } catch {
+ // Rollback on error
+ this.todos.set(previousTodos);
+ }
+ }
+}
+```
+
+## Testing Signals
+
+```typescript
+describe('Counter', () => {
+ it('should increment count', () => {
+ const component = new Counter();
+
+ expect(component.count()).toBe(0);
+
+ component.increment();
+ expect(component.count()).toBe(1);
+
+ component.increment();
+ expect(component.count()).toBe(2);
+ });
+
+ it('should compute doubled value', () => {
+ const component = new Counter();
+
+ expect(component.doubled()).toBe(0);
+
+ component.count.set(5);
+ expect(component.doubled()).toBe(10);
+ });
+});
+
+describe('ProductSt', () => {
+ let store: ProductSt;
+ let httpMock: HttpTestingController;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ providers: [
+ ProductSt,
+ provideHttpClient(),
+ provideHttpClientTesting(),
+ ],
+ });
+
+ store = TestBed.inject(ProductSt);
+ httpMock = TestBed.inject(HttpTestingController);
+ });
+
+ it('should filter products', () => {
+ // Set initial state
+ store['state'].set({
+ products: [
+ { id: '1', name: 'Apple' },
+ { id: '2', name: 'Banana' },
+ ],
+ selectedId: null,
+ filter: '',
+ loading: false,
+ error: null,
+ });
+
+ expect(store.filteredProducts().length).toBe(2);
+
+ store.setFilter('app');
+ expect(store.filteredProducts().length).toBe(1);
+ expect(store.filteredProducts()[0].name).toBe('Apple');
+ });
+});
+```
+
+## Signal Debugging
+
+```typescript
+// Debug effect to log signal changes
+effect(() => {
+ console.log('State changed:', {
+ count: this.count(),
+ items: this.items(),
+ filter: this.filter(),
+ });
+});
+
+// Conditional debugging
+const DEBUG = signal(false);
+
+effect(() => {
+ if (untracked(() => DEBUG())) {
+ console.log('Debug:', this.state());
+ }
+});
+```
diff --git a/skills/angular-ssr/LICENSE.txt b/skills/angular-ssr/LICENSE.txt
new file mode 100644
index 0000000..7a4a3ea
--- /dev/null
+++ b/skills/angular-ssr/LICENSE.txt
@@ -0,0 +1,202 @@
+
+ Apache License
+ Version 2.0, January 2004
+ http://www.apache.org/licenses/
+
+ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+ 1. Definitions.
+
+ "License" shall mean the terms and conditions for use, reproduction,
+ and distribution as defined by Sections 1 through 9 of this document.
+
+ "Licensor" shall mean the copyright owner or entity authorized by
+ the copyright owner that is granting the License.
+
+ "Legal Entity" shall mean the union of the acting entity and all
+ other entities that control, are controlled by, or are under common
+ control with that entity. For the purposes of this definition,
+ "control" means (i) the power, direct or indirect, to cause the
+ direction or management of such entity, whether by contract or
+ otherwise, or (ii) ownership of fifty percent (50%) or more of the
+ outstanding shares, or (iii) beneficial ownership of such entity.
+
+ "You" (or "Your") shall mean an individual or Legal Entity
+ exercising permissions granted by this License.
+
+ "Source" form shall mean the preferred form for making modifications,
+ including but not limited to software source code, documentation
+ source, and configuration files.
+
+ "Object" form shall mean any form resulting from mechanical
+ transformation or translation of a Source form, including but
+ not limited to compiled object code, generated documentation,
+ and conversions to other media types.
+
+ "Work" shall mean the work of authorship, whether in Source or
+ Object form, made available under the License, as indicated by a
+ copyright notice that is included in or attached to the work
+ (an example is provided in the Appendix below).
+
+ "Derivative Works" shall mean any work, whether in Source or Object
+ form, that is based on (or derived from) the Work and for which the
+ editorial revisions, annotations, elaborations, or other modifications
+ represent, as a whole, an original work of authorship. For the purposes
+ of this License, Derivative Works shall not include works that remain
+ separable from, or merely link (or bind by name) to the interfaces of,
+ the Work and Derivative Works thereof.
+
+ "Contribution" shall mean any work of authorship, including
+ the original version of the Work and any modifications or additions
+ to that Work or Derivative Works thereof, that is intentionally
+ submitted to Licensor for inclusion in the Work by the copyright owner
+ or by an individual or Legal Entity authorized to submit on behalf of
+ the copyright owner. For the purposes of this definition, "submitted"
+ means any form of electronic, verbal, or written communication sent
+ to the Licensor or its representatives, including but not limited to
+ communication on electronic mailing lists, source code control systems,
+ and issue tracking systems that are managed by, or on behalf of, the
+ Licensor for the purpose of discussing and improving the Work, but
+ excluding communication that is conspicuously marked or otherwise
+ designated in writing by the copyright owner as "Not a Contribution."
+
+ "Contributor" shall mean Licensor and any individual or Legal Entity
+ on behalf of whom a Contribution has been received by Licensor and
+ subsequently incorporated within the Work.
+
+ 2. Grant of Copyright License. Subject to the terms and conditions of
+ this License, each Contributor hereby grants to You a perpetual,
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+ copyright license to reproduce, prepare Derivative Works of,
+ publicly display, publicly perform, sublicense, and distribute the
+ Work and such Derivative Works in Source or Object form.
+
+ 3. Grant of Patent License. Subject to the terms and conditions of
+ this License, each Contributor hereby grants to You a perpetual,
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+ (except as stated in this section) patent license to make, have made,
+ use, offer to sell, sell, import, and otherwise transfer the Work,
+ where such license applies only to those patent claims licensable
+ by such Contributor that are necessarily infringed by their
+ Contribution(s) alone or by combination of their Contribution(s)
+ with the Work to which such Contribution(s) was submitted. If You
+ institute patent litigation against any entity (including a
+ cross-claim or counterclaim in a lawsuit) alleging that the Work
+ or a Contribution incorporated within the Work constitutes direct
+ or contributory patent infringement, then any patent licenses
+ granted to You under this License for that Work shall terminate
+ as of the date such litigation is filed.
+
+ 4. Redistribution. You may reproduce and distribute copies of the
+ Work or Derivative Works thereof in any medium, with or without
+ modifications, and in Source or Object form, provided that You
+ meet the following conditions:
+
+ (a) You must give any other recipients of the Work or
+ Derivative Works a copy of this License; and
+
+ (b) You must cause any modified files to carry prominent notices
+ stating that You changed the files; and
+
+ (c) You must retain, in the Source form of any Derivative Works
+ that You distribute, all copyright, patent, trademark, and
+ attribution notices from the Source form of the Work,
+ excluding those notices that do not pertain to any part of
+ the Derivative Works; and
+
+ (d) If the Work includes a "NOTICE" text file as part of its
+ distribution, then any Derivative Works that You distribute must
+ include a readable copy of the attribution notices contained
+ within such NOTICE file, excluding those notices that do not
+ pertain to any part of the Derivative Works, in at least one
+ of the following places: within a NOTICE text file distributed
+ as part of the Derivative Works; within the Source form or
+ documentation, if provided along with the Derivative Works; or,
+ within a display generated by the Derivative Works, if and
+ wherever such third-party notices normally appear. The contents
+ of the NOTICE file are for informational purposes only and
+ do not modify the License. You may add Your own attribution
+ notices within Derivative Works that You distribute, alongside
+ or as an addendum to the NOTICE text from the Work, provided
+ that such additional attribution notices cannot be construed
+ as modifying the License.
+
+ You may add Your own copyright statement to Your modifications and
+ may provide additional or different license terms and conditions
+ for use, reproduction, or distribution of Your modifications, or
+ for any such Derivative Works as a whole, provided Your use,
+ reproduction, and distribution of the Work otherwise complies with
+ the conditions stated in this License.
+
+ 5. Submission of Contributions. Unless You explicitly state otherwise,
+ any Contribution intentionally submitted for inclusion in the Work
+ by You to the Licensor shall be under the terms and conditions of
+ this License, without any additional terms or conditions.
+ Notwithstanding the above, nothing herein shall supersede or modify
+ the terms of any separate license agreement you may have executed
+ with Licensor regarding such Contributions.
+
+ 6. Trademarks. This License does not grant permission to use the trade
+ names, trademarks, service marks, or product names of the Licensor,
+ except as required for reasonable and customary use in describing the
+ origin of the Work and reproducing the content of the NOTICE file.
+
+ 7. Disclaimer of Warranty. Unless required by applicable law or
+ agreed to in writing, Licensor provides the Work (and each
+ Contributor provides its Contributions) on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+ implied, including, without limitation, any warranties or conditions
+ of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+ PARTICULAR PURPOSE. You are solely responsible for determining the
+ appropriateness of using or redistributing the Work and assume any
+ risks associated with Your exercise of permissions under this License.
+
+ 8. Limitation of Liability. In no event and under no legal theory,
+ whether in tort (including negligence), contract, or otherwise,
+ unless required by applicable law (such as deliberate and grossly
+ negligent acts) or agreed to in writing, shall any Contributor be
+ liable to You for damages, including any direct, indirect, special,
+ incidental, or consequential damages of any character arising as a
+ result of this License or out of the use or inability to use the
+ Work (including but not limited to damages for loss of goodwill,
+ work stoppage, computer failure or malfunction, or any and all
+ other commercial damages or losses), even if such Contributor
+ has been advised of the possibility of such damages.
+
+ 9. Accepting Warranty or Additional Liability. While redistributing
+ the Work or Derivative Works thereof, You may choose to offer,
+ and charge a fee for, acceptance of support, warranty, indemnity,
+ or other liability obligations and/or rights consistent with this
+ License. However, in accepting such obligations, You may act only
+ on Your own behalf and on Your sole responsibility, not on behalf
+ of any other Contributor, and only if You agree to indemnify,
+ defend, and hold each Contributor harmless for any liability
+ incurred by, or claims asserted against, such Contributor by reason
+ of your accepting any such warranty or additional liability.
+
+ END OF TERMS AND CONDITIONS
+
+ APPENDIX: How to apply the Apache License to your work.
+
+ To apply the Apache License to your work, attach the following
+ boilerplate notice, with the fields enclosed by brackets "[]"
+ replaced with your own identifying information. (Don't include
+ the brackets!) The text should be enclosed in the appropriate
+ comment syntax for the file format. We also recommend that a
+ file or class name and description of purpose be included on the
+ same "printed page" as the copyright notice for easier
+ identification within third-party archives.
+
+ Copyright [yyyy] [name of copyright owner]
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
\ No newline at end of file
diff --git a/skills/angular-ssr/SKILL.md b/skills/angular-ssr/SKILL.md
new file mode 100644
index 0000000..e7d358c
--- /dev/null
+++ b/skills/angular-ssr/SKILL.md
@@ -0,0 +1,441 @@
+---
+name: angular-ssr
+description: Implement server-side rendering and hydration in Angular v20+ using @angular/ssr. Use for SSR setup, hydration strategies, prerendering static pages, and handling browser-only APIs. Triggers on SSR configuration, fixing hydration mismatches, prerendering routes, or making code SSR-compatible.
+license: Complete terms in LICENSE.txt
+metadata:
+ category: development
+ source:
+ repository: https://github.com/analogjs/angular-skills
+ path: skills/angular-ssr
+---
+
+# Angular SSR
+
+Implement server-side rendering, hydration, and prerendering in Angular v20+.
+
+## Setup
+
+### Add SSR to Existing Project
+
+```bash
+ng add @angular/ssr
+```
+
+This adds:
+- `@angular/ssr` package
+- `server.ts` - Express server
+- `src/main.server.ts` - Server bootstrap
+- `src/app/app.config.server.ts` - Server providers
+- Updates `angular.json` with SSR configuration
+
+### Project Structure
+
+```
+src/
+├── app/
+│ ├── app.config.ts # Browser config
+│ ├── app.config.server.ts # Server config
+│ └── app.routes.ts
+├── main.ts # Browser bootstrap
+├── main.server.ts # Server bootstrap
+server.ts # Express server
+```
+
+## Configuration
+
+### app.config.server.ts
+
+```typescript
+import { ApplicationConfig, mergeApplicationConfig } from '@angular/core';
+import { provideServerRendering } from '@angular/platform-server';
+import { provideServerRoutesConfig } from '@angular/ssr';
+import { appConfig } from './app.config';
+import { serverRoutes } from './app.routes.server';
+
+const serverConfig: ApplicationConfig = {
+ providers: [
+ provideServerRendering(),
+ provideServerRoutesConfig(serverRoutes),
+ ],
+};
+
+export const config = mergeApplicationConfig(appConfig, serverConfig);
+```
+
+### Server Routes Configuration
+
+```typescript
+// app.routes.server.ts
+import { RenderMode, ServerRoute } from '@angular/ssr';
+
+export const serverRoutes: ServerRoute[] = [
+ {
+ path: '',
+ renderMode: RenderMode.Prerender, // Static at build time
+ },
+ {
+ path: 'products',
+ renderMode: RenderMode.Prerender,
+ },
+ {
+ path: 'products/:id',
+ renderMode: RenderMode.Server, // Dynamic SSR
+ },
+ {
+ path: 'dashboard',
+ renderMode: RenderMode.Client, // Client-only (SPA)
+ },
+ {
+ path: '**',
+ renderMode: RenderMode.Server,
+ },
+];
+```
+
+### Render Modes
+
+| Mode | Description | Use Case |
+|------|-------------|----------|
+| `RenderMode.Prerender` | Static HTML at build time | Marketing pages, blogs |
+| `RenderMode.Server` | Dynamic SSR per request | User-specific content |
+| `RenderMode.Client` | Client-side only (SPA) | Authenticated dashboards |
+
+## Hydration
+
+### Default Hydration
+
+Hydration is enabled by default with `provideClientHydration()`:
+
+```typescript
+// app.config.ts
+import { provideClientHydration } from '@angular/platform-browser';
+
+export const appConfig: ApplicationConfig = {
+ providers: [
+ provideClientHydration(),
+ // ...
+ ],
+};
+```
+
+### Incremental Hydration
+
+Defer hydration of specific components:
+
+```typescript
+@Component({
+ template: `
+
+ @defer (hydrate on viewport) {
+
+ } @placeholder {
+
Loading comments...
+ }
+
+
+ @defer (hydrate on interaction) {
+
+ }
+
+
+ @defer (hydrate on idle) {
+
+ }
+
+
+ @defer (hydrate never) {
+
+ }
+ `,
+})
+export class Post {
+ postId = input.required();
+ chartData = input.required();
+}
+```
+
+### Hydration Triggers
+
+| Trigger | Description |
+|---------|-------------|
+| `hydrate on viewport` | When element enters viewport |
+| `hydrate on interaction` | On click, focus, or input |
+| `hydrate on idle` | When browser is idle |
+| `hydrate on immediate` | Immediately after load |
+| `hydrate on timer(ms)` | After specified delay |
+| `hydrate when condition` | When expression is true |
+| `hydrate never` | Never hydrate (static) |
+
+### Event Replay
+
+Capture user events before hydration completes:
+
+```typescript
+import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
+
+export const appConfig: ApplicationConfig = {
+ providers: [
+ provideClientHydration(withEventReplay()),
+ ],
+};
+```
+
+## Browser-Only Code
+
+### Platform Detection
+
+```typescript
+import { PLATFORM_ID, inject } from '@angular/core';
+import { isPlatformBrowser, isPlatformServer } from '@angular/common';
+
+@Component({...})
+export class My {
+ private platformId = inject(PLATFORM_ID);
+
+ ngOnInit() {
+ if (isPlatformBrowser(this.platformId)) {
+ // Browser-only code
+ window.addEventListener('scroll', this.onScroll);
+ }
+ }
+}
+```
+
+### afterNextRender / afterRender
+
+Run code only in browser after rendering:
+
+```typescript
+import { afterNextRender, afterRender } from '@angular/core';
+
+@Component({...})
+export class Chart {
+ constructor() {
+ // Runs once after first render (browser only)
+ afterNextRender(() => {
+ this.initChart();
+ });
+
+ // Runs after every render (browser only)
+ afterRender(() => {
+ this.updateChart();
+ });
+ }
+
+ private initChart() {
+ // Safe to use DOM APIs here
+ const canvas = document.getElementById('chart');
+ new Chart(canvas, this.config);
+ }
+}
+```
+
+### Inject Browser APIs Safely
+
+```typescript
+// tokens.ts
+import { InjectionToken, PLATFORM_ID, inject } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+
+export const WINDOW = new InjectionToken('Window', {
+ providedIn: 'root',
+ factory: () => {
+ const platformId = inject(PLATFORM_ID);
+ return isPlatformBrowser(platformId) ? window : null;
+ },
+});
+
+export const LOCAL_STORAGE = new InjectionToken('LocalStorage', {
+ providedIn: 'root',
+ factory: () => {
+ const platformId = inject(PLATFORM_ID);
+ return isPlatformBrowser(platformId) ? localStorage : null;
+ },
+});
+
+// Usage
+@Injectable({ providedIn: 'root' })
+export class Storage {
+ private storage = inject(LOCAL_STORAGE);
+
+ get(key: string): string | null {
+ return this.storage?.getItem(key) ?? null;
+ }
+
+ set(key: string, value: string): void {
+ this.storage?.setItem(key, value);
+ }
+}
+```
+
+## Prerendering
+
+### Static Routes
+
+```typescript
+// app.routes.server.ts
+export const serverRoutes: ServerRoute[] = [
+ { path: '', renderMode: RenderMode.Prerender },
+ { path: 'about', renderMode: RenderMode.Prerender },
+ { path: 'contact', renderMode: RenderMode.Prerender },
+ { path: 'blog', renderMode: RenderMode.Prerender },
+];
+```
+
+### Dynamic Routes with getPrerenderParams
+
+```typescript
+// app.routes.server.ts
+import { RenderMode, ServerRoute, PrerenderFallback } from '@angular/ssr';
+
+export const serverRoutes: ServerRoute[] = [
+ {
+ path: 'products/:id',
+ renderMode: RenderMode.Prerender,
+ async getPrerenderParams() {
+ // Fetch product IDs to prerender
+ const response = await fetch('https://api.example.com/products');
+ const products = await response.json();
+ return products.map((p: Product) => ({ id: p.id }));
+ },
+ fallback: PrerenderFallback.Server, // SSR for non-prerendered
+ },
+ {
+ path: 'blog/:slug',
+ renderMode: RenderMode.Prerender,
+ async getPrerenderParams() {
+ const posts = await fetchBlogPosts();
+ return posts.map(post => ({ slug: post.slug }));
+ },
+ fallback: PrerenderFallback.Client, // SPA for non-prerendered
+ },
+];
+```
+
+### Prerender Fallback Options
+
+| Fallback | Description |
+|----------|-------------|
+| `PrerenderFallback.Server` | SSR for non-prerendered routes |
+| `PrerenderFallback.Client` | Client-side rendering |
+| `PrerenderFallback.None` | 404 for non-prerendered routes |
+
+## HTTP Caching
+
+### TransferState
+
+Automatically transfer HTTP responses from server to client:
+
+```typescript
+import { provideClientHydration, withHttpTransferCacheOptions } from '@angular/platform-browser';
+
+export const appConfig: ApplicationConfig = {
+ providers: [
+ provideClientHydration(
+ withHttpTransferCacheOptions({
+ includePostRequests: true,
+ includeRequestsWithAuthHeaders: false,
+ filter: (req) => !req.url.includes('/api/realtime'),
+ })
+ ),
+ ],
+};
+```
+
+### Manual TransferState
+
+```typescript
+import { TransferState, makeStateKey } from '@angular/core';
+
+const PRODUCTS_KEY = makeStateKey('products');
+
+@Injectable({ providedIn: 'root' })
+export class Product {
+ private http = inject(HttpClient);
+ private transferState = inject(TransferState);
+ private platformId = inject(PLATFORM_ID);
+
+ getProducts(): Observable {
+ // Check if data was transferred from server
+ if (this.transferState.hasKey(PRODUCTS_KEY)) {
+ const products = this.transferState.get(PRODUCTS_KEY, []);
+ this.transferState.remove(PRODUCTS_KEY);
+ return of(products);
+ }
+
+ return this.http.get('/api/products').pipe(
+ tap(products => {
+ // Store for transfer on server
+ if (isPlatformServer(this.platformId)) {
+ this.transferState.set(PRODUCTS_KEY, products);
+ }
+ })
+ );
+ }
+}
+```
+
+## Build and Deploy
+
+### Build Commands
+
+```bash
+# Build with SSR
+ng build
+
+# Output structure
+dist/
+├── my-app/
+│ ├── browser/ # Client assets
+│ └── server/ # Server bundle
+```
+
+### Run SSR Server
+
+```bash
+# Development
+npm run serve:ssr:my-app
+
+# Production
+node dist/my-app/server/server.mjs
+```
+
+### Deploy to Node.js Host
+
+```javascript
+// server.ts (generated)
+import { APP_BASE_HREF } from '@angular/common';
+import { CommonEngine } from '@angular/ssr/node';
+import express from 'express';
+import { dirname, join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import bootstrap from './src/main.server';
+
+const serverDistFolder = dirname(fileURLToPath(import.meta.url));
+const browserDistFolder = resolve(serverDistFolder, '../browser');
+const indexHtml = join(serverDistFolder, 'index.server.html');
+
+const app = express();
+const commonEngine = new CommonEngine();
+
+app.get('*', express.static(browserDistFolder, { maxAge: '1y', index: false }));
+
+app.get('*', (req, res, next) => {
+ commonEngine
+ .render({
+ bootstrap,
+ documentFilePath: indexHtml,
+ url: req.originalUrl,
+ publicPath: browserDistFolder,
+ providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }],
+ })
+ .then((html) => res.send(html))
+ .catch((err) => next(err));
+});
+
+app.listen(4000, () => {
+ console.log('Server listening on http://localhost:4000');
+});
+```
+
+For advanced patterns, see [references/ssr-patterns.md](references/ssr-patterns.md).
diff --git a/skills/angular-ssr/references/ssr-patterns.md b/skills/angular-ssr/references/ssr-patterns.md
new file mode 100644
index 0000000..49ff709
--- /dev/null
+++ b/skills/angular-ssr/references/ssr-patterns.md
@@ -0,0 +1,497 @@
+# Angular SSR Patterns
+
+## Table of Contents
+- [Hydration Debugging](#hydration-debugging)
+- [SEO Optimization](#seo-optimization)
+- [Authentication with SSR](#authentication-with-ssr)
+- [Caching Strategies](#caching-strategies)
+- [Error Handling](#error-handling)
+- [Performance Optimization](#performance-optimization)
+
+## Hydration Debugging
+
+### Common Hydration Mismatches
+
+```typescript
+// Problem: Different content on server vs client
+@Component({
+ template: `
Current time: {{ currentTime }}
`,
+})
+export class Time {
+ // BAD: Different value on server and client
+ currentTime = new Date().toLocaleTimeString();
+}
+
+// Solution: Use afterNextRender or skip SSR
+@Component({
+ template: `
');
+ expect(html).toContain('');
+ });
+
+ it('should render product page with data', async () => {
+ const html = await renderApplication(App, {
+ appId: 'my-app',
+ providers: config.providers,
+ url: '/products/123',
+ });
+
+ expect(html).toContain('Product Name');
+ expect(html).not.toContain('Loading...');
+ });
+});
+```
+
+### Test Hydration
+
+```typescript
+import { TestBed } from '@angular/core/testing';
+import { provideClientHydration } from '@angular/platform-browser';
+
+describe('Hydration', () => {
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ providers: [provideClientHydration()],
+ });
+ });
+
+ it('should hydrate without errors', () => {
+ const fixture = TestBed.createComponent(App);
+ fixture.detectChanges();
+
+ // No hydration mismatch errors should be thrown
+ expect(fixture.componentInstance).toBeTruthy();
+ });
+});
+```
diff --git a/skills/angular-testing/LICENSE.txt b/skills/angular-testing/LICENSE.txt
new file mode 100644
index 0000000..7a4a3ea
--- /dev/null
+++ b/skills/angular-testing/LICENSE.txt
@@ -0,0 +1,202 @@
+
+ Apache License
+ Version 2.0, January 2004
+ http://www.apache.org/licenses/
+
+ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+ 1. Definitions.
+
+ "License" shall mean the terms and conditions for use, reproduction,
+ and distribution as defined by Sections 1 through 9 of this document.
+
+ "Licensor" shall mean the copyright owner or entity authorized by
+ the copyright owner that is granting the License.
+
+ "Legal Entity" shall mean the union of the acting entity and all
+ other entities that control, are controlled by, or are under common
+ control with that entity. For the purposes of this definition,
+ "control" means (i) the power, direct or indirect, to cause the
+ direction or management of such entity, whether by contract or
+ otherwise, or (ii) ownership of fifty percent (50%) or more of the
+ outstanding shares, or (iii) beneficial ownership of such entity.
+
+ "You" (or "Your") shall mean an individual or Legal Entity
+ exercising permissions granted by this License.
+
+ "Source" form shall mean the preferred form for making modifications,
+ including but not limited to software source code, documentation
+ source, and configuration files.
+
+ "Object" form shall mean any form resulting from mechanical
+ transformation or translation of a Source form, including but
+ not limited to compiled object code, generated documentation,
+ and conversions to other media types.
+
+ "Work" shall mean the work of authorship, whether in Source or
+ Object form, made available under the License, as indicated by a
+ copyright notice that is included in or attached to the work
+ (an example is provided in the Appendix below).
+
+ "Derivative Works" shall mean any work, whether in Source or Object
+ form, that is based on (or derived from) the Work and for which the
+ editorial revisions, annotations, elaborations, or other modifications
+ represent, as a whole, an original work of authorship. For the purposes
+ of this License, Derivative Works shall not include works that remain
+ separable from, or merely link (or bind by name) to the interfaces of,
+ the Work and Derivative Works thereof.
+
+ "Contribution" shall mean any work of authorship, including
+ the original version of the Work and any modifications or additions
+ to that Work or Derivative Works thereof, that is intentionally
+ submitted to Licensor for inclusion in the Work by the copyright owner
+ or by an individual or Legal Entity authorized to submit on behalf of
+ the copyright owner. For the purposes of this definition, "submitted"
+ means any form of electronic, verbal, or written communication sent
+ to the Licensor or its representatives, including but not limited to
+ communication on electronic mailing lists, source code control systems,
+ and issue tracking systems that are managed by, or on behalf of, the
+ Licensor for the purpose of discussing and improving the Work, but
+ excluding communication that is conspicuously marked or otherwise
+ designated in writing by the copyright owner as "Not a Contribution."
+
+ "Contributor" shall mean Licensor and any individual or Legal Entity
+ on behalf of whom a Contribution has been received by Licensor and
+ subsequently incorporated within the Work.
+
+ 2. Grant of Copyright License. Subject to the terms and conditions of
+ this License, each Contributor hereby grants to You a perpetual,
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+ copyright license to reproduce, prepare Derivative Works of,
+ publicly display, publicly perform, sublicense, and distribute the
+ Work and such Derivative Works in Source or Object form.
+
+ 3. Grant of Patent License. Subject to the terms and conditions of
+ this License, each Contributor hereby grants to You a perpetual,
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+ (except as stated in this section) patent license to make, have made,
+ use, offer to sell, sell, import, and otherwise transfer the Work,
+ where such license applies only to those patent claims licensable
+ by such Contributor that are necessarily infringed by their
+ Contribution(s) alone or by combination of their Contribution(s)
+ with the Work to which such Contribution(s) was submitted. If You
+ institute patent litigation against any entity (including a
+ cross-claim or counterclaim in a lawsuit) alleging that the Work
+ or a Contribution incorporated within the Work constitutes direct
+ or contributory patent infringement, then any patent licenses
+ granted to You under this License for that Work shall terminate
+ as of the date such litigation is filed.
+
+ 4. Redistribution. You may reproduce and distribute copies of the
+ Work or Derivative Works thereof in any medium, with or without
+ modifications, and in Source or Object form, provided that You
+ meet the following conditions:
+
+ (a) You must give any other recipients of the Work or
+ Derivative Works a copy of this License; and
+
+ (b) You must cause any modified files to carry prominent notices
+ stating that You changed the files; and
+
+ (c) You must retain, in the Source form of any Derivative Works
+ that You distribute, all copyright, patent, trademark, and
+ attribution notices from the Source form of the Work,
+ excluding those notices that do not pertain to any part of
+ the Derivative Works; and
+
+ (d) If the Work includes a "NOTICE" text file as part of its
+ distribution, then any Derivative Works that You distribute must
+ include a readable copy of the attribution notices contained
+ within such NOTICE file, excluding those notices that do not
+ pertain to any part of the Derivative Works, in at least one
+ of the following places: within a NOTICE text file distributed
+ as part of the Derivative Works; within the Source form or
+ documentation, if provided along with the Derivative Works; or,
+ within a display generated by the Derivative Works, if and
+ wherever such third-party notices normally appear. The contents
+ of the NOTICE file are for informational purposes only and
+ do not modify the License. You may add Your own attribution
+ notices within Derivative Works that You distribute, alongside
+ or as an addendum to the NOTICE text from the Work, provided
+ that such additional attribution notices cannot be construed
+ as modifying the License.
+
+ You may add Your own copyright statement to Your modifications and
+ may provide additional or different license terms and conditions
+ for use, reproduction, or distribution of Your modifications, or
+ for any such Derivative Works as a whole, provided Your use,
+ reproduction, and distribution of the Work otherwise complies with
+ the conditions stated in this License.
+
+ 5. Submission of Contributions. Unless You explicitly state otherwise,
+ any Contribution intentionally submitted for inclusion in the Work
+ by You to the Licensor shall be under the terms and conditions of
+ this License, without any additional terms or conditions.
+ Notwithstanding the above, nothing herein shall supersede or modify
+ the terms of any separate license agreement you may have executed
+ with Licensor regarding such Contributions.
+
+ 6. Trademarks. This License does not grant permission to use the trade
+ names, trademarks, service marks, or product names of the Licensor,
+ except as required for reasonable and customary use in describing the
+ origin of the Work and reproducing the content of the NOTICE file.
+
+ 7. Disclaimer of Warranty. Unless required by applicable law or
+ agreed to in writing, Licensor provides the Work (and each
+ Contributor provides its Contributions) on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+ implied, including, without limitation, any warranties or conditions
+ of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+ PARTICULAR PURPOSE. You are solely responsible for determining the
+ appropriateness of using or redistributing the Work and assume any
+ risks associated with Your exercise of permissions under this License.
+
+ 8. Limitation of Liability. In no event and under no legal theory,
+ whether in tort (including negligence), contract, or otherwise,
+ unless required by applicable law (such as deliberate and grossly
+ negligent acts) or agreed to in writing, shall any Contributor be
+ liable to You for damages, including any direct, indirect, special,
+ incidental, or consequential damages of any character arising as a
+ result of this License or out of the use or inability to use the
+ Work (including but not limited to damages for loss of goodwill,
+ work stoppage, computer failure or malfunction, or any and all
+ other commercial damages or losses), even if such Contributor
+ has been advised of the possibility of such damages.
+
+ 9. Accepting Warranty or Additional Liability. While redistributing
+ the Work or Derivative Works thereof, You may choose to offer,
+ and charge a fee for, acceptance of support, warranty, indemnity,
+ or other liability obligations and/or rights consistent with this
+ License. However, in accepting such obligations, You may act only
+ on Your own behalf and on Your sole responsibility, not on behalf
+ of any other Contributor, and only if You agree to indemnify,
+ defend, and hold each Contributor harmless for any liability
+ incurred by, or claims asserted against, such Contributor by reason
+ of your accepting any such warranty or additional liability.
+
+ END OF TERMS AND CONDITIONS
+
+ APPENDIX: How to apply the Apache License to your work.
+
+ To apply the Apache License to your work, attach the following
+ boilerplate notice, with the fields enclosed by brackets "[]"
+ replaced with your own identifying information. (Don't include
+ the brackets!) The text should be enclosed in the appropriate
+ comment syntax for the file format. We also recommend that a
+ file or class name and description of purpose be included on the
+ same "printed page" as the copyright notice for easier
+ identification within third-party archives.
+
+ Copyright [yyyy] [name of copyright owner]
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
\ No newline at end of file
diff --git a/skills/angular-testing/SKILL.md b/skills/angular-testing/SKILL.md
new file mode 100644
index 0000000..1154b09
--- /dev/null
+++ b/skills/angular-testing/SKILL.md
@@ -0,0 +1,666 @@
+---
+name: angular-testing
+description: Write unit and integration tests for Angular v21+ applications using Vitest or Jasmine with TestBed, component harnesses, and modern testing patterns. Use for testing components with signals, OnPush change detection, services with inject(), and HTTP interactions. Triggers on test creation, testing signal-based components, mocking dependencies, or setting up test infrastructure.
+license: Complete terms in LICENSE.txt
+metadata:
+ category: development
+ source:
+ repository: https://github.com/analogjs/angular-skills
+ path: skills/angular-testing
+---
+
+# Angular Testing
+
+Test Angular v21+ applications with Vitest (recommended) or Jasmine, focusing on signal-based components and modern patterns.
+
+## Vitest Setup (Angular v20+)
+
+Angular v20+ has native Vitest support through the `@angular/build` package.
+
+### Installation
+
+```bash
+npm install -D vitest jsdom
+```
+
+### Configuration
+
+```json
+// angular.json - update test architect
+{
+ "projects": {
+ "your-app": {
+ "architect": {
+ "test": {
+ "builder": "@angular/build:unit-test",
+ "options": {
+ "tsConfig": "tsconfig.spec.json",
+ "buildTarget": "your-app:build"
+ }
+ }
+ }
+ }
+ }
+}
+```
+
+```json
+// tsconfig.spec.json
+{
+ "extends": "./tsconfig.json",
+ "compilerOptions": {
+ "types": ["vitest/globals"]
+ },
+ "include": ["src/**/*.spec.ts"]
+}
+```
+
+### Running Tests
+
+```bash
+# Run tests
+ng test
+
+# Watch mode
+ng test --watch
+
+# Coverage
+ng test --code-coverage
+```
+
+### Vitest Test Example
+
+```typescript
+import { describe, it, expect, beforeEach } from 'vitest';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Counter } from './counter.component';
+
+describe('Counter', () => {
+ let component: Counter;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [Counter],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(Counter);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('should increment count', () => {
+ expect(component.count()).toBe(0);
+
+ component.increment();
+
+ expect(component.count()).toBe(1);
+ });
+});
+```
+
+### Vitest Mocking
+
+```typescript
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+describe('UserCmpt', () => {
+ const mockUserService = {
+ getUser: vi.fn(),
+ updateUser: vi.fn(),
+ user: signal(null),
+ };
+
+ beforeEach(async () => {
+ vi.clearAllMocks();
+ mockUserService.getUser.mockReturnValue(of({ id: '1', name: 'Test' }));
+
+ await TestBed.configureTestingModule({
+ imports: [UserCmpt],
+ providers: [
+ { provide: User, useValue: mockUserService },
+ ],
+ }).compileComponents();
+ });
+
+ it('should call getUser on init', () => {
+ const fixture = TestBed.createComponent(UserCmpt);
+ fixture.detectChanges();
+
+ expect(mockUserService.getUser).toHaveBeenCalledWith('1');
+ });
+});
+```
+
+### Vitest with HTTP Testing
+
+```typescript
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
+import { provideHttpClient } from '@angular/common/http';
+
+describe('User', () => {
+ let service: User;
+ let httpMock: HttpTestingController;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ providers: [
+ provideHttpClient(),
+ provideHttpClientTesting(),
+ ],
+ });
+
+ service = TestBed.inject(User);
+ httpMock = TestBed.inject(HttpTestingController);
+ });
+
+ afterEach(() => {
+ httpMock.verify();
+ });
+
+ it('should fetch user', () => {
+ const mockUser = { id: '1', name: 'Test User' };
+
+ service.getUser('1').subscribe(user => {
+ expect(user).toEqual(mockUser);
+ });
+
+ const req = httpMock.expectOne('/api/users/1');
+ expect(req.request.method).toBe('GET');
+ req.flush(mockUser);
+ });
+});
+```
+
+---
+
+## Basic Component Test
+
+```typescript
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Counter } from './counter.component';
+
+describe('Counter', () => {
+ let component: Counter;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [Counter], // Standalone component
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(Counter);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('should increment count', () => {
+ expect(component.count()).toBe(0);
+
+ component.increment();
+
+ expect(component.count()).toBe(1);
+ });
+
+ it('should display count in template', () => {
+ component.count.set(5);
+ fixture.detectChanges();
+
+ const element = fixture.nativeElement.querySelector('.count');
+ expect(element.textContent).toContain('5');
+ });
+});
+```
+
+## Testing Signals
+
+### Direct Signal Testing
+
+```typescript
+import { signal, computed } from '@angular/core';
+
+describe('Signal logic', () => {
+ it('should update computed when signal changes', () => {
+ const count = signal(0);
+ const doubled = computed(() => count() * 2);
+
+ expect(doubled()).toBe(0);
+
+ count.set(5);
+ expect(doubled()).toBe(10);
+
+ count.update(c => c + 1);
+ expect(doubled()).toBe(12);
+ });
+});
+```
+
+### Testing Component Signals
+
+```typescript
+@Component({
+ selector: 'app-todo-list',
+ template: `
+
+ @for (todo of filteredTodos(); track todo.id) {
+