Angular 22 e IA: Agent Skills y MCP

Angular 22 salió el 3 de junio de 2026 y, si solo miras el changelog en diagonal, parece una versión más: unas cuantas APIs pasan a estable, un par de cosas experimentales nuevas. Pero es la primera versión en la que el propio equipo de Angular diseña pensando en que quien escribe el código no siempre es una persona.

El problema es que casi todo lo que he leído sobre esto mezcla tres cosas que no tienen nada que ver entre sí.

Tres capas de IA

Angular 22 toca IA en tres sitios distintos, con objetivos distintos:

La primera es la que menos confusión genera: es simplemente "cómo meto un LLM en mi web". Según angular.dev/ai, tienes tres caminos —Genkit si necesitas un backend Node que orqueste modelos de Google, OpenAI, Anthropic u Ollama; Firebase AI Logic si quieres pegar directo desde el cliente a Vertex AI (Gemini/Imagen) sin montar servidor; o la Gemini API a pelo. Nada de esto es nuevo conceptualmente, es "cómo llamas a un LLM desde Angular sin liarla con las API keys".

La segunda y la tercera son las que de verdad han cambiado en v22, y de las que vale la pena hablar.

Qué es estable y qué no

Antes de nada, la tabla que el marketing no te va a dar tan clara. Fuentes: angular.dev/events/v22 e InfoQ.

En mi opinión OnPush por defecto es la más importante.

OnPush por defecto + código generado por IA

Hasta v21, un componente nuevo usaba detección de cambios Default (ahora renombrada Eager) salvo que tú pusieras OnPush a mano. En v22 es al revés: todo componente nuevo es OnPush por defecto. La migración automática de Angular añade ChangeDetectionStrategy.Eager explícito a los componentes existentes que no lo tenían, así que tu código actual no se rompe.

OnPush no vuelve a comprobar un componente a menos que cambie un @Input, un signal que lea en la plantilla, o dispares detección manualmente. Si un agente te genera un componente y dentro sigue mutando un array o un objeto en sitio (this.items.push(x) en vez de this.items.set([...this.items(), x])), el componente compila perfecto y no actualiza nada en pantalla. No hay error. No hay warning. Solo una UI que no reacciona, exactamente el tipo de fallo que un agente no detecta solo mirando si el build pasa.

Esto no es un detalle menor si vas a dejar que un agente te programe pantallas: la regla que ya deberías tener en tu best-practices.md o tu CLAUDE.md es simple —signals con set()/update(), nunca mutación en sitio— pero ahora con OnPush por defecto, romperla no es un bug de estilo, es un bug de UI que no se ve hasta producción.

Cómo montar el contexto para que un agente programe Angular

Angular 22 documenta esto oficialmente en angular.dev/ai/develop-with-ai, con una jerarquía de tres archivos:

• llms.txt — un índice con enlaces a los recursos clave. Lo primero que debería leer un agente.

• llms-full.txt — el contenido completo: cómo funciona Angular, cómo se construyen apps modernas. Más pesado, más completo.

• best-practices.md — las convenciones actuales de Angular, pensado como instrucciones de sistema.

Y luego, por encima, un archivo específico según el agente que uses:

Las reglas base que Angular recomienda meter ahí, resumidas: tipado estricto (nada de any, usa unknown), input()/output() en vez de decoradores, computed() para estado derivado, @if/@for en vez de *ngIf/*ngFor, y signals con update()/set() — la misma regla del apartado anterior, ahora con nombre oficial.

Agent Skills: lo que Angular empaqueta

Aquí es donde conecta con algo que ya conoces si has leído la serie de MCP en este blog: Angular 22 no inventa un formato propio de "skills". Usa el mismo estándar abierto de Agent Skills que ya soportan herramientas como Claude Code — instrucciones empaquetadas, específicas de un dominio, que un agente carga cuando las necesita en vez de tenerlas todas en contexto permanentemente.

Angular mantiene, oficialmente, dos:

• angular-developer — orientación de arquitectura y generación de código idiomático: componentes, servicios, reactividad (signal, linkedSignal, resource), formularios, inyección de dependencias, routing, SSR, accesibilidad, animaciones, estilos, testing y CLI.

• angular-new-app — scaffolding de proyectos nuevos con la CLI, siguiendo la estructura moderna recomendada.

Se instalan con:

npx skills add https://github.com/angular/skills

Diseñadas de entrada para Gemini CLI y Antigravity, pero al ser el estándar abierto de Agent Skills, no hay nada que te impida cargarlas en cualquier agente que hable ese formato. La diferencia frente a un simple CLAUDE.md es que una skill se activa solo cuando hace falta, en vez de ocupar contexto en cada mensaje.

El MCP Server de la CLI

A diferencia de Agent Skills, el Angular CLI MCP Server ya es estable en v22. Expone, entre otras, estas tools:

• get_best_practices — convenciones actuales, sin que el agente tenga que adivinarlas de memoria (y equivocarse, porque su conocimiento tiene fecha de corte).

• search_documentation — busca en la documentación oficial en vez de alucinar una API que no existe.

• Control del dev server (arrancar, parar, esperar a que termine un build) — para que el agente pueda verificar que lo que generó compila antes de decir que ha terminado.

Esta última es la que más cambia el flujo real: en vez de que el agente "crea" que su código funciona, puede preguntarle al dev server si el build pasó. Es la diferencia entre un agente que confía en sí mismo y uno que verifica.

Angular enseña a los agentes a leer su propio estado interno

Esto es lo que de verdad me parece la señal de hacia dónde va esto. En abril de 2026 se mergearon en el core de Angular dos PRs experimentales, parte de un mismo esfuerzo con chrome-devtools-mcp: exponer datos internos del framework —en tiempo de ejecución— directamente a agentes de IA.

• angular:signal_graph — expone el grafo real de dependencias entre signals de una app en marcha. Un agente puede preguntar "¿de qué depende este signal?" y obtener la respuesta real del runtime, no una suposición basada en leer el código fuente.

• angular:di-graph — lo mismo para el grafo de inyección de dependencias: qué injectors existen, qué elementos cuelgan de cuáles, cómo se resuelve una dependencia concreta.

Las dos herramientas solo funcionan en dev mode, y el propio autor del PR de DI Graph lo deja por escrito: la implementación "misses some important edges (notably connecting elements to specific environment injectors)" y ni siquiera está cerrado si la estructura del output es la óptima para que la consuma un agente.

Lo interesante no es que ya funcione perfecto (no lo hace), sino la dirección: hasta ahora, un agente depuraba tu app leyendo código estático y adivinando el estado en runtime. Estas dos herramientas son el primer paso para que, en vez de adivinar, pregunte.

Que usar ya en tus proyectos de Angular

Actívalo ya:

• llms.txt / best-practices.md en el repo (o el CLAUDE.md/.cursor/rules equivalente)

• Angular CLI MCP Server en tu agente de código (es estable)

• Regla explícita de signals con set()/update() — más crítica todavía con OnPush por defecto

• Revisar componentes recién generados por un agente: ¿asumen OnPush o van a fallar en silencio?

Pruébalo, no lo despliegues en serio todavía:

• Agent Skills oficiales (angular-developer, angular-new-app) — útiles, pero versiónalas junto a tu versión de Angular

• WebMCP — detrás de flag de Chrome, para prototipar, no para producción

• signal_graph / di_graph — solo dev mode, y el propio equipo dice que la estructura puede cambiar

FAQ

¿Agent Skills sustituye a mi CLAUDE.md o .cursor/rules?

No, se complementan. El archivo de contexto (CLAUDE.md, .cursor/rules, GEMINI.md) se carga siempre; una skill se activa solo cuando el agente detecta que la necesita. Para un proyecto pequeño, con el archivo de contexto normalmente te sobra.

¿WebMCP tiene algo que ver con MCP (el protocolo de Anthropic)?

Comparten filosofía —tools estructuradas y descubribles para un agente— pero no son lo mismo. MCP conecta un host de IA (Cursor, Claude, ChatGPT) con un server externo. WebMCP expone tools directamente desde tu página web a un agente que corre en el propio navegador. Si vienes de la serie de MCP de este blog, piénsalo como una cuarta capa, no como un sustituto de las otras tres.

¿Necesito migrar todo a OnPush ya?

No a la fuerza: la migración automática de v22 marca tus componentes existentes como Eager explícito, así que no se rompe nada al actualizar. Pero todo componente nuevo nace en OnPush, generado por ti o por un agente — ahí es donde tienes que estar atento.

¿Merece la pena instalar ya los Agent Skills oficiales de Angular?

Si programas Angular a diario con un agente, sí — te ahorra explicarle convenciones que cambian con cada versión. Si es un proyecto pequeño o puntual, un buen best-practices.md propio te cubre igual con menos partes móviles que mantener.

Enlaces

• Angular v22 Release — angular.dev

• Angular y IA — angular.dev/ai

• Develop with AI — angular.dev

• Agent Skills — angular.dev

• InfoQ: Angular v22 released

• PR #67985 — signal graph AI debugging tool

• PR #68030 — DI graph AI debugging tool