Agent skill · software engineering · angular
reference-core
Explains the mental model and architecture of the code under `packages/core`. You MUST use this skill any time you plan to work with code in `packages/core`
Why this skill is useful
Provides detailed architectural insights and mental models for Angular's core package that the AI wouldn't reliably generate on its own.
What it needs
About 3k tokens when loaded. Last updated 2026-08-04. 100,955 stars on the source repository.
What this skill does
Angular Core (packages/core) Mental Model This document outlines the architecture and mental model for packages/core, the heart of the Angular framework. 1. High-Level Architecture packages/core contains the runtime logic for Angular. Its primary responsibilities are: 1. Rendering (Ivy/Render3): Transforming templates into DOM updates. 2. Dependency Injection (DI): Managing object creation and lifetime. 3. Change Detection: Synchronizing the model with the view. 4. Reactivity: Signals and Zone.js integration. 2. Rendering Engine (Ivy / Render3) The rendering engine (located in packages/core/src/render3) uses an instruction-based approach. Key Concepts Instructions: The Angular compiler transforms templates into a sequence of instruction calls (e.g., ɵɵelementStart, ɵɵtext, ɵɵproperty). These instructions are executed at runtime to create and update the view. Location: packages/core/src/render3/instructions LView (Logical View): An array containing the state of a specific view instance. It holds: DOM nodes (RElement, RText). Binding values (for change detection). Directive/Component instances. Context: packages/core/src/render3/interfaces/view.ts TView (Template View): An array containing the static structure of a view. It is shared across all instances (LViews) of the same component/template. It holds: Property names for bindings. Node relationship information. Compiled directive definitions. Context: packages/core/src/render3/interfaces/view.ts Memory Layout: LView and TView are parallel arrays. Index i in LView corresponds to metadata at index i in TView. HEADER: Fixed size, contains context (Parent, Host, etc.). DECLS: Static nodes (elements, text, pipes). VARS: Binding values. EXPANDO: Dynamic data (host bindings, injectors). The Render Cycle 1. Creation Mode: Instructions create DOM nodes and store them in LView. 2. Update Mode: Instructions check current values against previous values stored in LView. If changed, they update the DOM. 3. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills angular/reference-core