[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6MF6PQJCSWZ8EMCWVB4P68C":3,"skill-same:01M6MF6PQJCSWZ8EMCWVB4P68C":112},{"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":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":40,"linkOnly":41,"markdownContent":42,"markdownBody":43,"frontMatter":44,"refName":50,"commitSha":51,"skillDirectory":52,"forksCount":53,"repositoryHtmlUrl":54,"repositoryHomepageUrl":55,"ownerHtmlUrl":56,"ownerBlogUrl":57,"ownerDescription":58,"updatedAt":59,"install":60,"resources":73},"01M6MF6PQJCSWZ8EMCWVB4P68C","cometchat-angular-v5-core",null,"Add CometChat chat to an Angular app end-to-end — detect the project, get & verify dashboard credentials, init→login→render with standalone components, and the drop-in conversation UI. The core knowledge every other Angular v5 skill builds on. Triggers: 'add chat to my angular app', 'integrate cometchat angular', 'set up cometchat credentials angular', 'show conversations and messages angular'.","hashgraph-online\u002Fawesome-codex-plugins","hashgraph-online","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F160371962?v=4","01M6CNB6NRJVNNGN14TR01Q6D3","HOL (Hashgraph Online)","01M6JT1HSKKG9V68KQAQGBA7XP",1554,"MIT","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fcometchat\u002Fcometchat-skills\u002Fskills\u002Fcometchat-angular-v5-core\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39],"cometchat","core","cometchat angular v5 core","angular","conversation","standalone","conversations","render","app","end","get","project","drop","components","show","up","knowledge","credentials","SET","messages","init","2026-11-10 10:12:30",false,"---\nname: cometchat-angular-v5-core\ndescription: \"Add CometChat chat to an Angular app end-to-end — detect the project, get & verify dashboard credentials, init→login→render with standalone components, and the drop-in conversation UI. The core knowledge every other Angular v5 skill builds on. Triggers: 'add chat to my angular app', 'integrate cometchat angular', 'set up cometchat credentials angular', 'show conversations and messages angular'.\"\nlicense: \"MIT\"\ncompatibility: \"Node.js >=18; Angular 17-21 (NOT 22 — see Install); @cometchat\u002Fchat-uikit-angular ^5 (5.1.0–5.2.0 verified); @cometchat\u002Fchat-sdk-javascript ^4\"\nmetadata:\n  author: \"CometChat\"\n  version: \"1.0.0\"\n  tags: \"cometchat angular core chat integration uikit v5 setup credentials standalone\"\n---\n\n> **Ground truth:** `@cometchat\u002Fchat-uikit-angular@^5` + `@cometchat\u002Fchat-sdk-javascript@^4`, symbols verified across 5.1.0–5.2.0 \u002F 4.1.13–4.2.0 (unchanged set; catalog `verifiedCompatibleRange`). This file is the THIN map loaded every run; deep detail lives in `references\u002F*`, loaded ONLY when the task needs it.\n\n## Use this skill when\nAdding CometChat to an Angular app, or you need the setup every other Angular v5 skill assumes: install, credentials, init→login→render ordering, and the component map.\n\n## Prerequisites & install\n\n### The three Angular rules that break everything else\nRead these first. Each produces code that compiles, shows no error, and does not work.\n\n1. **Every component must be in `imports: []`.** The kit ships *standalone* components. Use `\u003Ccometchat-conversations>` in a template without importing `CometChatConversationsComponent` into that component's `imports` array and Angular renders **nothing** — no error, no warning, blank space. This is the single most common failure.\n2. **Config lives in `src\u002Fenvironments\u002Fenvironment.ts`, NOT `.env`.** Angular resolves it at build time via file replacement. Any `.env` instruction is wrong here.\n3. **Class name ≠ selector ≠ docs title.** `CometChatConversationsComponent` (import) · `\u003Ccometchat-conversations>` (template) · \"Conversations\" (docs). All three are different; use the right one in the right place.\n\n### Install\n```bash\nnpm install @cometchat\u002Fchat-uikit-angular@^5 @cometchat\u002Fchat-sdk-javascript@^4 @cometchat\u002Fcards-angular@^1 dompurify@^3\n```\nCalls only (optional): `npm install @cometchat\u002Fcalls-sdk-javascript@^5`\n\n> ⚠️ **Angular 22 fails to install.** The kit's peer range is `@angular\u002Fcore >=17.0.0 \u003C22.0.0`, so `npm install` on Angular 22 hard-fails with `ERESOLVE`. Scaffold a new app with `npx -y @angular\u002Fcli@21 new \u003Capp>`. CometChat's stated policy is that 18+ is supported, so this range is expected to widen in a future kit release — until it ships, 22 does not work. Angular 17 works but is undocumented.\n\n`angular.json` needs **three** changes under `projects.\u003Capp>.architect.build` — the stylesheet, the icon assets, and the production budgets.\n\n`styles` — the kit stylesheet must come **FIRST**, before your own:\n```json\n\"styles\": [\n  \"node_modules\u002F@cometchat\u002Fchat-uikit-angular\u002Fstyles\u002Fcss-variables.css\",\n  \"src\u002Fstyles.css\"\n]\n```\n> ⚠️ **Order decides, and failing it is SILENT** — the kit re-declares tokens under `[data-theme=\"dark\"]` at your `:root`'s specificity, so appending the kit file makes it win and your brand colors vanish without error. Detail: `references\u002Ftheming.md`.\n\n`assets` — the kit ships ~300 SVG icons under `src\u002Flib\u002Fassets` (the glob copies them all; count is not load-bearing):\n```json\n{ \"glob\": \"**\u002F*\", \"input\": \"node_modules\u002F@cometchat\u002Fchat-uikit-angular\u002Fsrc\u002Flib\u002Fassets\", \"output\": \"assets\" }\n```\n\n**Production budgets — raise them or `ng build` HARD-FAILS.** The kit + Chat SDK is ~4.2 MB against a stock 1 MB error budget, so the DEFAULT `ng build` exits non-zero while `ng serve` is fine. Raise `budgets` + set `allowedCommonJsDependencies`: `references\u002Fdependencies.md`.\n\n> ⚠️ **Miss the `assets` entry and icons are broken throughout the kit** (send\u002Fattach\u002Femoji, call controls, menus) — nothing errors, it just reads as a theming problem. The single most commonly missed setup step in Angular.\n> ⚠️ Do **not** `@import` the kit's `css-variables.css` in a `.scss`\u002F`.css` file — the package's `exports` map does not expose that path and the build fails. The full `node_modules\u002F...` path in `angular.json` bypasses it.\n\nFull dependency table: `references\u002Fdependencies.md`.\n\n## Setup & credentials (essentials — full detail: `references\u002Fsetup-credentials.md`)\nThree values: **App ID**, **Region**, **Auth Key**. When they are missing, **OFFER both paths and default to the fetch** — *\"I can fetch them by logging into your CometChat dashboard, or you can paste them manually\"* — and never end the build with a \"add credentials yourself\" TODO.\n\n```ts\n\u002F\u002F src\u002Fenvironments\u002Fenvironment.ts\nexport const environment = {\n  production: false,\n  cometchat: { appId: 'APP_ID', region: 'REGION', authKey: 'AUTH_KEY' },\n};\n```\n**A fourth value you must ASK for: the login UID.** The app logs in as somebody the moment it opens, and only the developer knows who that should be. **Ask — do not pick one silently:**\n\n> *\"Which user should the app log in as on startup? You'll find your UIDs under Dashboard → your app → Users. If this is a fresh app I can create `cometchat-uid-1` for you and log in as that.\"*\n\n`cometchat-uid-1` is the docs **sample**, not a promise about this app — on an app whose sample users were never seeded, `login()` fails and the screen stays blank with no visible error. Never hardcode it and move on; if the developer has no UID, use the create-if-missing `ensureDevUser()` (`references\u002Flifecycle.md`).\n\nCreate `environment.prod.ts` with the same shape and wire `fileReplacements` in `angular.json`. **The Auth Key is dev-only** — production mints an auth token server-side and calls `loginWithAuthToken`. See `references\u002Fsetup-credentials.md`.\n\n## Integration ordering (BAKED — invariant)\n**`init()` must resolve BEFORE `login()`, and `login()` before any kit component renders.** Out of order, components mount with no session and render empty.\n\nIn Angular this is an app initializer, not a component effect:\n\n```ts\n\u002F\u002F src\u002Fmain.ts\nimport { bootstrapApplication } from '@angular\u002Fplatform-browser';\nimport { CometChatUIKit } from '@cometchat\u002Fchat-uikit-angular';\nimport { environment } from '.\u002Fenvironments\u002Fenvironment';\n\u002F\u002F Angular 20+ scaffolds `src\u002Fapp\u002Fapp.ts` exporting `App`; 17-19 scaffold `app.component.ts`\n\u002F\u002F exporting `AppComponent`. Use whichever YOUR app has (wrong one → \"Could not resolve …\").\nimport { App } from '.\u002Fapp\u002Fapp';                 \u002F\u002F Angular 20+ (CLI 21 default)\n\u002F\u002F import { AppComponent } from '.\u002Fapp\u002Fapp.component';   \u002F\u002F Angular 17-19\nimport { appConfig } from '.\u002Fapp\u002Fapp.config';\n\nconst { appId, region, authKey } = environment.cometchat;\n\u002F\u002F authKey is DEV-only: prod ships it empty + logs in with a server token — so require it\n\u002F\u002F only in dev, else every prod build throws behind a green `ng build`.\nif (!appId || !region) {\n  throw new Error('CometChat appId\u002Fregion empty — check src\u002Fenvironments\u002Fenvironment*.ts.');\n}\nif (!environment.production && !authKey) {\n  throw new Error('CometChat authKey empty — dev login needs it (production uses an auth token).');\n}\n\n\u002F\u002F `cometchat-uid-1` is the docs SAMPLE, not a guarantee this app has it — a missing UID renders a\n\u002F\u002F blank screen. Use a real UID from Dashboard → Users, or ensureDevUser() (references\u002Flifecycle.md).\nconst uid = 'cometchat-uid-1';\n\n\u002F\u002F Prod only: YOUR backend mints this user's auth token (endpoint shape: cometchat-angular-v5-production).\nasync function fetchAuthToken(): Promise\u003Cstring> {\n  const res = await fetch('\u002Fapi\u002Fcometchat-token', { credentials: 'include' });\n  if (!res.ok) throw new Error(`CometChat token endpoint: HTTP ${res.status}`);\n  return ((await res.json()) as { authToken: string }).authToken;\n}\n\n\u002F\u002F initFromSettings (NOT the classic builder init) so integrationSource=\"ai-agent\" propagates for\n\u002F\u002F telemetry attribution, and routes the Calls SDK too.\n\u002F\u002F Bootstrap the app in `finally` so it ALWAYS mounts: a failed init\u002Flogin (empty prod authKey, a wrong\n\u002F\u002F UID, a network blip) must leave CHAT degraded, never the WHOLE Angular app blank behind a green build.\n(async () => {\n  try {\n    await CometChatUIKit.initFromSettings({\n      appId,\n      region,\n      credentials: { authKey },                              \u002F\u002F dev only — empty in prod\n      chatSDK: { presenceSubscription: { type: 'ALL_USERS' } },\n    });\n    await (environment.production\n      ? CometChatUIKit.loginWithAuthToken(await fetchAuthToken())  \u002F\u002F prod: authKey stays server-side\n      : CometChatUIKit.login(uid));                                \u002F\u002F dev: Auth-Key login\n  } catch (e) {\n    console.error('CometChat init\u002Flogin failed', e);\n  } finally {\n    bootstrapApplication(App, appConfig).catch((err) => console.error(err));\n  }\n})();\n```\n\nGuarded login, `ensureDevUser` (create-if-missing for a dev start), `provideAppInitializer`, route guards, and the `loggedInUser$` Observable: `references\u002Flifecycle.md`.\n\n## Docs first for the API — the installed kit for BEHAVIOUR the docs omit\n**What exists and what it is called comes from the docs.** Fetch the component's page (`references\u002Fdocs-map.md` → `DOCS_BASE` + path + `.md`); read its **AI Integration Quick Reference** first. Do **not** invent an API from the type declarations — they expose internal-only names and members with no defined behaviour.\n\n**But reading the shipped bundle IS correct when the docs state a prop and not its semantics** (e.g. `attachmentOptions` — does yours *append* or *replace*? it appends; `messagesRequestBuilder` — override or merge?). When behaviour is load-bearing and undocumented, verify it in `node_modules\u002F@cometchat\u002Fchat-uikit-angular\u002Ffesm2022\u002F*.mjs`, then (1) say in your summary you verified against the installed kit, and (2) report it as a docs gap.\n\n> Full methodology + the worked examples — see `references\u002Fdocs-map.md` § \"Docs first for the API\".\n\n## Component \u002F API map (BAKED closed list)\nExported **class** → template **selector**. Anything not here, look up via `references\u002Fdocs-map.md` — do not guess.\n\n| Class | Selector | Purpose |\n| --- | --- | --- |\n| `CometChatConversationsComponent` | `\u003Ccometchat-conversations>` | conversation list |\n| `CometChatMessageHeaderComponent` | `\u003Ccometchat-message-header>` | active chat header |\n| `CometChatMessageListComponent` | `\u003Ccometchat-message-list>` | message pane |\n| `CometChatMessageComposerComponent` | `\u003Ccometchat-message-composer>` | composer |\n| `CometChatThreadHeaderComponent` | `\u003Ccometchat-thread-header>` | thread panel header |\n| `CometChatUsersComponent` | `\u003Ccometchat-users>` | user directory |\n| `CometChatGroupsComponent` | `\u003Ccometchat-groups>` | group directory |\n| `CometChatGroupMembersComponent` | `\u003Ccometchat-group-members>` | member management |\n| `CometChatSearchComponent` | `\u003Ccometchat-search>` | search surface |\n| `CometChatErrorBoundaryComponent` | `\u003Ccometchat-error-boundary>` | error containment |\n| `CometChatIncomingCallComponent` | `\u003Ccometchat-incoming-call>` | app-root call listener |\n\nNon-component exports you will need: `CometChatUIKit` (init\u002Flogin), `UIKitSettingsBuilder`, `ChatStateService` (active chat state), `CometChatUIKitConstants`, `CometChatLocalize`, `ThemeService`.\n\n> **Naming exception:** the AI-assistant exports carry **no** `Component` suffix — `CometChatAIAssistantChat`, not `…ChatComponent`.\n\n## Golden path — the production-ready CORE surface\nThe default for an unscoped \"add chat\": ships conversations · messages. **This is deliberately the CORE surface, not the whole app** — a users \u002F groups \u002F calls **tab selector**, a details or thread side panel, threads, search, and calling are **grow targets**, correct to omit unless asked. Build them via `cometchat-angular-v5-placement` (`references\u002Fcombined-app.md` \u002F `references\u002Fcore-surface.md`), not by improvising here.\n\n```ts\n\u002F\u002F src\u002Fapp\u002Fchat\u002Fchat.component.ts\nimport { Component, inject } from '@angular\u002Fcore';\nimport { CometChat } from '@cometchat\u002Fchat-sdk-javascript';   \u002F\u002F Conversation \u002F User \u002F Group types\nimport {\n  CometChatConversationsComponent, CometChatMessageHeaderComponent,\n  CometChatMessageListComponent, CometChatMessageComposerComponent,\n  CometChatErrorBoundaryComponent, CometChatUIKitConstants, ThemeService,\n} from '@cometchat\u002Fchat-uikit-angular';\nimport { CommonModule } from '@angular\u002Fcommon';\n\n@Component({\n  selector: 'app-chat',\n  standalone: true,\n  imports: [                                 \u002F\u002F ← omit this and NOTHING renders\n    CommonModule,\n    CometChatErrorBoundaryComponent,\n    CometChatConversationsComponent,\n    CometChatMessageHeaderComponent,\n    CometChatMessageListComponent,\n    CometChatMessageComposerComponent,\n  ],\n  templateUrl: '.\u002Fchat.component.html',\n  styleUrl: '.\u002Fchat.component.css',\n})\nexport class ChatComponent {\n  \u002F\u002F FOLLOW THE OS light\u002Fdark setting: the kit ships both themes but does NOT follow the OS itself.\n  \u002F\u002F `initFromPreference()` reads prefers-color-scheme + keeps its own matchMedia listener live — do\n  \u002F\u002F not hand-roll one; put it in the ROOT component for a multi-page app (references\u002Ftheming.md).\n  constructor() { inject(ThemeService).initFromPreference(); }\n\n  \u002F\u002F TWO slots, never one: `(itemClick)` emits a Conversation whose subject is a User (1:1) OR a Group.\n  \u002F\u002F Binding one `selected` to `[user]` ships clean on 1:1 and throws \"getUid is not a function\" on a GROUP.\n  \u002F\u002F `| undefined`, NOT `| null` — the kit declares `user?`\u002F`group?` and strictTemplates (ON by default)\n  \u002F\u002F rejects `| null` with TS2322. Full rationale: references\u002Fanti-patterns.md.\n  selectedUser: CometChat.User | undefined = undefined;\n  selectedGroup: CometChat.Group | undefined = undefined;\n  get hasChat() { return !!(this.selectedUser || this.selectedGroup); }\n\n  onItemClick(conversation: CometChat.Conversation) {\n    const subject = conversation.getConversationWith();\n    \u002F\u002F Ask the Conversation what it is — do NOT duck-type on getGuid() (a Conversation has none, so it\n    \u002F\u002F silently sends every group down the user path).\n    if (conversation.getConversationType() === CometChatUIKitConstants.MessageReceiverType.group) {\n      this.selectedGroup = subject as CometChat.Group;\n      this.selectedUser = undefined;\n    } else {\n      this.selectedUser = subject as CometChat.User;\n      this.selectedGroup = undefined;\n    }\n  }\n}\n```\n\n```html\n\u003C!-- chat.component.html -->\n\u003Ccometchat-error-boundary>\n  \u003Cdiv class=\"cc-shell\">\n    \u003Caside class=\"cc-side\">\n      \u003Ccometchat-conversations class=\"cc-fill\" (itemClick)=\"onItemClick($event)\">\u003C\u002Fcometchat-conversations>\n    \u003C\u002Faside>\n    \u003C!-- Pass BOTH slots on all three components; exactly one is non-null. -->\n    \u003Cmain class=\"cc-main\" *ngIf=\"hasChat; else empty\">\n      \u003Ccometchat-message-header [user]=\"selectedUser\" [group]=\"selectedGroup\">\u003C\u002Fcometchat-message-header>\n      \u003C!-- The thread-reply indicator is clickable whether or not you bind (threadRepliesClick);\n           unwired it emits into a dead handler (RULES §12 wire-or-hide). This golden path omits the\n           thread PANEL (first GROW step), so HIDE the affordance here; add panel + wire when you grow\n           into it — references\u002Flayout.md. -->\n      \u003Ccometchat-message-list class=\"cc-fill\" [user]=\"selectedUser\" [group]=\"selectedGroup\"\n        [hideReplyInThreadOption]=\"true\">\u003C\u002Fcometchat-message-list>\n      \u003Ccometchat-message-composer [user]=\"selectedUser\" [group]=\"selectedGroup\">\u003C\u002Fcometchat-message-composer>\n    \u003C\u002Fmain>\n    \u003Cng-template #empty>\u003Cdiv class=\"cc-empty\">Select a conversation\u003C\u002Fdiv>\u003C\u002Fng-template>\n  \u003C\u002Fdiv>\n\u003C\u002Fcometchat-error-boundary>\n```\n\n```css\n\u002F* chat.component.css — the shell MUST be sized or the list collapses to 0px. `.cc-fill`\n   (flex: 1; min-height: 0) is REQUIRED on every kit list (-conversations\u002F-users\u002F-groups\u002F\n   -call-logs\u002F-search\u002F-message-list): each resolves an internal height:100% to its own\n   overflow-y:auto region and does not size itself. \u003Ccometchat-error-boundary> ships NO :host\n   rule (verified vs 5.1.0), so size it too. Full rationale: `references\u002Flayout.md`. *\u002F\ncometchat-error-boundary { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }\n\u002F* The kit themes its OWN surfaces only — without this your own regions stay browser-white. *\u002F\nhtml, body { height: 100%; margin: 0;\n  background: var(--cometchat-background-color-01);\n  color: var(--cometchat-text-color-primary); }\n\n.cc-shell { display: flex; height: 100dvh; width: 100%; min-height: 0; overflow: hidden; }\n.cc-side  { width: 320px; min-height: 0; overflow: hidden; display: flex; flex-direction: column; border-right: 1px solid var(--cometchat-border-color-default); }\n.cc-fill  { flex: 1; min-height: 0; overflow: hidden; }\n.cc-main  { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }\n.cc-empty { flex: 1; display: grid; place-items: center; color: var(--cometchat-text-color-secondary); }\n```\n\n`html, body { height: 100%; margin: 0; }` is required — an unprepared ancestor chain collapses the kit. Full sizing rules, thread\u002Fsearch wiring and the mobile one-pane fallback: `references\u002Flayout.md`.\n\n## Deep references (load ONLY when the task needs them)\n| File | Load when |\n| --- | --- |\n| `references\u002Flifecycle.md` | init\u002Flogin ordering, guarded login, `loggedInUser$`, logout, route guards |\n| `references\u002Fsetup-credentials.md` | dashboard steps, environment files, production auth tokens |\n| `references\u002Flayout.md` | sizing, collapse, thread\u002Fsearch panels, responsive |\n| `references\u002Fcomponent-props.md` | inputs\u002Foutputs beyond the golden path, content projection |\n| `references\u002Ftheming.md` | CSS variables, brand colours, dark mode, following the OS theme |\n| `references\u002Fanti-patterns.md` | \"it compiles but does nothing\" failures |\n| `references\u002Ftroubleshooting.md` | symptom → cause → fix |\n| `references\u002Fdependencies.md` | versions, peers, Angular support matrix |\n| `references\u002Fdocs-map.md` | anything not baked here — component docs + SDK fallback |\n\n## Common pitfalls (top 4 — full list in `references\u002Fanti-patterns.md`)\n1. **Component missing from `imports: []`** → renders nothing, silently.\n2. **Unsized ancestor chain** → the message list collapses to zero height.\n3. **No `ngOnDestroy` teardown** → RxJS subscriptions and CometChat listeners leak on every route change.\n4. **Async SDK callbacks don't repaint** → messages arrive but the view never updates. Angular v21 is **zoneless by default**, so `NgZone.run()` is a no-op for CD — write to a **signal** or call `ChangeDetectorRef.markForCheck()` (see `lifecycle.md`).\n\n## Verify it works\n`ng serve`, then confirm: conversations list renders with data · clicking one opens header+list+composer · **clicking a GROUP conversation works too** (not just 1:1) · sending a message appears immediately · a second browser receives it live · no console errors · nothing collapsed to zero height · **OS set to dark renders dark** (`document.documentElement.getAttribute('data-theme')` is `\"dark\"`, not `null`) · **`ng build` (PRODUCTION config) succeeds** — see the budget note in Install.\n\n## Explain what you built (REQUIRED close)\nTell the developer: which files changed, where credentials live and that the Auth Key is dev-only, that components must stay in `imports: []`, and what to run next.\n\n**Then state the SCOPE BOUNDARY explicitly — do not leave it implied:**\n> *\"This is the core chat surface: a conversation list beside the message pane. It does **not** include a users \u002F groups \u002F calls tab selector, a details or thread side panel, search, or voice\u002Fvideo calling — say the word and I'll add any of them.\"*\n\nWithout this the developer cannot tell a deliberate default from an incomplete build.\n\n**Then offer these THREE options as a SELECTABLE choice and WAIT for the pick — never auto-continue (`RULES.md` §19):**\n\n- **① Add another feature** → **check what is already wired FIRST, then suggest only the gap.** Read the code you just emitted, and **ASK** which dashboard-gated items are already on (per-app dashboard state can't be read reliably — never assume off). Suggest 3–4 from the grow-set in `features.angular-v5.json`: voice\u002Fvideo **calls** (`npm-package`) · **push** \u002F **AI** smart replies · starter · summary (`dashboard-toggle`) · **polls · stickers · translation · pin · save** (`dashboard-extension`) · **threads · search · custom message types** (`code-prop`). **Never suggest an `auto` entry** — reactions, mentions, receipts, typing and media are core in v5 and already on; offer to customize instead. Then route to `-features` \u002F `-calls` \u002F `-push`.\n- **② Customize theming** → ask whether they have a preset\u002Fbrand theme (brand colour, light\u002Fdark, match an existing design system) or want to talk it through, then wire it (→ `cometchat-angular-v5-customization`).\n- **③ Test it manually** → do NOTHING further — hand back so the user runs and checks it themselves. (`cometchat-angular-v5-testing` covers what to mock; `-production` covers hardening before ship.)\n","> **Ground truth:** `@cometchat\u002Fchat-uikit-angular@^5` + `@cometchat\u002Fchat-sdk-javascript@^4`, symbols verified across 5.1.0–5.2.0 \u002F 4.1.13–4.2.0 (unchanged set; catalog `verifiedCompatibleRange`). This file is the THIN map loaded every run; deep detail lives in `references\u002F*`, loaded ONLY when the task needs it.\n\n## Use this skill when\nAdding CometChat to an Angular app, or you need the setup every other Angular v5 skill assumes: install, credentials, init→login→render ordering, and the component map.\n\n## Prerequisites & install\n\n### The three Angular rules that break everything else\nRead these first. Each produces code that compiles, shows no error, and does not work.\n\n1. **Every component must be in `imports: []`.** The kit ships *standalone* components. Use `\u003Ccometchat-conversations>` in a template without importing `CometChatConversationsComponent` into that component's `imports` array and Angular renders **nothing** — no error, no warning, blank space. This is the single most common failure.\n2. **Config lives in `src\u002Fenvironments\u002Fenvironment.ts`, NOT `.env`.** Angular resolves it at build time via file replacement. Any `.env` instruction is wrong here.\n3. **Class name ≠ selector ≠ docs title.** `CometChatConversationsComponent` (import) · `\u003Ccometchat-conversations>` (template) · \"Conversations\" (docs). All three are different; use the right one in the right place.\n\n### Install\n```bash\nnpm install @cometchat\u002Fchat-uikit-angular@^5 @cometchat\u002Fchat-sdk-javascript@^4 @cometchat\u002Fcards-angular@^1 dompurify@^3\n```\nCalls only (optional): `npm install @cometchat\u002Fcalls-sdk-javascript@^5`\n\n> ⚠️ **Angular 22 fails to install.** The kit's peer range is `@angular\u002Fcore >=17.0.0 \u003C22.0.0`, so `npm install` on Angular 22 hard-fails with `ERESOLVE`. Scaffold a new app with `npx -y @angular\u002Fcli@21 new \u003Capp>`. CometChat's stated policy is that 18+ is supported, so this range is expected to widen in a future kit release — until it ships, 22 does not work. Angular 17 works but is undocumented.\n\n`angular.json` needs **three** changes under `projects.\u003Capp>.architect.build` — the stylesheet, the icon assets, and the production budgets.\n\n`styles` — the kit stylesheet must come **FIRST**, before your own:\n```json\n\"styles\": [\n  \"node_modules\u002F@cometchat\u002Fchat-uikit-angular\u002Fstyles\u002Fcss-variables.css\",\n  \"src\u002Fstyles.css\"\n]\n```\n> ⚠️ **Order decides, and failing it is SILENT** — the kit re-declares tokens under `[data-theme=\"dark\"]` at your `:root`'s specificity, so appending the kit file makes it win and your brand colors vanish without error. Detail: `references\u002Ftheming.md`.\n\n`assets` — the kit ships ~300 SVG icons under `src\u002Flib\u002Fassets` (the glob copies them all; count is not load-bearing):\n```json\n{ \"glob\": \"**\u002F*\", \"input\": \"node_modules\u002F@cometchat\u002Fchat-uikit-angular\u002Fsrc\u002Flib\u002Fassets\", \"output\": \"assets\" }\n```\n\n**Production budgets — raise them or `ng build` HARD-FAILS.** The kit + Chat SDK is ~4.2 MB against a stock 1 MB error budget, so the DEFAULT `ng build` exits non-zero while `ng serve` is fine. Raise `budgets` + set `allowedCommonJsDependencies`: `references\u002Fdependencies.md`.\n\n> ⚠️ **Miss the `assets` entry and icons are broken throughout the kit** (send\u002Fattach\u002Femoji, call controls, menus) — nothing errors, it just reads as a theming problem. The single most commonly missed setup step in Angular.\n> ⚠️ Do **not** `@import` the kit's `css-variables.css` in a `.scss`\u002F`.css` file — the package's `exports` map does not expose that path and the build fails. The full `node_modules\u002F...` path in `angular.json` bypasses it.\n\nFull dependency table: `references\u002Fdependencies.md`.\n\n## Setup & credentials (essentials — full detail: `references\u002Fsetup-credentials.md`)\nThree values: **App ID**, **Region**, **Auth Key**. When they are missing, **OFFER both paths and default to the fetch** — *\"I can fetch them by logging into your CometChat dashboard, or you can paste them manually\"* — and never end the build with a \"add credentials yourself\" TODO.\n\n```ts\n\u002F\u002F src\u002Fenvironments\u002Fenvironment.ts\nexport const environment = {\n  production: false,\n  cometchat: { appId: 'APP_ID', region: 'REGION', authKey: 'AUTH_KEY' },\n};\n```\n**A fourth value you must ASK for: the login UID.** The app logs in as somebody the moment it opens, and only the developer knows who that should be. **Ask — do not pick one silently:**\n\n> *\"Which user should the app log in as on startup? You'll find your UIDs under Dashboard → your app → Users. If this is a fresh app I can create `cometchat-uid-1` for you and log in as that.\"*\n\n`cometchat-uid-1` is the docs **sample**, not a promise about this app — on an app whose sample users were never seeded, `login()` fails and the screen stays blank with no visible error. Never hardcode it and move on; if the developer has no UID, use the create-if-missing `ensureDevUser()` (`references\u002Flifecycle.md`).\n\nCreate `environment.prod.ts` with the same shape and wire `fileReplacements` in `angular.json`. **The Auth Key is dev-only** — production mints an auth token server-side and calls `loginWithAuthToken`. See `references\u002Fsetup-credentials.md`.\n\n## Integration ordering (BAKED — invariant)\n**`init()` must resolve BEFORE `login()`, and `login()` before any kit component renders.** Out of order, components mount with no session and render empty.\n\nIn Angular this is an app initializer, not a component effect:\n\n```ts\n\u002F\u002F src\u002Fmain.ts\nimport { bootstrapApplication } from '@angular\u002Fplatform-browser';\nimport { CometChatUIKit } from '@cometchat\u002Fchat-uikit-angular';\nimport { environment } from '.\u002Fenvironments\u002Fenvironment';\n\u002F\u002F Angular 20+ scaffolds `src\u002Fapp\u002Fapp.ts` exporting `App`; 17-19 scaffold `app.component.ts`\n\u002F\u002F exporting `AppComponent`. Use whichever YOUR app has (wrong one → \"Could not resolve …\").\nimport { App } from '.\u002Fapp\u002Fapp';                 \u002F\u002F Angular 20+ (CLI 21 default)\n\u002F\u002F import { AppComponent } from '.\u002Fapp\u002Fapp.component';   \u002F\u002F Angular 17-19\nimport { appConfig } from '.\u002Fapp\u002Fapp.config';\n\nconst { appId, region, authKey } = environment.cometchat;\n\u002F\u002F authKey is DEV-only: prod ships it empty + logs in with a server token — so require it\n\u002F\u002F only in dev, else every prod build throws behind a green `ng build`.\nif (!appId || !region) {\n  throw new Error('CometChat appId\u002Fregion empty — check src\u002Fenvironments\u002Fenvironment*.ts.');\n}\nif (!environment.production && !authKey) {\n  throw new Error('CometChat authKey empty — dev login needs it (production uses an auth token).');\n}\n\n\u002F\u002F `cometchat-uid-1` is the docs SAMPLE, not a guarantee this app has it — a missing UID renders a\n\u002F\u002F blank screen. Use a real UID from Dashboard → Users, or ensureDevUser() (references\u002Flifecycle.md).\nconst uid = 'cometchat-uid-1';\n\n\u002F\u002F Prod only: YOUR backend mints this user's auth token (endpoint shape: cometchat-angular-v5-production).\nasync function fetchAuthToken(): Promise\u003Cstring> {\n  const res = await fetch('\u002Fapi\u002Fcometchat-token', { credentials: 'include' });\n  if (!res.ok) throw new Error(`CometChat token endpoint: HTTP ${res.status}`);\n  return ((await res.json()) as { authToken: string }).authToken;\n}\n\n\u002F\u002F initFromSettings (NOT the classic builder init) so integrationSource=\"ai-agent\" propagates for\n\u002F\u002F telemetry attribution, and routes the Calls SDK too.\n\u002F\u002F Bootstrap the app in `finally` so it ALWAYS mounts: a failed init\u002Flogin (empty prod authKey, a wrong\n\u002F\u002F UID, a network blip) must leave CHAT degraded, never the WHOLE Angular app blank behind a green build.\n(async () => {\n  try {\n    await CometChatUIKit.initFromSettings({\n      appId,\n      region,\n      credentials: { authKey },                              \u002F\u002F dev only — empty in prod\n      chatSDK: { presenceSubscription: { type: 'ALL_USERS' } },\n    });\n    await (environment.production\n      ? CometChatUIKit.loginWithAuthToken(await fetchAuthToken())  \u002F\u002F prod: authKey stays server-side\n      : CometChatUIKit.login(uid));                                \u002F\u002F dev: Auth-Key login\n  } catch (e) {\n    console.error('CometChat init\u002Flogin failed', e);\n  } finally {\n    bootstrapApplication(App, appConfig).catch((err) => console.error(err));\n  }\n})();\n```\n\nGuarded login, `ensureDevUser` (create-if-missing for a dev start), `provideAppInitializer`, route guards, and the `loggedInUser$` Observable: `references\u002Flifecycle.md`.\n\n## Docs first for the API — the installed kit for BEHAVIOUR the docs omit\n**What exists and what it is called comes from the docs.** Fetch the component's page (`references\u002Fdocs-map.md` → `DOCS_BASE` + path + `.md`); read its **AI Integration Quick Reference** first. Do **not** invent an API from the type declarations — they expose internal-only names and members with no defined behaviour.\n\n**But reading the shipped bundle IS correct when the docs state a prop and not its semantics** (e.g. `attachmentOptions` — does yours *append* or *replace*? it appends; `messagesRequestBuilder` — override or merge?). When behaviour is load-bearing and undocumented, verify it in `node_modules\u002F@cometchat\u002Fchat-uikit-angular\u002Ffesm2022\u002F*.mjs`, then (1) say in your summary you verified against the installed kit, and (2) report it as a docs gap.\n\n> Full methodology + the worked examples — see `references\u002Fdocs-map.md` § \"Docs first for the API\".\n\n## Component \u002F API map (BAKED closed list)\nExported **class** → template **selector**. Anything not here, look up via `references\u002Fdocs-map.md` — do not guess.\n\n| Class | Selector | Purpose |\n| --- | --- | --- |\n| `CometChatConversationsComponent` | `\u003Ccometchat-conversations>` | conversation list |\n| `CometChatMessageHeaderComponent` | `\u003Ccometchat-message-header>` | active chat header |\n| `CometChatMessageListComponent` | `\u003Ccometchat-message-list>` | message pane |\n| `CometChatMessageComposerComponent` | `\u003Ccometchat-message-composer>` | composer |\n| `CometChatThreadHeaderComponent` | `\u003Ccometchat-thread-header>` | thread panel header |\n| `CometChatUsersComponent` | `\u003Ccometchat-users>` | user directory |\n| `CometChatGroupsComponent` | `\u003Ccometchat-groups>` | group directory |\n| `CometChatGroupMembersComponent` | `\u003Ccometchat-group-members>` | member management |\n| `CometChatSearchComponent` | `\u003Ccometchat-search>` | search surface |\n| `CometChatErrorBoundaryComponent` | `\u003Ccometchat-error-boundary>` | error containment |\n| `CometChatIncomingCallComponent` | `\u003Ccometchat-incoming-call>` | app-root call listener |\n\nNon-component exports you will need: `CometChatUIKit` (init\u002Flogin), `UIKitSettingsBuilder`, `ChatStateService` (active chat state), `CometChatUIKitConstants`, `CometChatLocalize`, `ThemeService`.\n\n> **Naming exception:** the AI-assistant exports carry **no** `Component` suffix — `CometChatAIAssistantChat`, not `…ChatComponent`.\n\n## Golden path — the production-ready CORE surface\nThe default for an unscoped \"add chat\": ships conversations · messages. **This is deliberately the CORE surface, not the whole app** — a users \u002F groups \u002F calls **tab selector**, a details or thread side panel, threads, search, and calling are **grow targets**, correct to omit unless asked. Build them via `cometchat-angular-v5-placement` (`references\u002Fcombined-app.md` \u002F `references\u002Fcore-surface.md`), not by improvising here.\n\n```ts\n\u002F\u002F src\u002Fapp\u002Fchat\u002Fchat.component.ts\nimport { Component, inject } from '@angular\u002Fcore';\nimport { CometChat } from '@cometchat\u002Fchat-sdk-javascript';   \u002F\u002F Conversation \u002F User \u002F Group types\nimport {\n  CometChatConversationsComponent, CometChatMessageHeaderComponent,\n  CometChatMessageListComponent, CometChatMessageComposerComponent,\n  CometChatErrorBoundaryComponent, CometChatUIKitConstants, ThemeService,\n} from '@cometchat\u002Fchat-uikit-angular';\nimport { CommonModule } from '@angular\u002Fcommon';\n\n@Component({\n  selector: 'app-chat',\n  standalone: true,\n  imports: [                                 \u002F\u002F ← omit this and NOTHING renders\n    CommonModule,\n    CometChatErrorBoundaryComponent,\n    CometChatConversationsComponent,\n    CometChatMessageHeaderComponent,\n    CometChatMessageListComponent,\n    CometChatMessageComposerComponent,\n  ],\n  templateUrl: '.\u002Fchat.component.html',\n  styleUrl: '.\u002Fchat.component.css',\n})\nexport class ChatComponent {\n  \u002F\u002F FOLLOW THE OS light\u002Fdark setting: the kit ships both themes but does NOT follow the OS itself.\n  \u002F\u002F `initFromPreference()` reads prefers-color-scheme + keeps its own matchMedia listener live — do\n  \u002F\u002F not hand-roll one; put it in the ROOT component for a multi-page app (references\u002Ftheming.md).\n  constructor() { inject(ThemeService).initFromPreference(); }\n\n  \u002F\u002F TWO slots, never one: `(itemClick)` emits a Conversation whose subject is a User (1:1) OR a Group.\n  \u002F\u002F Binding one `selected` to `[user]` ships clean on 1:1 and throws \"getUid is not a function\" on a GROUP.\n  \u002F\u002F `| undefined`, NOT `| null` — the kit declares `user?`\u002F`group?` and strictTemplates (ON by default)\n  \u002F\u002F rejects `| null` with TS2322. Full rationale: references\u002Fanti-patterns.md.\n  selectedUser: CometChat.User | undefined = undefined;\n  selectedGroup: CometChat.Group | undefined = undefined;\n  get hasChat() { return !!(this.selectedUser || this.selectedGroup); }\n\n  onItemClick(conversation: CometChat.Conversation) {\n    const subject = conversation.getConversationWith();\n    \u002F\u002F Ask the Conversation what it is — do NOT duck-type on getGuid() (a Conversation has none, so it\n    \u002F\u002F silently sends every group down the user path).\n    if (conversation.getConversationType() === CometChatUIKitConstants.MessageReceiverType.group) {\n      this.selectedGroup = subject as CometChat.Group;\n      this.selectedUser = undefined;\n    } else {\n      this.selectedUser = subject as CometChat.User;\n      this.selectedGroup = undefined;\n    }\n  }\n}\n```\n\n```html\n\u003C!-- chat.component.html -->\n\u003Ccometchat-error-boundary>\n  \u003Cdiv class=\"cc-shell\">\n    \u003Caside class=\"cc-side\">\n      \u003Ccometchat-conversations class=\"cc-fill\" (itemClick)=\"onItemClick($event)\">\u003C\u002Fcometchat-conversations>\n    \u003C\u002Faside>\n    \u003C!-- Pass BOTH slots on all three components; exactly one is non-null. -->\n    \u003Cmain class=\"cc-main\" *ngIf=\"hasChat; else empty\">\n      \u003Ccometchat-message-header [user]=\"selectedUser\" [group]=\"selectedGroup\">\u003C\u002Fcometchat-message-header>\n      \u003C!-- The thread-reply indicator is clickable whether or not you bind (threadRepliesClick);\n           unwired it emits into a dead handler (RULES §12 wire-or-hide). This golden path omits the\n           thread PANEL (first GROW step), so HIDE the affordance here; add panel + wire when you grow\n           into it — references\u002Flayout.md. -->\n      \u003Ccometchat-message-list class=\"cc-fill\" [user]=\"selectedUser\" [group]=\"selectedGroup\"\n        [hideReplyInThreadOption]=\"true\">\u003C\u002Fcometchat-message-list>\n      \u003Ccometchat-message-composer [user]=\"selectedUser\" [group]=\"selectedGroup\">\u003C\u002Fcometchat-message-composer>\n    \u003C\u002Fmain>\n    \u003Cng-template #empty>\u003Cdiv class=\"cc-empty\">Select a conversation\u003C\u002Fdiv>\u003C\u002Fng-template>\n  \u003C\u002Fdiv>\n\u003C\u002Fcometchat-error-boundary>\n```\n\n```css\n\u002F* chat.component.css — the shell MUST be sized or the list collapses to 0px. `.cc-fill`\n   (flex: 1; min-height: 0) is REQUIRED on every kit list (-conversations\u002F-users\u002F-groups\u002F\n   -call-logs\u002F-search\u002F-message-list): each resolves an internal height:100% to its own\n   overflow-y:auto region and does not size itself. \u003Ccometchat-error-boundary> ships NO :host\n   rule (verified vs 5.1.0), so size it too. Full rationale: `references\u002Flayout.md`. *\u002F\ncometchat-error-boundary { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }\n\u002F* The kit themes its OWN surfaces only — without this your own regions stay browser-white. *\u002F\nhtml, body { height: 100%; margin: 0;\n  background: var(--cometchat-background-color-01);\n  color: var(--cometchat-text-color-primary); }\n\n.cc-shell { display: flex; height: 100dvh; width: 100%; min-height: 0; overflow: hidden; }\n.cc-side  { width: 320px; min-height: 0; overflow: hidden; display: flex; flex-direction: column; border-right: 1px solid var(--cometchat-border-color-default); }\n.cc-fill  { flex: 1; min-height: 0; overflow: hidden; }\n.cc-main  { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }\n.cc-empty { flex: 1; display: grid; place-items: center; color: var(--cometchat-text-color-secondary); }\n```\n\n`html, body { height: 100%; margin: 0; }` is required — an unprepared ancestor chain collapses the kit. Full sizing rules, thread\u002Fsearch wiring and the mobile one-pane fallback: `references\u002Flayout.md`.\n\n## Deep references (load ONLY when the task needs them)\n| File | Load when |\n| --- | --- |\n| `references\u002Flifecycle.md` | init\u002Flogin ordering, guarded login, `loggedInUser$`, logout, route guards |\n| `references\u002Fsetup-credentials.md` | dashboard steps, environment files, production auth tokens |\n| `references\u002Flayout.md` | sizing, collapse, thread\u002Fsearch panels, responsive |\n| `references\u002Fcomponent-props.md` | inputs\u002Foutputs beyond the golden path, content projection |\n| `references\u002Ftheming.md` | CSS variables, brand colours, dark mode, following the OS theme |\n| `references\u002Fanti-patterns.md` | \"it compiles but does nothing\" failures |\n| `references\u002Ftroubleshooting.md` | symptom → cause → fix |\n| `references\u002Fdependencies.md` | versions, peers, Angular support matrix |\n| `references\u002Fdocs-map.md` | anything not baked here — component docs + SDK fallback |\n\n## Common pitfalls (top 4 — full list in `references\u002Fanti-patterns.md`)\n1. **Component missing from `imports: []`** → renders nothing, silently.\n2. **Unsized ancestor chain** → the message list collapses to zero height.\n3. **No `ngOnDestroy` teardown** → RxJS subscriptions and CometChat listeners leak on every route change.\n4. **Async SDK callbacks don't repaint** → messages arrive but the view never updates. Angular v21 is **zoneless by default**, so `NgZone.run()` is a no-op for CD — write to a **signal** or call `ChangeDetectorRef.markForCheck()` (see `lifecycle.md`).\n\n## Verify it works\n`ng serve`, then confirm: conversations list renders with data · clicking one opens header+list+composer · **clicking a GROUP conversation works too** (not just 1:1) · sending a message appears immediately · a second browser receives it live · no console errors · nothing collapsed to zero height · **OS set to dark renders dark** (`document.documentElement.getAttribute('data-theme')` is `\"dark\"`, not `null`) · **`ng build` (PRODUCTION config) succeeds** — see the budget note in Install.\n\n## Explain what you built (REQUIRED close)\nTell the developer: which files changed, where credentials live and that the Auth Key is dev-only, that components must stay in `imports: []`, and what to run next.\n\n**Then state the SCOPE BOUNDARY explicitly — do not leave it implied:**\n> *\"This is the core chat surface: a conversation list beside the message pane. It does **not** include a users \u002F groups \u002F calls tab selector, a details or thread side panel, search, or voice\u002Fvideo calling — say the word and I'll add any of them.\"*\n\nWithout this the developer cannot tell a deliberate default from an incomplete build.\n\n**Then offer these THREE options as a SELECTABLE choice and WAIT for the pick — never auto-continue (`RULES.md` §19):**\n\n- **① Add another feature** → **check what is already wired FIRST, then suggest only the gap.** Read the code you just emitted, and **ASK** which dashboard-gated items are already on (per-app dashboard state can't be read reliably — never assume off). Suggest 3–4 from the grow-set in `features.angular-v5.json`: voice\u002Fvideo **calls** (`npm-package`) · **push** \u002F **AI** smart replies · starter · summary (`dashboard-toggle`) · **polls · stickers · translation · pin · save** (`dashboard-extension`) · **threads · search · custom message types** (`code-prop`). **Never suggest an `auto` entry** — reactions, mentions, receipts, typing and media are core in v5 and already on; offer to customize instead. Then route to `-features` \u002F `-calls` \u002F `-push`.\n- **② Customize theming** → ask whether they have a preset\u002Fbrand theme (brand colour, light\u002Fdark, match an existing design system) or want to talk it through, then wire it (→ `cometchat-angular-v5-customization`).\n- **③ Test it manually** → do NOTHING further — hand back so the user runs and checks it themselves. (`cometchat-angular-v5-testing` covers what to mock; `-production` covers hardening before ship.)\n",{"name":5,"license":15,"metadata":45,"description":7,"compatibility":49},{"tags":46,"author":47,"version":48},"cometchat angular core chat integration uikit v5 setup credentials standalone","CometChat","1.0.0","Node.js >=18; Angular 17-21 (NOT 22 — see Install); @cometchat\u002Fchat-uikit-angular ^5 (5.1.0–5.2.0 verified); @cometchat\u002Fchat-sdk-javascript ^4","main","2b63f856ce19c2a797929cacabd9e0fc936812fa","plugins\u002Fcometchat\u002Fcometchat-skills\u002Fskills\u002Fcometchat-angular-v5-core",468,"https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins","https:\u002F\u002Fhol.org\u002Fplugins\u002Fbest-codex-plugins","https:\u002F\u002Fgithub.com\u002Fhashgraph-online","https:\u002F\u002Fhol.org","Open-source standards and developer tools for interoperable AI agents: discovery, identity, communication, payments, privacy and security.","2026-11-11 02:22:54",{"source":8,"skillName":5,"commands":61,"prompt":71,"zipAvailable":72},[62,65,68],{"tool":63,"command":64},"npx","npx skills add hashgraph-online\u002Fawesome-codex-plugins --skill cometchat-angular-v5-core",{"tool":66,"command":67},"bunx","bunx skills add hashgraph-online\u002Fawesome-codex-plugins --skill cometchat-angular-v5-core",{"tool":69,"command":70},"pnpm","pnpm dlx skills add hashgraph-online\u002Fawesome-codex-plugins --skill cometchat-angular-v5-core","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fcometchat\u002Fcometchat-skills\u002Fskills\u002Fcometchat-angular-v5-core\u002FSKILL.md",true,[74,80,84,88,92,96,100,104,108],{"path":75,"resourceType":76,"resourceTypeDesc":77,"sizeBytes":78,"sourceHtmlUrl":79},"references\u002Fanti-patterns.md","REFERENCE","参考文档",4051,"https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fcometchat\u002Fcometchat-skills\u002Fskills\u002Fcometchat-angular-v5-core\u002Freferences\u002Fanti-patterns.md",{"path":81,"resourceType":76,"resourceTypeDesc":77,"sizeBytes":82,"sourceHtmlUrl":83},"references\u002Fcomponent-props.md",2959,"https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fcometchat\u002Fcometchat-skills\u002Fskills\u002Fcometchat-angular-v5-core\u002Freferences\u002Fcomponent-props.md",{"path":85,"resourceType":76,"resourceTypeDesc":77,"sizeBytes":86,"sourceHtmlUrl":87},"references\u002Fdependencies.md",3461,"https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fcometchat\u002Fcometchat-skills\u002Fskills\u002Fcometchat-angular-v5-core\u002Freferences\u002Fdependencies.md",{"path":89,"resourceType":76,"resourceTypeDesc":77,"sizeBytes":90,"sourceHtmlUrl":91},"references\u002Fdocs-map.md",9557,"https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fcometchat\u002Fcometchat-skills\u002Fskills\u002Fcometchat-angular-v5-core\u002Freferences\u002Fdocs-map.md",{"path":93,"resourceType":76,"resourceTypeDesc":77,"sizeBytes":94,"sourceHtmlUrl":95},"references\u002Flayout.md",3827,"https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fcometchat\u002Fcometchat-skills\u002Fskills\u002Fcometchat-angular-v5-core\u002Freferences\u002Flayout.md",{"path":97,"resourceType":76,"resourceTypeDesc":77,"sizeBytes":98,"sourceHtmlUrl":99},"references\u002Flifecycle.md",12168,"https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fcometchat\u002Fcometchat-skills\u002Fskills\u002Fcometchat-angular-v5-core\u002Freferences\u002Flifecycle.md",{"path":101,"resourceType":76,"resourceTypeDesc":77,"sizeBytes":102,"sourceHtmlUrl":103},"references\u002Fsetup-credentials.md",10039,"https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fcometchat\u002Fcometchat-skills\u002Fskills\u002Fcometchat-angular-v5-core\u002Freferences\u002Fsetup-credentials.md",{"path":105,"resourceType":76,"resourceTypeDesc":77,"sizeBytes":106,"sourceHtmlUrl":107},"references\u002Ftheming.md",3750,"https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fcometchat\u002Fcometchat-skills\u002Fskills\u002Fcometchat-angular-v5-core\u002Freferences\u002Ftheming.md",{"path":109,"resourceType":76,"resourceTypeDesc":77,"sizeBytes":110,"sourceHtmlUrl":111},"references\u002Ftroubleshooting.md",2734,"https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fcometchat\u002Fcometchat-skills\u002Fskills\u002Fcometchat-angular-v5-core\u002Freferences\u002Ftroubleshooting.md",[113,141,164,197,218,232],{"skillNo":114,"name":115,"nameZh":6,"description":116,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":117,"licenseFileUrl":6,"sourceHtmlUrl":118,"categories":119,"keywords":120,"publishedAt":40},"01M716A6ETNB9B1SQ3GXZC75VR","deja-search","deja-vu memory — search the user's past AI coding sessions with the deja CLI. Holds what they already settled and never wrote into the repo (naming rules, banned or already-tried tools, required checks before merge, preferred values, who owns what). Use before your first edit in a task, before you call a change done or ready to merge, before you recommend a tool, library, design or reviewer, before re-debugging an error that may already be solved, when they say 'didn't we fix this before', 'what did we decide about X' or 'I already have that', and before telling them something on this machine does not exist.","Apache-2.0","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fvshulcz\u002Fdeja-vu\u002Fskills\u002Fdeja-search\u002FSKILL.md",[],[121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140],"search","deja search","error","ready","never","memory","re","decide","fix","design","debugging","when","you","done","reviewer","io","change","cli","merge","past",{"skillNo":142,"name":143,"nameZh":6,"description":144,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":117,"licenseFileUrl":6,"sourceHtmlUrl":145,"categories":146,"keywords":147,"publishedAt":40},"01M716A3J2W5SENSE9VGMXB375","deja-reflect","End-of-session reflection and memory curation with deja-vu. Review what was decided, what commands broke and what repaired them, and record durable project rules or decisions with deja remember so the next session starts with them.","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fvshulcz\u002Fdeja-vu\u002Fskills\u002Fdeja-reflect\u002FSKILL.md",[],[148,149,150,151,126,152,30,153,28,154,155,156,157,136,158,159,160,161,162,163],"reflect","deja reflect","brew","remember","project rules","session","reflection","Rules","decisions","review","with","record","github","next","https","node",{"skillNo":165,"name":166,"nameZh":6,"description":167,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":117,"licenseFileUrl":6,"sourceHtmlUrl":168,"categories":169,"keywords":181,"publishedAt":40},"01M715T3RR4BAYSR57HPPTJ0PF","revid","Make, edit, export and post AI videos with Revid (revid.ai) through the Revid MCP server. Use whenever the user wants a short-form or long-form video made (from an idea, a script, a URL, an article, a PDF, a tweet, a product page, their own clips, or a song), wants to find what is going viral on TikTok, YouTube, Instagram or X before making something, wants to edit or re-export an existing Revid project, generate a standalone AI image or clip, make a series episode, or publish and schedule a finished video to connected social accounts. Covers setup (hosted MCP with OAuth, or an API key), the 36 tools, credits, polling and the rules for publishing. Routes to the more specific revid-* skills when one fits.","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Ftmakersas\u002Frevid-skills\u002Fskills\u002Frevid\u002FSKILL.md",[170,175,178],{"categoryNo":171,"categoryName":172,"taxonomyType":173,"taxonomyTypeDesc":174},"01JBSEEDCAT000000000000010","后端与接口","SCENARIO","使用场景",{"categoryNo":176,"categoryName":177,"taxonomyType":173,"taxonomyTypeDesc":174},"01JBSEEDCAT000000000000016","图像与多媒体",{"categoryNo":179,"categoryName":180,"taxonomyType":173,"taxonomyTypeDesc":174},"01JBSEEDCAT000000000000023","Skill与智能体开发",[166,182,183,24,184,185,30,186,127,187,188,189,190,132,191,192,193,194,195,196],"Video","short-form","PDF","viral","tiktok","short","social","MCP","song","URL","image","mcp server","schedule","api","publish",{"skillNo":198,"name":199,"nameZh":6,"description":200,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":117,"licenseFileUrl":6,"sourceHtmlUrl":201,"categories":202,"keywords":203,"publishedAt":40},"01M71569ZM2X3H5RBFK8PVKMK2","review-study","Review a QuestionPunk survey before launch for wording, answer choices, branching, and missing settings. Use for check my survey or review this draft before publishing.","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fquestionpunk\u002Fcodex-plugin\u002Fskills\u002Freview-study\u002FSKILL.md",[],[204,205,157,206,207,208,209,210,211,212,213,214,215,216,217],"study","review study","for","answer","missing","survey","publishing","use","check","draft","settings","launch","my","branching",{"skillNo":219,"name":220,"nameZh":6,"description":221,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":117,"licenseFileUrl":6,"sourceHtmlUrl":222,"categories":223,"keywords":224,"publishedAt":40},"01M71567GV0C35YQBY0DPGR86B","manage-study","Find QuestionPunk studies, check status, publish an explicitly requested draft, or retrieve its participant link. Use for find my survey, publish this study, or how many people responded.","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fquestionpunk\u002Fcodex-plugin\u002Fskills\u002Fmanage-study\u002FSKILL.md",[],[225,204,226,206,209,211,227,212,213,196,228,229,230,231,216],"manage study","manage","people","how","find","link","status",{"skillNo":233,"name":234,"nameZh":6,"description":235,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":117,"licenseFileUrl":6,"sourceHtmlUrl":236,"categories":237,"keywords":238,"publishedAt":40},"01M71565A8TCA01AZQZRGRYMFZ","create-study","Create a saved QuestionPunk survey draft from a research brief or edit specified questions. Use for requests such as make a customer feedback survey or shorten my onboarding study.","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fquestionpunk\u002Fcodex-plugin\u002Fskills\u002Fcreate-study\u002FSKILL.md",[],[239,204,240,241,242,243,206,244,209,245,211,246,247,213,248,249,250,251,252,216],"create study","create","brief","as","feedback","customer feedback","research brief","shorten","saved","research","requests","customer","questions","edit"]