[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71BXXXZ4RF0YMDP4PHT90P6":3,"skill-same:01M71BXXXZ4RF0YMDP4PHT90P6":80},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":16,"sourceHtmlUrl":17,"categories":18,"keywords":19,"publishedAt":40,"linkOnly":41,"markdownContent":42,"markdownBody":43,"frontMatter":44,"refName":50,"commitSha":51,"skillDirectory":5,"forksCount":14,"repositoryHtmlUrl":52,"repositoryHomepageUrl":6,"ownerHtmlUrl":53,"ownerBlogUrl":54,"ownerDescription":55,"updatedAt":56,"install":57,"resources":70},"01M71BXXXZ4RF0YMDP4PHT90P6","angular-signals",null,"Implement signal-based reactive state management in Angular v20+. Use for creating reactive state with signal(), derived state with computed(), dependent state with linkedSignal(), and side effects with effect(). Triggers on state management questions, converting from BehaviorSubject\u002FObservable patterns to signals, or implementing reactive data flows.","agency-black\u002FSkills","agency-black","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F234862658?v=4","01M6HWVFPNGNR5N2CX9ECSAD57","agencia.black","01M719WF77BF3HN0N9FK1APEFY",0,"MIT","https:\u002F\u002Fgithub.com\u002Fagency-black\u002FSkills\u002Fblob\u002Fmain\u002Fangular-signals\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fagency-black\u002FSkills\u002Fblob\u002Fmain\u002Fangular-signals\u002FSKILL.md",[],[20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39],"signals","angular signals","angular","https","questions","github","state management","state","with","implement","effects","use","triggers","license","implementing","signal","flows","for","development","effect","2026-11-10 10:12:30",false,"---\nname: angular-signals\ndescription: >-\n  Implement signal-based reactive state management in Angular v20+. Use for\n  creating reactive state with signal(), derived state with computed(),\n  dependent state with linkedSignal(), and side effects with effect(). Triggers\n  on state management questions, converting from BehaviorSubject\u002FObservable\n  patterns to signals, or implementing reactive data flows.\nmetadata:\n  category: development\n  source:\n    repository: 'https:\u002F\u002Fgithub.com\u002Fanalogjs\u002Fangular-skills'\n    path: skills\u002Fangular-signals\n    license_path: LICENSE\n---\n\n# Angular Signals\n\nSignals are Angular's reactive primitive for state management. They provide synchronous, fine-grained reactivity.\n\n## Core Signal APIs\n\n### signal() - Writable State\n\n```typescript\nimport { signal } from '@angular\u002Fcore';\n\n\u002F\u002F Create writable signal\nconst count = signal(0);\n\n\u002F\u002F Read value\nconsole.log(count()); \u002F\u002F 0\n\n\u002F\u002F Set new value\ncount.set(5);\n\n\u002F\u002F Update based on current value\ncount.update(c => c + 1);\n\n\u002F\u002F With explicit type\nconst user = signal\u003CUser | null>(null);\nuser.set({ id: 1, name: 'Alice' });\n```\n\n### computed() - Derived State\n\n```typescript\nimport { signal, computed } from '@angular\u002Fcore';\n\nconst firstName = signal('John');\nconst lastName = signal('Doe');\n\n\u002F\u002F Derived signal - automatically updates when dependencies change\nconst fullName = computed(() => `${firstName()} ${lastName()}`);\n\nconsole.log(fullName()); \u002F\u002F \"John Doe\"\nfirstName.set('Jane');\nconsole.log(fullName()); \u002F\u002F \"Jane Doe\"\n\n\u002F\u002F Computed with complex logic\nconst items = signal\u003CItem[]>([]);\nconst filter = signal('');\n\nconst filteredItems = computed(() => {\n  const query = filter().toLowerCase();\n  return items().filter(item => \n    item.name.toLowerCase().includes(query)\n  );\n});\n\nconst totalPrice = computed(() => \n  filteredItems().reduce((sum, item) => sum + item.price, 0)\n);\n```\n\n### linkedSignal() - Dependent State with Reset\n\n```typescript\nimport { signal, linkedSignal } from '@angular\u002Fcore';\n\nconst options = signal(['A', 'B', 'C']);\n\n\u002F\u002F Resets to first option when options change\nconst selected = linkedSignal(() => options()[0]);\n\nconsole.log(selected()); \u002F\u002F \"A\"\nselected.set('B');       \u002F\u002F User selects B\nconsole.log(selected()); \u002F\u002F \"B\"\noptions.set(['X', 'Y']); \u002F\u002F Options change\nconsole.log(selected()); \u002F\u002F \"X\" - auto-reset to first\n\n\u002F\u002F With previous value access\nconst items = signal\u003CItem[]>([]);\n\nconst selectedItem = linkedSignal\u003CItem[], Item | null>({\n  source: () => items(),\n  computation: (newItems, previous) => {\n    \u002F\u002F Try to preserve selection if item still exists\n    const prevItem = previous?.value;\n    if (prevItem && newItems.some(i => i.id === prevItem.id)) {\n      return prevItem;\n    }\n    return newItems[0] ?? null;\n  },\n});\n```\n\n### effect() - Side Effects\n\n```typescript\nimport { signal, effect, inject, DestroyRef } from '@angular\u002Fcore';\n\n@Component({...})\nexport class Search {\n  query = signal('');\n  \n  constructor() {\n    \u002F\u002F Effect runs when query changes\n    effect(() => {\n      console.log('Search query:', this.query());\n    });\n    \n    \u002F\u002F Effect with cleanup\n    effect((onCleanup) => {\n      const timer = setInterval(() => {\n        console.log('Current query:', this.query());\n      }, 1000);\n      \n      onCleanup(() => clearInterval(timer));\n    });\n  }\n}\n```\n\n**Effect rules:**\n- Run in injection context (constructor or with `runInInjectionContext`)\n- Automatically cleaned up when component destroys\n\n## Component State Pattern\n\n```typescript\n@Component({\n  selector: 'app-todo-list',\n  template: `\n    \u003Cinput [value]=\"newTodo()\" (input)=\"newTodo.set($any($event.target).value)\" \u002F>\n    \u003Cbutton (click)=\"addTodo()\" [disabled]=\"!canAdd()\">Add\u003C\u002Fbutton>\n    \n    \u003Cul>\n      @for (todo of filteredTodos(); track todo.id) {\n        \u003Cli [class.done]=\"todo.done\">\n          {{ todo.text }}\n          \u003Cbutton (click)=\"toggleTodo(todo.id)\">Toggle\u003C\u002Fbutton>\n        \u003C\u002Fli>\n      }\n    \u003C\u002Ful>\n    \n    \u003Cp>{{ remaining() }} remaining\u003C\u002Fp>\n  `,\n})\nexport class TodoList {\n  \u002F\u002F State\n  todos = signal\u003CTodo[]>([]);\n  newTodo = signal('');\n  filter = signal\u003C'all' | 'active' | 'done'>('all');\n  \n  \u002F\u002F Derived state\n  canAdd = computed(() => this.newTodo().trim().length > 0);\n  \n  filteredTodos = computed(() => {\n    const todos = this.todos();\n    switch (this.filter()) {\n      case 'active': return todos.filter(t => !t.done);\n      case 'done': return todos.filter(t => t.done);\n      default: return todos;\n    }\n  });\n  \n  remaining = computed(() => \n    this.todos().filter(t => !t.done).length\n  );\n  \n  \u002F\u002F Actions\n  addTodo() {\n    const text = this.newTodo().trim();\n    if (text) {\n      this.todos.update(todos => [\n        ...todos,\n        { id: crypto.randomUUID(), text, done: false }\n      ]);\n      this.newTodo.set('');\n    }\n  }\n  \n  toggleTodo(id: string) {\n    this.todos.update(todos =>\n      todos.map(t => t.id === id ? { ...t, done: !t.done } : t)\n    );\n  }\n}\n```\n\n## RxJS Interop\n\n### toSignal() - Observable to Signal\n\n```typescript\nimport { toSignal } from '@angular\u002Fcore\u002Frxjs-interop';\nimport { interval } from 'rxjs';\n\n@Component({...})\nexport class Timer {\n  private http = inject(HttpClient);\n  \n  \u002F\u002F From observable - requires initial value or allowUndefined\n  counter = toSignal(interval(1000), { initialValue: 0 });\n  \n  \u002F\u002F From HTTP - undefined until loaded\n  users = toSignal(this.http.get\u003CUser[]>('\u002Fapi\u002Fusers'));\n  \n  \u002F\u002F With requireSync for synchronous observables (BehaviorSubject)\n  private user$ = new BehaviorSubject\u003CUser | null>(null);\n  currentUser = toSignal(this.user$, { requireSync: true });\n}\n```\n\n### toObservable() - Signal to Observable\n\n```typescript\nimport { toObservable } from '@angular\u002Fcore\u002Frxjs-interop';\nimport { switchMap, debounceTime } from 'rxjs';\n\n@Component({...})\nexport class Search {\n  query = signal('');\n  \n  private http = inject(HttpClient);\n  \n  \u002F\u002F Convert signal to observable for RxJS operators\n  results = toSignal(\n    toObservable(this.query).pipe(\n      debounceTime(300),\n      switchMap(q => this.http.get\u003CResult[]>(`\u002Fapi\u002Fsearch?q=${q}`))\n    ),\n    { initialValue: [] }\n  );\n}\n```\n\n## Signal Equality\n\n```typescript\n\u002F\u002F Custom equality function\nconst user = signal\u003CUser>(\n  { id: 1, name: 'Alice' },\n  { equal: (a, b) => a.id === b.id }\n);\n\n\u002F\u002F Only triggers updates when ID changes\nuser.set({ id: 1, name: 'Alice Updated' }); \u002F\u002F No update\nuser.set({ id: 2, name: 'Bob' }); \u002F\u002F Triggers update\n```\n\n## Untracked Reads\n\n```typescript\nimport { untracked } from '@angular\u002Fcore';\n\nconst a = signal(1);\nconst b = signal(2);\n\n\u002F\u002F Only depends on 'a', not 'b'\nconst result = computed(() => {\n  const aVal = a();\n  const bVal = untracked(() => b());\n  return aVal + bVal;\n});\n```\n\n## Service State Pattern\n\n```typescript\n@Injectable({ providedIn: 'root' })\nexport class Auth {\n  \u002F\u002F Private writable state\n  private _user = signal\u003CUser | null>(null);\n  private _loading = signal(false);\n  \n  \u002F\u002F Public read-only signals\n  readonly user = this._user.asReadonly();\n  readonly loading = this._loading.asReadonly();\n  readonly isAuthenticated = computed(() => this._user() !== null);\n  \n  private http = inject(HttpClient);\n  \n  async login(credentials: Credentials): Promise\u003Cvoid> {\n    this._loading.set(true);\n    try {\n      const user = await firstValueFrom(\n        this.http.post\u003CUser>('\u002Fapi\u002Flogin', credentials)\n      );\n      this._user.set(user);\n    } finally {\n      this._loading.set(false);\n    }\n  }\n  \n  logout(): void {\n    this._user.set(null);\n  }\n}\n```\n\nFor advanced patterns including resource(), see [references\u002Fsignal-patterns.md](references\u002Fsignal-patterns.md).\n","# Angular Signals\n\nSignals are Angular's reactive primitive for state management. They provide synchronous, fine-grained reactivity.\n\n## Core Signal APIs\n\n### signal() - Writable State\n\n```typescript\nimport { signal } from '@angular\u002Fcore';\n\n\u002F\u002F Create writable signal\nconst count = signal(0);\n\n\u002F\u002F Read value\nconsole.log(count()); \u002F\u002F 0\n\n\u002F\u002F Set new value\ncount.set(5);\n\n\u002F\u002F Update based on current value\ncount.update(c => c + 1);\n\n\u002F\u002F With explicit type\nconst user = signal\u003CUser | null>(null);\nuser.set({ id: 1, name: 'Alice' });\n```\n\n### computed() - Derived State\n\n```typescript\nimport { signal, computed } from '@angular\u002Fcore';\n\nconst firstName = signal('John');\nconst lastName = signal('Doe');\n\n\u002F\u002F Derived signal - automatically updates when dependencies change\nconst fullName = computed(() => `${firstName()} ${lastName()}`);\n\nconsole.log(fullName()); \u002F\u002F \"John Doe\"\nfirstName.set('Jane');\nconsole.log(fullName()); \u002F\u002F \"Jane Doe\"\n\n\u002F\u002F Computed with complex logic\nconst items = signal\u003CItem[]>([]);\nconst filter = signal('');\n\nconst filteredItems = computed(() => {\n  const query = filter().toLowerCase();\n  return items().filter(item => \n    item.name.toLowerCase().includes(query)\n  );\n});\n\nconst totalPrice = computed(() => \n  filteredItems().reduce((sum, item) => sum + item.price, 0)\n);\n```\n\n### linkedSignal() - Dependent State with Reset\n\n```typescript\nimport { signal, linkedSignal } from '@angular\u002Fcore';\n\nconst options = signal(['A', 'B', 'C']);\n\n\u002F\u002F Resets to first option when options change\nconst selected = linkedSignal(() => options()[0]);\n\nconsole.log(selected()); \u002F\u002F \"A\"\nselected.set('B');       \u002F\u002F User selects B\nconsole.log(selected()); \u002F\u002F \"B\"\noptions.set(['X', 'Y']); \u002F\u002F Options change\nconsole.log(selected()); \u002F\u002F \"X\" - auto-reset to first\n\n\u002F\u002F With previous value access\nconst items = signal\u003CItem[]>([]);\n\nconst selectedItem = linkedSignal\u003CItem[], Item | null>({\n  source: () => items(),\n  computation: (newItems, previous) => {\n    \u002F\u002F Try to preserve selection if item still exists\n    const prevItem = previous?.value;\n    if (prevItem && newItems.some(i => i.id === prevItem.id)) {\n      return prevItem;\n    }\n    return newItems[0] ?? null;\n  },\n});\n```\n\n### effect() - Side Effects\n\n```typescript\nimport { signal, effect, inject, DestroyRef } from '@angular\u002Fcore';\n\n@Component({...})\nexport class Search {\n  query = signal('');\n  \n  constructor() {\n    \u002F\u002F Effect runs when query changes\n    effect(() => {\n      console.log('Search query:', this.query());\n    });\n    \n    \u002F\u002F Effect with cleanup\n    effect((onCleanup) => {\n      const timer = setInterval(() => {\n        console.log('Current query:', this.query());\n      }, 1000);\n      \n      onCleanup(() => clearInterval(timer));\n    });\n  }\n}\n```\n\n**Effect rules:**\n- Run in injection context (constructor or with `runInInjectionContext`)\n- Automatically cleaned up when component destroys\n\n## Component State Pattern\n\n```typescript\n@Component({\n  selector: 'app-todo-list',\n  template: `\n    \u003Cinput [value]=\"newTodo()\" (input)=\"newTodo.set($any($event.target).value)\" \u002F>\n    \u003Cbutton (click)=\"addTodo()\" [disabled]=\"!canAdd()\">Add\u003C\u002Fbutton>\n    \n    \u003Cul>\n      @for (todo of filteredTodos(); track todo.id) {\n        \u003Cli [class.done]=\"todo.done\">\n          {{ todo.text }}\n          \u003Cbutton (click)=\"toggleTodo(todo.id)\">Toggle\u003C\u002Fbutton>\n        \u003C\u002Fli>\n      }\n    \u003C\u002Ful>\n    \n    \u003Cp>{{ remaining() }} remaining\u003C\u002Fp>\n  `,\n})\nexport class TodoList {\n  \u002F\u002F State\n  todos = signal\u003CTodo[]>([]);\n  newTodo = signal('');\n  filter = signal\u003C'all' | 'active' | 'done'>('all');\n  \n  \u002F\u002F Derived state\n  canAdd = computed(() => this.newTodo().trim().length > 0);\n  \n  filteredTodos = computed(() => {\n    const todos = this.todos();\n    switch (this.filter()) {\n      case 'active': return todos.filter(t => !t.done);\n      case 'done': return todos.filter(t => t.done);\n      default: return todos;\n    }\n  });\n  \n  remaining = computed(() => \n    this.todos().filter(t => !t.done).length\n  );\n  \n  \u002F\u002F Actions\n  addTodo() {\n    const text = this.newTodo().trim();\n    if (text) {\n      this.todos.update(todos => [\n        ...todos,\n        { id: crypto.randomUUID(), text, done: false }\n      ]);\n      this.newTodo.set('');\n    }\n  }\n  \n  toggleTodo(id: string) {\n    this.todos.update(todos =>\n      todos.map(t => t.id === id ? { ...t, done: !t.done } : t)\n    );\n  }\n}\n```\n\n## RxJS Interop\n\n### toSignal() - Observable to Signal\n\n```typescript\nimport { toSignal } from '@angular\u002Fcore\u002Frxjs-interop';\nimport { interval } from 'rxjs';\n\n@Component({...})\nexport class Timer {\n  private http = inject(HttpClient);\n  \n  \u002F\u002F From observable - requires initial value or allowUndefined\n  counter = toSignal(interval(1000), { initialValue: 0 });\n  \n  \u002F\u002F From HTTP - undefined until loaded\n  users = toSignal(this.http.get\u003CUser[]>('\u002Fapi\u002Fusers'));\n  \n  \u002F\u002F With requireSync for synchronous observables (BehaviorSubject)\n  private user$ = new BehaviorSubject\u003CUser | null>(null);\n  currentUser = toSignal(this.user$, { requireSync: true });\n}\n```\n\n### toObservable() - Signal to Observable\n\n```typescript\nimport { toObservable } from '@angular\u002Fcore\u002Frxjs-interop';\nimport { switchMap, debounceTime } from 'rxjs';\n\n@Component({...})\nexport class Search {\n  query = signal('');\n  \n  private http = inject(HttpClient);\n  \n  \u002F\u002F Convert signal to observable for RxJS operators\n  results = toSignal(\n    toObservable(this.query).pipe(\n      debounceTime(300),\n      switchMap(q => this.http.get\u003CResult[]>(`\u002Fapi\u002Fsearch?q=${q}`))\n    ),\n    { initialValue: [] }\n  );\n}\n```\n\n## Signal Equality\n\n```typescript\n\u002F\u002F Custom equality function\nconst user = signal\u003CUser>(\n  { id: 1, name: 'Alice' },\n  { equal: (a, b) => a.id === b.id }\n);\n\n\u002F\u002F Only triggers updates when ID changes\nuser.set({ id: 1, name: 'Alice Updated' }); \u002F\u002F No update\nuser.set({ id: 2, name: 'Bob' }); \u002F\u002F Triggers update\n```\n\n## Untracked Reads\n\n```typescript\nimport { untracked } from '@angular\u002Fcore';\n\nconst a = signal(1);\nconst b = signal(2);\n\n\u002F\u002F Only depends on 'a', not 'b'\nconst result = computed(() => {\n  const aVal = a();\n  const bVal = untracked(() => b());\n  return aVal + bVal;\n});\n```\n\n## Service State Pattern\n\n```typescript\n@Injectable({ providedIn: 'root' })\nexport class Auth {\n  \u002F\u002F Private writable state\n  private _user = signal\u003CUser | null>(null);\n  private _loading = signal(false);\n  \n  \u002F\u002F Public read-only signals\n  readonly user = this._user.asReadonly();\n  readonly loading = this._loading.asReadonly();\n  readonly isAuthenticated = computed(() => this._user() !== null);\n  \n  private http = inject(HttpClient);\n  \n  async login(credentials: Credentials): Promise\u003Cvoid> {\n    this._loading.set(true);\n    try {\n      const user = await firstValueFrom(\n        this.http.post\u003CUser>('\u002Fapi\u002Flogin', credentials)\n      );\n      this._user.set(user);\n    } finally {\n      this._loading.set(false);\n    }\n  }\n  \n  logout(): void {\n    this._user.set(null);\n  }\n}\n```\n\nFor advanced patterns including resource(), see [references\u002Fsignal-patterns.md](references\u002Fsignal-patterns.md).\n",{"name":5,"metadata":45,"description":7},{"source":46,"category":38},{"path":47,"repository":48,"license_path":49},"skills\u002Fangular-signals","https:\u002F\u002Fgithub.com\u002Fanalogjs\u002Fangular-skills","LICENSE","main","681496e0662f4c45c4758fae9d4510ae87311bf2","https:\u002F\u002Fgithub.com\u002Fagency-black\u002FSkills","https:\u002F\u002Fgithub.com\u002Fagency-black","http:\u002F\u002Fwww.dogma.black","Las grandes ideas merecen una ejecución impecable. Construimos plataformas web, aplicaciones y ecosistemas digitales completos. Esta Trinidad es nuestro dogma.","2026-05-29 16:13:55",{"source":8,"skillName":5,"commands":58,"prompt":68,"zipAvailable":69},[59,62,65],{"tool":60,"command":61},"npx","npx skills add agency-black\u002FSkills --skill angular-signals",{"tool":63,"command":64},"bunx","bunx skills add agency-black\u002FSkills --skill angular-signals",{"tool":66,"command":67},"pnpm","pnpm dlx skills add agency-black\u002FSkills --skill angular-signals","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fagency-black\u002FSkills\u002Fblob\u002Fmain\u002Fangular-signals\u002FSKILL.md",true,[71,74],{"path":49,"resourceType":49,"resourceTypeDesc":72,"sizeBytes":73,"sourceHtmlUrl":16},"许可证",1072,{"path":75,"resourceType":76,"resourceTypeDesc":77,"sizeBytes":78,"sourceHtmlUrl":79},"references\u002Fsignal-patterns.md","REFERENCE","参考文档",9225,"https:\u002F\u002Fgithub.com\u002Fagency-black\u002FSkills\u002Fblob\u002Fmain\u002Fangular-signals\u002Freferences\u002Fsignal-patterns.md",[81,106,136,166,189,213],{"skillNo":82,"name":83,"nameZh":6,"description":84,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":85,"categories":86,"keywords":87,"publishedAt":40},"01M71JZVZ0TVW7Z5DQBRWSBG8A","zarr-python","Chunked N-D arrays for cloud storage (Zarr-Python 3). Compressed arrays, parallel I\u002FO, S3\u002FGCS via fsspec, NumPy\u002FDask\u002FXarray compatible, for large-scale scientific computing pipelines.","https:\u002F\u002Fgithub.com\u002Fagency-black\u002FSkills\u002Fblob\u002Fmain\u002Fzarr-python\u002FSKILL.md",[],[88,89,90,91,92,93,94,95,96,97,98,99,100,37,101,31,102,103,104,105],"zarr python","python","zarr","arrays","Cloud Storage","remote","workflows","scientific","read","write","edit","parallel","dask","s3fs","numpy","s3","scientific computing","scale",{"skillNo":107,"name":108,"nameZh":6,"description":109,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":110,"sourceHtmlUrl":111,"categories":112,"keywords":118,"publishedAt":40},"01M71JYXC5VAEJT8KXN5GRK32S","xvary-stock-research","Thesis-driven equity analysis from public SEC EDGAR and market data; \u002Fanalyze, \u002Fscore, \u002Fcompare workflows with bundled Python tools (Claude Code, Cursor, Codex).","https:\u002F\u002Fgithub.com\u002Fagency-black\u002FSkills\u002Fblob\u002Fmain\u002Fxvary-stock-research\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fagency-black\u002FSkills\u002Fblob\u002Fmain\u002Fxvary-stock-research\u002FSKILL.md",[113],{"categoryNo":114,"categoryName":115,"taxonomyType":116,"taxonomyTypeDesc":117},"01JBSEEDCAT000000000000021","资料检索与研究","SCENARIO","使用场景",[119,120,121,122,123,124,125,89,126,94,127,128,129,130,131,132,28,133,134,135],"xvary","stock","research","xvary stock research","sec edgar","community","equity","thesis","analysis","code","Market","compare","market data","analyze","codex","cursor","2026",{"skillNo":137,"name":138,"nameZh":6,"description":139,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":140,"licenseFileUrl":141,"sourceHtmlUrl":142,"categories":143,"keywords":150,"publishedAt":40},"01M71JVSDPDQ5040YBN6J1ASKY","webapp-testing","Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.","Apache-2.0","https:\u002F\u002Fgithub.com\u002Fagency-black\u002FSkills\u002Fblob\u002Fmain\u002Fwebapp-testing\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fagency-black\u002FSkills\u002Fblob\u002Fmain\u002Fwebapp-testing\u002FSKILL.md",[144,147],{"categoryNo":145,"categoryName":146,"taxonomyType":116,"taxonomyTypeDesc":117},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":148,"categoryName":149,"taxonomyType":116,"taxonomyTypeDesc":117},"01JBSEEDCAT000000000000009","前端开发",[151,152,153,37,154,155,156,157,158,159,160,28,161,162,163,164,165],"webapp","testing","webapp testing","applications","local","frontend","debugging","toolkit","logs","browser","playwright","web","behavior","ui","screenshots",{"skillNo":167,"name":168,"nameZh":6,"description":169,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":140,"licenseFileUrl":170,"sourceHtmlUrl":171,"categories":172,"keywords":174,"publishedAt":40},"01M71JV64CW7R6FYYK9JWWGW0X","web-artifacts-builder","Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn\u002Fui). Use for complex artifacts requiring state management, routing, or shadcn\u002Fui components - not for simple single-file HTML\u002FJSX artifacts.","https:\u002F\u002Fgithub.com\u002Fagency-black\u002FSkills\u002Fblob\u002Fmain\u002Fweb-artifacts-builder\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fagency-black\u002FSkills\u002Fblob\u002Fmain\u002Fweb-artifacts-builder\u002FSKILL.md",[173],{"categoryNo":148,"categoryName":149,"taxonomyType":116,"taxonomyTypeDesc":117},[175,176,177,162,178,179,180,37,181,182,156,183,31,184,185,186,187,27,188,26],"builder","artifacts builder","artifacts","web artifacts builder","single-file","css","Tailwind","ui components","single","file","components","react","multi","routing",{"skillNo":190,"name":191,"nameZh":6,"description":192,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":193,"categories":194,"keywords":196,"publishedAt":40},"01M71JS4X2FRY41DE84DEP06MN","vercel-react-view-transitions","Guide for implementing smooth, native-feeling animations using React's View Transition API (`\u003CViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter\u002Fexit of components, animate list reorder, implement directional (forward\u002Fback) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, `startViewTransition`, `ViewTransition`, transition types, or asks about animating between UI states in React without third-party animation libraries.","https:\u002F\u002Fgithub.com\u002Fagency-black\u002FSkills\u002Fblob\u002Fmain\u002Fvercel-react-view-transitions\u002FSKILL.md",[195],{"categoryNo":148,"categoryName":149,"taxonomyType":116,"taxonomyTypeDesc":117},[186,197,198,199,200,201,202,203,204,180,205,206,207,34,208,185,209,210,211,212],"vercel react view transitions","view","react view transitions","vercel","transitions","shared","back","Animation","types","states","element","when","api","route","create","libraries",{"skillNo":214,"name":215,"nameZh":6,"description":216,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":217,"categories":218,"keywords":220,"publishedAt":40},"01M71JS1WZ1J4F9YVC2203JBJW","vercel-react-native-skills","React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.","https:\u002F\u002Fgithub.com\u002Fagency-black\u002FSkills\u002Fblob\u002Fmain\u002Fvercel-react-native-skills\u002FSKILL.md",[219],{"categoryNo":148,"categoryName":149,"taxonomyType":116,"taxonomyTypeDesc":117},[200,221,186,222,223,224,225,226,227,37,228,34,32,31,229,230,208,231,232,185],"vercel react native skills","react native","native","react native skills","modules","platform","animations","performance","react native components","apps","best practices","tasks"]