From b46e45fb4de72e88b55e8df51774ce72c0850640 Mon Sep 17 00:00:00 2001 From: "Chau (Joe) Nguyen" <5130533+chauey@users.noreply.github.com> Date: Wed, 4 Feb 2026 00:48:55 -0600 Subject: [PATCH] feat(angular): Add metadata.json and README.md to all Angular skills - Add metadata.json with version tracking, organization, and references - Add README.md with skill overviews, usage guides, and quick references - Brings Angular skills to parity with React Best Practices infrastructure - Covers: angular, angular-state-management, angular-ui-patterns, angular-best-practices --- skills/angular-best-practices/README.md | 58 +++++++++++++++++++ skills/angular-best-practices/metadata.json | 13 +++++ skills/angular-state-management/README.md | 41 +++++++++++++ skills/angular-state-management/metadata.json | 13 +++++ skills/angular-ui-patterns/README.md | 50 ++++++++++++++++ skills/angular-ui-patterns/metadata.json | 12 ++++ skills/angular/README.md | 40 +++++++++++++ skills/angular/metadata.json | 14 +++++ 8 files changed, 241 insertions(+) create mode 100644 skills/angular-best-practices/README.md create mode 100644 skills/angular-best-practices/metadata.json create mode 100644 skills/angular-state-management/README.md create mode 100644 skills/angular-state-management/metadata.json create mode 100644 skills/angular-ui-patterns/README.md create mode 100644 skills/angular-ui-patterns/metadata.json create mode 100644 skills/angular/README.md create mode 100644 skills/angular/metadata.json diff --git a/skills/angular-best-practices/README.md b/skills/angular-best-practices/README.md new file mode 100644 index 00000000..143a521f --- /dev/null +++ b/skills/angular-best-practices/README.md @@ -0,0 +1,58 @@ +# Angular Best Practices + +Performance optimization and best practices for Angular applications optimized for AI agents and LLMs. + +## Overview + +This skill provides prioritized performance guidelines across: + +- **Change Detection** - OnPush strategy, Signals, Zoneless apps +- **Async Operations** - Avoiding waterfalls, SSR preloading +- **Bundle Optimization** - Lazy loading, `@defer`, tree-shaking +- **Rendering Performance** - TrackBy, virtual scrolling, CDK +- **SSR & Hydration** - Server-side rendering patterns +- **Template Optimization** - Structural directives, pipe memoization +- **State Management** - Efficient reactivity patterns +- **Memory Management** - Subscription cleanup, detached refs + +## Structure + +The `SKILL.md` file is organized by priority: + +1. **Critical Priority** - Largest performance gains (change detection, async) +2. **High Priority** - Significant impact (bundles, rendering) +3. **Medium Priority** - Noticeable improvements (SSR, templates) +4. **Low Priority** - Incremental gains (memory, cleanup) + +Each rule includes: + +- ❌ **WRONG** - What not to do +- ✅ **CORRECT** - Recommended pattern +- 📝 **Why** - Explanation of the impact + +## Quick Reference Checklist + +**For New Components:** + +- [ ] Using `ChangeDetectionStrategy.OnPush` +- [ ] Using Signals for reactive state +- [ ] Using `@defer` for non-critical content +- [ ] Using `trackBy` for `*ngFor` loops +- [ ] No subscriptions without cleanup + +**For Performance Reviews:** + +- [ ] No async waterfalls (parallel data fetching) +- [ ] Routes lazy-loaded +- [ ] Large libraries code-split +- [ ] Images use `NgOptimizedImage` + +## Version + +Current version: 1.0.0 (February 2026) + +## References + +- [Angular Performance](https://angular.dev/guide/performance) +- [Zoneless Angular](https://angular.dev/guide/zoneless) +- [Angular SSR](https://angular.dev/guide/ssr) diff --git a/skills/angular-best-practices/metadata.json b/skills/angular-best-practices/metadata.json new file mode 100644 index 00000000..633f57c6 --- /dev/null +++ b/skills/angular-best-practices/metadata.json @@ -0,0 +1,13 @@ +{ + "version": "1.0.0", + "organization": "Antigravity Awesome Skills", + "date": "February 2026", + "abstract": "Performance optimization and best practices guide for Angular applications designed for AI agents and LLMs. Covers change detection strategies (OnPush, Signals, Zoneless), avoiding async waterfalls, bundle optimization with lazy loading and @defer, rendering performance, SSR/hydration patterns, and memory management. Prioritized by impact from critical to incremental improvements.", + "references": [ + "https://angular.dev/best-practices", + "https://angular.dev/guide/performance", + "https://angular.dev/guide/zoneless", + "https://angular.dev/guide/ssr", + "https://web.dev/performance" + ] +} diff --git a/skills/angular-state-management/README.md b/skills/angular-state-management/README.md new file mode 100644 index 00000000..e8ffb15e --- /dev/null +++ b/skills/angular-state-management/README.md @@ -0,0 +1,41 @@ +# Angular State Management + +Complete state management patterns for Angular applications optimized for AI agents and LLMs. + +## Overview + +This skill provides decision frameworks and implementation patterns for: + +- **Signal-based Services** - Lightweight state for shared data +- **NgRx SignalStore** - Feature-scoped state with computed values +- **NgRx Store** - Enterprise-scale global state management +- **RxJS ComponentStore** - Reactive component-level state +- **Forms State** - Reactive and template-driven form patterns + +## Structure + +The `SKILL.md` file is organized into: + +1. **State Categories** - Local, shared, global, server, URL, and form state +2. **Selection Criteria** - Decision trees for choosing the right solution +3. **Implementation Patterns** - Complete examples for each approach +4. **Migration Guides** - Moving from BehaviorSubject to Signals +5. **Bridging Patterns** - Integrating Signals with RxJS + +## When to Use Each Pattern + +- **Signal Service**: Shared UI state (theme, user preferences) +- **NgRx SignalStore**: Feature state with computed values +- **NgRx Store**: Complex cross-feature dependencies +- **ComponentStore**: Component-scoped async operations +- **Reactive Forms**: Form state with validation + +## Version + +Current version: 1.0.0 (February 2026) + +## References + +- [Angular Signals](https://angular.dev/guide/signals) +- [NgRx](https://ngrx.io) +- [NgRx SignalStore](https://ngrx.io/guide/signals) diff --git a/skills/angular-state-management/metadata.json b/skills/angular-state-management/metadata.json new file mode 100644 index 00000000..97132e00 --- /dev/null +++ b/skills/angular-state-management/metadata.json @@ -0,0 +1,13 @@ +{ + "version": "1.0.0", + "organization": "Antigravity Awesome Skills", + "date": "February 2026", + "abstract": "Complete state management guide for Angular applications designed for AI agents and LLMs. Covers Signal-based services, NgRx for global state, RxJS patterns, and component stores. Includes decision trees for choosing the right solution, migration patterns from BehaviorSubject to Signals, and strategies for bridging Signals with RxJS observables.", + "references": [ + "https://angular.dev/guide/signals", + "https://ngrx.io", + "https://ngrx.io/guide/signals", + "https://www.rx-angular.io", + "https://github.com/ngrx/platform" + ] +} diff --git a/skills/angular-ui-patterns/README.md b/skills/angular-ui-patterns/README.md new file mode 100644 index 00000000..91374283 --- /dev/null +++ b/skills/angular-ui-patterns/README.md @@ -0,0 +1,50 @@ +# Angular UI Patterns + +Modern UI patterns for building robust Angular applications optimized for AI agents and LLMs. + +## Overview + +This skill covers essential UI patterns for: + +- **Loading States** - Skeleton vs spinner decision trees +- **Error Handling** - Error boundary hierarchy and recovery +- **Progressive Disclosure** - Using `@defer` for lazy rendering +- **Data Display** - Handling empty, loading, and error states +- **Form Patterns** - Submission states and validation feedback +- **Dialog/Modal Patterns** - Proper dialog lifecycle management + +## Core Principles + +1. **Never show stale UI** - Only show loading when no data exists +2. **Surface all errors** - Never silently fail +3. **Optimistic updates** - Update UI before server confirms +4. **Progressive disclosure** - Use `@defer` to load non-critical content +5. **Graceful degradation** - Fallback for failed features + +## Structure + +The `SKILL.md` file includes: + +1. **Golden Rules** - Non-negotiable patterns to follow +2. **Decision Trees** - When to use skeleton vs spinner +3. **Code Examples** - Correct vs incorrect implementations +4. **Anti-patterns** - Common mistakes to avoid + +## Quick Reference + +```typescript +// Only show loading without data +if (error()) return +if (loading() && !data()) return +if (!data()?.length) return +return +``` + +## Version + +Current version: 1.0.0 (February 2026) + +## References + +- [Angular @defer](https://angular.dev/guide/defer) +- [Angular Templates](https://angular.dev/guide/templates) diff --git a/skills/angular-ui-patterns/metadata.json b/skills/angular-ui-patterns/metadata.json new file mode 100644 index 00000000..38a0f5c9 --- /dev/null +++ b/skills/angular-ui-patterns/metadata.json @@ -0,0 +1,12 @@ +{ + "version": "1.0.0", + "organization": "Antigravity Awesome Skills", + "date": "February 2026", + "abstract": "Modern UI patterns for Angular applications designed for AI agents and LLMs. Covers loading states, error handling, progressive disclosure, and data display patterns. Emphasizes showing loading only without data, surfacing all errors, optimistic updates, and graceful degradation using @defer. Includes decision trees and anti-patterns to avoid.", + "references": [ + "https://angular.dev/guide/defer", + "https://angular.dev/guide/templates", + "https://material.angular.io", + "https://ng-spartan.com" + ] +} diff --git a/skills/angular/README.md b/skills/angular/README.md new file mode 100644 index 00000000..1929725e --- /dev/null +++ b/skills/angular/README.md @@ -0,0 +1,40 @@ +# Angular + +A comprehensive guide to modern Angular development (v20+) optimized for AI agents and LLMs. + +## Overview + +This skill covers modern Angular patterns including: + +- **Signals** - Angular's reactive primitive for state management +- **Standalone Components** - Modern component architecture without NgModules +- **Zoneless Applications** - High-performance apps without Zone.js +- **SSR & Hydration** - Server-side rendering and client hydration patterns +- **Modern Routing** - Functional guards, resolvers, and lazy loading +- **Dependency Injection** - Modern DI with `inject()` function +- **Reactive Forms** - Type-safe form handling + +## Structure + +This skill is a single, comprehensive `SKILL.md` file containing: + +1. Modern component patterns with Signal inputs/outputs +2. State management with Signals and computed values +3. Performance optimization techniques +4. SSR and hydration best practices +5. Migration strategies from legacy Angular patterns + +## Usage + +This skill is designed to be read in full to understand the complete modern Angular development approach, or referenced for specific patterns when needed. + +## Version + +Current version: 1.0.0 (February 2026) + +## References + +- [Angular Documentation](https://angular.dev) +- [Angular Signals](https://angular.dev/guide/signals) +- [Zoneless Angular](https://angular.dev/guide/zoneless) +- [Angular SSR](https://angular.dev/guide/ssr) diff --git a/skills/angular/metadata.json b/skills/angular/metadata.json new file mode 100644 index 00000000..13da2801 --- /dev/null +++ b/skills/angular/metadata.json @@ -0,0 +1,14 @@ +{ + "version": "1.0.0", + "organization": "Antigravity Awesome Skills", + "date": "February 2026", + "abstract": "Comprehensive guide to modern Angular development (v20+) designed for AI agents and LLMs. Covers Signals, Standalone Components, Zoneless applications, SSR/Hydration, reactive patterns, routing, dependency injection, and modern forms. Emphasizes component-driven architecture with practical examples and migration strategies for modernizing existing codebases.", + "references": [ + "https://angular.dev", + "https://angular.dev/guide/signals", + "https://angular.dev/guide/zoneless", + "https://angular.dev/guide/ssr", + "https://angular.dev/guide/standalone-components", + "https://angular.dev/guide/defer" + ] +}