DEV Community: Antonio Cardenas

[Boost]

Antonio Cardenas — Thu, 04 Jun 2026 04:34:58 +0000

Antonio Cardenas for Angular Firebase

Jun 4

Agent-Safe Angular Components: Copy-Paste MCP + Skills Setup for Verified AI Development

#angular #mcp #agentskills #ai

Comments

7 min read

Agent-Safe Angular Components: Copy-Paste MCP + Skills Setup for Verified AI Development

Antonio Cardenas — Thu, 04 Jun 2026 04:32:42 +0000

Angular v22 MCP + Skills Integration: Agentic Development Setup

With Angular v22, the MCP (Model Context Protocol) server + Angular Skills stack transforms agent-assisted development from a risky proposition into a deterministic, verifiable workflow. This guide walks you through configuring your environment, setting up the right skills, and building agent-safe components.

Part 1: Environment Setup

Prerequisites

Ensure you have:

Node.js v20+ (node --version)
Angular CLI v22+ (npm install -g @angular/cli@latest)
A coding agent environment (Gemini CLI, Cursor, Claude Code, GitHub Copilot, JetBrains AI, or Windsurf)

Step 1: Configure Angular MCP Server

The Angular CLI ships with the MCP server built-in. Configure it in your agent's settings:

For Gemini CLI / Cursor / Claude Code (using .gemini/settings.json or equivalent):

{
  "mcpServers": {
    "angular-cli": {
      "command": "npx",
      "args": [
        "-y",
        "@angular/cli",
        "mcp"
      ]
    },
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest"
      ]
    }
  }
}

For JetBrains IDEs (Settings → Tools → MCP):

Add new server: name angular-cli
Command: npx -y @angular/cli mcp
Add second server: name chrome-devtools
Command: npx chrome-devtools-mcp@latest

Test the connection:

npx @angular/cli mcp --health-check

You should see a list of available tools. Common ones:

ng_lint — runs the linter on your project
get_examples — fetches best-practice code examples
get_best_practices — retrieves the Angular Best Practices Guide
search_documentation — queries angular.dev
dev_server.wait_for_build — blocks until build succeeds/fails (critical for agents)
dev_server.start — starts the dev server
dev_server.stop — stops the dev server

Step 2: Install Angular Skills

Skills are installed separately from MCP tools. They augment the agent's knowledge without adding token overhead to every request.

Install the official Angular skills:

# Using npx skills package
npx @anthropic-ai/skills add \
  https://github.com/angular/skills/blob/main/angular-developer/SKILL.md \
  --name angular-developer

npx @anthropic-ai/skills add \
  https://github.com/angular/skills/blob/main/angular-new-app/SKILL.md \
  --name angular-new-app

Or, if your agent supports URL-based skills, reference directly:

/skills install https://github.com/angular/skills/blob/main/angular-developer/SKILL.md
/skills install https://github.com/angular/skills/blob/main/angular-new-app/SKILL.md

Verify installation:

# In your agent (Gemini CLI, etc.)
/skills list

You should see angular-developer and angular-new-app listed.

Step 3: Configure Chrome DevTools for Agents

This gives agents visibility into your running application:

npx chrome-devtools-mcp@latest --install

Test it:

npx chrome-devtools-mcp@latest --health-check

Part 2: Writing Agent-Safe Components

With MCP + Skills configured, your agent has access to build verification and browser visibility. Now write code that agents can safely modify.

Pattern 1: Exhaustive @switch with Type Safety

Always use exhaustive @switch blocks. This prevents agents from introducing unhandled cases.

// ✓ Good: Type-safe, exhaustive union
export type VehicleStatus = 'idle' | 'transit' | 'maintenance' | 'critical';

export class FleetDetailComponent {
  status = signal<VehicleStatus>('idle');

  private assertNever(value: never): never {
    throw new Error(`Unhandled status: ${value}`);
  }
}

<!-- Template with exhaustive check -->
<div class="status-card">
  @switch (status()) {
    @case ('idle') {
      <span class="badge badge-green">Available</span>
    }
    @case ('transit') {
      <span class="badge badge-blue">In transit</span>
    }
    @case ('maintenance') {
      <span class="badge badge-yellow">Maintenance</span>
    }
    @case ('critical') {
      <span class="badge badge-red">Critical</span>
    }
    @default {
      <!-- If an agent adds a new status to the union without updating the template, this line will fail to compile -->
      {{ assertNever(status() as never) }}
    }
  }
</div>

Why this matters: If a backend team adds 'error' to the union without notifying frontend, the TypeScript build fails—agents can't ship broken code.

Pattern 2: Signal Forms with Inline Validators

Signal Forms provide type-safe, signal-driven form handling. Agents are far less likely to introduce validation errors.

export class ServiceTicketComponent {
  // Signal-based form
  form = new FormGroup({
    description: new FormControl('', Validators.required),
    priority: new FormControl<'LOW' | 'MEDIUM' | 'HIGH' | 'CRITICAL'>('MEDIUM'),
    assignedTo: new FormControl(''),
  });

  // Signal-based access
  priority$ = this.form.get('priority')!.valueAsSignal;

  // Compute UI state based on priority
  priorityClass = computed(() => {
    const level = this.priority$();
    return level === 'CRITICAL' ? 'text-red-600' : level === 'HIGH' ? 'text-orange-600' : 'text-gray-600';
  });

  // Agent can safely call this; form validation is enforced
  submitTicket() {
    if (this.form.valid) {
      // Safe to use form.value — it's typed and validated
      this.fleetService.createTicket(this.form.value);
    }
  }
}

Template:

<form [formGroup]="form" (submit)="submitTicket()">
  <textarea
    formControlName="description"
    [class]="priorityClass()"
    placeholder="Describe the issue..."
  ></textarea>

  <select formControlName="priority">
    <option value="LOW">Low</option>
    <option value="MEDIUM">Medium</option>
    <option value="HIGH">High</option>
    <option value="CRITICAL">Critical</option>
  </select>

  <button type="submit" [disabled]="form.invalid()">Submit</button>
</form>

Why this matters: Agents can't generate invalid form values. TypeScript catches it.

Pattern 3: @boundary for Risky Integrations

When integrating third-party code or experimental features, wrap with @boundary.

<div class="dashboard">
  <!-- Core fleet list always renders -->
  <fleet-list [units]="units()" />

  <!-- AI diagnostics can fail without crashing the whole page -->
  @boundary {
    <ai-predictive-diagnostics [selectedUnit]="selectedUnit()" />
  } @catch (error) {
    <div class="error-fallback">
      <h3>Diagnostics unavailable</h3>
      <p>{{ error.message }}</p>
      <button (click)="retryDiagnostics()">Retry</button>
    </div>
  }
</div>

Why this matters: When an agent writes complex AI integration code, a single bug won't crash the user's app.

Pattern 4: Inline Template Functions for Transient Logic

Keep component API clean; let agents write inline handlers.

<!-- ✓ Inline handler — close to its usage -->
<button 
  (click)="vehicles.update(v => v.filter(item => item.id !== vehicleId))"
  class="btn-danger"
>
  Remove from fleet
</button>

<!-- ✗ Avoid exposing every handler as a method -->
<!-- <button (click)="removeVehicle(vehicleId)">Remove</button> -->

This keeps the component API surface minimal and lets agents see the full handler intent inline.

Part 3: Agent Workflows

Workflow 1: Scaffold a Component (with MCP Verification)

Tell your agent: "Create a ServiceTicketForm component using Angular skills. Use signal forms, include an @boundary for the AI priority analyzer, and run the build to verify."

The agent will:

Call get_best_practices to fetch Signal Forms patterns.
Scaffold the component with ng generate component.
Implement inline validators using the skill guidance.
Call dev_server.wait_for_build to verify compilation.
If the build fails, read the error and fix it.

You can monitor this entirely in your agent's chat; no surprise errors.

Workflow 2: Add AI-Powered Fleet Chat (with Browser Verification)

From the logistics-manager-app codelab, tell your agent: "Implement a fleet chat query feature. Use the Gemini API to analyze fleet data and return filtered results. Start the dev server with Chrome DevTools, navigate to the chat component, and take a screenshot to verify the feature works."

The agent will:

Create a FleetChatService that accepts a natural-language query.
Send the current units() signal state to the Gemini API.
Parse Gemini's response and filter the fleet.
Update the chat UI with results.
Call dev_server.start to spin up the dev server.
Call Chrome DevTools to navigate to the component.
Snap a screenshot showing the chat results.
Read the screenshot and confirm the feature works.

No hallucinations—the agent has eyes on the running application.

Workflow 3: Implement Predictive Diagnostics with @boundary

From the codelab, tell your agent: "Add a 'Run AI Diagnostic' button to the FleetDetailModal. The button should call a Gemini API with the unit's telemetry (speed, battery, status). Wrap the diagnostics component with @boundary so if the AI call fails, it doesn't crash the modal. Test it by triggering a vehicle detail view and clicking the button."

The agent will:

Create a DiagnosticsComponent that calls the AI service.
Wrap it with @boundary in the modal template.
Implement a fallback UI in the @catch block.
Add retry logic.
Start the dev server.
Navigate to a vehicle detail modal.
Click the diagnostic button.
Verify the result (or error) in the browser.
If the test fails, analyze the error and iterate.

This entire workflow is deterministic. The agent can't ship broken code—the build will catch it first, and Chrome DevTools will catch runtime issues.

Part 4: Skills Configuration Best Practices

One Server Per Domain

Don't load the Angular MCP server alongside your deployment server and communication server. Create separate IDE configurations:

{
  "profiles": {
    "angular-dev": {
      "mcpServers": {
        "angular-cli": { "command": "npx", "args": ["-y", "@angular/cli", "mcp"] },
        "chrome-devtools": { "command": "npx", "args": ["chrome-devtools-mcp@latest"] }
      }
    },
    "deployment": {
      "mcpServers": {
        "deploy-cli": { "command": "npx", "args": ["my-deploy-cli", "mcp"] }
      }
    }
  }
}

Activate only the profile you need for the task at hand.

Version Your Skills

Put skills in your repo and version them like code:

/my-project
  /skills
    /angular-v22-dev-guidelines.md
    /our-design-system.md
    /api-integration-patterns.md
  /src
  angular.json

Reference them:

npx @anthropic-ai/skills add ./skills/angular-v22-dev-guidelines.md

Review and update skills when you update Angular versions.

Measure Context Budget

Before running an agent on a real task, ask it to estimate token usage:

What's the total token count of all my installed MCP tools and skills?

If over 30% of your context window is on tool definitions, simplify. Agents need room to think.

Write MCP Guardrails in Skills

Instead of relying on the agent to "be careful," write it into the skill:

# Angular Update Guardrail Skill

Before running `ng update`, ALWAYS:
1. Create a git branch: `git checkout -b ng-update-v22`
2. Run tests: `npm test`
3. Commit current state: `git commit -m "checkpoint before ng update"`
4. Then and only then run: `ng update @angular/core @angular/cli`

The agent will follow the skill's instructions.

Part 5: Troubleshooting

"MCP server not found"

Verify npx @angular/cli mcp --health-check returns a list of tools
Restart your agent IDE
Check that Angular CLI v22+ is installed: ng version

"Skills not recognized"

Run npx @anthropic-ai/skills list to confirm they're installed
Restart your agent
Verify the skill URL is correct

"Chrome DevTools not taking screenshots"

Ensure Chrome is installed and in PATH
Run npx chrome-devtools-mcp@latest --health-check
Check that you've started the dev server with dev_server.start before asking the agent to navigate

"Build verification timed out"

The dev_server.wait_for_build tool has a default timeout (usually 30 seconds)
If your builds are slower, ask the agent to increase the timeout in the MCP call
Check that the dev server is running: ng serve

Summary

With Angular v22's MCP + Skills stack:

Agents write type-safe code that compiles or fails, never silently.
Exhaustive type checking prevents new states from slipping past.
@boundary contains failures instead of crashing the app.
Inline templates keep components clean.
Signal Forms enforce validation.
Chrome DevTools integration gives agents visibility into running code.
Skills teach modern patterns aligned to your version and conventions.

The hallucination loop is closed. Code generation becomes verifiable. Agentic development shifts from risky to reliable.

Next Steps:

Set up Angular MCP in your IDE/agent (5 minutes)
Install Angular Skills (2 minutes)
Configure Chrome DevTools (2 minutes)
Write a test component using the patterns above
Ask your agent to scaffold a feature and verify it with MCP tools

Resources:

Angular Skills Repository: https://github.com/angular/skills
Chrome DevTools for Agents: https://developer.chrome.com/docs/devtools/agents
Logistics Manager Codelab: https://github.com/angular/examples/blob/main/logistics-manager-app/codelab.md

Stop AI Agents From Hallucinating: Angular v22's Type-Safe, Boundary-Protected Pipelines

Antonio Cardenas — Thu, 04 Jun 2026 04:22:07 +0000

Angular v22: Agentic Pipelines and Resilient Template Architectures

The frontend landscape is no longer just about rendering pixels; it's about establishing robust pipelines that integrate seamlessly with automated, AI-driven workflows. At Google I/O 2026, the Angular team unveiled a massive structural shift for the framework. Moving towards the v22 release (launching the week of June 1st, 2026), Angular is solidifying its primitive layer—pushing Signal Forms and Resource APIs to stable—while actively engineering the framework to act as a first-class citizen in agentic development environments.

Here is an architectural breakdown of the most critical updates and what they mean for high-performance core engineering.

The Agentic Pipeline: Angular MCP + Skills

For those of us configuring custom agentic workflows, the standard LLM coding loop is notoriously brittle. An agent writes code, claims it works, and leaves you to discover the compilation errors at runtime.

Angular is attacking this friction head-on by pairing two critical systems: the Angular CLI's Model Context Protocol (MCP) server that enables AI assistants to interact directly with the Angular CLI, providing tools for code generation, modernizing code, fetching examples, and running builds/tests, and the Angular Skills framework — a specialized knowledge layer that teaches agents to write modern, v22-aligned code.

How it works: The MCP Server + Skills Stack

The Angular CLI MCP server exposes tools that launch an interactive AI-powered Angular tutor, find authoritative best-practice code examples, retrieve the Angular Best Practices Guide, and list applications and libraries in the workspace by reading angular.json, and search the official documentation at angular.dev.

Configure it in your IDE or agent environment:

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

The angular-developer skill generates Angular code and provides architectural guidance, triggering when creating projects, components, or services or for best practices on reactivity (signals, linkedSignal, resource), forms, dependency injection, routing, SSR, accessibility (ARIA), animations, styling, testing, or CLI tooling.

When an agent scaffolds a new component, instead of reaching for outdated Angular 15 patterns, the angular-developer skill injects:

Signal-first reactivity: input() and output() instead of @Input() and @Output() decorators
OnPush by default: Change detection set to ChangeDetectionStrategy.OnPush from the start
Standalone components: No NgModule boilerplate
Type-safe forms: Signal Forms for reactive, typed form handling

Real-world example from the Angular logistics-manager-app codelab: agents can implement AI-powered fleet chat by updating FleetService to include a queryFleet(prompt) method, using the gemini-sdk skill to send the current units() state to Gemini and filter data based on the user's input.

Closing the Hallucination Loop: MCP + Chrome DevTools for Agents

The real power unlocks when you chain Angular MCP with Chrome DevTools for Agents, which allows agents to navigate websites, interact with buttons, explore pages, and run instant accessibility audits through a fully managed browser instance.

The workflow becomes deterministic:

Agent writes code using the angular-developer skill
MCP triggers dev_server.wait_for_build — the agent blocks until compilation succeeds or fails
Agent spawns the dev server using dev_server.start
Chrome DevTools for Agents takes a screenshot to visually verify DOM changes
Agent reads the rendered output and fixes errors if needed

This closes the hallucination loop entirely. No more "I'll assume that worked" — the agent has eyes on your running application.

Template Resilience with @boundary

In complex UI engineering—especially when mixing DOM layouts with heavy WebGL or custom animation loops—a single component failure can crash the entire change detection cycle, resulting in a blank screen.

To solve this, Angular is introducing @boundary (landing in Developer Preview in Q3 2026).

The @boundary block introduces native error boundaries directly into the template compilation. If an isolated widget or complex directive throws a fatal error, @boundary traps it, preventing the crash from bubbling up and halting the rest of the application.

Error Isolation and Fallback Patterns

@boundary {
  <heavy-webgl-scene-renderer />
} @catch (error) {
  <div class="error-fallback">
    <h3>Scene unavailable</h3>
    <p>{{ error.message }}</p>
    <button (click)="retryBoundary()">Reload scene</button>
  </div>
}

Unlike try-catch in component logic, @boundary operates at the template compilation level. The boundary knows about the component tree and can isolate errors without unwinding the entire change detection cycle.

Retry Logic Without State Reload

The architecture enables intentional retry logic:

export class DashboardComponent {
  @signal() sceneError: Error | null = null;

  retryBoundary() {
    // Retry logic — the boundary re-renders, re-executes the component
    // but preserves the outer application state
    this.sceneError = null;
  }
}

In traditional Angular, a critical error in one component forces a full page reload. With @boundary, you contain the failure. The fleet dashboard can crash, but the user can still see the service queue and vehicle list. Error containment becomes a first-class concern.

Multi-Level Boundaries for Granular Control

You can nest @boundary blocks for layered error handling:

@boundary {
  <telemetry-dashboard>
    @boundary {
      <ai-predictive-diagnostics />
    } @catch {
      <p>Diagnostics unavailable</p>
    }
  </telemetry-dashboard>
} @catch {
  <p>Dashboard offline</p>
}

The inner boundary catches errors from the diagnostics component; the outer boundary catches errors from the entire dashboard. This mirrors real-world failure domains.

Deep Dive: Advanced Control Flow Mechanics in `@switch`

The evolution of Angular's control flow syntax isn't just about cleaner aesthetics — it's about moving runtime liabilities into compile-time guarantees. The updates to the @switch block address two classic pain points in template architecture: redundant boilerplate via multiple case matching and structural desynchronization via exhaustive type checking.

1. Multiple Case Matching (Boilerplate Reduction)

In traditional templates, if multiple states shared identical UI representation, you were forced to duplicate template blocks or nest conditional elements. Angular now allows comma-separated matching values within a single @case block:

@switch (orderStatus()) {
  @case ('pending', 'processing') {
    <p>Your order is being prepared.</p>
  }
  @case ('shipped') {
    <p>Your order is on the way.</p>
  }
  @case ('delivered') {
    <p>Order complete.</p>
  }
}

The template compiler groups these branches efficiently without generating redundant view nodes. Instead of maintaining two separate case blocks with identical markup, a single case handles multiple states. This is especially powerful when dealing with isomorphic state enums where the user-facing representation is identical across several backend statuses.

2. Exhaustive Checking via the `never` Type

The most critical architectural upgrade is compile-time exhaustiveness enforcement. When dealing with strict TypeScript union types (e.g., type Status = 'open' | 'closed' | 'archived'), a common source of production bugs occurs when a backend team introduces a new status — but the frontend template is never updated. The UI silently fails or shows a blank state.

By combining template variable evaluation with an exhaustive default assignment using the never type boundary assertion, the Angular compiler can enforce that every branch of a union type is explicitly handled. If a new member is added to the union, the build breaks immediately until that state is handled.

// Component TypeScript
export type OrderStatus = 'pending' | 'processing' | 'shipped' | 'delivered';

export class OrderComponent {
  orderStatus = signal<OrderStatus>('pending');

  // This forces exhaustive checking — TypeScript won't compile without all cases
  private assertNever(value: never): never {
    throw new Error(`Unhandled status: ${value}`);
  }
}

<!-- Template with exhaustive guarantee -->
@switch (orderStatus()) {
  @case ('pending') {
    <p>Waiting to be processed.</p>
  }
  @case ('processing') {
    <p>Your order is being prepared.</p>
  }
  @case ('shipped') {
    <p>Your order is on the way.</p>
  }
  @case ('delivered') {
    <p>Order complete.</p>
  }
  @default {
    {{ assertNever(orderStatus() as never) }}
  }
}

If a backend engineer adds a sixth status ('returned') without notifying the frontend, TypeScript compilation fails immediately. This shifts the burden of type safety from runtime testing to the development build process — exactly where it belongs.

Inline Template Functions: Reducing Class Boilerplate

In v22, you can now safely inline short, quick arrow functions directly within template event bindings without bloating your TypeScript class. This is more than cosmetic—it's a statement about where logic belongs.

The Pattern: Event Handlers and Transforms

Instead of exposing every handler as a class method:

// Before: pollutes the component API
export class CartComponent {
  items = signal([...]);

  onAddItem(id: string) {
    this.items.update(items => [...items, { id }]);
  }

  onRemoveItem(id: string) {
    this.items.update(items => items.filter(i => i.id !== id));
  }
}

You can now inline these directly:

<!-- v22: inline arrow functions in templates -->
<button (click)="items.update(items => [...items, newItem()])">Add</button>
<button (click)="items.update(items => items.filter(i => i.id !== id))">Remove</button>

The component surface shrinks—only the true public API remains visible. Transient handlers stay in the template, where they logically belong.

Template Errors and Type Inference

The template compiler now provides rich type feedback for inline expressions:

<!-- TypeScript error: items.update expects an updater function -->
<button (click)="items.update('invalid')">Wrong</button>

<!-- ✓ Correct: full type checking on the inline arrow function parameter -->
<button (click)="items.update(items => items.slice(0, items.length - 1))">
  Remove last
</button>

This is critical for agent-assisted development. When the angular-developer skill writes template code, the compiler catches type mismatches immediately, preventing hallucinations from reaching production.

Real-World Example: Form Field Transforms

From the logistics-manager-app codelab, when a user describes an issue like "The vehicle is emitting smoke and the engine has stopped," the AI should automatically set the priority to CRITICAL by adding a listener to the issue field in the serviceForm.

With inline template functions, you can implement this compactly:

<input 
  (blur)="priorityField.setValue(
    analyzePriority(issueField.value)
  )"
  placeholder="Describe the issue..."
/>

The handler stays close to its trigger, making the intent transparent.

Additional Reactivity Refinements

Beyond agents, error boundaries, and control flow mechanics, Angular is sharpening the broader developer experience:

Signal Forms: Fine-Grained Reactivity for Complex Forms

Moving out of Developer Preview in v22, Signal Forms combines the strict typing of reactive forms with the granular reactivity of Signals. A form with 50 fields now updates only the field that changed—not the entire form tree.

export class ServiceTicketForm {
  form = new FormGroup({
    issueDescription: new FormControl(''),
    priority: new FormControl('LOW'),
    assignedTechnician: new FormControl(''),
  });

  // Signal-based access with fine-grained tracking
  priority$ = this.form.get('priority')!.valueAsSignal;

  // Only the priority display updates when priority changes
  priorityStyles = computed(() => {
    const level = this.priority$();
    return level === 'CRITICAL' ? 'bg-red' : 'bg-yellow';
  });
}

Angular Aria: Accessible UI Primitives

Alongside Signal Forms, Angular Aria (the headless, fully accessible UI directive set) also hits stable, allowing you to build heavily customized, high-contrast UI components without sacrificing native accessibility standards.

This is crucial for AI-assisted development. When the angular-developer skill scaffolds a custom dropdown or modal, it automatically includes the following:

Keyboard navigation (arrow keys, enter, escape)
ARIA roles and live regions
Focus management
Screen reader announcements

No agent hallucinations about accessibility—it's baked in.

Vitest as Default

The Angular CLI now scaffolds all new projects with Vitest as the default test runner, replacing Karma for dramatically faster, more modern testing cycles. Tests run in milliseconds instead of seconds, making the agent feedback loop nearly instant.

OnPush as Default Change Detection

New components use ChangeDetectionStrategy.OnPush by default, encouraging signal-based reactivity over Zone.js-triggered checks from project inception. This trains both developers and agents to think in terms of granular, trackable state changes rather than global change detection.

Angular Skills: Teaching Agents Modern Patterns

Angular Skills are designed to help coding agents create applications aligned with the latest versions of Angular, best practices, and new features and manage Angular applications effectively. These skills provide architectural guidance, generate idiomatic Angular code, and help scaffold new projects using modern best practices.

Two key skills ship with v22:

angular-developer: Generates code for components, services, state management, forms, routing, SSR, and more. Always references the correct Angular version before providing guidance.
angular-new-app: Creates a new Angular app using the Angular CLI, providing important guidelines for effectively setting up and structuring a modern Angular application, with flags like --ai-config=[agents, claude, copilot, cursor, gemini, jetbrains, none, windsurf] to tune the generated code for the specific agent's conventions.

Skills and MCP tools are complementary—don't confuse them. One MCP server per domain (don't load everything at once); version your skills like code (a skill for Angular 19 patterns will actively hurt you on Angular 21); use skills to write MCP guardrails (e.g., "Before running ng update, always create a git branch first"); and measure your context budget (if over 30% of your context window is on tool definitions, you have a configuration problem).

The Consolidation Release

Angular is no longer just catching up in the reactivity space; by natively integrating MCP and Angular Skills, hardening its template error boundaries with @boundary, automating exhaustive type checking in control flow, and enabling inline template functions, it is actively defining what a modern, agent-ready frontend architecture looks like.

v22 is the signal-first era made concrete. The framework's multi-year modernization effort converges into a coherent, production-ready, agentic-native development model where:

Agents write type-safe templates that compile or fail, never silently.
Error boundaries isolate failures instead of crashing the entire app.
Control flow is exhaustive by default, not a runtime surprise.
MCP servers close the hallucination loop with real browser visibility.
Skills teach agents modern patterns tailored to your version and conventions.

References:

What's new in Angular - Chrome for Developers (Google I/O 2026)
Angular Skills Repository: https://github.com/angular/skills
Logistics Manager App Codelab: https://github.com/angular/examples/blob/main/logistics-manager-app/codelab.md
MCP Skills vs MCP Tools: The Right Way to Configure Your Server (Antonio Cárdenas, yeou.dev)

[Boost]

Antonio Cardenas — Wed, 20 May 2026 15:19:49 +0000

Antonio Cardenas for Angular Firebase

May 20

Antigravity ha muerto, larga vida a Antigravity.

#productivity #gemini #antigravity #spanish

Comments

5 min read

[Boost]

Antonio Cardenas — Wed, 20 May 2026 15:14:44 +0000

Antonio Cardenas for Turing's Oracle

May 20

Antigravity is Dead. Long Live Antigravity.

#antigravity #gemini #ai #agents

Comments

4 min read

Antigravity ha muerto, larga vida a Antigravity.

Antonio Cardenas — Wed, 20 May 2026 01:16:49 +0000

Google acaba de lanzar Antigravity 2.0 en I/O 2026 — y en el mismo aliento, mató a Gemini CLI, dejó tirado un montón de historiales de chat en un directorio de respaldo, y lanzó tres nuevas superficies compartiendo la misma marca. Si abriste la app esta mañana y entraste en pánico porque tus conversaciones desaparecieron: sigue leyendo. Lo arreglamos.

Qué pasó en I/O 2026

El 18 de mayo de 2026, Google rebautizó Antigravity de "competidor de Cursor" a una plataforma de desarrollo agent-first completa, impulsada por Gemini 3.5 Flash. La marca ahora abarca cuatro productos:

Antigravity 2.0 — la nueva app de escritorio independiente con orquestación multiagente
Antigravity CLI — herramienta de terminal escrita en Go que reemplaza a Gemini CLI
Antigravity SDK — acceso programático al mismo agent harness que Google usa internamente
Antigravity IDE — la app original estilo VS Code de noviembre de 2025, todavía viva Y aquí está la fecha que no puedes ignorar: Gemini CLI se apaga el 18 de junio de 2026 para usuarios de AI Pro, AI Ultra y la capa gratuita. Las empresas con Gemini Code Assist Standard o Enterprise mantienen el acceso — el resto tiene 30 días para migrar.

Las cuatro caras de Antigravity

Antigravity 2.0 (App de escritorio)

El producto estrella. Corre múltiples agentes en paralelo, incluye subagentes dinámicos para flujos paralelizados, programa tareas en segundo plano y se integra nativamente con AI Studio, Firebase y Android. Exportas un proyecto desde AI Studio en tu teléfono, lo abres en local, con el contexto completo intacto. También trae soporte de comandos por voz — puedes hablarle a tus agentes en lugar de escribir.

Antigravity CLI

Reconstruida desde cero en Go. El mismo agent harness que el desktop, nativa para terminal, notablemente más rápida que su predecesora. Si vives en Gemini CLI hoy, este es tu destino de migración — y tienes hasta el 18 de junio para cambiar.

# Verifica tu instalación tras migrar
antigravity --version
antigravity agent new "refactoriza el módulo de auth"

Antigravity SDK

Para construir agentes personalizados sobre la infraestructura de coding de Google, optimizados para los modelos Gemini. Tú defines los comportamientos, tú hospedas donde quieras — Google Cloud, tu propia infraestructura, lo que mejor encaje. Las plantillas de agentes personalizados están disponibles en AI Studio para casos de uso empresariales.

Antigravity IDE (el original)

Sigue mantenido. Sigue siendo el fork de VS Code de noviembre de 2025. Este es con el que la mayoría nos enganchamos — y es el que tiene la trampa de migración (más abajo).

El dolor inmediato: tu historial está en el directorio equivocado

Si actualizaste a 2.0 y tus conversaciones desaparecieron, tu data no se perdió — la migración la dejó tirada en una carpeta de respaldo.

Antigravity 2.0 usa tres directorios bajo ~/.gemini/:

Directorio	Dueño
`~/.gemini/antigravity`	Data activa de la app standalone 2.0
`~/.gemini/antigravity-ide`	Data activa del IDE original
`~/.gemini/antigravity-backup`	Snapshot que creó la migración — frecuentemente más completo que el directorio activo

Tras la actualización, el directorio antigravity/ de la app standalone termina frecuentemente sin entradas de brain, scratch space ni archivos de conversación. El antigravity-backup/ al lado tiene el set completo. Solo necesitamos poner el correcto delante de la app.

La solución: rsync desde el backup al directorio activo

macOS / Linux

# Dry-run primero — mira exactamente qué cambiaría
rsync -avhn --exclude='mcp_config.json' \
  ~/.gemini/antigravity-backup/ \
  ~/.gemini/antigravity/

# ¿Se ve bien? Ejecútalo de verdad (quita el flag -n)
rsync -avh --exclude='mcp_config.json' \
  ~/.gemini/antigravity-backup/ \
  ~/.gemini/antigravity/

¿Por qué excluir mcp_config.json? Normalmente es un symlink que apunta a tu configuración local del servidor MCP — si lo sobrescribes, rompes tus conexiones MCP activas.

Windows (PowerShell)

$src  = "$env:USERPROFILE\.gemini\antigravity-backup"
$dest = "$env:USERPROFILE\.gemini\antigravity"

# Espejo con robocopy, excluyendo mcp_config.json
robocopy $src $dest /E /XF mcp_config.json

Después de correrlo:

Cierra completamente Antigravity — mata el proceso, no solo cierres la ventana.
Reabre la app.
Verifica que el panel lateral ahora muestre tus threads. Si algo se ve raro, tu antigravity-backup/ está intacto — puedes volver a correr el sync o copiar archivos específicos a mano. Para mayor tranquilidad, haz un snapshot de antigravity-backup/ en un lugar externo antes de empezar a tocarlo.

Cómo instalar solo el IDE (saltarte 2.0)

La buena noticia: el IDE y la app standalone 2.0 guardan su data en directorios separados (antigravity-ide/ vs antigravity/), así que tu historial del IDE no queda destrozado cuando 2.0 se instala al lado.

La mala noticia: los instaladores chocan a nivel del sistema operativo. Instala ambos y el binario del IDE se niega a arrancar — las dependencias están acopladas. Desinstalar 2.0 tampoco sana al IDE; tienes que reinstalar el IDE limpio, lo cual borra tus ajustes locales.

Si quieres quedarte solo con el IDE:

Desinstala Antigravity 2.0 por completo si ya lo instalaste.
Haz backup de ~/.gemini/antigravity-ide antes de tocar nada más.
Descarga el instalador del IDE desde la página de releases: antigravity.google/releases
Escoge una versión anterior al split de 2.0 — 1.23.2 es el punto de aterrizaje más seguro.
En Ajustes, pon las actualizaciones en manual para que la app no salte silenciosamente a 2.0.

// settings.json
{
  "update.mode": "manual"
}

Checklist de migración

[ ] Migra tus workflows de Gemini CLI a Antigravity CLI antes del 18 de junio de 2026
[ ] Elige uno: 2.0 desktop o el IDE original — nunca instales ambos
[ ] Haz backup de ~/.gemini/antigravity y ~/.gemini/antigravity-ide semanalmente.
[ ] Si tu historial desapareció tras la actualización, rsync desde ~/.gemini/antigravity-backup (excluyendo mcp_config.json)
[ ] Pon update.mode en manual si dependes del IDE
[ ] Evalúa la nueva capa AI Ultra de $100 si corres cargas multi-agente (5× los límites del Pro) ## TL;DR

Antigravity 2.0 + CLI + SDK llegaron en I/O 2026. Gemini CLI muere el 18 de junio de 2026. ¿Perdiste tu historial de chat? Tu data está en ~/.gemini/antigravity-backup — haz rsync hacia ~/.gemini/antigravity (excluyendo mcp_config.json) y reinicia la app. ¿Quieres solo el IDE viejo? Desinstala 2.0, instala 1.23.2 desde la página de releases, pon las actualizaciones en manual. Elige uno — no corras 2.0 y el IDE al mismo tiempo.

El rey ha muerto. Larga vida al rey. Migra con cuidado.

Antigravity is Dead. Long Live Antigravity.

Antonio Cardenas — Wed, 20 May 2026 00:14:21 +0000

Google just dropped Antigravity 2.0 at I/O 2026—and in the same breath, it killed Gemini CLI, stranded a lot of chat histories in a backup directory, and shipped three new surfaces sharing the same brand. If you opened the app this morning and panicked because your conversations are gone, keep reading. We'll fix it.

What just happened at I/O 2026

On May 18, 2026, Google rebranded Antigravity from a "cursor competitor" into a full agent-first development platform powered by Gemini 3.5 Flash. The brand now spans four products:

Antigravity 2.0 — the new standalone desktop app with multi-agent orchestration
Antigravity CLI — a Go-based terminal tool replacing Gemini CLI
Antigravity SDK — programmatic access to the same agent harness Google uses internally.
Antigravity IDE — the original VS Code-style app from November 2025, still alive And here's the deadline you can't ignore: Gemini CLI sunsets on June 18, 2026 for AI Pro, AI Ultra, and free-tier users. Enterprise on Gemini Code Assist Standard or Enterprise keeps access — everyone else has 30 days to migrate.

The Four Faces of Antigravity

Antigravity 2.0 (Desktop App)

The flagship. Runs multiple agents in parallel, ships dynamic subagents for parallelized workflows, schedules tasks in the background, and integrates natively with AI Studio, Firebase, and Android. Export a project from AI Studio on your phone and open it locally, full context intact. Voice command support is in too — you can talk to your agents instead of typing.

Antigravity CLI

Rebuilt from scratch in Go. Same agent harness as the desktop, terminal-native, and noticeably faster than its predecessor. If you live in Gemini CLI today, this is your migration target — and you have until June 18 to switch.

# Verify your install once you migrate
antigravity --version
antigravity agent new "refactor the auth module"

Antigravity SDK

For building custom agents on top of Google's coding infrastructure, optimized for Gemini models. You define the behaviors; you host wherever it fits — Google Cloud, your own infra, your choice. Custom agent templates are available in AI Studio for enterprise use cases.

Antigravity IDE (the original)

Still maintained. Still the VS Code fork from November 2025. This is the one most of us got hooked on — and it's the one with the migration trap (more on that below).

The immediate pain: your chat history is in the wrong directory

If you updated to 2.0 and your conversations are gone, your data is not lost — the migration stranded it in a backup folder.

Antigravity 2.0 uses three directories under ~/.gemini/:

Directory	Owner
`~/.gemini/antigravity`	Live data for the standalone 2.0 app
`~/.gemini/antigravity-ide`	Live data for the original IDE
`~/.gemini/antigravity-backup`	Snapshot the migration created — often more complete than the live dir

After the update, the standalone app's antigravity/ dir frequently ends up missing brain entries, scratch space, and conversation files. The antigravity-backup/ next to it has the full set. We just need to put the right one in front of the app.

The fix: rsync from backup into the live dir

macOS / Linux

# Dry-run first — see exactly what would change
rsync -avhn --exclude='mcp_config.json' \
  ~/.gemini/antigravity-backup/ \
  ~/.gemini/antigravity/

# Looks right? Run it for real (drop the -n flag)
rsync -avh --exclude='mcp_config.json' \
  ~/.gemini/antigravity-backup/ \
  ~/.gemini/antigravity/

Why exclude mcp_config.json? It's usually a symlink pointing at your local MCP server configuration — overwrite it and you break your active MCP connections.

Windows (PowerShell)

$src  = "$env:USERPROFILE\.gemini\antigravity-backup"
$dest = "$env:USERPROFILE\.gemini\antigravity"

# Robocopy mirror, excluding mcp_config.json
robocopy $src $dest /E /XF mcp_config.json

After running:

Fully quit Antigravity — kill the process, don't just close the window.
Reopen the app.
Verify the side panel now shows your threads. If anything looks off, your antigravity-backup/ is untouched — you can re-run the sync or copy specific files manually. For peace of mind, snapshot antigravity-backup/ to an external location before you start poking at it.

How to install just the IDE (skip 2.0)

The good news: the IDE and the standalone 2.0 app keep their data in separate directories (antigravity-ide/ vs antigravity/), so your IDE history doesn't get clobbered when 2.0 installs alongside it.

The bad news: the installers conflict at the OS level. Install both and the IDE binary refuses to launch — dependencies are coupled. Uninstalling 2.0 doesn't fully heal the IDE either; you have to reinstall the IDE cleanly, which wipes your IDE settings.

If you want to stay on the IDE only:

Uninstall Antigravity 2.0 completely if you already installed it.
Back up ~/.gemini/antigravity-ide before touching anything else.
Grab the IDE installer from the releases page: antigravity.google/releases
Pick a version that predates the 2.0 split — 1.23.2 is the safest landing pad.
In Settings, switch updates to manual so the app doesn't silently jump back to 2.0.

// settings.json
{
  "update.mode": "manual"
}

Migration checklist

[ ] Migrate Gemini CLI workflows to Antigravity CLI before June 18, 2026
[ ] Pick one: 2.0 desktop or the original IDE — never install both
[ ] Back up ~/.gemini/antigravity and ~/.gemini/antigravity-ide weekly
[ ] If history disappeared post-update, rsync from ~/.gemini/antigravity-backup (exclude mcp_config.json)
[ ] Set update.mode to manual if you depend on the IDE
[ ] Evaluate the new $100 AI Ultra tier if you run multi-agent workloads (5× the Pro limits) ## TL;DR

Antigravity 2.0 + CLI + SDK shipped at I/O 2026. Gemini CLI dies June 18, 2026. Lost your chat history? Your data is sitting in ~/.gemini/antigravity-backup — rsync it into ~/.gemini/antigravity (excluding mcp_config.json), restart the app. Want the old IDE only? Uninstall 2.0, install 1.23.2 from the releases page, set updates to manual. Pick one — don't run 2.0 and the IDE side by side.

The king is dead. Long live the king. Migrate carefully.

[Boost]

Antonio Cardenas — Fri, 03 Apr 2026 07:42:13 +0000

Barsukov Nikita for Angular

Apr 3

What's New in Taiga UI v5: A Modern Angular UI Kit

#angular #javascript #frontend #opensource

Comments

13 min read

[Boost]

Antonio Cardenas — Wed, 25 Mar 2026 23:50:01 +0000

Joel Humberto Gómez Paredes

Feb 11

Sincronizando mi AGENTS.md

#ai #softwaredevelopment #javascript

Comments 1

2 min read

[Boost]

Antonio Cardenas — Mon, 23 Mar 2026 07:35:27 +0000

Antonio Cardenas for Angular Firebase

Mar 22

MCP Skills vs MCP Tools: La forma correcta de configurar MCP Server

#angular #mcp #spanish #webdev

Comments

6 min read

MCP Skills vs MCP Tools: La forma correcta de configurar MCP Server

Antonio Cardenas — Sun, 22 Mar 2026 08:59:35 +0000

Las skills y las herramientas MCP no son lo mismo — y confundirlos tiene un costo real. Aprende la diferencia, los problemas reales y cómo combinarlos para un flujo de trabajo agéntico que sí funcione.

Todo el mundo habla de MCP. Todo el mundo habla de skills.

La mayoría los usa como sinónimos — y ese es exactamente el problema.

No son lo mismo. No resuelven el mismo problema. Y si usas el incorrecto, lo vas a sentir: alucinaciones, contexto desbordado, agentes que pierden el hilo y flujos de trabajo que se rompen bajo presión.

Vamos a resolverlo.

El modelo mental

Piénsalo como una cocina.

Las herramientas MCP son tus electrodomésticos e ingredientes — el horno, el refrigerador, los vegetales frescos. Capacidad pura. Sin ellos, no se cocina nada.

Los skills son tus recetas — las instrucciones paso a paso que le dicen a un chef exactamente cómo convertir esos ingredientes en algo bueno. Sin ellas, tienes poder, pero sin dirección.

Un agente con solo herramientas MCP puede hacer cosas, pero no necesariamente sabe cómo hacerlas bien. Un agente con solo skills tiene excelentes instrucciones, pero no puede actuar sobre ellas.

Necesitas los dos.

¿Qué es una herramienta MCP?

El Model Context Protocol es un estándar abierto — ahora bajo la Agentic AI Foundation de la Linux Foundation — que le da a los agentes de IA una forma estandarizada de conectarse a sistemas externos: bases de datos, APIs, sistemas de archivos, GitHub, Slack, tu Angular CLI.

Cuando conectas un servidor MCP a tu cliente —ya sea Claude Code, la CLI de Gemini o un agente personalizado—, este accede a un conjunto de herramientas deterministas y tipadas. Cada herramienta tiene un esquema claro de entrada y salida. Cuando el agente la llama, se ejecuta — sin interpretación, sin riesgo de alucinación a nivel de ejecución. Es una llamada de API estructurada, no una sugerencia.

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

MCP es como el agente alcanza fuera de sí mismo. Es el sistema nervioso.

Usa MCP cuando el agente necesite:

Leer o escribir en un sistema real (base de datos, sistema de archivos, API)
Ejecutar acciones con entradas y salidas claras y auditables.
Conectarse a herramientas que no controlas
Integrar múltiples servicios a través de una interfaz consistente.

¿Qué es un skill?

Un skill es una carpeta que contiene un archivo Markdown (con frontmatter YAML) más scripts y recursos opcionales. No es ejecutable por sí solo — es un playbook.

Cuando la solicitud de un usuario coincide con los criterios de relevancia de un skill, el agente carga esas instrucciones dinámicamente y las sigue. Es como darle al agente memoria procedural de nivel experto, bajo demanda.

---
name: angular-component-review
description: Revisar componentes Angular para cumplimiento de Signals y arquitectura standalone
---

# Revisión de Componente Angular

Al revisar un componente Angular:
1. Verificar que todo el estado use `signal()` o `computed()` — nunca mutación directa
2. Confirmar que el componente es `standalone: true`
3. Asegurar que no queden dependencias de `NgModule`
4. Validar que se use `@if` / `@for` en lugar de `*ngIf` / `*ngFor`

El agente lo carga solo cuando es relevante. Cuando no lo es — no te cuesta nada.

Usa un skill cuando el agente lo necesite:

Seguir un proceso o checklist consistente.
Aplicar experiencia específica del dominio (tus estándares de código, criterios de revisión).
Codificar conocimiento que no cambia frecuentemente.
Reutilizar el mismo flujo de trabajo en distintas conversaciones.

Los desventajas reales

Aquí es donde la mayoría de las guías se detienen. No deberían.

MCP: El Impuesto de Tokens

Cada herramienta MCP que conectas inyecta su esquema completo en la ventana de contexto antes de que el agente procese un solo mensaje. Cada herramienta cuesta 550–1,400 tokens. Conecta GitHub, Slack y Sentry y estás mirando 55,000 tokens quemados de entrada — más de un cuarto del límite de 200k de Claude antes de hacer cualquier trabajo real.

Un equipo reportó conectar tres servidores MCP y consumir 143,000 de 200,000 tokens solo en definiciones de herramientas. Al agente le quedaban 57,000 tokens para la conversación real.

Y si usas Gemini con su ventana de contexto de 1M+ tokens, podrías pensar que puedes ignorar esto. No lo hagas. Incluso si te sobra espacio, inyectar 55,000 tokens de esquema JSON crudo en cada iteración de la conversación aumenta la latencia, incrementa los costos de la API y diluye el enfoque del modelo.

La buena noticia: clientes modernos como Claude Code y la CLI de Gemini han adoptado el progressive discovery para MCP — cargando solo nombres y descripciones de herramientas al inicio (~20–50 tokens cada una), y obteniendo los esquemas completos solo cuando el agente realmente necesita una herramienta. El overhead de tokens cayó ~85%. Pero esto solo funciona si tu configuración MCP está preparada para usarlo — y la mayoría todavía no lo está.

Skills: El Problema de la Desactualización

Los skills son archivos Markdown. No se actualizan solos. Si tus patrones de Angular evolucionan — digamos que migraste de setInput() a la nueva API declarativa en Angular 20 — tu Skill sigue enseñando la forma antigua hasta que alguien lo actualice manualmente.

Cuantos más skills creas, mayor es la carga de mantenimiento. Y si un skill está sutilmente equivocado, el agente lo seguirá con confianza — sin error, solo output silenciosamente incorrecto.

Ambos: El problema de selección

Dale a un agente demasiadas herramientas o demasiados skills y empieza a tomar las decisiones equivocadas — llama a la herramienta incorrecta, activa el playbook equivocado, o los combina de formas que producen instrucciones contradictorias. Los expertos recomiendan no superar 10–15 herramientas MCP activas al mismo tiempo.

Cómo combinarlos

El patrón más poderoso es usarlos como capas:

Capa 1 — MCP provee acceso.
Conecta solo lo que el agente genuinamente necesita para la tarea actual. Angular CLI, una base de datos, un sistema de archivos. Mantenlo simple.

Capa 2 — Skills proveen experiencia.
Crea un Skill que le diga al agente cómo usar esas herramientas en tu contexto específico. No solo "ejecuta el Angular CLI" — sino "al migrar un componente, ejecuta ng generate con estos flags, luego valida contra estos patrones."

Capa 3 — Skills pueden orquestar MCP.
Un skill puede definir un flujo de trabajo multipaso que llame a múltiples herramientas MCP en secuencia. Ejemplo: un skill de "Deploy & Notify" que usa el MCP de GitHub para hacer push, un MCP de CI/CD para lanzar el build, y un MCP de Slack para notificar al equipo — todo bajo un playbook coherente.

---
name: angular-migration-workflow
description: Flujo completo para migrar un componente Angular a patrones v21
---

# Flujo de Migración

1. Usa el MCP del Angular CLI para verificar la versión actual del componente
2. Ejecuta `ng update` para el paquete afectado
3. Aplica el schematic de migración zoneless
4. Revisa el output contra el Skill de angular-component-review
5. Ejecuta los tests y reporta resultados

Guía de Decisión Práctica

Situación	Usar
Necesito consultar una base de datos real	MCP
Necesito seguir un checklist de code review	Skill
Necesito hacer push a GitHub	MCP
Necesito aplicar el formato de commits de mi equipo	Skill
Necesito leer una API en vivo	MCP
Necesito enseñarle al agente mis reglas de arquitectura Angular	Skill
Necesito acceso Y proceso consistente	Ambos

Mejorando el Flujo de Trabajo

Algunos patrones que realmente funcionan en producción:

1. Un servidor MCP por dominio. No cargues todo al mismo tiempo. Crea configuraciones separadas para "desarrollo Angular", "despliegue" y "comunicación" — y activa solo la que necesitas para cada sesión.

2. Versiona tus Skills como código. Ponlos en tu repositorio. Revísalos cuando actualices tu stack. Un Skill para patrones de Angular 19 te va a perjudicar activamente en Angular 21.

3. Usa Skills para escribir guardrails de MCP. En lugar de confiar en que el agente sepa cuándo llamar a una acción MCP destructiva, escribe un Skill que diga explícitamente: "Antes de ejecutar cualquier ng update, siempre crea un branch de git primero."

4. Mide tu presupuesto de contexto. Antes de que el agente haga cualquier trabajo real, conoce cuántos tokens consume tu configuración MCP. Si superas el 30% de tu ventana de contexto solo en definiciones de herramientas, tienes un problema de configuración.

5. Deja que el agente mantenga los Skills simples. Para áreas de cambio rápido — como mantener actualizadas las convenciones de versión de Angular de tu equipo — deja que el agente actualice el archivo Skill cuando se lo indiques. Es más rápido que hacerlo manualmente y mantiene el Skill honesto.

La conclusión

MCP les da a los agentes la capacidad de actuar. Los skills les enseñan cómo actuar bien.

El debate de "MCP vs Skills" es falso. La pregunta real es: ¿necesitas acceso, experiencia, o ambos?

En la mayoría de los flujos de trabajo reales con Angular, necesitas los dos. Un agente que puede ejecutar tu CLI, pero no conoce tu arquitectura, es solo una forma más rápida de cometer los mismos errores. Un agente que conoce tus patrones, pero no puede tocar tu proyecto real, es solo un buscador caro.

Usados juntos, con límites claros y configuración lean, son la base del desarrollo agéntico que realmente funciona.

Anteriormente escribí sobre Angular 21, MCP y el fin de las migraciones manuales — un buen punto de partida si eres nuevo en la configuración del servidor MCP para Angular.

MCP Skills vs MCP Tools: The Right Way to Configure Your Server

Antonio Cardenas — Sun, 22 Mar 2026 08:40:00 +0000

Skills and MCP tools are not the same thing — and confusing them costs you. Learn the real difference, the real downsides, and how to combine both for a better agentic workflow.

MCP Skills vs MCP Tools: What's the Difference and How to Combine Them

Everyone is talking about MCP. Everyone is talking about skills.

Most people are using them interchangeably — and that's exactly the problem.

They are not the same thing. They don't solve the same problem. And if you reach for the wrong one, you will feel it: hallucinations, context blowups, agents that drift off-task, and workflows that fall apart under pressure.

Let's fix that.

The Core Mental Model

Think of it like a kitchen.

MCP tools are your appliances and ingredients — the oven, the fridge, the fresh vegetables. Raw capability. Without them, nothing gets cooked.

Skills are your recipes — the step-by-step instructions that tell a skilled chef exactly how to turn those ingredients into something good. Without them, you have power with no direction.

An agent with only MCP tools can do things but doesn't necessarily know how to do them well. An agent with only skills has great instructions but no way to act on them.

You need both.

What Is an MCP Tool?

The Model Context Protocol is an open standard — now under the Linux Foundation's Agentic AI Foundation — that gives AI agents a standardized way to connect to external systems: databases, APIs, file systems, GitHub, Slack, your Angular CLI.

When you connect an MCP server to your client—whether that's Claude Code, the Gemini CLI, or a custom agent—it gets access to a set of typed, deterministic tools. Each tool has a clear input/output schema. When the agent calls it, it executes — no interpretation, no hallucination risk at the execution level. It's a structured API call, not a suggestion.

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

MCP is how the agent reaches outside itself. It's the nervous system.

Use MCP when you need the agent to:

Read or write to a real system (database, filesystem, API)
Execute actions with clear, auditable inputs and outputs
Connect to tools you don't own or control
Integrate multiple services through a consistent interface

What Is a Skill?

A Skill is a folder containing a Markdown file (with YAML frontmatter) plus optional scripts and resources. It's not executable by itself — it's a playbook.

When a user's request matches a Skill's relevance criteria, the agent loads those instructions dynamically and follows them. Think of it as giving the agent expert-level procedural memory on demand.

---
name: angular-component-review
description: Review Angular components for Signal compliance and standalone architecture
---

# Angular Component Review

When reviewing an Angular component:
1. Check that all state uses `signal()` or `computed()` — never direct property mutation
2. Verify the component is `standalone: true`
3. Confirm no `NgModule` dependencies remain
4. Validate that `@if` / `@for` is used instead of `*ngIf` / `*ngFor`

The agent loads this only when it's relevant. When it's not — it costs you nothing.

Use a skill when you need the agent to:

Follow a consistent process or checklist
Apply domain-specific expertise (your coding standards, review criteria)
Encode knowledge that doesn't change often
Reuse the same workflow across different conversations

The Real Downsides

This is where most guides stop. They shouldn't.

MCP: The Token Tax

Every MCP tool you connect injects its full schema into the context window before the agent processes a single message. Each tool costs 550–1,400 tokens. Connect GitHub, Slack, and Sentry, and you're looking at 55,000 tokens burned upfront — over a quarter of Claude's 200k limit before any real work begins. And if you are using Gemini with its 1M+ token window, you might think you can just ignore this. Don't. Even if you have the space to spare, dumping 55,000 tokens of raw JSON schema into every single turn of a conversation drives up your latency, increases API costs, and dilutes the model's focus.

One team reported connecting three MCP servers and consuming 143,000 of 200,000 tokens on tool definitions alone. The agent had 57,000 tokens left for the actual conversation.

The good news: modern clients like Claude Code and the Gemini CLI have adopted progressive discovery for MCP—loading only tool names and descriptions upfront (~20–50 tokens each) and fetching full schemas only when the agent actually needs a tool. Token overhead declined by ~85%. But this feature only works if your MCP setup is configured to use it, and most setups still aren't.

Skills: The Staleness Problem

Skills are Markdown files. They don't update themselves. If your Angular patterns evolve — say you migrate from setInput() to the new declarative API in Angular 20 — your Skill still teaches the old way until someone updates it manually.

The more skills you create, the more maintenance burden you carry. And if a skill is subtly wrong, the agent will follow it confidently — no error, just quietly incorrect output.

Both: The Selection Problem

Give an agent too many tools or too many skills, and it starts making the wrong choices — calling the wrong tool, triggering the wrong playbook, or combining them in ways that produce contradictory instructions. Experts recommend staying under 10–15 active MCP tools at any time.

How to Combine Them

The most powerful pattern is using them as layers:

Layer 1 — MCP provides access.
Connect only what the agent genuinely needs for the current task. Angular CLI, a database, and a file system. Keep it lean.

Layer 2 — Skills provide expertise.
Create a skill that tells the agent how to use those tools in your specific context. Not just "run the Angular CLI" — but "when migrating a component, run ng generate with these flags, then validate against these patterns."

Layer 3 — Skills can orchestrate MCP.
A Skill can define a multi-step workflow that calls multiple MCP tools in sequence. Example: a "Deploy & Notify" Skill that uses GitHub MCP to push, a CI/CD MCP to trigger a build, and a Slack MCP to notify the team — all under one coherent playbook.

---
name: angular-migration-workflow
description: Full workflow for migrating an Angular component to v21 patterns
---

# Migration Workflow

1. Use the Angular CLI MCP to check the current component version
2. Run `ng update` for the affected package
3. Apply the zoneless migration schematic
4. Review the output against the angular-component-review Skill
5. Run tests and report results

The Practical Decision Guide

Situation	Use
Need to query a real database	MCP
Need to follow a code review checklist	Skill
Need to push to GitHub	MCP
Need to apply your team's commit message format	Skill
Need to read a live API	MCP
Need to teach the agent your Angular architecture rules	Skill
Need both access and consistent process	Both

Improving Your Workflow

A few patterns that actually work in production:

1. One MCP server per domain. Don't load everything at once. Create separate configs for "Angular development," "deployment," and "communication" — and activate only the one you need for a given session.

2. Version your Skills like code. Put them in your repository. Review them when you update your stack. A Skill for Angular 19 patterns will actively hurt you on Angular 21.

3. Use Skills to write MCP guardrails. Instead of relying on the agent to figure out when to call a destructive MCP action, write a Skill that explicitly says: "Before running any ng update, always create a git branch first."

4. Measure your context budget. Before your agent does any real work, know how many tokens your MCP setup consumes. If you're over 30% of your context window is on tool definitions, you have a configuration problem.

5. Let the agent maintain simple Skills. For fast-moving areas — like keeping track of your team's current Angular version conventions — let the agent update the Skill file itself when you tell it to. It's faster than doing it manually and keeps the Skill honest.

The Bottom Line

MCP gives agents the ability to act. Skills teach them how to act well.

The debate of "MCP vs Skills" is a false one. The real question is: do you need access, expertise, or both?

In most real Angular workflows, you need both. An agent that can run your CLI but doesn't know your architecture is just a faster way to make the same mistakes. An agent that knows your patterns but can't touch your actual project is just an expensive search engine.

Used together, with clear boundaries and lean configuration, they're the foundation of agentic development that actually works.

Previously I wrote about Angular 21 MCP and the end of manual migrations — a good starting point if you're new to the MCP server setup for Angular.

DEV Community: Antonio Cardenas

[Boost]

Agent-Safe Angular Components: Copy-Paste MCP + Skills Setup for Verified AI Development

Agent-Safe Angular Components: Copy-Paste MCP + Skills Setup for Verified AI Development

Angular v22 MCP + Skills Integration: Agentic Development Setup

Part 1: Environment Setup

Prerequisites

Step 1: Configure Angular MCP Server

Step 2: Install Angular Skills

Step 3: Configure Chrome DevTools for Agents

Part 2: Writing Agent-Safe Components

Pattern 1: Exhaustive @switch with Type Safety

Pattern 2: Signal Forms with Inline Validators

Pattern 3: @boundary for Risky Integrations

Pattern 4: Inline Template Functions for Transient Logic

Part 3: Agent Workflows

Workflow 1: Scaffold a Component (with MCP Verification)

Workflow 2: Add AI-Powered Fleet Chat (with Browser Verification)

Workflow 3: Implement Predictive Diagnostics with @boundary

Part 4: Skills Configuration Best Practices

One Server Per Domain

Version Your Skills

Measure Context Budget

Write MCP Guardrails in Skills

Part 5: Troubleshooting

Summary

Stop AI Agents From Hallucinating: Angular v22's Type-Safe, Boundary-Protected Pipelines

Angular v22: Agentic Pipelines and Resilient Template Architectures

The Agentic Pipeline: Angular MCP + Skills

How it works: The MCP Server + Skills Stack

Closing the Hallucination Loop: MCP + Chrome DevTools for Agents

Template Resilience with @boundary

Error Isolation and Fallback Patterns

Retry Logic Without State Reload

Multi-Level Boundaries for Granular Control

Deep Dive: Advanced Control Flow Mechanics in @switch

1. Multiple Case Matching (Boilerplate Reduction)

2. Exhaustive Checking via the never Type

Inline Template Functions: Reducing Class Boilerplate

The Pattern: Event Handlers and Transforms

Template Errors and Type Inference

Real-World Example: Form Field Transforms

Additional Reactivity Refinements

Signal Forms: Fine-Grained Reactivity for Complex Forms

Angular Aria: Accessible UI Primitives

Vitest as Default

OnPush as Default Change Detection

Angular Skills: Teaching Agents Modern Patterns

The Consolidation Release

[Boost]

Antigravity ha muerto, larga vida a Antigravity.

[Boost]

Antigravity is Dead. Long Live Antigravity.

Antigravity ha muerto, larga vida a Antigravity.

Qué pasó en I/O 2026

Las cuatro caras de Antigravity

Antigravity 2.0 (App de escritorio)

Antigravity CLI

Antigravity SDK

Antigravity IDE (el original)

El dolor inmediato: tu historial está en el directorio equivocado

La solución: rsync desde el backup al directorio activo

Cómo instalar solo el IDE (saltarte 2.0)

Checklist de migración

Antigravity is Dead. Long Live Antigravity.

What just happened at I/O 2026

The Four Faces of Antigravity

Antigravity 2.0 (Desktop App)

Antigravity CLI

Antigravity SDK

Antigravity IDE (the original)

The immediate pain: your chat history is in the wrong directory

The fix: rsync from backup into the live dir

How to install just the IDE (skip 2.0)

Migration checklist

[Boost]

What's New in Taiga UI v5: A Modern Angular UI Kit

[Boost]

Sincronizando mi AGENTS.md

[Boost]

Deep Dive: Advanced Control Flow Mechanics in `@switch`

2. Exhaustive Checking via the `never` Type