angular-developer
Skill86 starsChanged 4 months agoMITView on GitHub
Expert Angular v20 developer skill. Covers Signals, Components, Templates, Directives, DI, Routing, Forms, HTTP Client, SSR/Hydration, Testing, i18n, Animations, Drag and Drop, and Best Practices (Style Guide, Security, Accessibility, Error Handling, Performance, Updates). Trigger on any mention of Angular, component, directive, signal, template, routing, guard, resolver, pipe, service, dependency injection, standalone, SSR, hydration, change detection, OnPush, zoneless, reactive forms, HttpClient, interceptor, i18n, CDK, drag-drop, or Angular CLI commands (ng generate, ng build, ng serve, ng test, ng update). Also trigger for angular.json, tsconfig, or Angular file conventions (.component.ts, .service.ts, .pipe.ts, .spec.ts). Even if the user just says "build this in Angular" or "why is my Angular app broken" — trigger immediately.
22 other projects use a version of this.
Adopted by
Most recently taken up by
- JuankCadavid/akili-specstheir own version, first seen Nov 2, 2026
- renepf/claude-skillstheir own version, first seen Oct 25, 2026
- davidanthonyn/claude-skillstheir own version, first seen Oct 20, 2026
- Fafnur/fafnurtheir own version, first seen Oct 20, 2026
- code-dimension/code-dimension-skillstheir own version, first seen Oct 17, 2026
- angular/skillstheir own version, first seen Oct 13, 2026
Used with
Projects with it also use brainstorming, grill-me and 1 more.
Other files people use alongside this one.
Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
OpenAISkillbrainstorming
You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.
Also in 3 projects that use this
GoogleSkillgrill-me
A relentless interview to sharpen a plan or design.
Also in 3 projects that use this
BlockSkillfrontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Also in 3 projects that use this
Other versions22 projects use a version of this.
Word for word · 0
None found.
Edited · 0
None found.
Wrote their own version · 22
- angular/angular★ 101ksame name
- ghostfolio/ghostfolio★ 9.7ksame name
- jsverse/transloco★ 2.3ksame name
- dotCMS/core★ 971same name
- angular/skills★ 719same name
- biaogebusy/web-builder★ 583same name
- azerothcore/Keira3★ 463same name
- Fmarzochi/EGC★ 61same name
- L-X-T/ng-agentic-skills★ 13same name
- JuankCadavid/akili-specs★ 10same name
12 more not listed
How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.
In this repositoryOne other file it gives its agents.
- obsidian-power-userSkill
The file
We split this skill into the rules it gives an agent
4 rules. 0 are common, 3 are distinctive, and 1 is very specific to this project.
0
Common
Most of the 22 edited versions we read keep these.
3
Distinctive
This author's own choices. Worth a look.
1
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Distinctive: line 14
When the user is working on an Angular task, identify which topic applies and read the corresponding reference file before responding.
- Very specific: line 18
All reference files are located in references/ relative to this SKILL.md.
- Distinctive: line 139
When a user asks about Angular, follow this decision tree:
- Distinctive: line 177
When in doubt between approaches, prefer: signals > computed > effect > RxJS
“Common” is measured: kept by at least 6 in 10 of the 22 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md
Angular Developer Skill (v20)
Purpose
This skill provides comprehensive Angular v20 reference documentation scraped directly from the official v20.angular.dev docs. Use it for any Angular development task — writing components, debugging, architecting features, optimizing performance, or following best practices.
How to Use
When the user is working on an Angular task, identify which topic applies and read the corresponding reference file before responding. Multiple reference files may apply to a single task — read all relevant ones.
Reference Files
All reference files are located in references/ relative to this SKILL.md.
In-depth Guides
| Topic | File | When to read |
| Signals — Overview | references/signals/overview.md | signal(), computed(), effect(), untracked(), equality functions, OnPush integration |
| Signals — linkedSignal | references/signals/linked-signal.md | linkedSignal(), dependent writable state, source+computation form, previous value |
| Signals — resource | references/signals/resource.md | resource(), async reactivity, params, loader, abort, reload, ResourceStatus, httpResource |
| Components — Overview | references/components/overview.md | Component anatomy, @Component decorator, metadata, standalone components, imports, host element, view, component tree |
| Components — Selectors | references/components/selectors.md | Type/attribute/class selectors, :not, combining selectors, selector prefixes, attribute selector use-cases |
| Components — Styling | references/components/styling.md | Inline vs file styles, ViewEncapsulation (Emulated/ShadowDom/None), :host, ::ng-deep, <style> in templates, external style refs |
| Components — Inputs | references/components/inputs.md | Signal input(), input.required(), transforms, aliases, model() for two-way, @Input decorator, getters/setters |
| Components — Outputs | references/components/outputs.md | Signal output(), emitting data, aliases, programmatic subscribe, @Output/EventEmitter |
| Components — Content Projection | references/components/content-projection.md | <ng-content>, multiple slots with select, fallback content, ngProjectAs |
| Components — Host Elements | references/components/host-elements.md | host property, attribute/class/style/event bindings, @HostBinding/@HostListener, binding collisions, CSS custom properties, HostAttributeToken |
| Components — Lifecycle | references/components/lifecycle.md | All lifecycle hooks order and details, ngOnChanges/SimpleChanges, DestroyRef, afterNextRender/afterEveryRender phases |
| Components — Queries | references/components/queries.md | viewChild/viewChildren, contentChild/contentChildren, required queries, locators, read option, descendants, @ViewChild/@ContentChild/QueryList |
| Components — DOM APIs | references/components/dom-apis.md | ElementRef, render callbacks, Renderer2, when/when-not to use DOM APIs, XSS risk of innerHTML |
| Components — Inheritance | references/components/inheritance.md | Extending components/directives, inherited metadata, forwarding DI deps, overriding lifecycle methods |
| Components — Programmatic Rendering | references/components/programmatic-rendering.md | NgComponentOutlet, ViewContainerRef.createComponent, lazy-loading, inputBinding/outputBinding/twoWayBinding, popup pattern with createComponent + hostElement |
| Components — Advanced Config | references/components/advanced-configuration.md | ChangeDetectionStrategy.OnPush, preserveWhitespaces, CUSTOM_ELEMENTS_SCHEMA |
| Components — Custom Elements | references/components/elements.md | @angular/elements, createCustomElement(), input→attribute mapping, output→custom event, typings with NgElement/WithProperties |
| Templates — Overview | references/templates/overview.md | Template syntax overview, differences from HTML, what topics templates cover |
| Templates — Binding | references/templates/binding.md | Text interpolation {{ }}, property [], attribute [attr.], CSS class/style bindings, signal-based updates |
| Templates — Event Listeners | references/templates/event-listeners.md | (event) syntax, $event, key modifiers, preventDefault, custom event plugins via EVENT_MANAGER_PLUGINS |
| Templates — Two-Way Binding | references/templates/two-way-binding.md | [()] banana-in-a-box, ngModel with FormsModule, component two-way binding with model() |
| Templates — Control Flow | references/templates/control-flow.md | @if/@else if/@else, as alias, @for with track, contextual vars, @empty, @switch |
| Templates — Pipes | references/templates/pipes.md | Built-in pipes, | operator, chaining, parameters, pure vs impure, custom pipes with @Pipe decorator |
| Templates — ng-content | references/templates/ng-content.md | Content projection, <ng-content /> slot, parent→child content rendering |
| Templates — ng-template | references/templates/ng-template.md | Template fragments, TemplateRef, #ref on ng-template, NgTemplateOutlet, ViewContainerRef.createEmbeddedView, context params, structural directives |
| Templates — ng-container | references/templates/ng-container.md | Grouping without DOM nodes, NgComponentOutlet, NgTemplateOutlet, structural directives, DI injection via container |
| Templates — Variables | references/templates/variables.md | @let local vars, scope, non-reassignable, template reference vars #name, exportAs, use with queries |
| Templates — @defer | references/templates/defer.md | Deferrable views, lazy loading, @placeholder/@loading/@error, triggers (idle/viewport/interaction/hover/immediate/timer/when), prefetch, testing, SSR/HMR notes |
| Templates — Expression Syntax | references/templates/expression-syntax.md | Supported/unsupported literals, globals, operators, optional chaining quirk, no declarations, statement vs expression differences |
| Templates — Whitespace | references/templates/whitespace.md | Default whitespace collapsing, preserveWhitespaces, &ngsp; entity |
| Directives — Overview | references/directives/overview.md | Built-in directives, NgClass, NgStyle, NgModel, NgIf, NgFor (trackBy), NgSwitch, <ng-container> |
| Directives — Attribute Directives | references/directives/attribute-directives.md | Custom attribute directives, ElementRef, host event bindings, input() for passing values, NgNonBindable |
| Directives — Structural Directives | references/directives/structural-directives.md | <ng-template>, shorthand * syntax, microsyntax grammar, creating structural directives, TemplateRef/ViewContainerRef, template type guards (ngTemplateGuard_, ngTemplateContextGuard) |
| Directives — Composition API | references/directives/directive-composition-api.md | hostDirectives, including/aliasing inputs and outputs, composing directives on directives, execution order, DI with host directives |
| Directives — NgOptimizedImage | references/directives/image-optimization.md | NgOptimizedImage, ngSrc, priority, fill mode, width/height, placeholders, srcset, loaders (built-in and custom), loaderParams, LCP optimization |
| Dependency Injection — Overview | references/dependency-injection/overview.md | DI concepts, what services are, inject() function, valid injection contexts |
| Dependency Injection — Creating Services | references/dependency-injection/creating-and-using-services.md | ng generate service, @Injectable, providedIn: 'root', injecting into components and services |
| Dependency Injection — Defining Providers | references/dependency-injection/defining-dependency-providers.md | InjectionToken, useClass/useValue/useFactory/useExisting, multi, provider scopes (app/component/route), provide* library pattern |
| Dependency Injection — Injection Context | references/dependency-injection/injection-context.md | What contexts allow inject(), runInInjectionContext, assertInInjectionContext, NG0203 error |
| Dependency Injection — Hierarchical Injectors | references/dependency-injection/hierarchical-dependency-injection.md | EnvironmentInjector vs ElementInjector, resolution rules, modifiers (optional/self/skipSelf/host), providers vs viewProviders, logical template tree, use-case scenarios |
| Dependency Injection — Lightweight Tokens | references/dependency-injection/lightweight-injection-tokens.md | Token retention problem, abstract class pattern, useExisting, tree-shaking for libraries |
| Dependency Injection — DI in Action | references/dependency-injection/di-in-action.md | ElementRef for DOM access, forwardRef() for circular dependencies |
| Routing — Overview | references/routing/overview.md | What Angular Router is, the three parts of routing (routes/outlets/links), available features overview |
| Routing — Define Routes | references/routing/define-routes.md | Routes, static/parameterized/wildcard paths, provideRouter, loadComponent lazy loading, redirects, page titles, TitleStrategy, route-level providers, static data, nested/child routes |
| Routing — Outlets | references/routing/show-routes-with-outlets.md | RouterOutlet, nested outlets, named secondary outlets, outlet lifecycle events (activate/deactivate/attach/detach), routerOutletData/ROUTER_OUTLET_DATA |
| Routing — Navigation | references/routing/navigate-to-routes.md | RouterLink, absolute vs relative paths, string vs array syntax, router.navigate(), router.navigateByUrl(), relativeTo, replaceUrl |
| Routing — Read Route State | references/routing/read-route-state.md | ActivatedRoute, route snapshots, route params, query params, matrix params, RouterLinkActive, routerLinkActiveOptions, ariaCurrentWhenActive |
| Routing — Redirects | references/routing/redirecting-routes.md | redirectTo, pathMatch: 'prefix'/'full', conditional redirects with RedirectFunction |
| Routing — Guards | references/routing/route-guards.md | CanActivate, CanActivateChild, CanDeactivate, CanMatch, guard return types, UrlTree/RedirectCommand, applying guards, ng generate guard |
| Routing — Resolvers | references/routing/data-resolvers.md | ResolveFn, resolve route config, accessing data via ActivatedRoute or withComponentInputBinding, error handling (withNavigationErrorHandler, RedirectCommand), parent→child resolver data |
| Routing — Lifecycle & Events | references/routing/lifecycle-and-events.md | All router events in order, subscribing to Router.events, withDebugTracing, loading indicators, analytics, error handling patterns |
| Routing — Testing | references/routing/testing.md | RouterTestingHarness, testing route params/guards/outlets/nested routes/query params, best practices (don't mock Angular Router) |
| Routing — Common Tasks | references/routing/common-router-tasks.md | withComponentInputBinding, 404 page, link parameters array, LocationStrategy, PathLocationStrategy vs HashLocationStrategy, <base href> |
| Routing — UrlMatcher | references/routing/routing-with-urlmatcher.md | UrlMatcher, custom route matching functions, UrlSegment, posParams, use cases (social handles, version URLs) |
| Routing — Rendering Strategies | references/routing/rendering-strategies.md | CSR vs SSG vs SSR trade-offs, decision matrix, hydration overview |
| Routing — Customizing Behavior | references/routing/customizing-route-behavior.md | withRouterConfig options (canceledNavigationResolution, onSameUrlNavigation, paramsInheritanceStrategy, urlUpdateStrategy, defaultQueryParamsHandling), RouteReuseStrategy, preloading strategies, UrlHandlingStrategy, custom matchers |
| Routing — Reference | references/routing/router-reference.md | Complete router events table, all router terminology, <base href>, HashLocationStrategy |
| Routing — View Transitions | references/routing/route-transition-animations.md | withViewTransitions, View Transitions API integration, CSS animation customization, onViewTransitionCreated, skipTransition() |
| Forms — Overview | references/forms/overview.md | Choosing between reactive vs template-driven, key differences, common foundation classes (FormControl/FormGroup/FormArray/ControlValueAccessor), data flow, mutability, testing comparison |
| Forms — Reactive Forms | references/forms/reactive-forms.md | FormControl, FormGroup, FormArray, FormBuilder, setValue/patchValue, formControlName/formGroupName/formArrayName, events observable, unified state change events, type guard utilities (isFormControl etc.) |
| Forms — Typed Forms | references/forms/typed-forms.md | Strictly typed reactive forms (Angular 14+), nullability, nonNullable, explicit type params, FormRecord, UntypedFormGroup/UntypedFormControl, NonNullableFormBuilder |
| Forms — Template-Driven | references/forms/template-driven-forms.md | NgModel, NgForm, NgModelGroup, two-way binding with [(ngModel)], #ref="ngModel", control state CSS classes (ng-valid/ng-dirty/ng-touched), ngSubmit, form reset |
| Forms — Validation | references/forms/form-validation.md | Built-in validators, custom sync/async validators (ValidatorFn/AsyncValidatorFn), NG_VALIDATORS/NG_ASYNC_VALIDATORS, cross-field validation, control status CSS classes, updateOn (change/blur/submit), ngNativeValidate |
| Forms — Dynamic Forms | references/forms/dynamic-forms.md | Metadata-driven form generation, QuestionBase pattern, QuestionControlService, @switch on controlType, computed() signal for FormGroup, runtime add/remove controls |
| HTTP Client — Overview | references/http-client/overview.md | What HttpClient provides, feature summary |
| HTTP Client — Setup | references/http-client/setup.md | provideHttpClient, withFetch, withInterceptors, withInterceptorsFromDi, withRequestsMadeViaParent, withJsonpSupport, XSRF options, NgModule equivalents |
| HTTP Client — Making Requests | references/http-client/making-requests.md | GET/POST/PUT/DELETE, typed responses, responseType, params, headers, observe, progress events, error handling, timeouts, advanced fetch options (cache/priority/mode/credentials/redirect/referrer/integrity), cold Observables, best practices |
| HTTP Client — httpResource | references/http-client/http-resource.md | httpResource() reactive wrapper, signal-based status/response, response types, Zod/Valibot parse option, testing |
| HTTP Client — Interceptors | references/http-client/interceptors.md | Functional interceptors, withInterceptors, response interception, cloning requests, inject() in interceptors, HttpContextToken, synthetic responses, redirect info, DI-based interceptors |
| HTTP Client — Testing | references/http-client/testing.md | provideHttpClientTesting, HttpTestingController, expectOne/match/expectNone, flushing, error testing, testing interceptors |
| Server-Side & Hybrid Rendering — Overview | references/ssr-hydration/overview.md | Summary of SSR/SSG/CSR strategies and guide links |
| Server-Side & Hybrid Rendering — SSR | references/ssr-hydration/ssr.md | ng new --ssr, ng add @angular/ssr, RenderMode, server routing, parameterized prerendering, fallback strategies, headers/status codes, server-compatible components, DOCUMENT token, REQUEST/RESPONSE_INIT, HttpClient transfer cache, Node.js/non-Node.js server config |
| Server-Side & Hybrid Rendering — Hydration | references/ssr-hydration/hydration.md | provideClientHydration, event replay (withEventReplay), DOM constraints, ngSkipHydration, i18n hydration, app stability, third-party library issues |
| Server-Side & Hybrid Rendering — Incremental Hydration | references/ssr-hydration/incremental-hydration.md | withIncrementalHydration, hydrate triggers (on idle/viewport/interaction/hover/immediate/timer, when, never), nested blocks, @placeholder requirements |
| Testing — Overview | references/testing/overview.md | ng test, Jasmine/Karma setup, CLI config, karma.conf.js, CI testing with ChromeHeadless |
| Testing — Code Coverage | references/testing/code-coverage.md | --code-coverage, coverage reports, enforcing minimums with karma.conf.js check property |
| Testing — Services | references/testing/services.md | Testing services with/without TestBed, spies, TestBed.inject(), fakeAsync/tick, waitForAsync, HttpClientTestingModule, HttpTestingController |
| Testing — Components Basics | references/testing/components-basics.md | ComponentFixture, createComponent(), detectChanges(), nativeElement, DebugElement, By.css() |
| Testing — Components Scenarios | references/testing/components-scenarios.md | Component binding, auto change detection, dispatchEvent(), external templates, service dependencies, fakeAsync, nested components, overrideComponent, page objects, waitForAsync |
| Testing — Attribute Directives | references/testing/attribute-directives.md | Test component pattern, By.directive(), :not selector, injector access, DebugElement.properties/styles/providerTokens |
| Testing — Pipes | references/testing/pipes.md | Isolated pipe tests (no TestBed needed), DOM tests that verify pipe integration in templates |
| i18n — Overview | references/i18n/overview.md | i18n vs l10n concepts, localization workflow summary, what the full i18n pipeline looks like |
| i18n — Add Package | references/i18n/add-package.md | ng add @angular/localize, --use-at-runtime, effect on package.json and tsconfig |
| i18n — Locale IDs | references/i18n/locale-id.md | Unicode locale ID format, BCP 47, CLDR, setting sourceLocale in angular.json |
| i18n — Format Data | references/i18n/format-data-locale.md | DatePipe, CurrencyPipe, DecimalPipe, PercentPipe, LOCALE_ID, overriding locale per-pipe |
| i18n — Prepare Component | references/i18n/prepare.md | i18n attribute, i18n-{attr}, $localize, metadata format meaning|description@@id, ICU plural/select/nested expressions |
| i18n — Translation Files | references/i18n/translation-files.md | ng extract-i18n, output formats (XLIFF/JSON/ARB/XMB), creating per-locale files, XLIFF <trans-unit> structure, translating plurals/select/nested |
| i18n — Merge | references/i18n/merge.md | "localize" option in angular.json, ng build --localize, locale-specific configs, ng serve single-locale limit, i18nMissingTranslation warning levels |
| i18n — Deploy | references/i18n/deploy.md | Subdirectory per locale, subPath, Accept-Language header detection, Nginx and Apache config examples, SSR auto-redirect |
| i18n — Global Variants | references/i18n/import-global-variants.md | @angular/common/locales/global/*, manual import in main.ts, when automatic vs manual import applies |
| i18n — Custom IDs | references/i18n/manage-marked-text.md | @@ prefix for stable IDs, trade-offs vs auto-generated IDs, uniqueness requirement |
| i18n — Example App | references/i18n/example.md | Full working example with fr-CA/en-US, complete app.component.html, app.component.ts, and messages.fr.xlf |
| Animations — Enter/Leave | references/animations/overview.md | animate.enter/animate.leave (v20 new API), AnimationCallbackEvent, animationComplete(), MAX_ANIMATION_TIMEOUT, testing, legacy compatibility |
| Animations — CSS | references/animations/css.md | CSS keyframe animations, transitions, @starting-style, state/style toggling, auto-height, staggering, parallel animations, reordering lists, disabling animations, programmatic control via getAnimations() |
| Animations — Route Transitions | references/animations/route-transitions.md | View Transitions API, withViewTransitions, enableViewTransitions, CSS pseudo-elements ::view-transition-old/new, onViewTransitionCreated, skipTransition, global styles requirement |
| Drag and Drop | references/drag-drop/overview.md | CDK cdkDrag/cdkDropList, reorderable lists, transfer between lists, cdkDropListGroup, copying items (cdkDropListHasAnchor), drag handles, custom preview/placeholder, axis locking, boundaries, delay, disable, orientation (vertical/horizontal/mixed), sort predicates, CDK_DRAG_CONFIG, scrollable containers |
Best Practices
| Topic | File | When to read |
| Style Guide | references/style-guide/style-guide.md | Naming conventions, project structure, inject() preference, component/directive patterns, protected/readonly usage, event handler naming, lifecycle interfaces |
| Security | references/best-practices/security.md | XSS prevention, sanitization contexts, DomSanitizer/bypassSecurityTrust*, CSP, Trusted Types, AOT compiler security, XSRF/CSRF, XSSI |
| Accessibility | references/best-practices/accessibility.md | ARIA attribute binding (attr.), Angular Material/CDK a11y tools, native element patterns, focus management after navigation, ariaCurrentWhenActive, @defer accessibility, custom accessible components |
| Unhandled Errors | references/best-practices/error-handling.md | ErrorHandler, what Angular catches vs. doesn't, async error handling, provideBrowserGlobalErrorListeners(), SSR error listeners, TestBed error rethrowing |
| Performance — Overview | references/best-practices/performance-overview.md | Change detection fundamentals, overview of performance subtopics and tools |
| Performance — Zone Pollution | references/best-practices/zone-pollution.md | Zone.js pollution, runOutsideAngular, third-party lib init, re-entering the zone, NgZone.isInAngularZone() |
| Performance — Slow Computations | references/best-practices/slow-computations.md | Profiling with DevTools, pure pipes, memoization, avoiding repaints in lifecycle hooks |
| Performance — Skipping Subtrees | references/best-practices/skipping-subtrees.md | OnPush strategy, change detection scenarios, markForCheck, object reference mutations |
| Performance — Chrome DevTools | references/best-practices/profiling-chrome-devtools.md | enableProfiling(), Angular custom track, color coding, bootstrap/component/CD profiling |
| Performance — Zoneless | references/best-practices/zoneless.md | provideZonelessChangeDetection, removing ZoneJS, PendingTasks, OnPush compatibility, testing with whenStable() |
| Keeping Up to Date | references/updates/keeping-up-to-date.md | ng update, ng version, Angular Update Guide, changelog, version support policy |
Routing Logic
When a user asks about Angular, follow this decision tree:
- Identify the primary topic from the user's question
- Read the matching reference file(s) — multiple may apply (e.g., a form validation question may need both
forms.mdandcomponents.md) - For best practices questions, also read the relevant best practices file alongside the technical reference
- For architecture/design questions, read
style-guide.md+ the relevant technical reference(s) - Answer using the reference content — cite Angular v20 patterns, APIs, and conventions
Common Multi-File Lookups
| User's Task | Read These |
| Building a form component | forms/overview.md + forms/reactive-forms.md + components/inputs.md + components/outputs.md |
| Setting up authentication | routing/route-guards.md + http-client/interceptors.md |
| SSR with hydration | ssr-hydration/ssr.md + ssr-hydration/hydration.md + routing/rendering-strategies.md |
| Optimizing a slow app | best-practices/performance-overview.md + best-practices/zone-pollution.md + best-practices/slow-computations.md + best-practices/skipping-subtrees.md + signals/overview.md |
| Writing tests | testing/overview.md + testing/services.md or testing/components-basics.md + testing/components-scenarios.md as needed |
| Accessible forms | best-practices/accessibility.md + forms/overview.md + forms/form-validation.md |
| Drag-and-drop list | drag-drop/overview.md + animations/css.md (if animated) |
| Lazy loading | templates/defer.md (@defer) + routing/define-routes.md (loadComponent) |
| Security review | best-practices/security.md + http-client/interceptors.md (XSRF) |
| i18n setup | i18n/overview.md + i18n/add-package.md + i18n/prepare.md + i18n/translation-files.md + i18n/merge.md |
| i18n deploying/serving | i18n/deploy.md + i18n/import-global-variants.md |
| i18n custom IDs | i18n/manage-marked-text.md |
| Updating Angular version | updates/keeping-up-to-date.md |
| Component lifecycle | components/lifecycle.md |
| Dynamic/programmatic rendering | components/programmatic-rendering.md |
| Two-way binding / model inputs | components/inputs.md |
| Shadow DOM / style isolation | components/styling.md |
| Child queries / ViewChild | components/queries.md |
| Web Components / Angular Elements | components/elements.md |
Important Notes
- This skill targets Angular v20 — APIs and patterns are specific to this version
- Angular v20 uses standalone components by default (no NgModules for new code)
- The new
animate.enter/animate.leaveAPI replaces legacy@angular/animationsfor new components - Signals are the recommended reactivity model — prefer over plain properties and RxJS where appropriate
- When in doubt between approaches, prefer: signals > computed > effect > RxJS
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.