---
name: "angular-18-deferrable-views"
description: "Declaratively defer and lazy-load heavy Angular component templates using @defer syntax."
metadata:
  author: "Google"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "use @defer angular 18"
  - "@defer on viewport angular"
  - "@placeholder @loading angular"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

# Angular 18 Deferrable Views (@defer) & Lazy Blocks

Configures Angular 18 defer blocks: @defer with triggers (on viewport, on interaction, on hover, on timer), @placeholder for initial markup, @loading with minimum display durations, and @error fallbacks.

## When to Invoke
Invoke this skill whenever you need to:
- use @defer angular 18
- @defer on viewport angular
- @placeholder @loading angular

## Execution SOP & Rules
1. Wrap template section: @defer (on viewport; prefetch on idle) { <app-heavy-chart /> }.
2. Add placeholder block: @placeholder { <div class='skeleton-chart' /> }.
3. Add loading block: @loading (minimum 500ms) { <app-spinner /> }.
4. Add error block: @error { <p>Failed to load component</p> }.

## Verification Checklist
- Run local linting, syntax validation, and type-checks before reporting completion.
- Ensure all created or modified files adhere to workspace boundaries and avoid uncommitted secrets.
- Verify tests or build commands exit cleanly with return code 0.