{"enrichment":{"faq":[{"a":"angular-idioms teaches that signals are Angular 19+ primitives for fine-grained reactivity. Signals enable automatic change detection without zone.js overhead, pair naturally with OnPush strategy, and simplify state management. The skill covers creating signals with signal(), computed() for derived state, and effect() for side effects\u2014replacing many RxJS patterns while maintaining type safety and predictable updates.","q":"How do signals work in Angular and what are their benefits?"},{"a":"angular-idioms emphasizes standalone component architecture as the modern Angular pattern. Standalone components eliminate NgModule boilerplate by declaring dependencies directly via imports, providers, and schemas. The skill covers migrating from module-based layouts, composing standalone components, lazy-loading standalone routes, and using the inject() function for dependency injection\u2014core to Angular 19+ idiomatic design.","q":"What are standalone components and how do I build with them?"},{"a":"angular-idioms covers functional guards and resolvers as the modern routing pattern replacing class-based equivalents. Functional guards are plain functions returning boolean or UrlTree, while resolvers return data or signals. The skill teaches dependency injection via inject(), composing guards with logical operators, and integrating resolvers with signal-based state for type-safe, testable route protection and data loading.","q":"How should I implement functional guards and resolvers in routing?"},{"a":"angular-idioms teaches that modern Angular architecture combines signals for state, standalone components for modularity, and OnPush change detection for performance. Best practices include using computed() for derived state, effect() for subscriptions, signal inputs via @Input, and avoiding legacy NgModule patterns. The skill emphasizes functional composition, lazy-loaded routes, and typed reactive forms for maintainable, efficient applications.","q":"What are angular components signals standalone architecture best practices?"},{"a":"angular-idioms covers NgRx Signal Store as a lightweight, signal-native state management solution. Signal Store replaces traditional NgRx by composing features with signals, computed selectors, and effects for side effects. The skill teaches structuring stores, typing state immutably, integrating with components via inject(), and combining with Angular's template control flow (@if, @for) for reactive, type-safe state-driven UIs.","q":"How do I manage state with NgRx Signal Store in Angular?"},{"a":"angular-idioms identifies anti-patterns to eliminate: NgModule boilerplate in new code, class-based guards/resolvers, untyped reactive forms, manual subscription management without takeUntilDestroyed(), OnPush=false with change detection thrashing, and legacy template syntax. The skill promotes signals over BehaviorSubject, standalone components, functional patterns, typed FormControl, and proper RxJS cleanup\u2014ensuring idiomatic, maintainable Angular 19+ code.","q":"What Angular anti-patterns should I avoid in modern projects?"}],"shadow_tags":["reactive-patterns","modern-framework","type-safety","performance-optimization","component-architecture","async-handling","dependency-management","form-validation","routing-navigation","state-flow"],"summary_rewrite":"Learn idiomatic Angular through signals, standalone components, and reactive patterns. This skill covers modern Angular 19+ practices including OnPush change detection, signal-based state management, functional guards and resolvers, and template control flow syntax. Covers components, services, directives, pipes, and routing for TypeScript-based Angular projects."},"files":[{"bytes":14070,"path":".agents/skills/angular-idioms/SKILL.md","sha256":"59ae94d6884e3dcb8699889bf85c92d5c29161e8b68f82a984b5a8dc81e70041","url":"https://skillfed.io/files/irahardianto/awesome-agv/angular-idioms/9b35654e/SKILL.md"}],"id":"irahardianto/awesome-agv/angular-idioms","links":{"html":"https://skillfed.io/irahardianto/awesome-agv/angular-idioms","md":"https://skillfed.io/irahardianto/awesome-agv/angular-idioms.md","repo":"https://github.com/irahardianto/awesome-agv"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":48,"language":"JavaScript","last_updated":"2026-07-17","license":"MIT","name":"angular-idioms","publisher":"irahardianto","stars":150},"relations":{"similar":[{"id":"Jeffallan/claude-skills/angular-architect"},{"id":"Gentleman-Programming/Gentleman-Skills/core"},{"id":"manutej/luxor-claude-marketplace/angular-development"},{"id":"develite98/angular-best-practices/angular-best-practices-v20+"},{"id":"analogjs/angular-skills/angular-component"},{"id":"alfredoperez/angular-best-practices/angular-best-practices"},{"id":"analogjs/angular-skills/angular-signals"},{"id":"samhvw8/dot-claude/frontend-development"},{"id":"samhvw8/dotfiles/frontend-development"},{"id":"irahardianto/awesome-agv/java-idioms"}]},"slug":{"owner":"irahardianto","repo":"awesome-agv","skill":"angular-idioms"},"version":"9b35654e"}