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

criteria.jsonevals/scenario-2/

{
  "context": "Tests whether the agent proactively applies Angular best practices when building a form. The task describes only business requirements -- it says nothing about reactive forms vs template-driven forms, accessibility attributes, standalone components, or OnPush. The agent should choose the right patterns on its own.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Reactive forms used",
      "description": "The component uses ReactiveFormsModule with FormGroup and FormControl, NOT template-driven forms with ngModel/FormsModule.",
      "max_score": 14
    },
    {
      "name": "Validators applied",
      "description": "FormControls include appropriate validators (Validators.required on required fields, Validators.min or Validators.pattern for amount, Validators.maxLength for description).",
      "max_score": 10
    },
    {
      "name": "Form validity check on submit",
      "description": "The onSubmit method checks form.valid before processing, guarding against invalid submissions.",
      "max_score": 8
    },
    {
      "name": "Standalone component",
      "description": "The component uses standalone: true and imports ReactiveFormsModule in its own imports array, not via an NgModule.",
      "max_score": 10
    },
    {
      "name": "OnPush change detection",
      "description": "The component uses changeDetection: ChangeDetectionStrategy.OnPush.",
      "max_score": 8
    },
    {
      "name": "aria-required on required inputs",
      "description": "Required input fields have aria-required=\"true\" for screen reader accessibility. The agent was NOT asked about accessibility.",
      "max_score": 12
    },
    {
      "name": "aria-invalid binding",
      "description": "Inputs bind [attr.aria-invalid] to the control's invalid and touched state so screen readers can announce invalid fields.",
      "max_score": 12
    },
    {
      "name": "role=alert on error messages",
      "description": "Inline validation error messages use role=\"alert\" so screen readers announce them when they appear.",
      "max_score": 10
    },
    {
      "name": "Label-input association",
      "description": "Each input has a <label> element with a for attribute matching the input's id, providing proper label association.",
      "max_score": 8
    },
    {
      "name": "New control flow for error display",
      "description": "Error messages use @if syntax instead of *ngIf structural directive.",
      "max_score": 8
    }
  ]
}

evals

tile.json