Performance

Skill ComeOnOliver/skillshub/skills/Gentleman-Programming/Gentleman-Skills/performance

🧠 The right skill, one API call. AI agent skills registry with token-efficient skill resolution. 5,000+ skills from 500+ top repos.

Install

npx -y skills add ComeOnOliver/skillshub --skill performance

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its author says it does

Copied from the file, not written here

Angular performance: NgOptimizedImage, @defer, lazy loading, SSR. Trigger: When optimizing Angular app performance, images, or lazy loading.

SKILL.md

2.7 KB, 667 tokens by cl100k_base, as published. Nobody here has run it

NgOptimizedImage (REQUIRED for images)

import { NgOptimizedImage } from '@angular/common';

@Component({
  imports: [NgOptimizedImage],
  template: `
    <!-- LCP image: add priority -->
    <img ngSrc="hero.jpg" width="800" height="400" priority>
    
    <!-- Regular: lazy loaded by default -->
    <img ngSrc="thumb.jpg" width="200" height="200">
    
    <!-- Fill mode (parent needs position: relative) -->
    <img ngSrc="bg.jpg" fill>
    
    <!-- With placeholder -->
    <img ngSrc="photo.jpg" width="400" height="300" placeholder>
  `
})

Rules

ALWAYS set width and height (or fill)
Add priority to LCP (Largest Contentful Paint) image
Use ngSrc not src
Parent of fill image must have position: relative/fixed/absolute

@defer - Lazy Components

@defer (on viewport) {
  <heavy-component />
} @placeholder {
  <p>Placeholder shown immediately</p>
} @loading (minimum 200ms) {
  <spinner />
} @error {
  <p>Failed to load</p>
}

Triggers

Trigger	When to Use
`on viewport`	Below the fold content
`on interaction`	Load on click/focus/hover
`on idle`	Load when browser is idle
`on timer(500ms)`	Load after delay
`when condition`	Load when expression is true

<!-- Multiple triggers -->
@defer (on viewport; on interaction) {
  <comments />
}

<!-- Conditional -->
@defer (when showComments()) {
  <comments />
}

Lazy Routes

// Single component
{
  path: 'admin',
  loadComponent: () => import('./features/admin/admin').then(c => c.AdminComponent)
}

// Feature with child routes
{
  path: 'users',
  loadChildren: () => import('./features/users/routes').then(m => m.USERS_ROUTES)
}

SSR & Hydration

bootstrapApplication(AppComponent, {
  providers: [
    provideClientHydration()
  ]
});

Scenario	Use
SEO critical (blog, e-commerce)	SSR
Dashboard/Admin	CSR
Static marketing site	SSG/Prerender

Slow Computations

Solution	When
Optimize algorithm	First choice always
Pure pipes	Cache single result
Memoization	Cache multiple results
`computed()`	Derived signal state

NEVER trigger reflows/repaints in lifecycle hooks (ngOnInit, ngAfterViewInit).