{
  "skill_name": "angular-tooling",
  "evals": [
    {
      "id": 1,
      "prompt": "How do I generate a new Angular component with the CLI?",
      "expected_output": "Use ng generate component features/user-profile (or ng g c). Use --dry-run to preview output first. Add --change-detection=OnPush to set CD strategy at generation time. Use --skip-tests if spec is not needed. Always use ng generate — never create files manually.",
      "assertions": [
        { "type": "contains", "value": "ng generate component" },
        { "type": "contains", "value": "--dry-run" },
        { "type": "contains", "value": "--change-detection=OnPush" },
        { "type": "contains", "value": "never create files manually" }
      ]
    },
    {
      "id": 2,
      "prompt": "How do I run a production build of my Angular app?",
      "expected_output": "Run ng build -c production. Output goes to dist/my-app/browser/. For SSR: ng add @angular/ssr then ng build (adds server/ output). Use --stats-json to generate bundle stats for analysis.",
      "assertions": [
        { "type": "contains", "value": "ng build -c production" },
        { "type": "contains", "value": "dist/" },
        { "type": "contains", "value": "@angular/ssr" }
      ]
    },
    {
      "id": 3,
      "prompt": "How do I analyze my Angular bundle size?",
      "expected_output": "Run ng build -c production --stats-json then npx esbuild-visualizer --metadata dist/my-app/browser/stats.json --open. Check angular.json budgets — do not hand-edit budget values; analyze the bundle first to understand what's large.",
      "assertions": [
        { "type": "contains", "value": "--stats-json" },
        { "type": "contains", "value": "esbuild-visualizer" },
        { "type": "contains", "value": "angular.json budgets" }
      ]
    },
    {
      "id": 4,
      "prompt": "How do I update Angular CLI to the latest version?",
      "expected_output": "Run ng update to check available updates. Apply with ng update @angular/core @angular/cli — this runs official codemods to migrate your code. Never use --force; fix peer dependency conflicts properly instead.",
      "assertions": [
        { "type": "contains", "value": "ng update" },
        { "type": "contains", "value": "codemods" },
        { "type": "contains", "value": "Never use --force" }
      ]
    },
    {
      "id": 5,
      "prompt": "What are the ng generate flags I should know?",
      "expected_output": "--dry-run previews without writing files. --skip-tests skips spec file. --flat skips subfolder creation. --change-detection=OnPush sets CD strategy. --style=scss sets stylesheet format. Always use --dry-run first for unfamiliar generators.",
      "assertions": [
        { "type": "contains", "value": "--dry-run" },
        { "type": "contains", "value": "--skip-tests" },
        { "type": "contains", "value": "--change-detection=OnPush" }
      ]
    },
    {
      "id": 6,
      "prompt": "How do I enable code coverage in Angular tests?",
      "expected_output": "Run ng test --code-coverage --watch=false. Coverage output goes to coverage/ directory. Configure thresholds in angular.json under test > codeCoverage. View HTML report at coverage/index.html.",
      "assertions": [
        { "type": "contains", "value": "ng test --code-coverage" },
        { "type": "contains", "value": "coverage/" },
        { "type": "contains", "value": "angular.json" }
      ]
    }
  ],
  "should_not_trigger": [
    "How do I use create-react-app or Vite to scaffold a React project?",
    "How do I build a NestJS project with nest build?",
    "How do I configure webpack for code splitting?",
    "How do I set up a Vite dev server for a Vue project?"
  ]
}
