DEV Community: Antonio Cardenas

[Boost]

Antonio Cardenas — Tue, 04 Aug 2026 05:27:44 +0000

Aug 4

Higgsfield-level image & video quality, but inside Claude Code and billed by Google. generate-nanobanana quotes the cost before every paid run and logs prompt + seed beside each file. github.com/AntonioCard... feedback welcome.

GitHub - AntonioCardenas/generate-nanobanana: Claude Code skill for AI image & video generation with Google Gemini — Nano Banana 2 Lite, Nano Banana Pro, Gemini Omni Flash. Cost gates before paid runs, real reference images, a prompt log beside every file. · GitHub

Claude Code skill for AI image & video generation with Google Gemini — Nano Banana 2 Lite, Nano Banana Pro, Gemini Omni Flash. Cost gates before paid runs, real reference images, a prompt log b...

github.com

1 min read

Higgsfield-level image & video quality, but inside Claude Code and billed by Google. generate-nanobanana quotes the cost before every paid run and logs prompt + seed beside each file. https://github.com/AntonioCardenas/generate-nanobanana feedback welcome.

Antonio Cardenas — Tue, 04 Aug 2026 05:27:34 +0000

GitHub - AntonioCardenas/generate-nanobanana: Claude Code skill for AI image & video generation with Google Gemini — Nano Banana 2 Lite, Nano Banana Pro, Gemini Omni Flash. Cost gates before paid runs, real reference images, a prompt log beside every file. · GitHub

Claude Code skill for AI image & video generation with Google Gemini — Nano Banana 2 Lite, Nano Banana Pro, Gemini Omni Flash. Cost gates before paid runs, real reference images, a prompt log b...

github.com

Mastering Impeccable: AI Skill Design for Frontend Architecture

Antonio Cardenas — Thu, 30 Jul 2026 09:15:21 +0000

Generative coding agents are powerful, but left to their own devices, they default to visual clutter: predictable gradients, uncalibrated spacing, and bloated, outdated component structures. Impeccable is a design skill package, created by Paul Bakaus, that runs directly inside Claude Code, Gemini CLI, and Codex CLI (as well as Cursor and GitHub Copilot) to enforce strict aesthetic guardrails, with the same rule set recompiled for each harness.

By applying deliberate skill design, you can steer agents away from generic patterns and push them toward precise, high-craft web experiences.

What Is Skill Design, and Why Does It Matter for AI Agents?

Skill design is the practice of building deterministic rails for non-deterministic AI models. Instead of endlessly asking an agent to "make it look better" or "improve performance," you inject a compiled DESIGN.md and functional directive that the agent must follow on every iteration.

Impeccable builds on Anthropic's frontend-design skill and adds 23 commands that give you a shared design vocabulary with the model, plus 58 deterministic anti-pattern detection rules (default Inter font, purple-to-blue gradients, cards nested in cards, gray text on colored backgrounds, rounded icon tiles above every heading, and more). It turns the AI from a junior developer guessing at your aesthetic into a strict implementer of the visual rules you actually define.

Implementing Impeccable's Constraints for Modern Web Apps

Precision is everything when you wire this workflow in. Impeccable respects your existing design system rather than overwriting it: when it runs, it scans your codebase (tokens, components, Tailwind config) and loads your brand rules from your own DESIGN.md, instead of imposing a generic aesthetic. So if your identity is built on a minimalist look, the right way to enforce it is to declare it yourself in that file — a limited green-and-pink palette, a dark base background at #0c1624, typography and tone of voice — so every subsequent command reads it before generating anything. Impeccable doesn't decide that aesthetic for you; it gives you the vocabulary and the mechanism to keep yours consistent across every iteration.

The Commands That Do the Heavy Lifting

Impeccable exposes 23 commands that act as a shared vocabulary with the agent — each one names a specific kind of design intervention. Three of the most useful for a production workflow:

/audit — a production-quality pass. Runs the deterministic anti-pattern detector (58 curated rules: generic gradients, default Inter font, nested cards, predictable shadows, etc.) against your current code and reports findings without changing anything yet. It's the diagnostic step before you touch code.
/normalize — fixes inconsistencies within the system itself: spacing, border radii, type sizes, or color usage that drifted from the tokens defined in your DESIGN.md. Useful when multiple agent sessions have introduced small divergences over time.
/polish — the final quality pass. Applies fixes within your existing system (it doesn't invent a new one), removes detected "AI tells," and reruns the detector before handing the result back, until it reaches zero findings.

A typical flow in Claude Code or Cursor looks like this: /impeccable audit to diagnose, /impeccable normalize to align what already exists with your tokens, and /impeccable polish as a final pass before committing — each one reading the same DESIGN.md/PRODUCT.md so it never drifts from your brand.

These three are just the starting point: there are 20 more commands (/typeset, /distill, /colorize, /layout, /bolder, /quieter, /overdrive, among others) covering typography, color, layout, and motion. You can find the full command list, installation docs, and source code in the official repository README.

Implementation Example: Your Own Brand Rules

Impeccable doesn't impose frontend architecture — it doesn't decide whether you use zoneless Angular, Signals, or which animation engine to reach for; that stays in your hands. What it does do is consistently read the visual rules you define. A DESIGN.md with strict brand constraints might look like this, as an illustrative example:

# Illustrative example only — not Impeccable's actual schema,
# which uses DESIGN.md/PRODUCT.md in Markdown (Google Stitch spec)
brand:
  background_base: "#0c1624"
  allowed_accents: ["green", "pink"]
  voice: "Calm, precise, no hype"
  anti_references: "Avoid pure white. Don't generate generic gradients. Reject aggressive or weapon-related iconography, and avoid generating or showing hands in visual assets."

Any motion engine or architecture decision (GSAP, Lenis, Angular with Signals, etc.) is still your own technical stack choice — Impeccable simply keeps the agent from reintroducing generic visual patterns while you implement it.

Haz que tu frontend se mantenga impecable

Antonio Cardenas — Thu, 30 Jul 2026 09:12:23 +0000

Antonio Cardenas for Angular Firebase

Jul 30

Dominando Impeccable: para mantener coherencia y consistencia de diseño

#frontend #claude #ai #webdev

4 min read

Dominando Impeccable: para mantener coherencia y consistencia de diseño

Antonio Cardenas — Thu, 30 Jul 2026 09:11:27 +0000

Los agentes de código generativo son potentes, pero si se les deja a su libre albedrío, por defecto producen un desorden visual: degradados predecibles, espaciados sin calibrar y estructuras de componentes pesadas y obsoletas. Impeccable es un paquete de habilidades de diseño, creado por Paul Bakaus, que opera directamente dentro de Claude Code, Gemini CLI y Codex CLI (además de Cursor y GitHub Copilot) para imponer estrictos límites estéticos, con un mismo conjunto de reglas recompilado para cada harness.

Al aplicar un diseño de habilidades deliberado, puedes alejar a los agentes de los patrones genéricos y obligarlos a generar experiencias web precisas y de alto nivel visual.

¿Qué es el diseño de habilidades y por qué es importante para los agentes de IA?

El diseño de habilidades (skill design) es la práctica de construir rieles deterministas para modelos de IA no deterministas. En lugar de pedirle interminablemente a un agente que "haga que se vea mejor" o "mejore el rendimiento", inyectas un DESIGN.md compilado y directivas funcionales que el agente debe respetar en cada iteración.

Impeccable construye sobre la habilidad frontend-design de Anthropic y añade 23 comandos con un vocabulario de diseño compartido, más 58 reglas deterministas de detección de antipatrones (fuente Inter por defecto, degradados morado-azul, tarjetas anidadas, texto gris sobre fondos de color, iconos redondeados sobre cada encabezado, entre otros). Transforma a la IA de ser un desarrollador junior que intenta adivinar tu estética a un implementador estricto de las reglas visuales que tú definas.

Cómo implementar las restricciones de Impeccable para aplicaciones web modernas

Al integrar este flujo de trabajo, la precisión lo es todo. Impeccable respeta tu sistema de diseño existente en lugar de sobrescribirlo: al ejecutarse, escanea tu código base (tokens, componentes, configuración de Tailwind) y carga las reglas de marca desde tu propio DESIGN.md, en vez de imponer una estética genérica. Por eso, si tu identidad se basa en una estética minimalista, la forma correcta de imponerla es declarándola tú mismo en ese archivo — paleta limitada de verde y rosa, fondo oscuro base en #0c1624, tipografía y tono de voz — para que cada comando posterior la lea antes de generar nada. Impeccable no decide esa estética por ti; te da el vocabulario y el mecanismo para que la tuya se respete de forma consistente en cada iteración.

Los comandos que hacen el trabajo pesado

Impeccable expone 23 comandos que funcionan como un vocabulario compartido con el agente — cada uno nombra un tipo específico de intervención de diseño. Tres de los más útiles para un flujo de producción:

/audit — un pase de calidad de producción. Ejecuta el detector determinista de antipatrones (58 reglas curadas: degradados genéricos, fuente Inter por defecto, tarjetas anidadas, sombras predecibles, etc.) contra tu código actual y reporta los hallazgos sin modificar nada todavía. Es el paso de diagnóstico antes de tocar código.
/normalize — corrige inconsistencias dentro del propio sistema: espaciados, radios de borde, tamaños tipográficos o usos de color que se desviaron de los tokens definidos en tu DESIGN.md. Útil cuando varias sesiones de un agente fueron introduciendo pequeñas divergencias con el tiempo.
/polish — el pase final de calidad. Aplica las correcciones dentro de tu sistema existente (no inventa uno nuevo), elimina las "señales de IA" detectadas y vuelve a correr el detector antes de entregar el resultado, hasta llegar a cero hallazgos.

Un flujo típico en Claude Code o Cursor se ve así: /impeccable audit para diagnosticar, /impeccable normalize para alinear lo que ya existe con tus tokens, y /impeccable polish como pase final antes de hacer commit — cada uno leyendo el mismo DESIGN.md/PRODUCT.md para no salirse de tu marca.

Estos tres son solo el punto de partida: hay otros 20 comandos (/typeset, /distill, /colorize, /layout, /bolder, /quieter, /overdrive, entre otros) que cubren tipografía, color, layout y movimiento. Puedes ver el listado completo, la documentación de instalación y el código fuente en el README oficial del repositorio.

Ejemplo de implementación: Tus propias reglas de marca

Impeccable no impone arquitectura de frontend (no decide si usas Angular zoneless, señales o qué motor de animación usar) — eso queda en tus manos. Lo que sí hace es leer consistentemente las reglas visuales que tú definas. Un DESIGN.md con restricciones estrictas de marca podría verse así, a modo de ejemplo:

# Ejemplo ilustrativo — no es el esquema real de Impeccable,
# que usa DESIGN.md/PRODUCT.md en formato Markdown (spec Google Stitch)
brand:
  background_base: "#0c1624"
  allowed_accents: ["green", "pink"]
  voice: "Calma, precisa, sin hype"
  anti_references: "Evitar el blanco puro. No generar degradados genéricos. Rechazar toda iconografía agresiva o relacionada con armas, y evitar generar o mostrar manos en los recursos visuales."

Cualquier motor de movimiento o decisión de arquitectura (GSAP, Lenis, Angular con Signals, etc.) sigue siendo una decisión tuya de stack técnico — Impeccable simplemente evita que el agente reintroduzca los patrones visuales genéricos mientras la implementas.

[Boost]

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

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

Angular v22 MCP + Skills Integration: Agentic Development Setup With Angular v22, the MCP...

dev.to

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

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

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.

DEV Community: Antonio Cardenas

[Boost]

Higgsfield-level image & video quality, but inside Claude Code and billed by Google. generate-nanobanana quotes the cost before every paid run and logs prompt + seed beside each file. github.com/AntonioCard... feedback welcome.

GitHub - AntonioCardenas/generate-nanobanana: Claude Code skill for AI image & video generation with Google Gemini — Nano Banana 2 Lite, Nano Banana Pro, Gemini Omni Flash. Cost gates before paid runs, real reference images, a prompt log beside every file. · GitHub

Higgsfield-level image & video quality, but inside Claude Code and billed by Google. generate-nanobanana quotes the cost before every paid run and logs prompt + seed beside each file. https://github.com/AntonioCardenas/generate-nanobanana feedback welcome.

GitHub - AntonioCardenas/generate-nanobanana: Claude Code skill for AI image & video generation with Google Gemini — Nano Banana 2 Lite, Nano Banana Pro, Gemini Omni Flash. Cost gates before paid runs, real reference images, a prompt log beside every file. · GitHub

Mastering Impeccable: AI Skill Design for Frontend Architecture

What Is Skill Design, and Why Does It Matter for AI Agents?

Implementing Impeccable's Constraints for Modern Web Apps

The Commands That Do the Heavy Lifting

Implementation Example: Your Own Brand Rules

Haz que tu frontend se mantenga impecable

Dominando Impeccable: para mantener coherencia y consistencia de diseño

Dominando Impeccable: para mantener coherencia y consistencia de diseño

¿Qué es el diseño de habilidades y por qué es importante para los agentes de IA?

Cómo implementar las restricciones de Impeccable para aplicaciones web modernas

Los comandos que hacen el trabajo pesado

Ejemplo de implementación: Tus propias reglas de marca

[Boost]

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

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)

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

2. Exhaustive Checking via the `never` Type