标签：#angular

Let's be honest: async validation is the part of any forms library where you brace yourself. Debouncing, cancelling the request the user just invalidated by typing another character, keeping a "checking..." spinner honest, not letting a slow response overwrite a fast one. Every library that has ever done this has grown a pile of bespoke machinery for it. So when Signal Forms shipped validateHttp() and it just worked, I wanted to see the pile. I opened the source expecting a few hundred lines of async bookkeeping, and instead found a function whose entire body is a single call to something else. That turned into a trace all the way down, from a form field to the line where bytes actually leave the browser. Six layers, and only two of them add anything you could call new async machinery. ✅ Availability: validateHttp() is @publicApi 22.0 , stable. Every source reference in this article is pinned to the v22.1.1 tag , so the line numbers stay valid even as main moves. 🧩 The View From Outside The usage is unremarkable, which is the point. You declare that a field validates against an endpoint, and you're done: const schema = form ( this . model , ( path ) => { validateHttp ( path . username , { request : ({ value }) => `/api/username-available?u= ${ value ()} ` , debounce : 300 , onError : () => ({ kind : ' server-unreachable ' }), onSuccess : ( res : { available : boolean }) => res . available ? undefined : { kind : ' username-taken ' }, }); }); Sync validators run first, the request waits until they pass, field().pending() is true while it's in flight, and typing again cancels the previous call. If you've read Part 3 of my Signal Forms series , that's the behaviour contract you already know. The question here is who implements it. 🔍 Layer 1: validateHttp() Is a Delegation Here is the whole function, from validate_http.ts : export function validateHttp ( path , opts ) { validateAsync ( path , { params : opts . request , debounce : opts . debounce , factory : ( request )

Choosing Angular in the Age of Agents Brandon Roberts Brandon Roberts Brandon Roberts Follow Jul 30 Choosing Angular in the Age of Agents # angular # ai 37 reactions 4 comments 9 min read

We are pleased to announce the latest major version of the NgRx framework, featuring exciting new features, bug fixes, and other updates. Resource Extensions 🧩 Angular's resource and httpResource APIs cover a large part of async state management, but two very common requirements are not configurable at the resource level: Value on loading: when a resource reloads, value() resets to undefined until the new data arrives. Value on error: when a resource enters the error state, reading value() throws. The new @ngrx/signals/resource entry point addresses both cases with resource extensions : a set of utilities for customizing the behavior of a Resource in a composable, reusable way. They wrap an existing resource and patch only the parts of its behavior that should change, while fully preserving the original resource type. The extendResource function accepts the resource as the first argument, followed by the extensions to apply: import { Component } from ' @angular/core ' ; import { httpResource } from ' @angular/common/http ' ; import { extendResource , withPreviousValueOnLoading , withValueOnError , } from ' @ngrx/signals/resource ' ; @ Component ({ /* ... */ }) export class TodoList { // type: HttpResourceRef<Todo[] | undefined> readonly todosResource = extendResource ( httpResource < Todo [] > (() => ' /api/todos ' ), withPreviousValueOnLoading (), withValueOnError ( undefined ) ); } The returned resource is still the exact resource that was passed in, so no access is lost to the APIs of more specific resource types, such as WritableResource . Only value() behaves differently: it keeps the previously loaded todos while a reload is in flight, and returns undefined instead of throwing when the request fails. Built-in Extensions There are four built-in extensions: withPreviousValueOnLoading keeps the last resolved value while the resource is reloading, which is exactly what paginated and filtered lists need to avoid flickering. withValueOnLoading returns a specific fal

Envelope encryption con clave por usuario, qué se cifra y qué no, cómo lo puso a prueba una auditoría externa, y el incidente de rendimiento que provocó nuestro propio hardening de seguridad. Montaste tu app con IA rápido: le pides unos datos al usuario, llamas al modelo, guardas el resultado en la base de datos y a producción. Cómodo, sin complicaciones. Hasta que un día miras bien qué estás guardando. En Cuentopia generamos cuentos personalizados para niños. Para personalizar, un padre nos cuenta cómo es su peque: su carácter, qué le da miedo, qué está pasando en casa. El modelo no improvisa sobre la marcha: se apoya en un marco de criterios clínicos y pedagógicos para decidir cómo abordar cada situación, y luego lo reescribe todo en prosa. Visto de golpe, lo que teníamos en la base de datos era el diario emocional de un montón de menores. El RGPD lo trata como categoría especialmente protegida. El sentido común, también. ¿Y si se filtra la base de datos? ¿Y un backup mal guardado? ¿Y un acceso indebido con privilegios de admin? Relájate —bueno, primero asústate un poco; luego relájate—. Te voy a contar cómo pensamos el cifrado en reposo en serio: una arquitectura de tipo envelope encryption , con una clave maestra que no sale nunca de Cloud KMS (Google Cloud) y una clave por usuario que cifra los campos sensibles antes de que toquen la base de datos. Un aviso antes de seguir: te cuento el criterio y las decisiones, no el plano. No vas a encontrar aquí nombres de recursos, rutas de repositorio, ni el detalle exacto que le serviría de receta a alguien con ganas de probar suerte con nuestros datos. Y porque la seguridad honesta se cuenta entera, también te cuento dónde decidimos no llegar y por qué. ✨ Promesa: al terminar vas a entender, con criterio real de producto, cómo una familia sin ser expertos en cripto se planteó cifrar datos de menores — y por qué ciertas decisiones muy concretas no se hacen públicas nunca, ni en el artículo más honesto. El mapa Lo constru

Every accessibility tool I have used reports violations like this: Images must have alternative text body > main > div:nth-child(2) > form > div.field > img That selector is correct. It is also useless. It describes the rendered DOM , and I do not write rendered DOM — I write templates. Somewhere in a few hundred .component.html files there is an <img> that produced it, and finding it is manual work: grep for img , get forty hits, open them one by one, compare surrounding markup until something matches. Multiply that by sixty violations and the scan stops being useful. Not because it is wrong, but because acting on it costs more than ignoring it. React solved this years ago If you write JSX, babel-plugin-transform-react-jsx-source puts a _debugSource on every element at build time — file, line, column. That is how React DevTools can jump you straight to source, and how error overlays point at the right line. Angular has no equivalent. The compiler knows the position of every element in every template: it has to, to report template errors. But nothing carries that knowledge into the DOM. So I built the bridge. parseTemplate hands you the positions @angular/compiler exports parseTemplate , the same entry point @angular-eslint uses. Give it a template string and you get an AST where every node carries a sourceSpan with byte offsets, lines and columns: import { parseTemplate } from ' @angular/compiler ' ; const parsed = parseTemplate ( source , filePath , { preserveWhitespaces : true }); // each element node has startSourceSpan.start.{offset,line,col} Two things to know immediately. The compiler counts lines and columns from zero , and every editor counts from one — so you add one, or every location you report is off by one in both axes and nobody trusts the tool again: line : span . start . line + 1 , // the compiler counts from zero, editors do not column : span . start . col + 1 , And preserveWhitespaces: true matters: without it the offsets you get back describe a t

I love writing in Markdown. What I don't love is opening a 200MB+ Electron app just to jot down a note. So I built Markify - a desktop Markdown editor that weighs in at under 10MB and still ships a real feature set. Why bother Obsidian is great, but it's heavy, and most of what I actually need day-to-day is simpler: open a file, write, preview, export, done. Every "lightweight" alternative I tried either wasn't actually light, or was missing basics like PDF export or a proper file explorer. So I built the tool I wanted. What's in it Open & save .md , .markdown , .mdx files with native dialogs Sidebar file explorer - browse a whole folder, expand subfolders on demand, just like VS Code Three view modes : Read, Edit, and Hybrid (live side-by-side preview) PDF export with embedded images and proper Unicode font handling Light/dark theme that follows your system in real time 4 languages out of the box: English, French, German, Spanish Native title bar per platform (real traffic lights on macOS, custom controls on Windows/Linux) The stack Angular 22 (with Signals) on the frontend, Rust on the backend, glued together with Tauri 2 . That combo is exactly why the app stays small - no bundled Chromium, no Node runtime shipped, just the OS's native webview. 82 unit tests (Vitest) keep the core services honest. Everything is open source, AGPL-3.0: github.com/Martzcode/Markify Markdown is basically AI's native language now Here's the other reason this project felt worth building right now: every LLM defaults to Markdown. Ask ChatGPT, Claude, or Copilot for anything structured and you get headers, bullet lists, code fences, bold text - Markdown, every time. It's become the de facto output format for AI because it's plain text, unambiguous to parse, and renders cleanly almost everywhere. That shift changes what a Markdown editor needs to be good at: Copy-pasting AI output should just work - no reformatting, no broken tables, no mangled code blocks Code block rendering with copy b

Every Angular application I have worked on in the last few years had the same three kinds of state: URL state — the page number, the active filter, the selected tab. Client state — what the user typed, what is expanded, what is selected. Server state — the thing you fetched, and everything that can go wrong while fetching it. And every application handled them three completely different ways. ActivatedRoute and a Router.navigate call for the first. Signals or a store for the second. A service returning an Observable , plus a loading boolean, plus an error field, plus a subscribe somewhere, for the third. None of that is wrong. It is just that the glue between them is written by hand, in every app, every time. And the glue is where the bugs live. This article is about the specific piece of that problem I could not let go of, and about the toolkit I ended up building around it. It is called craft-ng , it is in beta, and I would genuinely rather have your objections than your stars. The code I kept running into Here is the shape. I should be honest: I did not write much of it myself — I had a drawer of RxJS helpers that hid most of it. But I have read it in a lot of codebases, reviewed it in a lot of pull requests, and inherited it in a lot of projects. That turned out to matter more, because a helper that only I understand is not a solution to anything. @ Injectable () export class TaskListService { private http = inject ( HttpClient ); tasks = signal < Task [] > ([]); isLoading = signal ( false ); error = signal < string | null > ( null ); load ( done : boolean ) { this . isLoading . set ( true ); this . error . set ( null ); this . http . get < Task [] > ( `/api/tasks?done= ${ done } ` ). subscribe ({ next : ( tasks ) => { this . tasks . set ( tasks ); this . isLoading . set ( false ); }, error : ( err ) => { this . error . set ( ' Something went wrong ' ); this . isLoading . set ( false ); }, }); } } Four fields, one method, and roughly six ways to get it subtly wr

[!NOTE] Summary : Progressive Web Apps (PWAs) combine the reach of the web with the native experience and speed of mobile apps. In this guide, we walk step-by-step through building an installable, native-like mobile app with Angular, Ionic, and PWA capabilities—covering service workers, web manifests, iOS Safari requirements, and instant free deployment. Why Ionic Delivers That Authentic Native-Like Feel Building a web app for mobile is easy, but making it feel native is where most web applications fail. This is where Ionic shines: Native Touch Gestures : Ionic brings built-in mobile gestures—such as swipe-to-go-back, pull-to-refresh ( ion-refresher ), swipeable modals, and instant touch feedback—directly into the browser. Hardware-Accelerated Animations : Transitions between pages (iOS slide-in, Android material push) run on the Web Animations API at 60fps/120fps with zero jank. Adaptive Platform Styling : Ionic automatically adapts its UI controls—rendering iOS Human Interface Guidelines styling on Apple devices and Material Design on Android devices automatically from a single codebase. Combining Ionic's native UI controls with Angular's PWA capabilities gives your users a mobile app that looks, feels, and responds exactly like an app downloaded from the App Store. 1. Setting Up Angular PWA Support Angular CLI provides an official automated schematic to convert your project into a PWA: npx ng add @angular/pwa What this schematic generates: public/manifest.webmanifest : Configures app name, theme color, display mode ( standalone ), and app icons. ngsw-config.json : Defines caching strategies for static assets (index, JS, CSS) and dynamic lazy-loaded chunk bundles. src/main.ts : Registers provideServiceWorker() . public/icons/ : Generates a standard set of PWA icon assets ( 72x72 up to 512x512 ). 2. The manifest.webmanifest Asset Configuration When serving your application with ionic serve or building for production, ensure angular.json maps your static public/ dir

Angular v22, Google's TypeScript-first framework, has introduced API stabilizations, ergonomic templates, and tooling enhancements for AI integration. Key developments include the stabilization of Signal Forms, improved change detection strategies, and a new @Service() decorator for dependency injection. The release supports TypeScript 6 and removes deprecated features. By Daniel Curtis

Angular is well served for icons. Material Symbols alone runs to thousands of glyphs, and the community wrappers pull in dozens of other sets on top. Geography is where the shelf runs out. You get globes and map pins, sometimes a set of flags, rarely the outline of Japan and almost never the six states of the GCC. GeoIcons ships country and area icons as Angular standalone components, 422 of them at the time of writing. Adding one takes three steps: install the package, import the component by its ISO code, and render its selector. npm i @geoicons/angular import { Component } from ' @angular/core ' ; import { Us } from ' @geoicons/angular/countries ' ; @ Component ({ selector : ' app-root ' , imports : [ Us ], template : `<geoicon-us aria-label="United States" />` , }) export class App {} See it live on geoicons.io → That is the whole path. Below: inputs, styling, accessibility, and picking an icon when you only know the country at runtime. Key takeaways Install @geoicons/angular , import each country by its ISO 3166 alpha-2 code in PascalCase, and add it to the component's imports array. The class is Us ; the selector you write in the template is <geoicon-us /> . Styling props are explicit inputs, because Angular has no rest spread. Everything else goes on the host element. Icons render as decorative unless you name them, so reach for aria-label only where no adjacent text says the country. Step 1: Install the Angular package Add the package to your project: npm i @geoicons/angular It needs @angular/core and @angular/common 15.1 or newer, plus rxjs 7 or newer. That 15.1 floor comes from hostDirectives , which the icons use to share their styling inputs and which landed in that release alongside standalone components . The package sets "sideEffects": false , so the CLI can drop what you never import. List three icons in a component and you ship three. Why that matters for icon libraries . Step 2: Import by ISO code Every country ships as a named export under its ISO

I see the some version of "Is Angular still worth picking?" every so often, and for years my answer...

This is a submission for DEV's Summer Bug Smash: Smash Stories powered by Sentry. You know those...

We run a React app and an Angular admin panel at work. Same company, same brand, and on paper the same design. On screen it was a different story. The React button had a 6px radius; the Angular one had 4px. The focus rings were two slightly different blues. Nobody noticed until somebody did. And every time design changed a token, someone got to hand-port it into two codebases. Twice the work, and it still drifted. So I went looking for something that treated both frameworks as equals. The React kits don't speak Angular. The Angular ones don't share a look with anything on the React side. Nothing let me define the design once and have it show up, the same, in both. So I built bpdm/ui . One rule: the look lives in tokens I gave myself one hard rule: nothing about how a component looks is allowed to live inside the React or Angular code. Colour, spacing, radius, the easing on transitions, all of it sits in @bpdm/tokens as plain CSS variables, and both framework packages just read from there. The component owns structure, behaviour, and the accessibility plumbing. The look comes from the tokens. @import "tailwindcss" ; @import "@bpdm/tokens/tokens.css" ; Change one token and both frameworks move together. There's no "now go sync the Angular theme" step, because there's only one theme to sync. Four ship in the box (two light, two dark). Override the variables and you've re-skinned all of it. The same component, twice React: import { Button , Badge } from " @bpdm/ui " ; export function Example () { return ( < Button variant = "primary" > Get started < Badge appearance = "soft" > New </ Badge > </ Button > ); } Angular: import { Component } from " @angular/core " ; import { BpdmButton } from " @bpdm/ng " ; @ Component ({ selector : " app-root " , imports : [ BpdmButton ], template : `<button bpdmButton>Get started</button>` , }) export class App {} Same padding, same radius, same focus ring. The accessibility isn't literally shared code: Radix does that work on the React s

TanStack Table V9 is a beta release of a headless UI library for creating tables in various JavaScript frameworks. It features improved state management, memory usage, and extensibility. The notable change is an opt-in feature model, allowing developers to load only necessary components. Migration is gradual, with tools provided for legacy support. The library remains free and developer-focused. By Daniel Curtis

Hello everyone! After publishing my Machine Learning with ML.NET series, I decided to turn the recommendation model into a complete application. In this new series, we build RockPlayer, a rock music player that combines modern software architecture, ASP.NET Core, Angular 22, Redis, and YouTube integration. Each article focuses on a different part of the project: 🎵 1. Introducing RockPlayer An overview of the project, its goals, and the overall architecture. https://devfullstack.net/blog/introducing-rockplayer 🔌 2. Adapters: Isolating the YouTube Provider Using the Adapter pattern to decouple the application from the YouTube integration. https://devfullstack.net/blog/adapters-isolating-the-youtube-provider ⚡ 3. No Database: Caching Lookups with Redis Using Redis to cache search results instead of storing external data in a database. https://devfullstack.net/blog/no-database-caching-lookups-with-redis 🅰️ 4. Angular 22 in Practice Applying modern Angular 22 features to build the user interface. https://devfullstack.net/blog/angular-22-in-practice 🚀 5. Building the RockPlayer API Building the API that orchestrates the application. https://devfullstack.net/blog/building-the-rockplayer-api ▶️ 6. The YouTube Adapter: Finding and Playing the Song Implementing the YouTube integration to search for and play songs. https://devfullstack.net/blog/the-youtube-adapter-finding-and-playing-the-song 🎧 7. RockPlayer in Angular 22: Onboarding Setting up the Angular application and organizing the project structure. https://devfullstack.net/blog/rockplayer-in-angular-22-onboarding 🎸 8. RockPlayer: Putting It All Together Bringing all the components together into a complete application. https://devfullstack.net/blog/rockplayer-putting-it-all-together I hope this series is useful for developers interested in software architecture, .NET, and Angular. See you there!

Overview This guide shows you how to fix a critical Azure App Service configuration issue where the keyVaultReferenceIdentity property is hidden from the Azure Portal but required for accessing Key Vault secrets. Symptoms Developers encountering this issue typically observe: Key Vault references returning empty values instead of secret content Configuration entries showing "Not Resolved" error messages Application settings failing to fetch secret values from Key Vault Authentication errors when attempting to access protected secrets 401/403 errors from App Service attempting to validate Key Vault access Why This Happens Azure App Service uses Managed Identity authentication to access Key Vault secrets, but the keyVaultReferenceIdentity property is deliberately hidden from standard Azure Portal interfaces. This property only exists at the Azure Resource Manager (ARM) level, making it invisible through the typical Azure management UI. Technical Architecture App Service → Managed Identity → Azure AD → Key Vault Access Policy → Secret Store App Service attempts to authenticate using its assigned Managed Identity Azure needs explicit permission through the keyVaultReferenceIdentity property This permission exists only in the underlying ARM configuration Without this configuration, the authentication chain breaks Key Vault references resolve to empty values or error messages Why Portal Visibility is Limited Microsoft implements this design choice for several reasons: Security : Keeps identity-to-Key Vault mappings out of standard management interfaces Simplicity : Prevents accidental misconfigurations that could cause security issues Audit Trail : Ensures all identity configurations go through proper change management Resource Provider : Some properties require ARM-level configuration for consistency Prerequisites Required Azure Resources Azure Subscription : Active subscription with appropriate permissions Azure App Service : Existing Linux or Windows App Service User-As

Angular 21 Module Federation: Build a Micro Frontend Workspace with One Host and Three Remotes If you're exploring Micro Frontends with Angular 21, one of the first questions you'll encounter is: "How do I set up a complete Module Federation workspace that actually works with Angular 21?" After a few iterations (and a couple of version mismatches), I successfully created a housekeeping/admin platform using Angular 21 Native Federation with: 1 Host Application 3 Remote Applications Shared routing Native Federation (esbuild) Single command startup By the end of this tutorial, you'll have the following architecture running locally: +----------------+ | host-app | | Port: 4200 | +--------+-------+ | --------------------------------------- | | | v v v +-------------+ +-------------+ +-------------+ | auth-app | | user-app | | role-app | | Port: 4201 | | Port: 4202 | | Port: 4203 | +-------------+ +-------------+ +-------------+ Project Overview This sample project represents a basic housekeeping/admin platform. Application Purpose Port host-app Shell, navigation, remote loading 4200 auth-app Login, logout, access denied 4201 user-app User management 4202 role-app Role management 4203 Host Routes /auth -> auth-app /users -> user-app /roles -> role-app Prerequisites My development environment: Angular CLI : 21.2.19 Node.js : 22.23.1 npm : 10.9.8 OS : macOS (arm64) Angular 21 works well with Native Federation. If you're starting fresh, I recommend pinning Angular CLI to version 21 to avoid compatibility issues. Step 1: Install Angular CLI 21 npm i -g @angular/cli@21 Verify: ng version Expected output: Angular CLI: 21.x Step 2: Create an Empty Workspace Instead of generating an application immediately, create an empty Angular workspace. ng new housekeeping-mf \ --create-application false \ --routing \ --style css \ --skip-git Move into the project: cd housekeeping-mf Step 3: Generate Applications Generate one host and three remotes. ng generate application host-app --routing

Angular apps can now run any agent, with the streaming, tool calls, and shared state already handled. Today we're releasing Angular support for CopilotKit , an open source client that brings any AG-UI agent into your Angular app. It's built with Angular's own patterns, standalone components, dependency injection and signals. You get the building blocks for agent-native apps in Angular: pre-built chat components or a fully headless setup, generative UI, shared state, human-in-the-loop, multimodal attachments, threads and more. Use the CLI to scaffold a full starter Angular app with a Google ADK agent. npx copilotkit@latest init --framework adk-angular Let's see how to set everything up, then go through each of the pieces and give your agent the context. Quickstart docs are on docs.copilotkit.ai/angular . Rainer Hahnekamp (Angular GDE, NgRx core) and Murat Sari helped build the integration and are now taking on its ongoing maintenance. How everything fits together Everything runs on Agent-User Interaction Protocol (AG-UI) , the open protocol that connects agents to user-facing apps. It streams an agent's entire lifecycle as events, the messages, the tool calls, the state changes, which is what keeps your Angular app and the agent in sync. That matters because the agent becomes a choice you can change. The runtime can point at a BuiltInAgent , LangGraph, Google ADK, Mastra, Pydantic AI, Claude Agents SDK or any framework that speaks AG-UI and your Angular code doesn't change. Here's the architecture. ┌──────────────────────────┐ ┌──────────────────────────┐ │ ANGULAR APP │ │ COPILOT RUNTIME (Node) │ │ │ │ │ │ provideCopilotKit() │ ─────► │ holds your model keys │ │ <copilot-chat /> │ AG-UI │ connects to your agent │ │ tools · context · state │ ◄───── │ streams events back │ └──────────────────────────┘ └──────────────┬───────────┘ │ ▼ ┌───────────────────────────┐ │ YOUR AGENT + MODEL │ │ LangGraph · ADK · Mastra │ │ OpenAI or a local model │ └─────────────────────────

1. Introduction In 2026, many teams still default to WordPress when building blogs or marketing sites, often without fully considering the architectural alternatives. The classic WordPress setup PHP on shared hosting or managed WordPress platforms, coupled with a MySQL database and a plugin ecosystem works reliably but comes with inherent performance trade-offs. Modern visitors now expect lightning-fast page loads and perfect Core Web Vitals a bar that traditional WordPress setups struggle to meet without extensive optimization and caching strategies. This article examines why, for many developer-managed websites, Astro + Cloudflare Pages delivers superior results in performance, SEO, security, and maintainability compared to traditional WordPress deployments. We'll explore the technical trade-offs and help you make an informed decision for your next blog or business website. 2. What is Astro + Cloudflare Pages? Astro is a modern web framework that prioritizes delivering fast, lightweight content by default. Instead of running client-side JavaScript on every page load, Astro generates complete HTML during build time. Only interactive elements—dubbed "islands of interactivity"—run JavaScript, and only when needed. Cloudflare Pages is a globally distributed static hosting platform that leverages Cloudflare's edge network for content delivery. Think of it as Git combined with Cloudflare's CDN and security stack with integrated CI/CD, zero-downtime deployments, and automatic edge caching. How they work together: You write your content and components using Astro's Markdown, MDX, or frameworks Astro builds your site to static HTML during your CI/CD pipeline Cloudflare Pages takes the built static assets and deploys them to edge locations worldwide Every request hits the nearest edge location , serving cache-optimized HTML directly This contrasts sharply with WordPress, which typically involves: PHP processing on every request Database queries to fetch content Server-side

Build Firebase AI Logic with Antigravity CLI Note: Google Cloud credits are provided for this project. In this blog post, I demonstrate how to use the Antigravity CLI (an agentic AI assistant integrating directly with development workflows via skills and servers) to build an image analysis demo using Angular, the Firebase Hybrid & On-device Inference Web SDK, and Gemini models. Users upload an image and use a Gemini model to analyze it to generate a few alternative texts, tags, recommendations, and CSS tips to enhance the image quality. When the demo is running in Chrome 148+, the Hybrid & On-device SDK leverages the Prompt API of the on-device Gemini Nano model to perform the image-to-text tasks, and the token usage is 0. When other browsers, such as Safari or Firefox, execute the same tasks, the SDK falls back to Cloud AI (Gemini 3.5 Flash model), which consumes tokens. Next, I describe how to install the skills in my Angular project and register the Angular and Stitch MCP servers in the Antigravity CLI to develop the infrastructure, services, and UI design of my demo. 1. Workflow This is my entire workflow from implementing features, generating UI screens, and mapping the screens to Angular components. 2. Skills I installed the grill-with-docs , angular , and firebase skills in my project for the following reasons: grill-with-docs: Conduct a rigid Q&A session to generate a specification for a feature, refactor, or critical fix. AI is responsible for performing thorough analysis, and putting in more efforts to generate code to achieve the task. domain-modeling: The skill is referenced in the SKILL.md of the grill-with-docs skill, so a copy of it is required. code-review: Spawn two sub-agents to review changes to detect code smells and verify that the changes align with the specification. angular: Provide the best practices of modern Angular architecture, such as using signals and signal forms. firebase: Provide the skills for Firebase AI Logic, Firebase Remote, et