DEV Community: Antonio Cardenas

LendingChain: Reimagining Global Generosity with Zero-Interest Solana Micro-Loans

Antonio Cardenas — Sat, 05 Sep 2026 10:41:36 +0000

This is a submission for Weekend Challenge: Generosity Edition

What I Built

LendingChain is a decentralized, zero-interest micro-lending platform built on Solana Devnet to celebrate the UN International Day of Charity. It connects socially conscious global lenders with grassroots entrepreneurs in emerging economies—specifically focusing on clean energy, sustainable agriculture, indigenous women-led crafts, and tech education.

Unlike traditional charitable donations, where funds often disappear into administrative overhead, or commercial microfinance institutions that charge predatory 25%–45% APRs, LendingChain provides 0% interest capital directly to verified non-custodial Solana escrows. Our goal is to leverage sub-cent transaction fees to make $5–$25 micro-loans viable and transparent, allowing loan repayments to cycle back to the lender to be re-lent indefinitely (the "Generosity Multiplier").

Demo

Live Application: https://micro-lend.web.app

(Feel free to explore the interactive "Discovery" mode, fund a loan, or apply for a loan using the seamlessly embedded Solana wallet!)

Code

AntonioCardenas / microlend

Astro Starter Kit: Minimal

npm create astro@latest -- --template minimal

🧑‍🚀 Seasoned astronaut? Delete this file. Have fun!

🚀 Project Structure

Inside of your Astro project, you'll see the following folders and files:

/
├── public/
├── src/
│   └── pages/
│       └── index.astro
└── package.json

Astro looks for .astro or .md files in the src/pages/ directory. Each page is exposed as a route based on its file name.

There's nothing special about src/components/, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.

Any static assets, like images, can be placed in the public/ directory.

🧞 Commands

All commands are run from the root of the project, from a terminal:

Command	Action
`npm install`	Installs dependencies
`npm run dev`	Starts local dev server at `localhost:4321`
`npm run build`	Build your production site to `./dist/`
`npm run preview`	Preview your build locally, before deploying
`npm run astro ...`	Run

…

View on GitHub

How I Built It

LendingChain is built with a modern, high-performance tech stack focused on a seamless user experience, verifiable proof of impact, and cryptographic transparency:

Frontend & Performance Architecture: Built with Astro and React. I placed strong emphasis on Core Web Vitals (FCP, LCP, CLS) using non-blocking app hydration loaders, adaptive skeleton cards to prevent layout shifts, lazy asset scheduling, and subtle micro-interactions (magnetic buttons, smooth drawers) to inspire institutional-grade trust.
Google Gemini AI Borrower & Wallet Forensics: Rather than trusting self-reported applications blindly, LendingChain implements an AI-driven risk auditor powered by Google Gemini. The engine performs dual-layer evaluation:

Semantic Project Analysis: Gemini analyzes the applicant's business plan, capital requested, and cost breakdowns to assess feasibility and credibility.
On-Chain Solana Forensics: Scans the borrower's public key on Solana Devnet to check wallet age, transaction history volume, and detect anomalous patterns (such as brand-new wallets with 0 history, high transaction failure rates, or suspicious fund drains). It assigns an objective risk score (0–100) and displays an interactive audit modal with actionable recommendations for lenders.

Borrower Field Dispatches & Proof of Work: To verify that funded projects are real and progressing, borrowers can publish live on-chain field updates directly to their project page. Updates are tagged by category (Field Progress, Milestone Hit, Equipment & Assets, Expense Receipt), include photos and transaction signatures, and display update badges across the directory so lenders can monitor real-world capital deployment.
Authentication & Embedded Web3: Integrated Privy to provide frictionless embedded Solana wallets. Lenders and borrowers can log in with email or social accounts and immediately interact on-chain without browser extensions or seed-phrase hurdles, with full support for external Solana wallets.
Backend & Real-time State: Loan applications ("Apply"), funding events ("Lend"), and project dispatches sync in real-time via Firebase Firestore using onSnapshot listeners and atomic multi-document transactions to preserve optimistic UI responsiveness.
Blockchain Escrows & On-Chain Proof: Utilizes Solana Devnet for non-custodial Program Derived Address (PDA) escrows and the SPL Memo program to permanently record loan contributions and lender dedications on the transparency ledger.
Deployment: Statically generated and optimized via Astro, deployed globally on Firebase Hosting.

Prize Categories

Best Use of Solana: LendingChain relies on Solana's sub-cent transaction fees and high throughput to make $5–$25 micro-lending viable, using embedded Privy wallets, SPL Memo inscriptions for permanent impact tracking, and non-custodial PDA escrows.
Best Use of Google AI: LendingChain directly integrates Google Gemini to solve the biggest problem in peer-to-peer microfinance: trust and fraud. Gemini audits loan applicants, cross-references live on-chain Solana ledger signals to flag wallet irregularities, generates plain-language risk evaluations, and guides lenders with transparent creditworthiness scores.

Team: Solo build — @antoniocardenas

[Boost]

Antonio Cardenas — Wed, 02 Sep 2026 07:58:11 +0000

Joel Humberto Gómez Paredes

Aug 22

Tratando de ser un desarrollador AI First sin vender humo

#ai #softwaredevelopment #programming

8 min read

[Boost]

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

Antonio Cardenas

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

DEV Community: Antonio Cardenas

LendingChain: Reimagining Global Generosity with Zero-Interest Solana Micro-Loans

What I Built

Demo

Code

AntonioCardenas / microlend

Astro Starter Kit: Minimal

🚀 Project Structure

🧞 Commands

How I Built It

Prize Categories

[Boost]

[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. https://github.com/AntonioCardenas/generate-nanobanana feedback welcome.

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

¿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

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]

[Boost]

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

2. Exhaustive Checking via the `never` Type