1const s=`--- 2title: "Deja de Escribir Código Angular Desactualizado: Configuración MCP con Cursor y Claude Code" 3description: "Explora la configuración moderna de Angular con IA, optimiza la codificación con IDE y usa mejores prácticas para un desarrollo eficiente" 4datePublished: 2025-11-04T02:35:24.559Z 5slug: stop-writing-outdated-angular-code-mcp-setup-with-cursor-and-claude-code 6cover: /assets/blog/9679c70bb2a264a7ccea43ad736070d8.jpeg 7tags: angular, ai-tools, mcp, development-tools 8author: Arcadio Quintero 9--- 10 11<p>Angular ha cambiado mucho en los últimos lanzamientos â de buena manera.</p><p>Componentes standalone, signals, plantillas de bloque (<code>@if</code>, <code>@for</code>), aplicaciones zoneless... y ahora, <strong>integración de IA de primera clase</strong>.</p><p>Entonces, si estás comenzando un nuevo proyecto Angular hoy, construir "a la vieja usanza" te ralentiza.</p><p>¿Y estar al dÃa manualmente con cada cambio de API? No, gracias.</p><p>Las buenas noticias: tu IDE puede ayudarte â <em>si lo configuras correctamente</em>.</p><p>En este post, vamos a:</p><ul> 12<li><p>Configurar un proyecto Angular limpio</p></li> 13<li><p>Configurar reglas de IA para que tu IDE entienda Angular moderno</p></li> 14<li><p>Habilitar el servidor MCP de Angular (Model Context Protocol)</p></li> 15<li><p>Ver cómo Cursor habla directamente con el Angular CLI</p></li> 16<li><p>Evitar una pequeña trampa de "<em>configuración duplicada</em>" en la que caÃ.</p></li> 17</ul> 18<p>Vamos paso a paso.</p><h2 id="por-qué-ia--angular-tiene-sentido-ahora-1"><strong>Por Qué IA + Angular Tiene Sentido Ahora</strong></h2> 19<p>Angular se mueve rápido. Algunos hitos importantes:</p><table> 20<thead> 21<tr> 22<th><strong>CaracterÃstica</strong></th> 23<th><strong>Introducido</strong></th> 24<th><strong>Por Qué Importa</strong></th> 25</tr> 26</thead> 27<tbody><tr> 28<td>Standalone por defecto</td> 29<td>v14 (Experimental)</td> 30<td>No más sobrecarga de NgModules</td> 31</tr> 32<tr> 33<td>Signals estable</td> 34<td>v16 (Preview)</td> 35<td>Primitivos reactivos, mejor rendimiento</td> 36</tr> 37<tr> 38<td>Sintaxis de bloque (<code>@if</code>, <code>@for</code>, <code>@switch</code>)</td> 39<td>v17 (Preview)</td> 40<td>Plantillas más limpias, sin directivas</td> 41</tr> 42<tr> 43<td><code>@let</code></td> 44<td>v18 (Preview)</td> 45<td>Variables de plantilla sin trucos de ngIf</td> 46</tr> 47<tr> 48<td>Herramientas de IA + MCP</td> 49<td>v20 (Experimental)</td> 50<td>El IDE conoce las convenciones de Angular</td> 51</tr> 52</tbody></table> 53<p>Y honestamente â escribir todo a mano y recordar cada nueva convención ya no vale la pena.</p><p><strong>Antes de la configuración de IA</strong>:</p><ul> 54<li>Buscas en Google "Angular input decorator"</li> 55<li>Encuentras una respuesta de Stack Overflow de 2019</li> 56<li>Usas <code>@Input()</code> en lugar de <code>input()</code></li> 57<li>Tu código funciona, pero está desactualizado</li> 58</ul> 59<p><strong>Con la configuración de IA</strong>:</p><ul> 60<li>Preguntas: "<em>crear un input de usuario</em>"</li> 61<li>La IA genera: <code>readonly user = input.required<User>()</code></li> 62<li>Moderno, basado en signals, type-safe</li> 63</ul> 64<p>La clave es ayudar a la IA a saber <em>cómo funciona Angular hoy</em>, no cómo funcionaba en 2019.</p><h2 id="crear-un-nuevo-proyecto-angular-con-soporte-de-ia-1"><strong>Crear un Nuevo Proyecto Angular (con Soporte de IA)</strong></h2> 65<p>Empecemos desde cero para mantener las cosas simples y reproducibles.</p><pre class="shiki github-dark-dimmed" style="background-color:#22272e;color:#adbac7" tabindex="0"><code><span class="line"><span style="color:#768390"># Requiere Angular CLI v19+</span></span> 66<span class="line"><span style="color:#F69D50">yarn</span><span style="color:#96D0FF"> global</span><span style="color:#96D0FF"> add</span><span style="color:#96D0FF"> @angular/cli</span></span> 67<span class="line"><span style="color:#F69D50">ng</span><span style="color:#96D0FF"> new</span><span style="color:#96D0FF"> mcp-demo</span><span style="color:#768390"> # generando una nueva app Angular</span></span></code></pre> 68<p>verás una nueva pregunta:</p><pre class="shiki github-dark-dimmed" style="background-color:#22272e;color:#adbac7" tabindex="0"><code><span class="line"><span style="color:#F69D50">â</span><span style="color:#96D0FF"> Which</span><span style="color:#96D0FF"> stylesheet</span><span style="color:#96D0FF"> format</span><span style="color:#96D0FF"> would</span><span style="color:#96D0FF"> you</span><span style="color:#96D0FF"> like</span><span style="color:#96D0FF"> to</span><span style="color:#96D0FF"> use?</span><span style="color:#96D0FF"> Sass</span><span style="color:#ADBAC7"> (SCSS)</span></span> 69<span class="line"><span style="color:#F69D50">â</span><span style="color:#96D0FF"> Do</span><span style="color:#96D0FF"> you</span><span style="color:#96D0FF"> want</span><span style="color:#96D0FF"> to</span><span style="color:#96D0FF"> enable</span><span style="color:#96D0FF"> Server-Side</span><span style="color:#96D0FF"> Rendering</span><span style="color:#ADBAC7"> (SSR) and Static Site Generation (</span><span style="color:#F69D50">SSG/Prerendering</span><span style="color:#ADBAC7">)</span><span style="color:#F47067">?</span><span style="color:#ADBAC7"> No</span></span> 70<span class="line"><span style="color:#F69D50">â</span><span style="color:#96D0FF"> Do</span><span style="color:#96D0FF"> you</span><span style="color:#96D0FF"> want</span><span style="color:#96D0FF"> to</span><span style="color:#96D0FF"> create</span><span style="color:#96D0FF"> a</span><span style="color:#96D0FF"> 'zoneless'</span><span style="color:#96D0FF"> application</span><span style="color:#96D0FF"> without</span><span style="color:#96D0FF"> zone.js?</span><span style="color:#96D0FF"> Yes</span></span> 71<span class="line"><span style="color:#F47067">?</span><span style="color:#ADBAC7"> Which AI tools </span><span style="color:#F47067">do</span><span style="color:#F69D50"> you</span><span style="color:#96D0FF"> want</span><span style="color:#96D0FF"> to</span><span style="color:#96D0FF"> configure</span><span style="color:#96D0FF"> with</span><span style="color:#96D0FF"> Angular</span><span style="color:#96D0FF"> best</span><span style="color:#96D0FF">
71 practices?</span><span style="color:#96D0FF"> https://angular.dev/ai/develop-with-ai</span></span> 72<span class="line"><span style="color:#F69D50"> â¯</span><span style="color:#96D0FF"> None</span></span> 73<span class="line"><span style="color:#F69D50"> â¯</span><span style="color:#96D0FF"> Claude</span><span style="color:#ADBAC7"> [ </span><span style="color:#96D0FF">https://docs.anthropic.com/en/docs/claude-code/memory</span><span style="color:#96D0FF"> ]</span></span> 74<span class="line"><span style="color:#F69D50"> â¯</span><span style="color:#96D0FF"> â</span><span style="color:#96D0FF"> Cursor</span><span style="color:#ADBAC7"> [ </span><span style="color:#96D0FF">https://docs.cursor.com/en/context/rules</span><span style="color:#96D0FF"> ]</span></span> 75<span class="line"><span style="color:#F69D50"> â¯</span><span style="color:#96D0FF"> Gemini</span><span style="color:#ADBAC7"> [ </span><span style="color:#96D0FF">https://ai.google.dev/gemini-api/docs</span><span style="color:#96D0FF"> ]</span></span> 76<span class="line"><span style="color:#F69D50"> â¯</span><span style="color:#96D0FF"> GitHub</span><span style="color:#96D0FF"> Copilot</span><span style="color:#ADBAC7"> [ </span><span style="color:#96D0FF">https://code.visualstudio.com/docs/copilot/copilot-customization</span><span style="color:#96D0FF"> ]</span></span> 77<span class="line"><span style="color:#F69D50"> â¯</span><span style="color:#96D0FF"> JetBrains</span><span style="color:#96D0FF"> AI</span><span style="color:#ADBAC7"> [ </span><span style="color:#96D0FF">https://www.jetbrains.com/help/junie/customize-guidelines.html</span><span style="color:#96D0FF"> ]</span></span> 78<span class="line"><span style="color:#F69D50"> â¯</span><span style="color:#96D0FF"> Windsurf</span><span style="color:#ADBAC7"> [ </span><span style="color:#96D0FF">https://docs.windsurf.com/windsurf/cascade/memories#rules</span><span style="color:#96D0FF"> ]</span></span></code></pre> 79<p>Este archivo contiene las <strong>reglas de mejores prácticas de IA</strong> oficiales de Angular, diseñadas para el motor de contexto de IA de Cursor.</p><p>Le dice a tu IDE cómo razonar sobre proyectos Angular â por ejemplo, cómo usar componentes standalone, signals y la nueva sintaxis de plantilla <code>@if</code> / <code>@for</code>.</p><p>Si necesitas profundizar en cómo funcionan las reglas en Cursor, puedes revisar este enlace <a href="https://cursor.com/docs/context/rules">https://cursor.com/docs/context/rules</a></p><h2 id="cursor-vs-claude-code-ubicaciones-de-archivos-1">Cursor vs Claude Code: Ubicaciones de Archivos</h2> 80<p>Si estás usando Claude Code en lugar de Cursor, aquà están las únicas diferencias:</p><table> 81<thead> 82<tr> 83<th><strong>Archivo</strong></th> 84<th><strong>Cursor</strong></th> 85<th><strong>Claude Code</strong></th> 86</tr> 87</thead> 88<tbody><tr> 89<td>Archivo de reglas</td> 90<td><code>.cursor/rules/angular-20.mdc</code></td> 91<td><code>.claude/CLAUDE.md</code></td> 92</tr> 93<tr> 94<td>Configuración MCP</td> 95<td><code>.cursor/mcp.json</code></td> 96<td><code>.mcp.json</code></td> 97</tr> 98<tr> 99<td>Contenido</td> 100<td>Mismas mejores prácticas de Angular</td> 101<td>Mismas mejores prácticas de Angular</td> 102</tr> 103</tbody></table> 104<h2 id="habilitar-el-servidor-mcp-del-angular-cli-1"><strong>Habilitar el Servidor MCP del Angular CLI</strong></h2> 105<p>Cuando ejecutas <code>ng mcp</code>, Angular no crea nada â en su lugar, imprime la configuración que necesitarás para conectar la IA de tu IDE al Angular CLI.</p><p>Verás algo como esto:</p><pre class="shiki github-dark-dimmed" style="background-color:#22272e;color:#adbac7" tabindex="0"><code><span class="line"><span style="color:#F69D50">ng</span><span style="color:#96D0FF"> mcp</span></span> 106<span class="line"></span> 107<span class="line"><span style="color:#F69D50">To</span><span style="color:#96D0FF"> start</span><span style="color:#96D0FF"> using</span><span style="color:#96D0FF"> the</span><span style="color:#96D0FF"> Angular</span><span style="color:#96D0FF"> CLI</span><span style="color:#96D0FF"> MCP</span><span style="color:#96D0FF"> Server,</span><span style="color:#96D0FF"> add</span><span style="color:#96D0FF"> this</span><span style="color:#96D0FF"> configuration</span><span style="color:#96D0FF"> to</span><span style="color:#96D0FF"> your</span><span style="color:#96D0FF"> host:</span></span> 108<span class="line"></span> 109<span class="line"><span style="color:#ADBAC7">{</span></span> 110<span class="line"><span style="color:#F69D50"> "mcpServers"</span><span style="color:#6CB6FF">:</span><span style="color:#96D0FF"> {</span></span> 111<span class="line"><span style="color:#F69D50"> "angular-cli"</span><span style="color:#6CB6FF">:</span><span style="color:#96D0FF"> {</span></span> 112<span class="line"><span style="color:#F69D50"> "command"</span><span style="color:#6CB6FF">:</span><span style="color:#96D0FF"> "npx",</span></span> 113<span class="line"><span style="color:#F69D50"> "args"</span><span style="color:#6CB6FF">:</span><span style="color:#ADBAC7"> [</span><span style="color:#96D0FF">"-y"</span><span style="color:#ADBAC7">, </span><span style="color:#96D0FF">"@angular/cli",</span><span style="color:#96D0FF"> "mcp"]</span></span> 114<span class="line"><span style="color:#ADBAC7"> }</span></span> 115<span class="line"><span style="color:#ADBAC7"> }</span></span> 116<span class="line"><span style="color:#ADBAC7">}</span></span> 117<span class="line"></span> 118<span class="line"><span style="color:#F69D50">Exact</span><span style="color:#96D0FF"> configuration</span><span style="color:#96D0FF"> may</span><span style="color:#96D0FF"> differ</span><span style="color:#96D0FF"> depending</span><span style="color:#96D0FF"> on</span><span style="color:#96D0FF"> the</span><span style="color:#96D0FF"> host.</span></span> 119<span class="line"></span> 120<span class="line"><span style="color:#F69D50">
120For</span><span style="color:#96D0FF"> more</span><span style="color:#96D0FF"> information</span><span style="color:#96D0FF"> and</span><span style="color:#96D0FF"> documentation,</span><span style="color:#96D0FF"> visit:</span><span style="color:#96D0FF"> https://angular.dev/ai/mcp</span></span></code></pre> 121<p>Esto te dice exactamente qué agregar al archivo de configuración MCP de tu IDE.</p><p>Crea el archivo de configuración MCP en la raÃz de tu proyecto:</p><p><strong>Para Cursor:</strong></p><pre class="shiki github-dark-dimmed" style="background-color:#22272e;color:#adbac7" tabindex="0"><code><span class="line"><span style="color:#F69D50">/.cursor/mcp.json</span></span></code></pre> 122<p><strong>Para Claude:</strong></p><pre class="shiki github-dark-dimmed" style="background-color:#22272e;color:#adbac7" tabindex="0"><code><span class="line"><span style="color:#F69D50">/.mcp.json</span></span></code></pre> 123<p>luego pega este contenido:</p><pre class="shiki github-dark-dimmed" style="background-color:#22272e;color:#adbac7" tabindex="0"><code><span class="line"><span style="color:#ADBAC7">{</span></span> 124<span class="line"><span style="color:#8DDB8C"> "mcpServers"</span><span style="color:#ADBAC7">: {</span></span> 125<span class="line"><span style="color:#8DDB8C"> "angular-cli"</span><span style="color:#ADBAC7">: {</span></span> 126<span class="line"><span style="color:#8DDB8C"> "command"</span><span style="color:#ADBAC7">: </span><span style="color:#96D0FF">"npx"</span><span style="color:#ADBAC7">,</span></span> 127<span class="line"><span style="color:#8DDB8C"> "args"</span><span style="color:#ADBAC7">: [</span><span style="color:#96D0FF">"-y"</span><span style="color:#ADBAC7">, </span><span style="color:#96D0FF">"@angular/cli"</span><span style="color:#ADBAC7">, </span><span style="color:#96D0FF">"mcp"</span><span style="color:#ADBAC7">]</span></span> 128<span class="line"><span style="color:#ADBAC7"> } </span><span style="color:#768390">// si tienes más servidores mcp, agrega una coma y pégalo después del último</span></span> 129<span class="line"><span style="color:#ADBAC7"> }</span></span> 130<span class="line"><span style="color:#ADBAC7">}</span></span></code></pre> 131<p>Ahora tu IDE sabe cómo iniciar el servidor MCP de Angular cada vez que abras este proyecto.</p><p>Esta configuración es <strong>a nivel de proyecto</strong>, lo que significa que solo se aplica dentro de este repositorio â no globalmente en todos tus proyectos.</p><h2 id="verificar-conexión-mcp-1">Verificar Conexión MCP</h2> 132<p><strong>En Cursor:</strong></p><p>Una vez que agregues la configuración <code>.cursor/mcp.json</code>, abre <strong>Cursor â Settings â MCP Servers</strong>.</p><p>Ahora deberÃas ver algo como esto:</p><p><img src="/cdn-cgi/image/format=auto,fit=scale-down,width=1600/assets/blog/eee52ea9-ac1d-4778-b467-2eb422dcafec.png" alt="Conexión MCP en Cursor" loading="lazy" decoding="async" /></p><p>Esto confirma que <strong>Cursor</strong> se ha conectado exitosamente al <strong>servidor MCP del Angular CLI</strong>.</p><p><strong>En Claude Code</strong> (Extensión o CLI)<strong>:</strong></p><p>Si usas la extensión de VS Code:</p><ul> 133<li><p>Abre el panel de chat de Claude en VS Code</p></li> 134<li><p>Escribe <code>/mcp</code> para verificar los servidores MCP</p></li> 135</ul> 136<p>Si usas el CLI:</p><ul> 137<li><p>Abre tu terminal</p></li> 138<li><p>Ejecuta <code>claude</code></p></li> 139<li><p>Escribe <code>/mcp</code> en la sesión interactiva</p></li> 140</ul> 141<p><img src="/cdn-cgi/image/format=auto,fit=scale-down,width=1600/assets/blog/a78e1c20-c0a0-4546-98af-5425ed55f062.webp" alt="Claude MCP" loading="lazy" decoding="async" /></p><p><img src="/cdn-cgi/image/format=auto,fit=scale-down,width=1600/assets/blog/54bceca4-0f22-4a50-88c2-e5f171d676a4.webp" alt="Extensión de Claude Code" loading="lazy" decoding="async" /></p><p>Con esto, tendremos disponibles las siguientes herramientas:</p><ul> 142<li><p><strong>get_best_practices</strong> â recupera las recomendaciones oficiales de IA de Angular.</p></li> 143<li><p><strong>search_documentation</strong> â permite que la IA busque directamente en la documentación de Angular.</p></li> 144<li><p><strong>list_projects</strong> â lista los proyectos definidos en tu workspace (angular.json).</p></li> 145</ul> 146<p>Con esta configuración, tu asistente de IA ahora puede llamar a las propias herramientas de Angular directamente desde el chat. Es bastante genial â literalmente puedes preguntar:</p><blockquote> 147<p>Necesito un componente para mostrar una lista de usuarios.</p></blockquote> 148<p><img src="/cdn-cgi/image/format=auto,fit=scale-down,width=1600/assets/blog/c1738a32-d2bf-4013-9bf7-45e66d01b6b3.webp" alt="Demo de MCP de Angular" loading="lazy" decoding="async" /></p><p>Notarás que lo primero que hace Cursor es intentar buscar <code>angular-20.mdc</code> dentro de la carpeta de reglas. Después de eso, Cursor ejecuta <code>get_best_practices</code> desde el <code>MCP</code>.</p><pre class="shiki github-dark-dimmed" style="background-color:#22272e;color:#adbac7" tabindex="0"><code><span class="line"><span style="color:#768390">// user-list.ts</span></span> 149<span class="line"></span> 150<span class="line"><span style="color:#ADBAC7">@</span><span style="color:#DCBDFB">Component</span><span style="color:#ADBAC7">({</span></span> 151<span class="line"><span style="color:#ADBAC7"> selector: </span><span style="color:#96D0FF">
151'app-users-list'</span><span style="color:#ADBAC7">,</span></span> 152<span class="line"><span style="color:#ADBAC7"> templateUrl: </span><span style="color:#96D0FF">'./users-list.html'</span><span style="color:#ADBAC7">,</span></span> 153<span class="line"><span style="color:#ADBAC7"> styleUrl: </span><span style="color:#96D0FF">'./users-list.scss'</span><span style="color:#ADBAC7">,</span></span> 154<span class="line"><span style="color:#ADBAC7"> changeDetection: ChangeDetectionStrategy.OnPush</span></span> 155<span class="line"><span style="color:#ADBAC7">})</span></span> 156<span class="line"><span style="color:#F47067">export</span><span style="color:#F47067"> class</span><span style="color:#F69D50"> UsersListComponent</span><span style="color:#ADBAC7"> {</span></span> 157<span class="line"><span style="color:#F47067"> readonly</span><span style="color:#F69D50"> users</span><span style="color:#F47067"> =</span><span style="color:#DCBDFB"> input</span><span style="color:#ADBAC7"><</span><span style="color:#F69D50">User</span><span style="color:#ADBAC7">[]>([]);</span></span> 158<span class="line"><span style="color:#F47067"> readonly</span><span style="color:#F69D50"> selectedUserId</span><span style="color:#F47067"> =</span><span style="color:#DCBDFB"> signal</span><span style="color:#ADBAC7"><</span><span style="color:#6CB6FF">number</span><span style="color:#F47067"> |</span><span style="color:#6CB6FF"> null</span><span style="color:#ADBAC7">>(</span><span style="color:#6CB6FF">null</span><span style="color:#ADBAC7">);</span></span> 159<span class="line"></span> 160<span class="line"><span style="color:#DCBDFB">
160 selectUser</span><span style="color:#ADBAC7">(</span><span style="color:#F69D50">userId</span><span style="color:#F47067">:</span><span style="color:#6CB6FF"> number</span><span style="color:#ADBAC7">)</span><span style="color:#F47067">:</span><span style="color:#6CB6FF"> void</span><span style="color:#ADBAC7"> {</span></span> 161<span class="line"><span style="color:#F47067"> if</span><span style="color:#ADBAC7"> (</span><span style="color:#6CB6FF">this</span><span style="color:#ADBAC7">.</span><span style="color:#DCBDFB">selectedUserId</span><span style="color:#ADBAC7">() </span><span style="color:#F47067">===</span><span style="color:#ADBAC7"> userId) {</span></span> 162<span class="line"><span style="color:#6CB6FF"> this</span><span style="color:#ADBAC7">.selectedUserId.</span><span style="color:#DCBDFB">set</span><span style="color:#ADBAC7">(</span><span style="color:#6CB6FF">null</span><span style="color:#ADBAC7">);</span></span> 163<span class="line"><span style="color:#ADBAC7"> } </span><span style="color:#F47067">else</span><span style="color:#ADBAC7"> {</span></span> 164<span class="line"><span style="color:#6CB6FF"> this</span><span style="color:#ADBAC7">.selectedUserId.</span><span style="color:#DCBDFB">set</span><span style="color:#ADBAC7">(userId);</span></span> 165<span class="line"><span style="color:#ADBAC7"> }</span></span> 166<span class="line"><span style="color:#ADBAC7"> }</span></span> 167<span class="line"></span> 168<span class="line"><span style="color:#DCBDFB"> isSelected</span><span style="color:#ADBAC7">(</span><span style="color:#F69D50">userId</span><span style="color:#F47067">:</span><span style="color:#6CB6FF"> number</span><span style="color:#ADBAC7">)</span><span style="color:#F47067">:</span><span style="color:#6CB6FF"> boolean</span><span style="color:#ADBAC7"> {</span></span> 169<span class="line"><span style="color:#F47067"> return</span><span style="color:#6CB6FF"> this</span><span style="color:#ADBAC7">.</span><span style="color:#DCBDFB">selectedUserId</span><span style="color:#ADBAC7">() </span><span style="color:#F47067">===</span><span style="color:#ADBAC7"> userId;</span></span> 170<span class="line"><span style="color:#ADBAC7"> }</span></span> 171<span class="line"><span style="color:#ADBAC7">}</span></span></code></pre> 172<p>Antes, obtendrÃas NgModules, Input() y la vieja sintaxis *ngFor. Ahora, sigue el <strong>estilo más reciente de Angular</strong> automáticamente.</p><h2 id="listo--tu-configuración-angular--ia-está-lista-1"><strong>Listo â Tu Configuración Angular + IA Está Lista</strong></h2> 173<p>Ahora tienes:</p><ul> 174<li><p>Proyecto Angular con reglas conscientes de IA</p></li> 175<li><p>MCP conectado para que tu IDE pueda ejecutar comandos ng</p></li> 176<li><p>Generación de código Angular moderno (standalone + signals + blocks)</p></li> 177</ul> 178<p>Esta configuración ya me ha ahorrado tiempo poniéndome al dÃa con las APIs y convenciones más nuevas de Angular â y mi código generado se mantiene limpio y consistente.</p><p>Si estás adoptando Angular moderno, esta es honestamente la mejor configuración de experiencia en este momento.</p><h3 id="nota-rápida-sobre-las-reglas-vs-las-instrucciones-de-mcp-1"><strong>Nota Rápida sobre las Reglas vs las "instrucciones" de MCP</strong></h3> 179<p>Cuando creas el proyecto y eliges tu herramienta de IA, Angular genera un archivo de reglas local:</p><pre class="shiki github-dark-dimmed" style="background-color:#22272e;color:#adbac7" tabindex="0"><code><span class="line"><span style="color:#768390"># Para Cursor</span></span> 180<span class="line"><span style="color:#F69D50">.cursor/rules/angular-20.mdc</span></span> 181<span class="line"></span> 182<span class="line"><span style="color:#768390"># Para Claude Code</span></span> 183<span class="line"><span style="color:#F69D50">.claude/CLAUDE.md</span></span></code></pre> 184<p>Este archivo contiene las <strong>mejores prácticas oficiales</strong> de Angular â las reglas que la IA debe seguir al generar código Angular.</p><p>Piensa en este como tu "libro de reglas base". Y la parte agradable es: <strong>puedes personalizarlo</strong>.</p><p>Por ejemplo, agregué una lÃnea diciéndole a la IA que <em>no importe</em> <code>CommonModule</code> <em>a menos que realmente sea necesario</em> â y cuando generé un nuevo componente, respetó esa regla.</p><p>Ahora, dentro del panel MCP de tu herramienta de IA, también verás un botón "<code>
184instructions</code>" (y la herramienta <code>get_best_practices</code>). Ese contenido se ve idéntico â y lo es â <strong>pero esa versión es de solo lectura</strong>.</p><p>Entonces la diferencia es:</p><table> 185<thead> 186<tr> 187<th><strong>Fuente</strong></th> 188<th><strong>Propósito</strong></th> 189<th><strong>¿Editable?</strong></th> 190</tr> 191</thead> 192<tbody><tr> 193<td><code>.cursor/rules/angular-20.mdc</code> o .<code>claude/CLAUDE.md</code></td> 194<td>Reglas base locales para tu proyecto</td> 195<td>SÃ, destinado a personalizar</td> 196</tr> 197<tr> 198<td>Vista de "<code>instructions</code>" de MCP</td> 199<td>Reglas del framework servidas vÃa MCP</td> 200<td>No, solo lectura</td> 201</tr> 202</tbody></table> 203<p>Y eso es intencional â el framework te da un conjunto de reglas predeterminado, pero también te permite evolucionarlo para las convenciones de tu propio proyecto.</p><h2 id="qué-sigue-3">¿Qué Sigue?</h2> 204<p>Ahora que tienes Angular + IA funcionando, prueba:</p><ol> 205<li><p><strong>Generar una caracterÃstica completa</strong> â Pide a la IA que genere un CRUD con enrutamiento</p></li> 206<li><p><strong>Refactorizar código legacy</strong> â Migra componentes antiguos y pide modernizarlos</p></li> 207<li><p><strong>Personalizar tus reglas</strong> â Edita <code>.cursor/rules/angular-20.mdc</code> (o <code>.claude/CLAUDE.md</code>) para las convenciones de tu equipo</p></li> 208</ol> 209<h2 id="muy-bien-estás-todo-listo-1">Muy Bien, Estás Todo Listo</h2> 210<p>La configuración toma 5 minutos. ¿El tiempo ahorrado? Infinito.</p><p>Ahora ve y construye algo increÃble con Angular moderno y herramientas impulsadas por IA.</p><p>¡Feliz codificación aumentada!</p>`;export{s as default};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.