Menu
Angular performance. Trigger: optimizing Angular apps, images, lazy loading.
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Basé sur la classification professionnelle SOC
| name | angular-performance |
| description | Angular performance. Trigger: optimizing Angular apps, images, lazy loading. |
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>
`
})
width and height (or fill)priority to LCP (Largest Contentful Paint) imagengSrc not srcfill image must have position: relative/fixed/absolute@defer (on viewport) {
<heavy-component />
} @placeholder {
<p>Placeholder shown immediately</p>
} @loading (minimum 200ms) {
<spinner />
} @error {
<p>Failed to load</p>
}
| 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 />
}
// 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)
}
bootstrapApplication(AppComponent, {
providers: [
provideClientHydration()
]
});
| Scenario | Use |
|---|---|
| SEO critical (blog, e-commerce) | SSR |
| Dashboard/Admin | CSR |
| Static marketing site | SSG/Prerender |
| 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).
Yoizen UI design system standards. Trigger: Yoizen UI components, styling, colors, typography, visual polish or correction of any Yoizen Angular frontend.
Test-driven development loop — drive features through tests one vertical slice at a time (red → green → refactor). Use when the user asks for test-first development, mentions TDD or red-green-refactor, wants to build a feature through tests, or the orchestrator runs the TDD flow.
Trigger: Azure DevOps PRs, work items, profiles; review/vote/comment a PR; list/create/update work items. Drive Azure DevOps via the `ado` CLI instead of plugin tools.
Author and harden Dockerfiles for NestJS/Node, .NET, and Angular/nginx services on AKS. Use when creating a Dockerfile, reviewing/auditing/hardening one, shrinking image size or attack surface, or fixing container findings — root user, leaked secret, writable code, vuln scan. Reaches the .dockerignore, compose, and the entrypoints/configs baked into the image.
Teach the user a new skill or concept, within this workspace.
Shared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-navigable, or when another skill needs the deep-module vocabulary.