angular

Name: angular
Author: SamarthaKV29

64stars12forks

How to install angular?

samarthakv29/antigravity-god-mode/angular

$npx -y skills add SamarthaKV29/antigravity-god-mode --skill angular

Installs into the current project.

Summary

Modern Angular (v20+) expert with deep knowledge of Signals, Standalone Components, Zoneless applications, SSR/Hydration, and reactive patterns. Use PROACTIVELY for Angular development, component architecture, state management, performance optimization, and migration to modern pa

Files · 1

View on GitHub

SKILL.md

1	# Angular Expert
2
3	Master modern Angular development with Signals, Standalone Components, Zoneless applications, SSR/Hydration, and the latest reactive patterns.
4
5	## When to Use This Skill
6
7	- Building new Angular applications (v20+)
8	- Implementing Signals-based reactive patterns
9	- Creating Standalone Components and migrating from NgModules
10	- Configuring Zoneless Angular applications
11	- Implementing SSR, prerendering, and hydration
12	- Optimizing Angular performance
13	- Adopting modern Angular patterns and best practices
14
15	## Do Not Use This Skill When
16
17	- Migrating from AngularJS (1.x) → use `angular-migration` skill
18	- Working with legacy Angular apps that cannot upgrade
19	- General TypeScript issues → use `typescript-expert` skill
20
21	## Instructions
22
23	1. Assess the Angular version and project structure
24	2. Apply modern patterns (Signals, Standalone, Zoneless)
25	3. Implement with proper typing and reactivity
26	4. Validate with build and tests
27
28	## Safety
29
30	- Always test changes in development before production
31	- Gradual migration for existing apps (don't big-bang refactor)
32	- Keep backward compatibility during transitions
33
34	---
35
36	## Angular Version Timeline
37
38	\| Version \| Release \| Key Features \|
39	\| -------------- \| ------- \| ------------------------------------------------------ \|
40	\| Angular 20 \| Q2 2025 \| Signals stable, Zoneless stable, Incremental hydration \|
41	\| Angular 21 \| Q4 2025 \| Signals-first default, Enhanced SSR \|
42	\| Angular 22 \| Q2 2026 \| Signal Forms, Selectorless components \|
43
44	---
45
46	## 1. Signals: The New Reactive Primitive
47
48	Signals are Angular's fine-grained reactivity system, replacing zone.js-based change detection.
49
50	### Core Concepts
51
52	```typescript
53	import { signal, computed, effect } from "@angular/core";
54
55	// Writable signal
56	const count = signal(0);
57
58	// Read value
59	console.log(count()); // 0
60
61	// Update value
62	count.set(5); // Direct set
63	count.update((v) => v + 1); // Functional update
64
65	// Computed (derived) signal
66	const doubled = computed(() => count() * 2);
67
68	// Effect (side effects)
69	effect(() => {
70	console.log(`Count changed to: ${count()}`);
71	});
72	```
73
74	### Signal-Based Inputs and Outputs
75
76	```typescript
77	import { Component, input, output, model } from "@angular/core";
78
79	@Component({
80	selector: "app-user-card",
81	standalone: true,
82	template: `
83	<div class="card">
84	<h3>{{ name() }}</h3>
85	<span>{{ role() }}</span>
86	<button (click)="select.emit(id())">Select</button>
87	</div>
88	`,
89	})
90	export class UserCardComponent {
91	// Signal inputs (read-only)
92	id = input.required<string>();
93	name = input.required<string>();
94	role = input<string>("User"); // With default
95
96	// Output
97	select = output<string>();
98
99	// Two-way binding (model)
100	isSelected = model(false);
101	}
102
103	// Usage:
104	// <app-user-card [id]="'123'" [name]="'John'" [(isSelected)]="selected" />
105	```
106
107	### Signal Queries (ViewChild/ContentChild)
108
109	```typescript
110	import {
111	Component,
112	viewChild,
113	viewChildren,
114	contentChild,
115	} from "@angular/core";
116
117	@Component({
118	selector: "app-container",
119	standalone: true,
120	template: `
121	<input #searchInput />
122	<app-item *ngFor="let item of items()" />
123	`,
124	})
125	export class ContainerComponent {
126	// Signal-based queries
127	searchInput = viewChild<ElementRef>("searchInput");
128	items = viewChildren(ItemComponent);
129	projectedContent = contentChild(HeaderDirective);
130
131	focusSearch() {
132	this.searchInput()?.nativeElement.focus();
133	}
134	}
135	```
136
137	### When to Use Signals vs RxJS
138
139	\| Use Case \| Signals \| RxJS \|
140	\| ----------------------- \| --------------- \| -------------------------------- \|
141	\| Local component state \| ✅ Preferred \| Overkill \|
142	\| Derived/computed values \| ✅ `computed()` \| `combineLatest` works \|
143	\| Side effects \| ✅ `effect()` \| `tap` operator \|
144	\| HTTP requests \| ❌ \| ✅ HttpClient returns Observable \|
145	\| Event streams \| ❌ \| ✅ `fromEvent`, operators \|
146	\| Complex async flows \| ❌ \| ✅ `switchMap`, `mergeMap` \|
147
148	---
149
150	## 2. Standalone Components
151
152	Standalone components are self-contained and don't require NgModule declarations.
153
154	### Creating Standalone Components
155
156	```typescript
157	import { Component } from "@angular/core";
158	import { CommonModule } from "@angular/common";
159	import { RouterLink } from "@angular/router";
160
161	@Component({
162	selector: "app-header",
163	standalone: true,
164	imports: [CommonModule, RouterLink], // Direct imports
165	template: `
166	<header>
167	<a routerLink="/">Home

People who liked this also viewed

6 picks

Type

angular

64stars12forks

View on GitHub

How to install angular?

samarthakv29/antigravity-god-mode/angular

$npx -y skills add SamarthaKV29/antigravity-god-mode --skill angular

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Angular Expert
2
3	Master modern Angular development with Signals, Standalone Components, Zoneless applications, SSR/Hydration, and the latest reactive patterns.
4
5	## When to Use This Skill
6
7	- Building new Angular applications (v20+)
8	- Implementing Signals-based reactive patterns
9	- Creating Standalone Components and migrating from NgModules
10	- Configuring Zoneless Angular applications
11	- Implementing SSR, prerendering, and hydration
12	- Optimizing Angular performance
13	- Adopting modern Angular patterns and best practices
14
15	## Do Not Use This Skill When
16
17	- Migrating from AngularJS (1.x) → use `angular-migration` skill
18	- Working with legacy Angular apps that cannot upgrade
19	- General TypeScript issues → use `typescript-expert` skill
20
21	## Instructions
22
23	1. Assess the Angular version and project structure
24	2. Apply modern patterns (Signals, Standalone, Zoneless)
25	3. Implement with proper typing and reactivity
26	4. Validate with build and tests
27
28	## Safety
29
30	- Always test changes in development before production
31	- Gradual migration for existing apps (don't big-bang refactor)
32	- Keep backward compatibility during transitions
33
34	---
35
36	## Angular Version Timeline
37
38	\| Version \| Release \| Key Features \|
39	\| -------------- \| ------- \| ------------------------------------------------------ \|
40	\| Angular 20 \| Q2 2025 \| Signals stable, Zoneless stable, Incremental hydration \|
41	\| Angular 21 \| Q4 2025 \| Signals-first default, Enhanced SSR \|
42	\| Angular 22 \| Q2 2026 \| Signal Forms, Selectorless components \|
43
44	---
45
46	## 1. Signals: The New Reactive Primitive
47
48	Signals are Angular's fine-grained reactivity system, replacing zone.js-based change detection.
49
50	### Core Concepts
51
52	```typescript
53	import { signal, computed, effect } from "@angular/core";
54
55	// Writable signal
56	const count = signal(0);
57
58	// Read value
59	console.log(count()); // 0
60
61	// Update value
62	count.set(5); // Direct set
63	count.update((v) => v + 1); // Functional update
64
65	// Computed (derived) signal
66	const doubled = computed(() => count() * 2);
67
68	// Effect (side effects)
69	effect(() => {
70	console.log(`Count changed to: ${count()}`);
71	});
72	```
73
74	### Signal-Based Inputs and Outputs
75
76	```typescript
77	import { Component, input, output, model } from "@angular/core";
78
79	@Component({
80	selector: "app-user-card",
81	standalone: true,
82	template: `
83	<div class="card">
84	<h3>{{ name() }}</h3>
85	<span>{{ role() }}</span>
86	<button (click)="select.emit(id())">Select</button>
87	</div>
88	`,
89	})
90	export class UserCardComponent {
91	// Signal inputs (read-only)
92	id = input.required<string>();
93	name = input.required<string>();
94	role = input<string>("User"); // With default
95
96	// Output
97	select = output<string>();
98
99	// Two-way binding (model)
100	isSelected = model(false);
101	}
102
103	// Usage:
104	// <app-user-card [id]="'123'" [name]="'John'" [(isSelected)]="selected" />
105	```
106
107	### Signal Queries (ViewChild/ContentChild)
108
109	```typescript
110	import {
111	Component,
112	viewChild,
113	viewChildren,
114	contentChild,
115	} from "@angular/core";
116
117	@Component({
118	selector: "app-container",
119	standalone: true,
120	template: `
121	<input #searchInput />
122	<app-item *ngFor="let item of items()" />
123	`,
124	})
125	export class ContainerComponent {
126	// Signal-based queries
127	searchInput = viewChild<ElementRef>("searchInput");
128	items = viewChildren(ItemComponent);
129	projectedContent = contentChild(HeaderDirective);
130
131	focusSearch() {
132	this.searchInput()?.nativeElement.focus();
133	}
134	}
135	```
136
137	### When to Use Signals vs RxJS
138
139	\| Use Case \| Signals \| RxJS \|
140	\| ----------------------- \| --------------- \| -------------------------------- \|
141	\| Local component state \| ✅ Preferred \| Overkill \|
142	\| Derived/computed values \| ✅ `computed()` \| `combineLatest` works \|
143	\| Side effects \| ✅ `effect()` \| `tap` operator \|
144	\| HTTP requests \| ❌ \| ✅ HttpClient returns Observable \|
145	\| Event streams \| ❌ \| ✅ `fromEvent`, operators \|
146	\| Complex async flows \| ❌ \| ✅ `switchMap`, `mergeMap` \|
147
148	---
149
150	## 2. Standalone Components
151
152	Standalone components are self-contained and don't require NgModule declarations.
153
154	### Creating Standalone Components
155
156	```typescript
157	import { Component } from "@angular/core";
158	import { CommonModule } from "@angular/common";
159	import { RouterLink } from "@angular/router";
160
161	@Component({
162	selector: "app-header",
163	standalone: true,
164	imports: [CommonModule, RouterLink], // Direct imports
165	template: `
166	<header>
167	<a routerLink="/">Home

People who liked this also viewed

6 picks

Type