Que son y como usar Angular Agent Skills

Estas creando componentes de Angular con algún agente, lo revisas y ves *ngIf, @Input() decorators y un constructor con inyeccion manual. En 2026. Como si los ultimos tres años no hubieran pasado.

No es culpa del modelo. Es que los LLMs fueron entrenados con millones de lineas de Angular legacy, y sin contexto explicito, hacen lo que saben: repetir lo que vieron mas veces. Ahi es donde entran los Agent Skills.

Que son los Agent Skills

Los Agent Skills son archivos de instrucciones estructurados y dominio-especificos disenados para que herramientas de coding como Gemini CLI, Claude Code, Cursor o Antigravity escriban codigo moderno y consistente. El formato fue introducido por Anthropic y se ha convertido en el estandar de facto para dar contexto a LLMs sobre frameworks especificos.

"Agent Skills are structured, domain-specific instruction files that load on demand to give an agent expertise for a particular task." - Source: InfoQ - Angular's Official Agent Skills

El equipo de Angular publico el repo oficial angular/skills con dos skills principales:

• angular-developer: Genera codigo Angular con guidance arquitectonico. Cubre reactividad (signals, linkedSignal, resource), forms, DI, routing, SSR, accesibilidad (ARIA), animaciones, estilos, testing y CLI.

• angular-new-app: Scaffold una aplicacion Angular nueva usando Angular CLI con mejores practicas actuales.

"coding agents often suggest outdated Angular patterns, NgModules, @Input() decorators, *ngIf, and constructor injection because they lack current context." - Source: Brandon Roberts - DEV Community

Por qué importa?

El problema concreto: los modelos de lenguaje optimizan por "funciona", no por "sigue nuestras convenciones". Sin contexto explicito, un LLM va a:

• Usar *ngIf en vez de @if

• Poner standalone: true (redundante desde v19)

• Usar @Input() decorators en vez de input signals

• Inyectar dependencias con constructor en vez de inject()

• Crear NgModules que ya no son necesarios

Los Agent Skills arreglan esto cargando instrucciones actualizadas directamente en el contexto del agente. No es magia -- es prompt engineering formalizado y versionado.

Como se instalan

La comunidad establecio un CLI estandar para gestionar skills. La instalacion es una linea:

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

Esto coloca las skills en .agents/skills/ y genera un skills-lock.json que trackea la version instalada. Para actualizar:

npx skills check
npx skills update

Si venias de la version comunitaria de Brandon Roberts (analogjs/angular-skills), primero remuevela:

npx skills remove analogjs/angular-skills

"Agent Skills have become the most popular way to feed framework context to LLMs." - Source: Gerome Grignon via LinkedIn, citado en InfoQ

Que hace angular-developer en la practatica

Hace poco estuve probando la skill y el cambio es notable. Cuando le pides al agente que genere un componente, la skill fuerza convenciones de Angular v20+:

1. Control flow nativo: @if, @for, @switch en vez de directivas estructurales

2. Signals: signal(), computed(), effect(), linkedSignal()

3. Standalone components: Sin el flag redundante standalone: true

4. inject(): En vez de constructor injection

5. httpResource(): Para data fetching reactivo

6. Signal Forms: Para formularios basados en signals

La skill tambien incluye un loop de verificacion autonomo: despues de cada edicion, fuerza un ng build para confirmar que el codigo compila.

"The skill enforces v20 conventions, preferring @if over *ngIf and dropping the now redundant standalone: true flag." - Source: InfoQ

MCP Server de Angular CLI

Complementario a las skills, Angular tambien provee un MCP server que da al agente acceso a la documentacion oficial actualizada y ejemplos curados. Se configura en Cursor con:

// .cursor/mcp.json
{
  "mcpServers": {
    "angular-cli": {
      "command": "npx",
      "args": ["-y", "@angular/cli", "mcp"]
    }
  }
}

"Among other things, the Angular MCP server provides the agent with well-curated examples and access to the current documentation." - Source: Angular Architects - AI-Assisted Coding

La critica valida

No todo es perfecto. En Hacker News, un comentario resumo la preocupacion:

"These harnesses approaches pretend as if LLMs are strict and perfect rule followers and the only problem is not being able to specify enough rules clearly enough. That's fundamental cognitive lapse in how LLMs operate." - Source: Hacker News

Es un punto justo. Los skills mejoran la calidad del output pero no eliminan la necesidad de code review. La contra-respuesta fue igual de directa: "don't let the perfect be the enemy of the good."

Mi setup actual

Despues de probar varias combinaciones, me quedo con:

1. angular/skills oficiales instaladas via npx skills

2. MCP server de Angular CLI activo

3. AGENTS.md en la raiz del proyecto con las reglas rojas principales

4. Skills custom para convenciones especificas del proyecto

Si ya leiste mi articulo sobre Skills en Claude Code o sobre patrones de orquestacion, sabes que la clave esta en dar contexto suficiente sin sobrecargar el prompt. Los Agent Skills de Angular resuelven exactamente eso para el framework.

Referencias

• angular/skills - GitHub

• Agent Skills - Angular Docs

• InfoQ - Angular's Official Agent Skills

• Angular Architects - AI-Assisted Coding

• Brandon Roberts - Angular Skills: Agent Skills for AI-Assisted Development

Keywords: Angular Agent Skills, AI coding agents, Claude Code Angular, Gemini CLI Angular, Angular 20 signals

Meta description: Los Agent Skills oficiales de Angular ensenan a los coding agents a escribir codigo moderno con signals, standalone components y buenas practicas actuales.