{"id":"dc8b51c4-770b-4009-9f52-6b9bbc138d44","shortId":"3vqpbD","kind":"skill","title":"angular","tagline":"Use when editing Angular projects, angular.json, *.component.ts files, @Component code, signals, standalone components, control-flow blocks, Angular migrations, or Angular version-specific APIs.","description":"# Angular Framework Skill\n\n<workflow>\n\n## Quick Reference\n\n### Standalone Component with Signals\n\n<example>\n\n```typescript\nimport { Component, signal, computed, effect, input, output } from '@angular/core';\n\n@Component({\n  selector: 'app-item-list',\n  standalone: true,\n  imports: [],\n  template: `\n    <h2>{{ title() }} ({{ count() }})</h2>\n    <ul>\n      @for (item of items(); track item.id) {\n        <li (click)=\"selectItem(item)\">{{ item.name }}</li>\n      }\n    </ul>\n  `\n})\nexport class ItemListComponent {\n  // Input signals\n  title = input.required<string>();\n  items = input.required<Item[]>();\n\n  // Output\n  itemSelected = output<Item>();\n\n  // Local state\n  selected = signal<Item | null>(null);\n\n  // Computed\n  count = computed(() => this.items().length);\n\n  constructor() {\n    effect(() => {\n      console.log('Selected:', this.selected());\n    });\n  }\n\n  selectItem(item: Item) {\n    this.selected.set(item);\n    this.itemSelected.emit(item);\n  }\n}\n```\n\n</example>\n\n### Control Flow (Angular 17+)\n\n<example>\n\n```html\n<!-- @if -->\n@if (loading()) {\n  <app-spinner />\n} @else if (error()) {\n  <app-error [message]=\"error()!\" />\n} @else {\n  <app-content [data]=\"data()\" />\n}\n\n<!-- @for -->\n@for (item of items(); track item.id; let i = $index, first = $first) {\n  <div [class.first]=\"first\">{{ i + 1 }}. {{ item.name }}</div>\n} @empty {\n  <p>No items found</p>\n}\n\n<!-- @switch -->\n@switch (status()) {\n  @case ('loading') { <app-spinner /> }\n  @case ('error') { <app-error /> }\n  @default { <app-content /> }\n}\n\n<!-- @defer -->\n@defer (on viewport) {\n  <app-heavy-component />\n} @loading (minimum 200ms) {\n  <app-skeleton />\n}\n```\n\n</example>\n\n### Services with Inject\n\n<example>\n\n```typescript\nimport { Injectable, inject } from '@angular/core';\nimport { HttpClient } from '@angular/common/http';\nimport { toSignal } from '@angular/core/rxjs-interop';\n\n@Injectable({ providedIn: 'root' })\nexport class ItemService {\n  private http = inject(HttpClient);\n\n  items = toSignal(this.http.get<Item[]>('/api/items'), {\n    initialValue: []\n  });\n\n  async create(item: CreateItemDto): Promise<Item> {\n    return await firstValueFrom(\n      this.http.post<Item>('/api/items', item)\n    );\n  }\n}\n```\n\n</example>\n\n### Resource API (Experimental)\n\n<guardrails>\n## Guardrails\n\n- **Always use Standalone Components** -- This is the standard for modern Angular (17+); simplifies architecture and improves tree-shaking.\n- **Prefer Signals for local and shared state** -- Signals provide a more predictable and efficient reactivity model than observables for most UI state.\n- **Use `inject()` instead of constructor injection** -- More concise, better type inference, and works seamlessly with functional-style code.\n- **Verify control flow syntax** -- Use `@if`, `@for`, and `@switch` instead of structural directives (`*ngIf`, `*ngFor`).\n- **`resource()` and `httpResource()` are experimental** -- Use only when the project explicitly accepts experimental APIs; otherwise, use `HttpClient` with `toSignal()`.\n- **Align to page boundaries with `@defer`** -- Use it to lazy load heavy or non-critical components to optimize initial bundle size.\n</guardrails>\n\n<validation>\n## Validation Checkpoint\n\n- [ ] Component is marked as `standalone: true`\n- [ ] New control flow syntax (`@if`, `@for`) is used instead of legacy structural directives\n- [ ] Signals are used for reactive state (`signal`, `computed`, `input`)\n- [ ] Dependency injection uses the `inject()` function\n- [ ] `@for` loops have a meaningful `track` expression\n- [ ] Heavy components or those below the fold use `@defer` for lazy loading\n</validation>","tags":["angular","flow","cofin","agent-skills","ai-agents","beads","claude-code","codex","cursor","developer-tools","gemini-cli","opencode"],"capabilities":["skill","source-cofin","skill-angular","topic-agent-skills","topic-ai-agents","topic-beads","topic-claude-code","topic-codex","topic-cursor","topic-developer-tools","topic-gemini-cli","topic-opencode","topic-plugin","topic-slash-commands","topic-spec-driven-development"],"categories":["flow"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/cofin/flow/angular","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add cofin/flow","source_repo":"https://github.com/cofin/flow","install_from":"skills.sh"}},"qualityScore":"0.455","qualityRationale":"deterministic score 0.46 from registry signals: · indexed on github topic:agent-skills · 11 github stars · SKILL.md body (3,617 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T19:07:35.046Z","embedding":null,"createdAt":"2026-04-23T13:03:57.483Z","updatedAt":"2026-05-18T19:07:35.046Z","lastSeenAt":"2026-05-18T19:07:35.046Z","tsv":"'/api/items':192,203 '1':142 '17':109,220 '200ms':160 'accept':295 'align':303 'alway':209 'angular':1,5,19,22,27,108,219 'angular.json':7 'angular/common/http':173 'angular/core':45,169 'angular/core/rxjs-interop':177 'api':26,206,297 'app':49,117,123 'app-cont':122 'app-error':116 'app-item-list':48 'architectur':222 'async':194 'await':200 'better':258 'block':18 'boundari':306 'bundl':323 'case':150,152 'checkpoint':326 'class':70,182 'class.first':139 'click':65 'code':11,268 'compon':10,14,33,38,46,212,319,327,369 'component.ts':8 'comput':40,89,91,353 'concis':257 'console.log':96 'constructor':94,254 'content':124 'control':16,106,270,334 'control-flow':15 'count':57,90 'creat':195 'createitemdto':197 'critic':318 'data':125,126 'default':154 'defer':155,308,376 'depend':355 'direct':281,345 'div':138 'edit':4 'effect':41,95 'effici':241 'els':113,121 'empti':144 'error':115,118,120,153 'experiment':207,288,296 'explicit':294 'export':69,181 'express':367 'file':9 'first':136,137,140 'firstvaluefrom':201 'flow':17,107,271,335 'fold':374 'found':147 'framework':28 'function':266,360 'functional-styl':265 'guardrail':208 'heavi':314,368 'html':110 'http':185 'httpclient':171,187,300 'httpresourc':286 'import':37,54,165,170,174 'improv':224 'index':135 'infer':260 'initi':322 'initialvalu':193 'inject':163,166,167,178,186,251,255,356,359 'input':42,72,354 'input.required':75,77 'instead':252,278,341 'item':50,59,61,67,76,78,86,100,101,103,105,128,130,146,188,191,196,204 'item.id':63,132 'item.name':68,143 'itemlistcompon':71 'itemselect':80 'itemservic':183 'lazi':312,378 'legaci':343 'length':93 'let':133 'li':64 'list':51 'load':112,151,158,313,379 'local':82,231 'loop':362 'mark':329 'meaning':365 'messag':119 'migrat':20 'minimum':159 'model':243 'modern':218 'new':333 'ngfor':283 'ngif':282 'non':317 'non-crit':316 'null':87,88 'observ':245 'optim':321 'otherwis':298 'output':43,79,81 'page':305 'predict':239 'prefer':228 'privat':184 'project':6,293 'promis':198 'provid':236 'providedin':179 'quick':30 'reactiv':242,350 'refer':31 'resourc':205,284 'return':199 'root':180 'seamless':263 'select':84,97 'selectitem':66,99 'selector':47 'servic':161 'shake':227 'share':233 'signal':12,35,39,73,85,229,235,346,352 'simplifi':221 'size':324 'skill':29 'skill-angular' 'source-cofin' 'specif':25 'standalon':13,32,52,211,331 'standard':216 'state':83,234,249,351 'status':149 'structur':280,344 'style':267 'switch':148,277 'syntax':272,336 'templat':55 'this.http.get':190 'this.http.post':202 'this.items':92 'this.itemselected.emit':104 'this.selected':98 'this.selected.set':102 'titl':56,74 'topic-agent-skills' 'topic-ai-agents' 'topic-beads' 'topic-claude-code' 'topic-codex' 'topic-cursor' 'topic-developer-tools' 'topic-gemini-cli' 'topic-opencode' 'topic-plugin' 'topic-slash-commands' 'topic-spec-driven-development' 'tosign':175,189,302 'track':62,131,366 'tree':226 'tree-shak':225 'true':53,332 'type':259 'typescript':36,164 'ui':248 'use':2,210,250,273,289,299,309,340,348,357,375 'valid':325 'verifi':269 'version':24 'version-specif':23 'viewport':157 'work':262","prices":[{"id":"d5fcc1f1-60ae-4172-af9d-af4df84f11c2","listingId":"dc8b51c4-770b-4009-9f52-6b9bbc138d44","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"cofin","category":"flow","install_from":"skills.sh"},"createdAt":"2026-04-23T13:03:57.483Z"}],"sources":[{"listingId":"dc8b51c4-770b-4009-9f52-6b9bbc138d44","source":"github","sourceId":"cofin/flow/angular","sourceUrl":"https://github.com/cofin/flow/tree/main/skills/angular","isPrimary":false,"firstSeenAt":"2026-04-23T13:03:57.483Z","lastSeenAt":"2026-05-18T19:07:35.046Z"}],"details":{"listingId":"dc8b51c4-770b-4009-9f52-6b9bbc138d44","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"cofin","slug":"angular","github":{"repo":"cofin/flow","stars":11,"topics":["agent-skills","ai-agents","beads","claude-code","codex","context-driven-development","cursor","developer-tools","gemini-cli","opencode","plugin","slash-commands","spec-driven-development","subagents","tdd","workflow"],"license":"apache-2.0","html_url":"https://github.com/cofin/flow","pushed_at":"2026-04-27T19:07:26Z","description":"Context-Driven Development toolkit for AI agents — spec-first planning, TDD workflow, and Beads integration.","skill_md_sha":"2655c730c912a212a283444adc99e84b9a686f09","skill_md_path":"skills/angular/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/cofin/flow/tree/main/skills/angular"},"layout":"multi","source":"github","category":"flow","frontmatter":{"name":"angular","description":"Use when editing Angular projects, angular.json, *.component.ts files, @Component code, signals, standalone components, control-flow blocks, Angular migrations, or Angular version-specific APIs."},"skills_sh_url":"https://skills.sh/cofin/flow/angular"},"updatedAt":"2026-05-18T19:07:35.046Z"}}