[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6MF6YHMP9Z8CWKB1NWJDGDS":3,"skill-same:01M6MF6YHMP9Z8CWKB1NWJDGDS":74},{"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},"01M6MF6YHMP9Z8CWKB1NWJDGDS","cometchat-angular-v5-customization",null,"Brand and customize the CometChat Angular UI Kit — CSS variable tokens, light\u002Fdark via ThemeService, localization, date\u002Ftime formats, global config, and swapping component regions with ng-template. Triggers: 'change the chat colours', 'match my brand angular', 'dark mode', 'translate the chat', 'change the date format', 'custom avatar in the list'.","hashgraph-online\u002Fawesome-codex-plugins","hashgraph-online","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F160371962?v=4","01M6CNB6NRJVNNGN14TR01Q6D3","HOL (Hashgraph Online)","01M6JT1HSKKG9V68KQAQGBA7XP",1571,"MIT","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fcometchat\u002Fcometchat-skills\u002Fskills\u002Fcometchat-angular-v5-customization\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39],"cometchat angular v5 customization","cometchat","angular","customization","template","ui","localization","my","dark-mode","list","formats","verified","config","ng","component","change","kit","mode","time","translate","css","2026-11-10 10:12:30",false,"---\nname: cometchat-angular-v5-customization\ndescription: \"Brand and customize the CometChat Angular UI Kit — CSS variable tokens, light\u002Fdark via ThemeService, localization, date\u002Ftime formats, global config, and swapping component regions with ng-template. Triggers: 'change the chat colours', 'match my brand angular', 'dark mode', 'translate the chat', 'change the date format', 'custom avatar in the list'.\"\nlicense: \"MIT\"\ncompatibility: \"@cometchat\u002Fchat-uikit-angular ^5 (5.1.0–5.2.2 verified); Angular 17-21\"\nmetadata:\n  author: \"CometChat\"\n  version: \"1.0.0\"\n  tags: \"cometchat angular customization theming v5 branding dark-mode localization tokens\"\n---\n\n> **Ground truth:** `@cometchat\u002Fchat-uikit-angular@5` (5.1.0–5.2.2 verified). Theme tokens, `ThemeService` and the global config are FETCHED from `{DOCS_BASE}\u002Fui-kit\u002Fangular\u002Fcustomization\u002Ftheming.md`, `\u002Fcustomization\u002Fglobal-config.md`, `\u002Fcustomization\u002Flocalization.md`, `\u002Fcustomization\u002Fdate-time-formatting.md` and `\u002Fmessage-bubble-styling.md` — base + paths in `cometchat-angular-v5-core\u002Freferences\u002Fdocs-map.md`. CSS variable names are version-pinned; never invent a token.\n\n## Companion skills (read first)\n- `cometchat-angular-v5-core` — install and `references\u002Ftheming.md` for the token basics. Assumed.\n- `cometchat-angular-v5-components` — view slots, when the change is structural rather than visual.\n\n## Use this skill when\nChanging how the kit **looks or reads**: colours, fonts, dark mode, language, date formats, or replacing a region's markup.\n\n**Cloning a named app, or mixing kit components with your own UI?** Measure the target's colors, type, spacing and radii into ONE token source, theme the kit from it, and style every custom component from the same tokens so kit and custom parts look like one design; host a kit component in your own dialog\u002Fpanel when only its placement differs. Flow: `cometchat-onboarding` → `references\u002Fclone-mode.md` (Design sync, build levels L0–L6).\n\n## Pick the smallest lever\n| Want | Use | Cost |\n| --- | --- | --- |\n| Different colours \u002F spacing | CSS variables | one stylesheet |\n| Light ↔ dark | `ThemeService` | one line |\n| Different language | `CometChatLocalize` | config |\n| Different date format | per-component `*DateTimeFormat` inputs | one input |\n| Different markup in a region | `*View` slot + `ng-template` | a template |\n| Different behaviour | not customization — see `features` or `components` | — |\n\nReach for the first that works. Replacing a whole region to change a colour throws away selection, presence and receipts.\n\n## CSS variables\nEvery visual is a `--cometchat-*` custom property. Override wherever it cascades — usually `styles.css`.\n```css\n:root {\n  --cometchat-primary-color: #6851D6;\n  --cometchat-border-color-default: #DCDCDC;\n  --cometchat-text-color-primary: #141414;\n}\n```\nScope to part of the app by setting them on a wrapper instead of `:root`. Full token list: `{DOCS_BASE}\u002Fui-kit\u002Fangular\u002Fcustomization\u002Ftheming.md`.\n\nNever target generated class names with descendant selectors — they change between releases. Never use `!important`; if a token is not applying, the kit stylesheet is not registered (`angular.json` → `styles`) or your rule is not in the cascade path.\n\n## Light \u002F dark — ThemeService does it all\n```ts\nimport { Component, inject } from '@angular\u002Fcore';\nimport { ThemeService } from '@cometchat\u002Fchat-uikit-angular';\n\n@Component({ selector: 'app-root', standalone: true, template: '\u003Crouter-outlet \u002F>' })\nexport class AppComponent {\n  constructor() { inject(ThemeService).initFromPreference(); }\n}\n```\nThat single call respects the OS `prefers-color-scheme`, applies `data-theme` to `\u003Chtml>` via the `DOCUMENT` token (SSR-safe), and keeps its own `matchMedia` listener so the UI follows the OS live.\n\n> ⚠️ **It does NOT persist, despite its docstrings.** Verified against shipped 5.1.0: `initFromPreference()` claims to read `localStorage` first and `setTheme()`\u002F`toggleTheme()` claim to persist, but the class never touches `localStorage` — a manual toggle is lost on reload. If the user needs a toggle that survives reload, add persistence **around** the service (`cometchat-angular-v5-core\u002Freferences\u002Ftheming.md`) rather than replacing it; a second `matchMedia` listener will drift from `currentTheme()`.\n\nToggle: `themeService.toggleTheme()` — do not compute the next value yourself. Set a specific mode: `themeService.setTheme('dark')`. Read: `themeService.currentTheme()` — a signal, so it works directly in templates.\n\n> **Divergence from the docs.** `{DOCS_BASE}\u002Fui-kit\u002Fangular\u002Fcustomization\u002Ftheming.md` documents `setTheme()`, `toggleTheme()` and setting `data-theme` by hand, but does **not** mention `initFromPreference()` or following the OS `prefers-color-scheme`. `initFromPreference()` is real and verified against the installed 5.1.0 kit — prefer it over a hand-written `matchMedia` listener. Do not \"correct\" it away because the guide omits it; the omission is a docs gap, not evidence the method is wrong.\n\n> Do **not** hand-roll a `matchMedia('(prefers-color-scheme: dark)')` listener. That is the React recipe; React's kit cannot read the OS. Angular's can, and duplicating it creates state that drifts from `currentTheme()`.\n\n## Localization\n`CometChatLocalize` ships 19 languages. Set the language once at startup; the `TranslatePipe` and `getLocalizedString()` read from it. To override individual strings or add a language, fetch `{DOCS_BASE}\u002Fui-kit\u002Fangular\u002Fcustomization\u002Flocalization.md` — the override shape is version-specific and worth reading rather than guessing.\n\n## Date & time formats\nPer-component inputs, not global CSS: `lastMessageDateTimeFormat` (conversations), `messageSentAtDateTimeFormat` (search), `callInitiatedDateTimeFormat` (call logs), `lastActiveAtDateTimeFormat` (message header). Pipes `CalendarDatePipe`, `MessageDatePipe` and `ConversationDatePipe` are exported if you need the same formatting in your own markup.\n\n## Global config\n`COMETCHAT_GLOBAL_CONFIG` is an injection token for app-wide kit defaults. Prefer it over repeating the same input on every component instance. Details: `{DOCS_BASE}\u002Fui-kit\u002Fangular\u002Fcustomization\u002Fglobal-config.md`.\n\n## Structural changes\nReplacing markup rather than styling it is a **view slot** — `itemView`, `titleView`, `subtitleView`, `leadingView`, `trailingView`, `headerView`, `emptyView`, `errorView`, `loadingView`. See `cometchat-angular-v5-components`. Override the smallest slot that does the job.\n\n### Avatar and sender name on every message (BAKED — verified vs 5.2.2, same code in 5.1.0 and 5.2.0)\nWhat to check and why: `cometchat-onboarding\u002Freferences\u002Fclone-mode.md` → *Message chrome*. This is the Angular how-to.\n**Kit default:** avatar and sender name on every LEFT-aligned (incoming) message, in 1:1 chats AND groups; your own messages sit on the right with neither. The bubble's rule is `alignment === left` with no group check (`shouldShowLeadingView` \u002F `shouldShowHeaderView` in `CometChatMessageBubbleComponent`); call and action rows are centered and never get them.\nWhen the target shows avatars and names (Slack, Discord, Teams), do BOTH steps yourself, without asking. Together they put your avatar and name on every message, own and others', in 1:1 chats and groups:\n1. **Alignment:** `[messageAlignment]=\"align\"` with `align = MessageListAlignment.left` on `\u003Ccometchat-message-list>`. Everything moves left, so your own messages get the avatar and name too. The enum is numeric (`left = 0`, `standard = 1`); the docs' `[messageAlignment]=\"'left'\"` is a strict-template error (TS2322) and would not match at runtime anyway.\n2. **Per-message slots:** register a `leadingView` (avatar) and `headerView` (name) through `MessageBubbleConfigService` (root singleton; `setGlobalViews` covers every message type). A registered slot renders even on right-aligned bubbles, so this also works if the target keeps your own messages on the right, and it is where the target's own avatar size and name style go:\n```ts\nimport { Component, Input, OnDestroy, OnInit, TemplateRef, ViewChild, inject } from '@angular\u002Fcore';\nimport type { BaseMessage, Group, User } from '@cometchat\u002Fchat-sdk-javascript';\nimport { CometChatAvatarComponent, CometChatMessageListComponent, MessageBubbleConfigService, MessageListAlignment } from '@cometchat\u002Fchat-uikit-angular';\n\n@Component({\n  selector: 'app-channel-messages',\n  standalone: true,\n  imports: [CometChatMessageListComponent, CometChatAvatarComponent],\n  template: `\n    \u003Ccometchat-message-list [user]=\"user\" [group]=\"group\" [messageAlignment]=\"align\" \u002F>\n    \u003Cng-template #senderAvatar let-m>\n      \u003Ccometchat-avatar [image]=\"m.getSender()?.getAvatar() ?? ''\" [name]=\"m.getSender()?.getName() ?? ''\" \u002F>\n    \u003C\u002Fng-template>\n    \u003Cng-template #senderName let-m>\u003Cspan class=\"cc-sender-name\">{{ m.getSender()?.getName() }}\u003C\u002Fspan>\u003C\u002Fng-template>\n  `,\n})\nexport class ChannelMessagesComponent implements OnInit, OnDestroy {\n  @Input() user?: User;\n  @Input() group?: Group;\n  readonly align = MessageListAlignment.left;\n  @ViewChild('senderAvatar', { static: true }) senderAvatar!: TemplateRef\u003C{ $implicit: BaseMessage }>;\n  @ViewChild('senderName', { static: true }) senderName!: TemplateRef\u003C{ $implicit: BaseMessage }>;\n  private readonly bubbles = inject(MessageBubbleConfigService);\n  \u002F\u002F static: true -> the templates exist in ngOnInit, before the list renders its first bubble.\n  ngOnInit(): void { this.bubbles.setGlobalViews({ leadingView: this.senderAvatar, headerView: this.senderName }); }\n  \u002F\u002F Root singleton: clear on destroy, or every other message list keeps a dead template.\n  ngOnDestroy(): void { this.bubbles.setGlobalViews({ leadingView: null, headerView: null }); }\n}\n```\n  The slot context is `{ $implicit: message }`. Style `.cc-sender-name` from your token source (e.g. `font: 600 15px var(--cometchat-font-family)`). Multi-attachment batches show the avatar and name once by themselves (the list passes `hideAvatar` \u002F `hideSenderName` to the follow-on bubbles, which also hides your slot). `hideAvatar` on the list, or `hideAvatar` in `COMETCHAT_GLOBAL_CONFIG`, still wins over the slot; check both are unset. Service API: `{DOCS_BASE}\u002Fui-kit\u002Fangular\u002Fcomponents\u002Fcometchat-message-list.md` (MessageBubbleConfigService section).\n- **Once per run** isn't reachable: the slot only receives its own message, not the previous one (L4).\n- **Verified:** names and logic read from the shipped 5.2.2 fesm2022 + `.d.ts` (5.1.0 and 5.2.0 identical); snippet compiles with `ng build` `strictTemplates` + strict TS. Not yet run in a browser: open a 1:1 chat and a group and check your own and others' messages.\n\n## Common pitfalls\n1. **Hand-rolling OS theme detection** — `ThemeService.initFromPreference()` already does it.\n2. **Replacing `itemView` for a colour change** — loses selection, presence and receipts.\n3. **Styling generated class names** — breaks on the next kit release.\n4. **`!important` wars** — the stylesheet is not registered, or the rule is out of cascade.\n5. **Two theme sources** — `ThemeService` plus your own `data-theme` writer; they drift.\n\n## Verify it works\nBrand colours apply in both themes · dark mode survives a reload ONLY if you persisted the choice yourself (the kit does not — see the warning above); without that, a reload falls back to the OS setting · the OS theme is respected on first load · localized strings render · overridden regions keep click, presence and receipts working.\n\n## Explain what you built (REQUIRED close)\nTell the developer what changed, naming the files: what you themed — which tokens changed and whether light\u002Fdark follows the OS. Flag anything dev-only as dev-only, and say what you did **not** touch — this is additive.\n\n**Then offer these THREE options as a SELECTABLE choice and WAIT for the pick — never auto-continue (`RULES.md` §19):**\n1. **Add another feature** → a feature from `features.angular-v5.json`, or deeper structural customization via view slots. **Never offer an `auto` entry** (reactions, mentions, receipts, typing, media) — those are core in v5 and already on.\n2. **Add a feature** (search, calls, polls, AI) → `cometchat-angular-v5-features`.\n3. **Test it manually** → do nothing further; hand back so the user runs it.\n","> **Ground truth:** `@cometchat\u002Fchat-uikit-angular@5` (5.1.0–5.2.2 verified). Theme tokens, `ThemeService` and the global config are FETCHED from `{DOCS_BASE}\u002Fui-kit\u002Fangular\u002Fcustomization\u002Ftheming.md`, `\u002Fcustomization\u002Fglobal-config.md`, `\u002Fcustomization\u002Flocalization.md`, `\u002Fcustomization\u002Fdate-time-formatting.md` and `\u002Fmessage-bubble-styling.md` — base + paths in `cometchat-angular-v5-core\u002Freferences\u002Fdocs-map.md`. CSS variable names are version-pinned; never invent a token.\n\n## Companion skills (read first)\n- `cometchat-angular-v5-core` — install and `references\u002Ftheming.md` for the token basics. Assumed.\n- `cometchat-angular-v5-components` — view slots, when the change is structural rather than visual.\n\n## Use this skill when\nChanging how the kit **looks or reads**: colours, fonts, dark mode, language, date formats, or replacing a region's markup.\n\n**Cloning a named app, or mixing kit components with your own UI?** Measure the target's colors, type, spacing and radii into ONE token source, theme the kit from it, and style every custom component from the same tokens so kit and custom parts look like one design; host a kit component in your own dialog\u002Fpanel when only its placement differs. Flow: `cometchat-onboarding` → `references\u002Fclone-mode.md` (Design sync, build levels L0–L6).\n\n## Pick the smallest lever\n| Want | Use | Cost |\n| --- | --- | --- |\n| Different colours \u002F spacing | CSS variables | one stylesheet |\n| Light ↔ dark | `ThemeService` | one line |\n| Different language | `CometChatLocalize` | config |\n| Different date format | per-component `*DateTimeFormat` inputs | one input |\n| Different markup in a region | `*View` slot + `ng-template` | a template |\n| Different behaviour | not customization — see `features` or `components` | — |\n\nReach for the first that works. Replacing a whole region to change a colour throws away selection, presence and receipts.\n\n## CSS variables\nEvery visual is a `--cometchat-*` custom property. Override wherever it cascades — usually `styles.css`.\n```css\n:root {\n  --cometchat-primary-color: #6851D6;\n  --cometchat-border-color-default: #DCDCDC;\n  --cometchat-text-color-primary: #141414;\n}\n```\nScope to part of the app by setting them on a wrapper instead of `:root`. Full token list: `{DOCS_BASE}\u002Fui-kit\u002Fangular\u002Fcustomization\u002Ftheming.md`.\n\nNever target generated class names with descendant selectors — they change between releases. Never use `!important`; if a token is not applying, the kit stylesheet is not registered (`angular.json` → `styles`) or your rule is not in the cascade path.\n\n## Light \u002F dark — ThemeService does it all\n```ts\nimport { Component, inject } from '@angular\u002Fcore';\nimport { ThemeService } from '@cometchat\u002Fchat-uikit-angular';\n\n@Component({ selector: 'app-root', standalone: true, template: '\u003Crouter-outlet \u002F>' })\nexport class AppComponent {\n  constructor() { inject(ThemeService).initFromPreference(); }\n}\n```\nThat single call respects the OS `prefers-color-scheme`, applies `data-theme` to `\u003Chtml>` via the `DOCUMENT` token (SSR-safe), and keeps its own `matchMedia` listener so the UI follows the OS live.\n\n> ⚠️ **It does NOT persist, despite its docstrings.** Verified against shipped 5.1.0: `initFromPreference()` claims to read `localStorage` first and `setTheme()`\u002F`toggleTheme()` claim to persist, but the class never touches `localStorage` — a manual toggle is lost on reload. If the user needs a toggle that survives reload, add persistence **around** the service (`cometchat-angular-v5-core\u002Freferences\u002Ftheming.md`) rather than replacing it; a second `matchMedia` listener will drift from `currentTheme()`.\n\nToggle: `themeService.toggleTheme()` — do not compute the next value yourself. Set a specific mode: `themeService.setTheme('dark')`. Read: `themeService.currentTheme()` — a signal, so it works directly in templates.\n\n> **Divergence from the docs.** `{DOCS_BASE}\u002Fui-kit\u002Fangular\u002Fcustomization\u002Ftheming.md` documents `setTheme()`, `toggleTheme()` and setting `data-theme` by hand, but does **not** mention `initFromPreference()` or following the OS `prefers-color-scheme`. `initFromPreference()` is real and verified against the installed 5.1.0 kit — prefer it over a hand-written `matchMedia` listener. Do not \"correct\" it away because the guide omits it; the omission is a docs gap, not evidence the method is wrong.\n\n> Do **not** hand-roll a `matchMedia('(prefers-color-scheme: dark)')` listener. That is the React recipe; React's kit cannot read the OS. Angular's can, and duplicating it creates state that drifts from `currentTheme()`.\n\n## Localization\n`CometChatLocalize` ships 19 languages. Set the language once at startup; the `TranslatePipe` and `getLocalizedString()` read from it. To override individual strings or add a language, fetch `{DOCS_BASE}\u002Fui-kit\u002Fangular\u002Fcustomization\u002Flocalization.md` — the override shape is version-specific and worth reading rather than guessing.\n\n## Date & time formats\nPer-component inputs, not global CSS: `lastMessageDateTimeFormat` (conversations), `messageSentAtDateTimeFormat` (search), `callInitiatedDateTimeFormat` (call logs), `lastActiveAtDateTimeFormat` (message header). Pipes `CalendarDatePipe`, `MessageDatePipe` and `ConversationDatePipe` are exported if you need the same formatting in your own markup.\n\n## Global config\n`COMETCHAT_GLOBAL_CONFIG` is an injection token for app-wide kit defaults. Prefer it over repeating the same input on every component instance. Details: `{DOCS_BASE}\u002Fui-kit\u002Fangular\u002Fcustomization\u002Fglobal-config.md`.\n\n## Structural changes\nReplacing markup rather than styling it is a **view slot** — `itemView`, `titleView`, `subtitleView`, `leadingView`, `trailingView`, `headerView`, `emptyView`, `errorView`, `loadingView`. See `cometchat-angular-v5-components`. Override the smallest slot that does the job.\n\n### Avatar and sender name on every message (BAKED — verified vs 5.2.2, same code in 5.1.0 and 5.2.0)\nWhat to check and why: `cometchat-onboarding\u002Freferences\u002Fclone-mode.md` → *Message chrome*. This is the Angular how-to.\n**Kit default:** avatar and sender name on every LEFT-aligned (incoming) message, in 1:1 chats AND groups; your own messages sit on the right with neither. The bubble's rule is `alignment === left` with no group check (`shouldShowLeadingView` \u002F `shouldShowHeaderView` in `CometChatMessageBubbleComponent`); call and action rows are centered and never get them.\nWhen the target shows avatars and names (Slack, Discord, Teams), do BOTH steps yourself, without asking. Together they put your avatar and name on every message, own and others', in 1:1 chats and groups:\n1. **Alignment:** `[messageAlignment]=\"align\"` with `align = MessageListAlignment.left` on `\u003Ccometchat-message-list>`. Everything moves left, so your own messages get the avatar and name too. The enum is numeric (`left = 0`, `standard = 1`); the docs' `[messageAlignment]=\"'left'\"` is a strict-template error (TS2322) and would not match at runtime anyway.\n2. **Per-message slots:** register a `leadingView` (avatar) and `headerView` (name) through `MessageBubbleConfigService` (root singleton; `setGlobalViews` covers every message type). A registered slot renders even on right-aligned bubbles, so this also works if the target keeps your own messages on the right, and it is where the target's own avatar size and name style go:\n```ts\nimport { Component, Input, OnDestroy, OnInit, TemplateRef, ViewChild, inject } from '@angular\u002Fcore';\nimport type { BaseMessage, Group, User } from '@cometchat\u002Fchat-sdk-javascript';\nimport { CometChatAvatarComponent, CometChatMessageListComponent, MessageBubbleConfigService, MessageListAlignment } from '@cometchat\u002Fchat-uikit-angular';\n\n@Component({\n  selector: 'app-channel-messages',\n  standalone: true,\n  imports: [CometChatMessageListComponent, CometChatAvatarComponent],\n  template: `\n    \u003Ccometchat-message-list [user]=\"user\" [group]=\"group\" [messageAlignment]=\"align\" \u002F>\n    \u003Cng-template #senderAvatar let-m>\n      \u003Ccometchat-avatar [image]=\"m.getSender()?.getAvatar() ?? ''\" [name]=\"m.getSender()?.getName() ?? ''\" \u002F>\n    \u003C\u002Fng-template>\n    \u003Cng-template #senderName let-m>\u003Cspan class=\"cc-sender-name\">{{ m.getSender()?.getName() }}\u003C\u002Fspan>\u003C\u002Fng-template>\n  `,\n})\nexport class ChannelMessagesComponent implements OnInit, OnDestroy {\n  @Input() user?: User;\n  @Input() group?: Group;\n  readonly align = MessageListAlignment.left;\n  @ViewChild('senderAvatar', { static: true }) senderAvatar!: TemplateRef\u003C{ $implicit: BaseMessage }>;\n  @ViewChild('senderName', { static: true }) senderName!: TemplateRef\u003C{ $implicit: BaseMessage }>;\n  private readonly bubbles = inject(MessageBubbleConfigService);\n  \u002F\u002F static: true -> the templates exist in ngOnInit, before the list renders its first bubble.\n  ngOnInit(): void { this.bubbles.setGlobalViews({ leadingView: this.senderAvatar, headerView: this.senderName }); }\n  \u002F\u002F Root singleton: clear on destroy, or every other message list keeps a dead template.\n  ngOnDestroy(): void { this.bubbles.setGlobalViews({ leadingView: null, headerView: null }); }\n}\n```\n  The slot context is `{ $implicit: message }`. Style `.cc-sender-name` from your token source (e.g. `font: 600 15px var(--cometchat-font-family)`). Multi-attachment batches show the avatar and name once by themselves (the list passes `hideAvatar` \u002F `hideSenderName` to the follow-on bubbles, which also hides your slot). `hideAvatar` on the list, or `hideAvatar` in `COMETCHAT_GLOBAL_CONFIG`, still wins over the slot; check both are unset. Service API: `{DOCS_BASE}\u002Fui-kit\u002Fangular\u002Fcomponents\u002Fcometchat-message-list.md` (MessageBubbleConfigService section).\n- **Once per run** isn't reachable: the slot only receives its own message, not the previous one (L4).\n- **Verified:** names and logic read from the shipped 5.2.2 fesm2022 + `.d.ts` (5.1.0 and 5.2.0 identical); snippet compiles with `ng build` `strictTemplates` + strict TS. Not yet run in a browser: open a 1:1 chat and a group and check your own and others' messages.\n\n## Common pitfalls\n1. **Hand-rolling OS theme detection** — `ThemeService.initFromPreference()` already does it.\n2. **Replacing `itemView` for a colour change** — loses selection, presence and receipts.\n3. **Styling generated class names** — breaks on the next kit release.\n4. **`!important` wars** — the stylesheet is not registered, or the rule is out of cascade.\n5. **Two theme sources** — `ThemeService` plus your own `data-theme` writer; they drift.\n\n## Verify it works\nBrand colours apply in both themes · dark mode survives a reload ONLY if you persisted the choice yourself (the kit does not — see the warning above); without that, a reload falls back to the OS setting · the OS theme is respected on first load · localized strings render · overridden regions keep click, presence and receipts working.\n\n## Explain what you built (REQUIRED close)\nTell the developer what changed, naming the files: what you themed — which tokens changed and whether light\u002Fdark follows the OS. Flag anything dev-only as dev-only, and say what you did **not** touch — this is additive.\n\n**Then offer these THREE options as a SELECTABLE choice and WAIT for the pick — never auto-continue (`RULES.md` §19):**\n1. **Add another feature** → a feature from `features.angular-v5.json`, or deeper structural customization via view slots. **Never offer an `auto` entry** (reactions, mentions, receipts, typing, media) — those are core in v5 and already on.\n2. **Add a feature** (search, calls, polls, AI) → `cometchat-angular-v5-features`.\n3. **Test it manually** → do nothing further; hand back so the user runs it.\n",{"name":5,"license":15,"metadata":45,"description":7,"compatibility":49},{"tags":46,"author":47,"version":48},"cometchat angular customization theming v5 branding dark-mode localization tokens","CometChat","1.0.0","@cometchat\u002Fchat-uikit-angular ^5 (5.1.0–5.2.2 verified); Angular 17-21","main","cebc3dce495d7eb80d3b1d5841f877a4a92e162d","plugins\u002Fcometchat\u002Fcometchat-skills\u002Fskills\u002Fcometchat-angular-v5-customization",490,"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-14 02:12:02",{"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-customization",{"tool":66,"command":67},"bunx","bunx skills add hashgraph-online\u002Fawesome-codex-plugins --skill cometchat-angular-v5-customization",{"tool":69,"command":70},"pnpm","pnpm dlx skills add hashgraph-online\u002Fawesome-codex-plugins --skill cometchat-angular-v5-customization","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fcometchat\u002Fcometchat-skills\u002Fskills\u002Fcometchat-angular-v5-customization\u002FSKILL.md",true,[],[75,84,91,98,124,149],{"skillNo":76,"name":77,"nameZh":6,"description":78,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":79,"licenseFileUrl":6,"sourceHtmlUrl":80,"categories":81,"keywords":82,"publishedAt":83},"01M746ZWACVKMZ1BJXJZHYJSSX","migrate-to-e2e","Moves an existing Playwright, Cypress, Selenium, Appium, Detox, Maestro, or TesterArmy suite to e2e one slice at a time, with the old suite running beside the new one until each ported test is proven. Keeps a MIGRATION.md progress file so any later session resumes where the last stopped. Optionally plants a defect to show both suites catch it. Use for \u002Fmigrate-to-e2e, \"migrate our tests to e2e\", \"port these Maestro flows\", \"move our TesterArmy tests\", or when a project has an e2e config and an older suite still running.","Apache-2.0","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Ftester-army\u002Fe2e\u002Fskills\u002Fmigrate-to-e2e\u002FSKILL.md",[],[],"2026-11-11 15:11:14",{"skillNo":85,"name":86,"nameZh":6,"description":87,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":79,"licenseFileUrl":6,"sourceHtmlUrl":88,"categories":89,"keywords":90,"publishedAt":83},"01M746ZPTAX1Q0FBKAB1CYND7E","e2e","Writes, runs, and debugs end-to-end tests for web and mobile apps with e2e, the agentic test runner, which mixes agent.act goals with exact locator assertions on a Playwright browser or an iOS or Android device. Also drives a project's running app live over the e2e MCP server to look at a screen, check a UI change, take a screenshot or record a video, and try a locator; and runs bug bashes, parallel e2e explore runs with each bug proven by a repro test. Use when a project depends on e2e or has an e2e.config.ts, when asked for end-to-end, browser, mobile, or agentic UI tests, to check a change in the running app, to QA or bug bash an app or branch, or when an e2e run fails.","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Ftester-army\u002Fe2e\u002Fskills\u002Fe2e\u002FSKILL.md",[],[],{"skillNo":92,"name":93,"nameZh":6,"description":94,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":79,"licenseFileUrl":6,"sourceHtmlUrl":95,"categories":96,"keywords":97,"publishedAt":83},"01M746ZJN784HVHMDP9MQGCSGG","create-verification-skill","Generate a project-local verify-\u003Capp> skill on top of e2e, so any coding agent can launch the app, check it is worth driving, exercise a feature the way a user does, keep evidence, and bug bash it. Writes the skill, a feature map with one explore charter per feature, and proves it once. Use for \u002Fcreate-verification-skill, \"make a verification skill for this repo\", or when a project has no scripted way to prove UI behavior.","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Ftester-army\u002Fe2e\u002Fskills\u002Fcreate-verification-skill\u002FSKILL.md",[],[],{"skillNo":99,"name":100,"nameZh":6,"description":101,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":79,"licenseFileUrl":6,"sourceHtmlUrl":102,"categories":103,"keywords":104,"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.","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fvshulcz\u002Fdeja-vu\u002Fskills\u002Fdeja-search\u002FSKILL.md",[],[105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,34,121,122,123],"search","deja search","never","error","ready","memory","re","decide","fix","design","debugging","when","you","done","reviewer","io","cli","merge","past",{"skillNo":125,"name":126,"nameZh":6,"description":127,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":79,"licenseFileUrl":6,"sourceHtmlUrl":128,"categories":129,"keywords":130,"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",[],[131,132,133,120,134,135,136,137,138,139,140,141,142,143,110,144,145,146,147,148],"deja reflect","reflect","review","with","record","github","next","https","node","Rules","decisions","brew","remember","project rules","project","session","end","reflection",{"skillNo":150,"name":151,"nameZh":6,"description":152,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":79,"licenseFileUrl":6,"sourceHtmlUrl":153,"categories":154,"keywords":166,"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",[155,160,163],{"categoryNo":156,"categoryName":157,"taxonomyType":158,"taxonomyTypeDesc":159},"01JBSEEDCAT000000000000016","图像与多媒体","SCENARIO","使用场景",{"categoryNo":161,"categoryName":162,"taxonomyType":158,"taxonomyTypeDesc":159},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":164,"categoryName":165,"taxonomyType":158,"taxonomyTypeDesc":159},"01JBSEEDCAT000000000000010","后端与接口",[151,167,168,169,170,171,172,145,173,111,174,175,176,177,116,178,179,180,181,182],"URL","Video","short-form","standalone","PDF","viral","tiktok","short","social","MCP","song","image","mcp server","schedule","api","publish"]