Agent skill · software engineering · angular
reference-signal-forms
Explains the mental model and architecture of the code under `packages/forms/signals`. You MUST use this skill any time you plan to work with code in `packages/forms/signals`
Why this skill is useful
Provides detailed architecture and usage patterns for a niche Angular forms API that the AI wouldn't reliably generate on its own.
What it needs
About 2k tokens when loaded. Last updated 2026-08-04. 100,955 stars on the source repository.
What this skill does
Signal Forms Architecture The packages/forms/signals directory contains the signal-based forms API for Angular. This system differs significantly from the existing Reactive and Template-driven forms. Mental Model 1. Model-Driven: The system is built around a WritableSignal<T> which serves as the single source of truth. Unlike Reactive Forms where the FormControl holds the value, here the Signal holds the value. The form is merely a view or projection of that signal, adding form-specific state (validity, dirty, touched). 2. Proxy-Based Traversal: The form API (form(signal)) returns a FieldTree. This object is a Proxy. It allows accessing nested fields (e.g., myForm.user.name) without manually creating control groups. Accessing a property on the proxy lazily resolves or creates the corresponding FieldNode. 3. Schema-Based Logic: Validation, disabled state, and other metadata are defined separately via Schemas. Schemas are applied to the form structure using functions like apply, applyEach (for arrays), and applyWhen. This separates the structure of the data from the rules governing it. 4. Directives as Glue: The [formField] directive binds a DOM element (native input or custom control) to a FieldNode. It handles: Syncing the value between the DOM and the Signal. Reflecting state (valid, touched, etc.) to the UI. Handling user interaction events (blur, input). Key Components 1. FieldNode (src/field/node.ts) The central internal class representing a single field in the form graph. It aggregates several state managers: structure: Manages parent/child relationships and signal slicing. validationState: Computes valid, invalid, errors signals. nodeState: Tracks touched, dirty, and derived logical state. metadataState: Stores metadata like min, max, required. submitState: Tracks submission status and server errors. 2. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills angular/reference-signal-forms