Angular Deferrable

oguzhan18/angular-ecosystem-skills

This one teaches Claude about Angular's @defer syntax for lazy loading components, which landed in Angular 17. It covers the main triggers like viewport, interaction, and hover, so you can defer loading heavy charts until they scroll into view or modals until someone clicks a button. The examples are straightforward and show the placeholder pattern you'll actually use. It's a narrow skill, but if you're building Angular apps with performance concerns or working with component libraries that need conditional loading, it gives Claude the right syntax patterns without having to paste documentation every time.

skills.sh installs

178

GitHub stars

7

last updated

Aug 21, 2026

@Component({
  template: `
    @defer (on viewport) {
      <heavy-chart />
    } @placeholder {
      <div>Loading...</div>
    }
  `
})
export class DashboardComponent {}

@Component({
  template: `
    <button (click)="showModal = true">Open</button>
    @defer (when showModal) {
      <modal-component />
    }
  `
})
export class MyComponent {}

@Component({
  template: `
    @defer (on hover) {
      <tooltip />
    }
  `
})
export class TooltipWrapper {}

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Recommended

More Frontend Development

1angular-resourceoguzhan18/angular-ecosystem-skillsALWAYS use when working with Angular Resource, Angular 19 resource API, or new async data loading with signals.178skills.sh installs

2angular-directivesoguzhan18/angular-ecosystem-skillsALWAYS use when working with Angular Directives, custom directives, attribute directives, structural directives, or directive composition in Angular application176skills.sh installs

3react-flow-architectsickn33/antigravity-awesome-skillsreact flow architect176skills.sh installs

4angular-routeroguzhan18/angular-ecosystem-skillsALWAYS use when working with Angular Router, routing configuration, guards, resolvers, lazy loading, or navigation in Angular applications.172skills.sh installs

5tuzi-markdown-to-htmltuziapi/tuzi-skills将 Markdown 转换为带样式的 HTML，支持微信公众号兼容主题。支持代码高亮、数学公式、PlantUML、脚注、提示框和信息图。当用户要求 "markdown to html"、"md转html"、"转换为html" 时使用。164skills.sh installs

6html-ppt-taste-editorialnexu-io/open-design16:9 HTML deck in editorial-minimalist taste. Warm cream slides, serif display + grotesque body, hairline rules, monospace meta, generous macro-whitespace, one 160skills.sh installs