CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl-labs/angular-best-practices

Angular patterns — standalone components, signals, inject(), reactive forms, HTTP interceptors, and new control flow

95

2.75x
Quality

94%

Does it follow best practices?

Impact

99%

2.75x

Average score across 4 eval scenarios

SecuritybySnyk

Passed

No known issues

Overview
Quality
Evals
Security
Files

angular-control-flow.jsonverifiers/

{
  "instruction": "Use @if/@for/@switch control flow (not *ngIf/*ngFor/*ngSwitch), OnPush change detection, and lazy-loaded routes with loadComponent.",
  "relevant_when": "Agent writes Angular templates with conditionals or loops, configures change detection, or defines routes",
  "context": "Modern Angular uses built-in control flow: @if/@for/@switch instead of *ngIf/*ngFor/*ngSwitch directives. @for requires a track expression. Components should use ChangeDetectionStrategy.OnPush. Routes should use loadComponent for lazy loading instead of eagerly importing component classes.",
  "sources": [
    {
      "type": "file",
      "filename": "skills/angular-best-practices/SKILL.md",
      "tile": "tessl-labs/angular-best-practices@0.1.4"
    }
  ],
  "checklist": [
    {
      "name": "new-control-flow",
      "rule": "Agent uses @if, @for (with track), @switch instead of *ngIf, *ngFor, *ngSwitch",
      "relevant_when": "Agent writes Angular templates with conditionals, loops, or switch statements"
    },
    {
      "name": "onpush-change-detection",
      "rule": "Agent sets changeDetection: ChangeDetectionStrategy.OnPush on components",
      "relevant_when": "Agent creates Angular components"
    },
    {
      "name": "lazy-loaded-routes",
      "rule": "Agent uses loadComponent for route definitions instead of eagerly importing components",
      "relevant_when": "Agent defines Angular routes"
    }
  ]
}

tile.json