DEV Community: Turing's Oracle

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)

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.

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.

Angular 20 to 21 Upgrade: The Practical Survival Guide

Antonio Cardenas — Sat, 13 Dec 2025 07:48:14 +0000

A clear and concise guide to upgrading from Angular 20 to 21. that Covers the essentials like the Karma full removal, the new default Zoneless mode, automatic HttpClient, and how to fix your breaking builds.

If you thought Angular 20 was a big shift, welcome to Angular 21.

While version 20 was about stabilizing Signals, version 21 is about removing most of the old patterns. The "Angular Way" has fundamentally changed: zone.js is optional, Karma is dead, and RxJS is slowly retreating to the edges.

This isn't just an update; it's a new ecosystem. Here is what is going to break and how to fix it.

🚨 The "Stop Everything" Breaking Changes

Before you run ng update, be aware that your build will likely fail if you rely on these legacy patterns.

1. The Karma Extinction Event (Vitest is Default)

The most immediate shock for many teams will be ng test. Angular 21 has officially swapped Karma for Vitest as the default test runner.

What breaks: If you have a custom karma.conf.js or rely on specific Karma plugins/reporters, your test suite is now legacy code.

The Fix:

New Projects: You get Vitest out of the box. It's faster, cleaner, and uses Vite.
Existing Projects: You aren't forced to switch immediately, but the writing is on the wall. The CLI will nag you.
Migration: Run the schematic ng generate @angular/core:karma-to-vitest to attempt an auto-migration. It's remarkably good at converting standard configs, but custom Webpack hacks in your test setup will need manual rewriting for Vite.

2. HttpClient is "Just There"

Remember adding provideHttpClient() to your app.config.ts or importing HttpClientModule?

The Change: HttpClient is now injected by default in the root injector.

What breaks:

If you have tests that mock HttpClient by expecting it not to be there, they might fail.
If you rely on HttpClientModule for complex interceptor ordering in a mixed NgModule/Standalone app, you might see subtle behavior changes.

The Fix: Remove explicit provideHttpClient() calls unless you are passing configuration options (like withInterceptors or withFetch). It cleans up your config, but check your interceptor execution order.

3. zone.js is Gone (For New Apps)

New apps generated with ng new will exclude zone.js by default.

What breaks: Nothing for existing apps (yet). Your polyfils.ts will keep importing Zone.

The Warning: If you copy-paste code from a new v21 tutorial into your existing v20 app, it might assume Zoneless behavior (using ChangeDetectorRef less often, relying on Signals). If you mix the two paradigms without understanding them, you'll get "changed after checked" errors or views that don't update.

✨ The New Toys: Features You'll Actually Use

Once you fix the build, v21 offers some incredible DX improvements.

1. Signal Forms (Experimental but Stable)

This is the feature we've been waiting for. No more valueChanges.pipe(...)spaghetti.

import { form, field } from '@angular/forms/signals';

// Define a reactive form model
const loginForm = form({
  email: field('', [Validators.required, Validators.email]),
  password: field('', [Validators.required])
});

// Access values directly as signals!
console.log(loginForm.value().email);

Why use it: It's type-safe by default and doesn't require RxJS mastery.

Status: Experimental. Use it for new features, but maybe don't rewrite your checkout flow just yet.

2. Angular Aria (Developer Preview)

A new library of headless primitives for accessibility.

Instead of fighting with aria-expanded and role="button", you use directives that handle the a11y logic while you handle the CSS.

<!-- Handles keyboard nav, focus, and ARIA roles automatically -->
<div ariaMenu>
  <button ariaMenuItem>Option 1</button>
  <button ariaMenuItem>Option 2</button>
</div>

3. Regex in Templates

Small but mighty. You can finally use regex literals in templates, perfect for @iflogic without creating a helper function.

@if (email() | match: /@company\.com$/) {
  <span class="badge">Employee</span>
}

🛠️ The Upgrade Checklist

Ready to jump? Follow this order to minimize pain.

Backup: Commit everything. Seriously.

Update the Global CLI:
Updating Angular generally involves two parts: the global CLI and the local project dependencies. Ensure your global CLI is up to date first (you might need sudo or Administrator privileges).

# Optional: Uninstall the old global version first to avoid conflicts
npm uninstall -g @angular/cli

# Verify the npm cache
npm cache verify

# Install the latest global CLI version
npm install -g @angular/cli@latest

Update Local Project:
Now update your local project dependencies:
```
ng update @angular/cli@21 @angular/core@21
```
Run the Diagnostics:
Angular 21 includes smarter diagnostics. Pay attention to warnings about ngClass (soft deprecated in favor of [class.my-class]) and standalone migration opportunities.
Check Your Tests:
Run ng test. If it explodes, decide:
- Path A: Keep Karma (add @angular/build:karma manually if removed).
- Path B: Migrate to Vitest (Recommended).
Optional: Go Zoneless:
If you're feeling brave, run the experimental migration:
```
ng generate @angular/core:zoneless-migration
```

This is "Agentic" territory. See our MCP Guide for how to let AI handle this complex refactor.

Summary

Angular 21 is the "clean slate" release. It sheds the weight of the last decade (Zone, Karma, Modules) to compete with modern frameworks like Svelte and Solid.

The upgrade might be bumpy due to the testing changes, but the destination—a faster, simpler, signal-driven framework—is absolutely worth it.

Upgrading to Angular 20

Antonio Cardenas — Sat, 28 Jun 2025 10:07:39 +0000

This is a practical guide focused on what really matters when updating a real-world application: what breaks, what makes your work easier, and how you should adapt your development style.

1. The Full Story Behind Karma's Removal: Beyond a Broken Build

The immediate issue when upgrading is that ng test will fail. The reason is a fundamental change in Angular's build tools.

Why did Angular drop Karma?

With Angular 20, the default build package changes from @angular-devkit/build-angular to the new @angular/build. This new package no longer includes the Karma plugin used by legacy test setups.

The web ecosystem has moved on to faster test runners like Vitest and Jest that use modern tools like Vite and esbuild. Karma had become a bottleneck.

What the new world looks like (Vitest/Jest)

Angular's experimental test runner, now powered by Vitest, is the future. Migrating means your unit tests will run in a fast, modern Node.js-based environment.

The "temporary fix" explained

npm install @angular-devkit/build-angular --save-dev

This command forces the CLI to fall back to the old compiler that still supports Karma. It’s a compatibility bridge — but the message is clear: start planning your migration to Jest or Vitest soon.

2. Prerequisites

Before starting the update process, make sure you meet the following:

Node.js: Version 20.11.1 or later
TypeScript: Version 5.8 or later
Project backup: Commit all current changes in Git

3. How to Update: CLI Command and Comparison

Update Command

Make sure you're running Node.js v20.11.1 or later:

ng update @angular/cli @angular/core

If you use Angular Material:

ng update @angular/cli @angular/core @angular/material

Manual intervention required

To reinstall the old compiler with Karma support:

npm install @angular-devkit/build-angular --save-dev

This wasn't required in earlier versions but is now mandatory if you want to keep using Karma.

Compared to earlier upgrades

Angular v19: ng update just worked.
Angular v20: You must manually reinstall the old builder for Karma.

4. Control Flow: More Than Syntactic Sugar

@for replaces *ngFor and is a major improvement.

Old syntax

<div *ngFor="let item of items; trackBy: trackItemById">
  {{ item.name }}
</div>

New syntax

@for (item of items; track item.id) {
  <div>{{ item.name }}</div>
} @empty {
  <div>No items to display.</div>
}

track is mandatory and encourages best practices.
@empty improves DX by removing the need for separate @if.

Automated migration and performance

Use the CLI to automatically refactor templates to the new control flow syntax:

ng generate @angular/core:control-flow

General Best Practices and Further Migrations

You can also migrate to other modern Angular features:

ng generate @angular/core:standalone
ng generate @angular/core:inject
ng generate @angular/core:route-lazy-loading
ng generate @angular/core:signal-input-migration
ng generate @angular/core:signal-queries-migration
ng generate @angular/core:output-migration

These commands allow for a comprehensive update of an Angular app to leverage the latest patterns.

5. Standalone by Default: A Fundamental Architectural Shift

By explicitly listing dependencies using the imports array at the component level, each component becomes self-contained. This:

Clarifies your architecture
Improves tree-shaking
Results in smaller bundles

6. Zoneless: Escaping the "Magic" of Change Detection

In a zone-less world, the UI only updates when you explicitly tell it to.

Signals are the main tool here.

mySignal.set(newValue);

This directly tells Angular to update only the DOM parts that use that signal. It’s a surgical, predictable, and high-performance approach.

7. New Naming Convention: Why It Feels Complicated

Angular 20 introduces a new official naming convention that drops traditional suffixes.

Old naming

user-profile.component.ts
auth.service.ts
highlight.directive.ts

New naming

user-profile.ts       // UI component
auth-store.ts         // state
highlight.ts          // directive

Focus on intent instead of type

user-api.ts         // HTTP requests
auth-store.ts       // reactive state
movie-card.ts       // UI component
movie-details.ts    // UI component

Naming rules

Use dashes: user-profile.ts
Match class and filename
Keep .spec.ts for tests
Avoid generic names like utils.ts
Co-locate related files

Feature-based folder structure

src/
├── core/
│   └── auth/
│       ├── auth-store.ts
│       ├── login.ts
│       └── register.ts
├── features/
│   └── users/
│       ├── user-profile.ts
│       ├── user-api.ts
│       └── user-settings.ts

Benefits

Cleaner Git diffs
Intention-oriented code
Easier onboarding

8. Important Detail: `browserslist` and Browser Support

Angular 20 no longer supports Opera officially.

If you list Opera in your browserslist, you may need to remove it.

Other non-mainstream browsers may also lose support, potentially triggering warnings or build issues.

From Vibe Coding to Vibe Engineering with V0 and Firebase Studio. [Part 0].

Antonio Cardenas — Tue, 08 Apr 2025 18:48:10 +0000

Yes, you heard right

In this tutorial, we’re going to crank up impostor syndrome to the max by building a full-stack web app using:

Firebase Auth for authentication
Firestore for real-time data storage
Firebase Hosting so you can actually show your project and avoid the “it works on my machine” excuse
Firebase Studio

But this time, we’re not doing another “Login + Hello World.”

We’re going to build something with purpose: a book lending and return management platform for a public library.
And yes, we’ll generate QR codes to streamline returns.

Phase One: Planning and Goals

A popular saying goes:
You don’t start a house from the roof...

And even though Vercel’s V0 lets us begin with the UI, we’re going to do things properly.

Before sending prompts, we’ll define what we’re building:

The What

A library management app with:

Full CRUD for books
Book lending and return system
QR code generation for scannable loan identification
QR code reading to easily mark books as returned
(Optional) Social features to create a reading club where users can exchange books and experiences

The Why

We aim to solve a real problem: managing a public or community library in a simple, modern, and digital way — and encourage reading habits.

Also, it’s a great excuse to practice:

Next.js 14/15 architecture
V0-generated UI components (which we’ll refine manually later)
Firebase as backend (although you could swap it for something else)
CRUD best practices (create, read, update, delete)

The Premise

We want to manage book check-ins and check-outs from a physical location and create a small community that works like a book club.

Manage the borrowing and returning of books in a public library.
All this using:

v0.dev for quick UI creation with style
Next.js as the web framework, also used by V0
Firebase for authentication, database, and hosting
Firebase Studio (Optional alternative to v0)
QR codes to ease the physical return of books, using
- yudiel/react-qr-scanner
- qrcode.react

The Logic

We assume there will be a librarian role — someone responsible for books.
This person’s responsibilities include:

Registering new books
Updating stock
Correcting input errors
Removing availability of certain books
Checking return status (condition, timeliness)
Tracking book locations (e.g., Sci-Fi shelf 2)

As a user, I want to:

Search for a book and check if it’s available
The homepage should display a searchable list of books by name, ISBN, or category
Know where a book is physically located

Another scenario: the user finds the book and scans the QR code to request a loan.
To do this, they must sign in or register — since managing libraries or book clubs requires some form of membership or ID.

To simplify, all books can be borrowed, and the Google account used to request them will serve as identification.

Other Considerations: “Security”

This includes both physical and digital security and depends on the specific library’s operations.

In public libraries, there’s usually a front desk with a librarian who grants access to the reading area.
They assign books by membership number or personal data.

If the user wants to take a book home:

It must be scanned and assigned
The system may also send return details and deadlines

Digitally:

Users must log in to borrow a book
Protect routes so only admins access core CRUD operations.
Optionally, implement a reputation system that limits the number of loans based on:
- Account age
- Verification status
- Membership validity
- Loan and return history
- Return timeliness

With Firebase, it’s crucial to:

Structure documents properly.
Define security rules so only authorized roles can read, write, or delete certain documents

(This section will be expanded in future articles.)

Summary

After all this planning, we’ve essentially written a pseudocode-like spec for our app.

So in the next article, we’ll set up everything from Firebase to V0, use alternative Firebase Studio, and build the first prompt based on pseudocode.

In future posts, we’ll explore Copilot, Cursor, and other AI tools to accelerate development — because at the end of the day, AI is a tool, not a replacement.

The Future of FrontEnd Is Written... with Prompts

Antonio Cardenas — Wed, 26 Mar 2025 09:21:33 +0000

As you may know, after several iterations, v0 no longer just centers divs.
It now raises a question that makes many feel uncomfortable:

To what extent can—or should—artificial intelligence replace the work of a frontend developer?

What is v0?

v0.dev is a platform developed by Vercel that allows you to generate full frontend components from natural language descriptions. It's a sort of visual copilot that combines design and implementation, returning clean code using React, Tailwind, and other modern stacks.

What sets v0 apart from other generators is its semantic precision. It understands the context of the request, provides coherent structures, and offers visually well-designed solutions.

It doesn't generate "random code"; it generates useful components, aligned with what the prompt suggests and how it's written.

Some time ago, the prompt used by v0 from Vercel to build interfaces from plain text was leaked. You can take a look here.

Despite causing a stir, the leak uncovered the true power of this tool: context.

What is a prompt?

A prompt is the instruction given to a language model to perform a task.

"A registration form with validation, dark mode, and mobile-first design."

The power of a prompt doesn't just lie in what is being asked, but in how it is asked.
Clear language, explicit intentions, and well-defined context are key to obtaining useful results.

What is context?

Technically speaking, context is the additional information that accompanies a prompt and allows the model to more precisely "understand" what is expected.

It may include:

The desired stack (React, Next.js, Tailwind)
Accessibility considerations
Expected component behavior
Technical or design constraints

v0 uses an advanced prompt engineering system with enriched context, which enables it to generate functional code relevant to the project environment.

What is Vibe Coding?

The concept of vibe coding refers to a new way of programming guided more by intention and creative energy than by manually writing every line of code.

With tools like v0, the development experience begins to feel more like composing music than coding line by line.

The flow shifts: it becomes a collaboration between human and AI, where intuition and technical judgment remain essential.

And v0 isn't alone.

Cursor transforms Visual Studio Code into a conversational environment, allowing you to edit, navigate, and write code directly with AI.
Claude enables reasoning over complex structures and high-level refactoring, very useful for abstract frontend tasks like architecture design.
GitHub Copilot continues to act as a line-level assistant, suggesting snippets and completing code as you type.

All of these tools are part of the new development environment—one where human ingenuity and algorithmic efficiency meet at the center of the workflow.

The End of the Front-End Dev?

Personally, the approach I like most regarding artificial intelligence is augmenting capabilities.

Automating without understanding what is being done can be a dangerous trap, often generating more technical debt than real value.

v0 doesn't replace the frontend developer, but it does require them to evolve.
The role shifts from implementer to curator, architect, and interface strategist.

Writing a good prompt, understanding the project context and its logic, testing its security, validating accessibility, fixing errors generated by AI implementations, optimizing performance…
All of that is still part of the job.

Artificial intelligence doesn't eliminate frontend development. It transforms it.

And those who understand that transformation will be the ones to lead it—rather than resist it.

Seamless Reactive HTTP Requests in Angular

Antonio Cardenas — Tue, 18 Mar 2025 10:49:21 +0000

Starting from Angular v19.2, we can begin to move away from manually handling API calls thanks to Angular's new primitive: httpResource. It allows us to reactively fetch data, calling our preferred API automatically each time the value changes.

Main features:

Automatic Reactivity:
The resource generated by httpResource observes signals and automatically makes HTTP requests each time reactive dependencies change.
Default state:
Allows defining default values through the defaultValue property, ensuring a consistent response during initial states, loading phases, or request errors.
Data validation and transformation:
The parse option facilitates automatic validation and transformation of HTTP responses, enhancing type safety and ensuring the integrity of received data.

Advantages over the traditional approach:

Significant code reduction: Eliminates the need to manually manage subscriptions, reducing errors such as memory leaks.
Automatic state updates: By directly depending on Signals, data updates automatically according to changes in the application's reactive state, eliminating manual tasks.
Increased security: Promotes robust development through automatic validation and strict state management throughout all phases of the data lifecycle.

Currently, this API is in an experimental phase, so it's recommended to monitor its evolution before implementing it in critical production environments.

Usage and implementation example:

Previously, we had to rely on RxJS to subscribe and unsubscribe each time we made an API call, which sometimes contributed to the famous memory leaks when we forgot to unsubscribe.

To implement it, we should start by creating an interface defining the structure of our character with data such as the ID, name, image, etc.

Now we implement httpResource in our component.

characterResource is an httpResourceRef that returns character data from the API; defaultValue ensures that characterResource has a defined structure even before the data is loaded.

characterId is a signal representing the ID of the character being displayed. Changing this value triggers httpResource to fetch data for the selected character.

But what if we want to use POST, PUT, DELETE?

We only need to change the method and provide the corresponding body along with the params.

  usersResource = httpResource<RickCharacter>({
    url: '',
    method: 'POST',
    body: { page: 1 },
    params: { per_page: 6 },
  });

In the next article, I'll cover more advanced aspects like headers, params, etc., but for now you can see all the functional code in the following:

Example:

Proyect Fugu

Antonio Cardenas — Mon, 25 Nov 2024 14:00:00 +0000

Aims to bridge the gap between progressive web applications (PWAs) and native applications, making PWAs more useful, appealing, and accessible to everyone. This effort is a collaboration between the Chromium community and companies such as Google, Microsoft, and other contributors from the broader web community.

What are PWAs?

PWAs are web applications designed to be fast, reliable, and capable of being installed on devices as if they were native applications. They use modern APIs to:

Enhance capabilities: Access advanced hardware and features.
Ensure reliability: Load quickly and work seamlessly, even offline.
Simplify installation: Behave like traditional apps.

With these enhancements, PWAs combine the best of the web and native applications.

Why "Fugu Project"?

The name "Fugu" refers to the Japanese pufferfish, known for being delicious but dangerous if not prepared correctly. This symbolism captures the essence of the project: the new APIs can be very powerful, but if not implemented carefully, they can pose risks.

Examples of advanced capabilities and risks:

Advanced capabilities: File system access, video editing tools, integration with Bluetooth and USB devices.
Potential risks: These tools must ensure user security and privacy.

The Fugu Project focuses on enabling these capabilities while maintaining a balance between utility and security.

Key APIs in the Fugu Project

File System Access API: Allows applications to read and write files directly on the user's system.
Web Share API and Web Share Target API: Facilitates sharing content between web and native apps.
Contact Picker API: Provides access to device contacts with explicit permission.
Web Bluetooth and Web USB: Enables connection with physical devices to extend functionality.
Badging API: Displays notifications and counts on the installed app's icon.

Benefits of the Fugu Project

Universal compatibility: PWAs work on any device with a browser.
Hassle-free updates: Always up-to-date without requiring downloads from an app store.
Better user experience: Access to features previously exclusive to native apps.

Security and the Future of PWAs

The Fugu Project aims to expand PWA capabilities securely. It works to mitigate risks through explicit permissions and the development of responsible practices for developers.

With Fugu, PWAs are evolving beyond being mere web versions. They are a powerful tool transforming how we interact with technology.

Bonus:

Via App the easy way to personalize macros and Keytes https://usevia.app/
The Momentum website https://momentum-fw.dev/ uses the Web USB API to install an alternative firmware to the default one on FlipperZero.

More examples and inspiration at:
https://developer.chrome.com/docs/capabilities/fugu-showcase

What's New Angular 19:

Antonio Cardenas — Tue, 19 Nov 2024 15:47:47 +0000

Angular is constantly evolving, and version 19 is no exception. With a focus on developer experience, improved performance, and new tools, Angular 19 offers features to streamline your projects and enhance efficiency. In this article, we’ll explore improvements in reactivity with signals, rendering optimizations, and much more. This marks the eleventh iteration since version 8, one of the first articles on this blog.

1. Standalone Components as the Default Standard

Standalone components, introduced in Angular 14, have been revolutionary, and now in Angular 19, they are the default behavior. This means you no longer need to declare standalone: true for each component.

Before Angular 19:

@Component({
  standalone: true,
  imports: [CommonModule],
  selector: 'standalone-component',
  templateUrl: './standalone-component.html',
})
export class StandaloneComponent { }

Now:

@Component({
  imports: [CommonModule],
  selector: 'standalone-component',
  templateUrl: './standalone-component.html',
})
export class StandaloneComponent { }

This eliminates the need for NgModules in most cases, simplifying application structure and promoting modular development. If you still need to work with NgModules, you can explicitly declare standalone: false.

2. Partial and Incremental Hydration for Faster Rendering

Angular 19 introduces partial and incremental hydration, transforming the performance of server-rendered (SSR) applications.

Partial Hydration: Prioritizes critical component loading, reducing initial interaction time.
Incremental Hydration: Defers feature loading based on user interactions (clicks or hovers), optimizing resource usage.

These techniques create faster, more interactive applications right from the start, improving the user experience.

3. Enhanced Signals: Simplifying Reactivity

Signals integration in Angular continues to improve, now with deeper support and new tools like LinkedSignal.

What are signals?

Signals are an API designed to manage states reactively and predictably, reducing reliance on Zone.js. This not only simplifies debugging but also improves performance and reduces bundle size.

Example with Signals: Introducing LinkedSignal

linkedSignal allows the creation of dependent signals that automatically update based on a source signal.

import { signal, linkedSignal } from '@angular/core';

const source = signal(10);
const double = linkedSignal(source, value => value * 2);

console.log(double()); // 20
source.set(15);
console.log(double()); // 30

4. Improvements to Component API

Angular 19 introduces a new lifecycle hook, ngAfterSignalUpdate, to react after a Signal update, simplifying interactions with complex states.

import { Component, Signal, signal, AfterSignalUpdate } from '@angular/core';

@Component({
  selector: 'app-lifecycle',
  template: `
    <h3>Signal Lifecycle </h3>
    <button (click)="updateSignal()">Update</button>
  `,
})
export class SignalLifecycleComponent implements AfterSignalUpdate {
  mySignal = signal(0);

  updateSignal() {
    this.mySignal.set(this.mySignal() + 1);
  }

  ngAfterSignalUpdate() {
    console.log('Signal updated to:', this.mySignal());
  }
}

This hook helps developers manage UI changes and complex state interactions effectively.

5. Faster Build Times

Thanks to optimizations in Angular CLI, builds are faster in both development and production environments. The addition of caching accelerates iterative processes.

Example: Build with Cache

ng build --optimization=true --build-cache

6. Dependency Injection Enhancements

Angular now automatically infers types in Dependency Injection (DI), reducing repetitive code and increasing type safety.

Example: Type Inference in DI

// Before
constructor(private http: HttpClient) {}

// Now in Angular 19
constructor(private readonly httpClient) {}

7. Resource and rxResource APIs: Simplifying Async Data

The new experimental resource and rxResource APIs are designed for promises and observables, simplifying asynchronous data handling.

Properties of `resource`:

Status: Tracks resource state (loading, success, or error).
Value: Contains data after loading.
Error: Handles errors.

Example with `rxResource`

import { rxResource } from '@angular/core';

const data = rxResource(async () => {
  const response = await fetch('/api/data');
  return response.json();
});

data.value.subscribe(data => console.log(data));

These tools unify asynchronous data management, making workflows more intuitive.

8. Improved Routing

Angular 19 integrates signals more deeply with the router, enabling more reactive and streamlined navigation flows. This simplifies handling route and query parameters reactively.

Example: Using Signals with Router

import { Component, inject, OnInit, Signal } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-signal-route',
  template: `
    <h2>Signal Route</h2>
    <p>Route ID: {{ routeSignal() }}</p>
  `,
})
export class RouteDemoComponent implements OnInit {
  private route = inject(ActivatedRoute);
  routeSignal: Signal<string> = signal('');

  ngOnInit() {
    this.route.paramMap.subscribe(params => {
      this.routeSignal.set(params.get('id') ?? '');
    });
  }
}

Bonus: Angular Material Enhancements

Angular Material introduces new style improvements, accessibility features, and enhanced component interactions. For example, components like mat-menu and mat-select are now more intuitive and user-friendly.

Example: Improved mat-menu Usage

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
  <button mat-menu-item>Item 3</button>
</mat-menu>

Conclusion

Angular 19 marks a significant step in the evolution of the framework. From default standalone components to improved reactivity with signals and SSR optimizations, this version provides tools to build faster, more reactive, and maintainable applications.

Ready to upgrade?

ng update @angular/core @angular/cli

more info about update here:https://angular.dev/update-guide/?v=18.0-19.0&l=1

Share your experience with these new features and keep exploring the future of Angular development! 🚀, Stay tuned for upcoming articles deep down about Material, Signals and of course Hydration

¡Thanks to @damiansire for being the editor and approving this post!

12 HTML Tricks You Probably Don't Know About

Antonio Cardenas — Mon, 09 Sep 2024 22:48:22 +0000

HTML is the backbone of the web, but it's far more than just a set of basic tags and attributes. There are tons of hidden features in HTML that can make your websites more interactive, accessible, and efficient. Ready to level up your HTML skills? Let's dive into these cool tricks!

1. `contenteditable` - Make Elements Editable

Did you know you can make any HTML element directly editable by the user? The contenteditable attribute allows you to do just that. Whether you're building a CMS, an interactive blog, or a live text editor, this attribute can save you loads of time.

<div contenteditable="true">
 You can edit this text. Give it a try!
</div>

Use case: Enhance user engagement by allowing them to edit content directly on the page. No need for complex JavaScript!

2. Custom Data Attributes - Store Extra Info on Elements

If you've ever needed a way to store custom data within an HTML element, custom data attributes are for you. These attributes, prefixed with data-, let you add extra information that you can access via JavaScript, without cluttering your DOM.

<div id="user-profile" data-user-id="42" data-role="admin">
 <! - User details go here →
</div>

Usage: Perfect for dynamic applications that rely on metadata. Plus, it keeps your code clean!

3. The `hidden` Attribute - Hide Elements Without CSS

Forget using display: none; in your stylesheets. The hidden attribute is a more semantic way to hide elements. It's easy to use and helps keep your HTML tidy.

<p>This paragraph is visible.</p>
<p hidden>This paragraph is hidden.</p>

Usage: Use it with JavaScript to show or hide elements dynamically without worrying about styles.

4. `<fieldset>` and `<legend>` - Better Form Accessibility

Forms can get messy, especially if they have many inputs. Enter <fieldset> and <legend>. These tags help you group related controls together, providing a clear, accessible structure for all users, including those using screen readers.

<fieldset>
 <legend>Personal Information</legend>
 <label for="firstname">First Name:</label>
 <input type="text" id="firstname" name="firstname">
</fieldset>

Usage: It's all about improving user experience. Structured forms are easier to navigate and understand!

5. `download` Attribute - Simplify File Downloads

Want to offer a file download on your site? The download attribute on an <a> tag lets you do this seamlessly. You can even specify the filename that the file should be saved as.

<a href="path/to/file.pdf" download="myfile.pdf">Download the PDF</a>

Usage: Makes downloading files straightforward for your users. No need for extra server-side configurations!

6. `spellcheck` - Enable Spell Checking in Text Inputs

Ever wanted to add spell-checking to your text inputs or textareas? The spellcheck attribute lets you turn on the browser's built-in spell checker. This can be super useful for enhancing user experience by reducing typos and mistakes.

<textarea spellcheck="true">This textarea will be spell-checked!</textarea>

Usage: Make sure users always have a great experience by helping them avoid embarrassing typos.

7. `inputmode` - Improve Mobile Input

Tailor the virtual keyboard for users on mobile devices using the inputmode attribute. This attribute specifies what kind of input is expected, triggering a keyboard that's optimized for the type of data to be entered.

<input type="text" inputmode="numeric" placeholder="Enter your phone number">

Usage: Providing the right keyboard helps users enter data quickly and correctly. Great for mobile-friendly sites!

8. `<details>` and `<summary>` - Create Native Expandable Content

Need to create expandable content without relying on JavaScript? The <details> and <summary> elements offer a simple, built-in solution for collapsible sections. Perfect for FAQs, menus, or any other content that benefits from being hidden until needed.

<details>
 <summary>What is HTML?</summary>
 <p>HTML stands for HyperText Markup Language. It's the foundation of the web!</p>
</details>

Usage: This is a lightweight, accessible way to toggle content visibility without using JavaScript.

9. `draggable` -Add Drag-and-Drop Functionality

Want to add drag-and-drop functionality to your site? The user is able to drag elements with the "draggable" attribute. It's an easy way to introduce interactivity without needing external libraries.

<img src="image.jpg" alt="Draggable Image" draggable="true">

Usage: Combine draggable with JavaScript events to create custom drag-and-drop experiences!

10. `type="date"` - Simplify Date Input

Instead of using text fields and JavaScript to manage dates, try using <input type="date">. This will bring up a native date picker in most modern browsers, making it easier for users to enter dates.

<input type="date" name="birthday">

Usage: Provides a consistent, easy-to-use interface for date input, no additional JavaScript required.

11. `srcset` and `sizes` - Optimize Images for Different Devices

If you want to make your website faster and more responsive, use the srcset and sizes attributes on <img> tags. These attributes allow the browser to choose the most appropriate image based on the device's screen size and resolution.

<img src="image-small.jpg"
 srcset="image-medium.jpg 768w, image-large.jpg 1200w"
 sizes="(max-width: 768px) 100vw, (min-width: 769px) 50vw"
 alt="Responsive Image">

Usage: Serve the right image for the right screen, reducing load times and improving the user experience.

12. `placeholder` - Enhance Form Inputs with Hints

Need to provide a hint or example for your form inputs? Use the placeholder attribute to display a short hint inside an input field before the user enters a value.

<input type="email" placeholder="you@example.com">

Usage: It helps users understand what input is expected without cluttering your form with extra text.

Final Takeaway

These HTML tricks show that there’s a lot more to HTML than meets the eye. Don’t just settle for the basics—explore and experiment with these features to build more dynamic, accessible, and user-friendly web pages. Dive in and start experimenting to discover all the cool things HTML can do!

DEV Community: Turing's Oracle

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

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

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

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

The Core Mental Model

What Is an MCP Tool?

What Is a Skill?

The Real Downsides

MCP: The Token Tax

Skills: The Staleness Problem

Both: The Selection Problem

How to Combine Them

The Practical Decision Guide

Improving Your Workflow

The Bottom Line

Angular 20 to 21 Upgrade: The Practical Survival Guide

🚨 The "Stop Everything" Breaking Changes

1. The Karma Extinction Event (Vitest is Default)

2. HttpClient is "Just There"

3. zone.js is Gone (For New Apps)

✨ The New Toys: Features You'll Actually Use

1. Signal Forms (Experimental but Stable)

2. Angular Aria (Developer Preview)

3. Regex in Templates

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

2. Exhaustive Checking via the `never` Type

8. Important Detail: `browserslist` and Browser Support

Properties of `resource`:

Example with `rxResource`