Angular Modern APIs

This skill describes the mandatory coding standards for Angular components in our codebase.

Rules

All Angular components must follow these rules:

1. Use signal-based inputs — Use input() and output() instead of @Input() and @Output() decorators
2. Use inject() for DI — Use inject() function instead of constructor parameter injection
3. Use built-in control flow — Use @if, @for, @switch instead of *ngIf, *ngFor, *ngSwitch

Examples

Signal inputs (correct)

import { Component, input, output } from '@angular/core';

@Component({ ... })
export class UserProfileComponent {
  name = input.required<string>();
  age = input(0);
  saved = output<void>();
}

inject() for DI (correct)

import { Component, inject } from '@angular/core';
import { UserService } from './user.service';

@Component({ ... })
export class UserProfileComponent {
  private userService = inject(UserService);
}

Built-in control flow (correct)

@if (user()) {
  <h1>{{ user().name }}</h1>
} @else {
  <p>No user found</p>
}

@for (item of items(); track item.id) {
  <li>{{ item.name }}</li>
}

Skillgrade Grader Authoring

Procedures

Step 1: Identify the Grading Strategy

1. Determine whether the task requires objective verification (deterministic) or qualitative assessment (LLM rubric).
2. For most tasks, combine both: deterministic graders verify outcomes (weight 0.7), LLM rubrics assess approach quality (weight 0.3).

Step 2: Write a Deterministic Grader

1. Create a script in the skill's graders/ directory (bash or TypeScript).
2. The script must output a JSON object to stdout with the following structure:

   {"score": 0.67, "details": "2/3 checks passed", "checks": [{"name": "check-name", "passed": true, "message": "Description"}]}
   

3. score (0.0–1.0) and details are required. checks is optional but recommended.
4. Read references/grader-output-schema.md for the full output specification.
5. Use awk for arithmetic in bash scripts — bc is not available in node:20-slim.
6. Reference the grader in eval.yaml:

   - type: deterministic
     run: bash graders/check.sh
     weight: 0.7
   

Step 3: Write an LLM Rubric Grader

1. Draft a rubric with explicit scoring criteria and point allocations.
2. Structure the rubric into weighted sections that sum to 1.0:

   Workflow Compliance (0-0.5):
   - Did the agent follow the mandatory workflow steps?
   Efficiency (0-0.5):
   - Completed in ≤5 commands without trial-and-error?
   

3. Reference the rubric in eval.yaml:

   - type: llm_rubric
     rubric: |
       [rubric text or file path]
     weight: 0.3
     provider: gemini               # optional: gemini (default) | anthropic | openai
     model: gemini-3.5-flash        # optional model override (defaults to the latest dynamically resolved flash model)
   

4. For long rubrics, store in a separate file and reference by path: rubric: rubrics/quality.md.

Step 4: Combine Multiple Graders

1. Assign weights to each grader based on importance. Weights are normalized automatically.
2. Final reward is calculated as: Σ (grader_score × weight) / Σ weight.
3. Example configuration:

   graders:
     - type: deterministic
       run: bash graders/check.sh
       weight: 0.7
     - type: llm_rubric
       rubric: rubrics/quality.md
       weight: 0.3
   

Step 5: Validate Graders

1. Create a reference solution script that produces the expected output.
2. Run skillgrade --validate to verify graders score the reference solution correctly.
3. Test only deterministic graders: skillgrade --grader=deterministic (skips LLM calls, faster iteration).
4. Test only LLM rubric graders: skillgrade --grader=llm_rubric.
5. Run a specific eval with a specific grader type: skillgrade --eval=my-eval --grader=deterministic.
6. If a grader returns unexpected scores, inspect the script output and adjust scoring logic.

Error Handling

• If a deterministic grader outputs non-JSON, ensure all echo/console.log statements except the final JSON result are redirected to stderr.
• If an LLM rubric grader returns 0.00 with a missing API key message, set the appropriate key for your provider: GEMINI_API_KEY (provider: gemini), ANTHROPIC_API_KEY (provider: anthropic), or OPENAI_API_KEY (provider: openai).
• To use a custom/self-hosted LLM endpoint, set ANTHROPIC_BASE_URL (for provider: anthropic) or OPENAI_BASE_URL (for provider: openai) — e.g. for Ollama or vLLM.
• If scores are inconsistent across trials, reduce rubric ambiguity by adding concrete examples of passing and failing behavior.

Skillgrade Evaluation Setup

Procedures

Step 1: Install Skillgrade

1. Verify Node.js 20+ and Docker are available.
2. Run npm i -g skillgrade to install the CLI globally.

Step 2: Initialize an Eval Configuration

1. Navigate to the skill directory (must contain a SKILL.md).
2. Set the appropriate API key environment variable (GEMINI_API_KEY, ANTHROPIC_API_KEY, or OPENAI_API_KEY).
3. Run skillgrade init to generate an eval.yaml with AI-powered tasks and graders.
4. If an eval.yaml already exists, pass --force to overwrite: skillgrade init --force.
5. Without an API key, a well-commented template is generated instead.

Step 3: Configure eval.yaml

1. Read references/eval-yaml-spec.md for the full configuration schema.
2. Define one or more tasks under the tasks: key. Each task requires:
   • name: unique task identifier
   • instruction: what the agent should accomplish
   • workspace: files to copy into the evaluation container
   • graders: one or more scoring mechanisms (see the skillgrade-graders skill)
3. Optionally configure defaults: for agent, provider, trials, timeout, and threshold.

Step 4: Run Evaluations

1. Select an appropriate preset based on the evaluation goal:
   • --smoke (5 trials): Quick capability check.
   • --reliable (15 trials): Reliable pass rate estimate.
   • --regression (30 trials): High-confidence regression detection.
2. Run the evaluation: skillgrade --smoke.
3. Run a specific eval by name: skillgrade --eval=fix-linting.
4. Run multiple evals: skillgrade --eval=fix-linting,write-tests.
5. Run only deterministic graders (skip LLM calls): skillgrade --grader=deterministic.
6. Run only LLM rubric graders: skillgrade --grader=llm_rubric.
7. The agent is auto-detected from the API key. Override with --agent=gemini|claude|codex|acp|opencode|command.
8. For ACP, pass --acp-command="gemini --acp" or set defaults.acp.command.
9. For OpenCode, pass --opencode-agent=build|plan|explore or --opencode-model=provider/model.
10. For a custom agent, pass --agent=command --command="node mycli.js" or set defaults.command. The instruction is piped to the command's stdin.
11. Override the provider with --provider=docker|local.

Step 5: Review Results

1. Run skillgrade preview for a CLI report.
2. Run skillgrade preview browser to open the web UI at http://localhost:3847.
3. Reports are saved to $TMPDIR/skillgrade/<skill-name>/results/. Override with --output=DIR.

Step 6: Integrate with CI

1. Add a GitHub Actions step that installs skillgrade, navigates to the skill directory, and runs with --regression --ci --provider=local.
2. Use --provider=local in CI — the runner is already an ephemeral sandbox, so Docker adds overhead without benefit.
3. The --ci flag causes a non-zero exit code if the pass rate falls below --threshold (default: 0.8).
4. Read references/ci-example.md for a complete workflow template.

Error Handling

• If skillgrade init fails with "No SKILL.md found," verify the current directory contains a valid SKILL.md file.
• If evaluation hangs, check Docker is running and the container has network access for API calls.
• If all trials fail with "No API key," ensure the environment variable is exported, not just set inline for a different command.