{"id":"dc8b51c4-770b-4009-9f52-6b9bbc138d44","shortId":"3vqpbD","kind":"skill","title":"angular","tagline":"Auto-activate for angular.json, *.component.ts, @Component decorator. Expert knowledge for modern Angular with signals, standalone components, control flow blocks, and current migration guidance. Use when building Angular apps with contemporary patterns and when validating versio","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-04-24T01:03:24.878Z","embedding":null,"createdAt":"2026-04-23T13:03:57.483Z","updatedAt":"2026-04-24T01:03:24.878Z","lastSeenAt":"2026-04-24T01:03:24.878Z","tsv":"'/api/items':203,214 '1':153 '17':120,231 '200ms':171 'accept':306 'activ':4 'align':314 'alway':220 'angular':1,14,29,38,119,230 'angular.json':6 'angular/common/http':184 'angular/core':56,180 'angular/core/rxjs-interop':188 'api':217,308 'app':30,60,128,134 'app-cont':133 'app-error':127 'app-item-list':59 'architectur':233 'async':205 'auto':3 'auto-activ':2 'await':211 'better':269 'block':21 'boundari':317 'build':28 'bundl':334 'case':161,163 'checkpoint':337 'class':81,193 'class.first':150 'click':76 'code':279 'compon':8,18,44,49,57,223,330,338,380 'component.ts':7 'comput':51,100,102,364 'concis':268 'console.log':107 'constructor':105,265 'contemporari':32 'content':135 'control':19,117,281,345 'count':68,101 'creat':206 'createitemdto':208 'critic':329 'current':23 'data':136,137 'decor':9 'default':165 'defer':166,319,387 'depend':366 'direct':292,356 'div':149 'effect':52,106 'effici':252 'els':124,132 'empti':155 'error':126,129,131,164 'experiment':218,299,307 'expert':10 'explicit':305 'export':80,192 'express':378 'first':147,148,151 'firstvaluefrom':212 'flow':20,118,282,346 'fold':385 'found':158 'framework':39 'function':277,371 'functional-styl':276 'guardrail':219 'guidanc':25 'heavi':325,379 'html':121 'http':196 'httpclient':182,198,311 'httpresourc':297 'import':48,65,176,181,185 'improv':235 'index':146 'infer':271 'initi':333 'initialvalu':204 'inject':174,177,178,189,197,262,266,367,370 'input':53,83,365 'input.required':86,88 'instead':263,289,352 'item':61,70,72,78,87,89,97,111,112,114,116,139,141,157,199,202,207,215 'item.id':74,143 'item.name':79,154 'itemlistcompon':82 'itemselect':91 'itemservic':194 'knowledg':11 'lazi':323,389 'legaci':354 'length':104 'let':144 'li':75 'list':62 'load':123,162,169,324,390 'local':93,242 'loop':373 'mark':340 'meaning':376 'messag':130 'migrat':24 'minimum':170 'model':254 'modern':13,229 'new':344 'ngfor':294 'ngif':293 'non':328 'non-crit':327 'null':98,99 'observ':256 'optim':332 'otherwis':309 'output':54,90,92 'page':316 'pattern':33 'predict':250 'prefer':239 'privat':195 'project':304 'promis':209 'provid':247 'providedin':190 'quick':41 'reactiv':253,361 'refer':42 'resourc':216,295 'return':210 'root':191 'seamless':274 'select':95,108 'selectitem':77,110 'selector':58 'servic':172 'shake':238 'share':244 'signal':16,46,50,84,96,240,246,357,363 'simplifi':232 'size':335 'skill':40 'skill-angular' 'source-cofin' 'standalon':17,43,63,222,342 'standard':227 'state':94,245,260,362 'status':160 'structur':291,355 'style':278 'switch':159,288 'syntax':283,347 'templat':66 'this.http.get':201 'this.http.post':213 'this.items':103 'this.itemselected.emit':115 'this.selected':109 'this.selected.set':113 'titl':67,85 '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':186,200,313 'track':73,142,377 'tree':237 'tree-shak':236 'true':64,343 'type':270 'typescript':47,175 'ui':259 'use':26,221,261,284,300,310,320,351,359,368,386 'valid':36,336 'verifi':280 'versio':37 'viewport':168 'work':273","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-04-24T01:03:24.878Z"}],"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-19T23:22:27Z","description":"Context-Driven Development toolkit for AI agents — spec-first planning, TDD workflow, and Beads integration.","skill_md_sha":"159ff3d4a0aa609caaf50430ebf1e47e1ee22fdc","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":"Auto-activate for angular.json, *.component.ts, @Component decorator. Expert knowledge for modern Angular with signals, standalone components, control flow blocks, and current migration guidance. Use when building Angular apps with contemporary patterns and when validating version-specific API stability. Not for React (see react), Vue (see vue), or AngularJS (v1)."},"skills_sh_url":"https://skills.sh/cofin/flow/angular"},"updatedAt":"2026-04-24T01:03:24.878Z"}}