{"id":"fe410a44-daa3-4780-a0dd-062265122bc2","shortId":"W33f4B","kind":"skill","title":"cometchat-angular-core","tagline":"Foundational rules for CometChat Angular UI Kit v4 integration — UIKitSettingsBuilder init pattern, login order, CometChatThemeService, environment config via src/environments/environment.ts, and anti-patterns that break real Angular apps.","description":"## Purpose\n\nThis is the foundational skill for every CometChat Angular UI Kit v4 integration using the shared `uikit-wb-source` internally. It teaches Claude HOW CometChat works in Angular — initialization order, UIKitSettingsBuilder pattern, login, environment config, module imports, and the anti-patterns that break real apps.\n\n**Supported Angular versions: 12, 13, 14, and 15.** Angular 16+ (Signals / standalone-first) is not covered by this skill set.\n\n**Read this skill first, before any placement or patterns skill.**\n\nGround truth: `docs/ui-kit/angular/getting-started`, `docs/ui-kit/angular/methods`, `@cometchat/chat-uikit-angular@4.x` exports, `@cometchat/uikit-shared` exports, `@cometchat/uikit-resources` exports.\n\n---\n\n## 1. The init-login-render order\n\nCometChat Angular has exactly one valid lifecycle:\n\n```\nCometChatUIKit.init(UIKitSettings)  →  CometChatUIKit.login({ uid })  →  render <cometchat-*> components\n```\n\nBreaking this order produces a blank component, a \"CometChat is not initialized\" console error, or a hung login. No exceptions.\n\n### UIKitSettingsBuilder — the Angular init pattern\n\nThe Angular UI Kit uses `UIKitSettingsBuilder` from `@cometchat/uikit-shared` (unlike React Native which uses a flat object). Always use the builder:\n\n```typescript\nimport { UIKitSettingsBuilder } from \"@cometchat/uikit-shared\";\nimport { CometChatUIKit } from \"@cometchat/chat-uikit-angular\";\nimport { environment } from \"../environments/environment\";\n\nconst UIKitSettings = new UIKitSettingsBuilder()\n  .setAppId(environment.cometchat.appId)\n  .setRegion(environment.cometchat.region)\n  .setAuthKey(environment.cometchat.authKey)   // dev only — omit in production\n  .subscribePresenceForAllUsers()\n  .build();\n\nCometChatUIKit.init(UIKitSettings)\n  .then(() => {\n    console.log(\"CometChat initialized\");\n    // Now safe to call login\n  })\n  .catch(console.error);\n```\n\n**⚠️ `UIKitSettingsBuilder` is the Angular pattern.** Unlike React Native (which uses a flat object), Angular's UI Kit requires the builder chain. Passing a plain object to `CometChatUIKit.init()` will fail silently or throw a type error.\n\n### Init must happen once, before the app bootstraps\n\nThe correct place is `app.component.ts`'s `ngOnInit` or a dedicated `AppInitService` called from `APP_INITIALIZER`. Do NOT call `init()` inside a lazy-loaded module or a component that mounts after routing — by then, components that depend on CometChat may already be rendering.\n\n```typescript\n// app.component.ts\nimport { Component, OnInit } from \"@angular/core\";\nimport { UIKitSettingsBuilder } from \"@cometchat/uikit-shared\";\nimport { CometChatUIKit } from \"@cometchat/chat-uikit-angular\";\nimport { environment } from \"../environments/environment\";\n\n@Component({\n  selector: \"app-root\",\n  templateUrl: \"./app.component.html\",\n})\nexport class AppComponent implements OnInit {\n  isReady = false;\n\n  ngOnInit(): void {\n    const settings = new UIKitSettingsBuilder()\n      .setAppId(environment.cometchat.appId)\n      .setRegion(environment.cometchat.region)\n      .setAuthKey(environment.cometchat.authKey)\n      .subscribePresenceForAllUsers()\n      .build();\n\n    CometChatUIKit.init(settings)\n      .then(() => CometChatUIKit.getLoggedinUser())\n      .then((user) => {\n        if (!user) {\n          return CometChatUIKit.login({ uid: \"cometchat-uid-1\" });\n        }\n        return user;\n      })\n      .then(() => {\n        this.isReady = true;\n      })\n      .catch(console.error);\n  }\n}\n```\n\n```html\n<!-- app.component.html -->\n<ng-container *ngIf=\"isReady\">\n  <router-outlet></router-outlet>\n</ng-container>\n```\n\nGate the router outlet (or any CometChat component) on `isReady`. Rendering `<cometchat-*>` before init + login completes produces blank components.\n\n---\n\n## 2. Login\n\n### Development mode\n\n```typescript\nimport { CometChatUIKit } from \"@cometchat/chat-uikit-angular\";\n\nCometChatUIKit.getLoggedinUser().then((user) => {\n  if (!user) {\n    CometChatUIKit.login({ uid: \"cometchat-uid-1\" })\n      .then((loggedInUser) => {\n        console.log(\"Login successful:\", loggedInUser);\n      })\n      .catch(console.error);\n  }\n});\n```\n\nEvery new CometChat app ships 5 pre-seeded test users — `cometchat-uid-1` through `cometchat-uid-5`. Use one for development.\n\n**⚠️ `login()` takes an object `{ uid: \"...\" }`, not a bare string.** Passing `\"cometchat-uid-1\"` directly throws a type error in TypeScript and silently fails in JavaScript.\n\n### Getting the current logged-in user\n\nTwo getters exist for different contexts:\n\n```typescript\n// Async — use inside the init/login flow or APP_INITIALIZER\nconst user = await CometChatUIKit.getLoggedinUser();  // note lowercase 'i' in 'in'\nconst myUid = user?.getUid();\n\n// Sync — use in guards, components, and anywhere after login completes\nimport { CometChatUIKitLoginListener } from \"@cometchat/chat-uikit-angular\";\nconst user = CometChatUIKitLoginListener.getLoggedInUser();  // note capital 'I' in 'In'\nconst myUid = user?.getUid();\n```\n\n**Default to the sync version** in components and route guards — by the time they run, login is already complete. Use the async version only inside the init/login flow itself.\n\n**Never hardcode a UID** to identify the logged-in user in app logic. Always use one of these getters — in production the UID comes from your auth system, not a test string.\n\n### Production mode\n\nUse `CometChatUIKit.login({ authToken: \"...\" })` with a token from your backend. The backend generates the token with the CometChat REST API using the server-only **REST API Key**. See `cometchat-angular-production` for the server-side token endpoint patterns.\n\n### Logout\n\n```typescript\nCometChatUIKit.logout().then(() => {\n  // Navigate to login page\n});\n```\n\n---\n\n## 3. Module setup (mandatory)\n\nAngular requires explicit module imports. Every CometChat component must be imported in the module where it's used.\n\n### AppModule setup\n\n```typescript\n// app.module.ts\nimport { CUSTOM_ELEMENTS_SCHEMA, NgModule } from \"@angular/core\";\nimport { BrowserModule } from \"@angular/platform-browser\";\nimport { BrowserAnimationsModule } from \"@angular/platform-browser/animations\";\nimport {\n  CometChatConversationsWithMessages,\n  CometChatConversations,\n  CometChatMessages,\n  CometChatMessageHeader,\n  CometChatMessageList,\n  CometChatMessageComposer,\n  CometChatUsers,\n  CometChatGroups,\n} from \"@cometchat/chat-uikit-angular\";\nimport { AppComponent } from \"./app.component\";\n\n@NgModule({\n  imports: [\n    BrowserModule,\n    BrowserAnimationsModule,\n    // Import only the CometChat components you use\n    CometChatConversationsWithMessages,\n    CometChatConversations,\n    CometChatMessages,\n    CometChatMessageHeader,\n    CometChatMessageList,\n    CometChatMessageComposer,\n    CometChatUsers,\n    CometChatGroups,\n  ],\n  declarations: [AppComponent],\n  providers: [],\n  bootstrap: [AppComponent],\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],  // Required for web components\n})\nexport class AppModule {}\n```\n\n**⚠️ `CUSTOM_ELEMENTS_SCHEMA` is required.** Without it, Angular throws \"Unknown element\" errors for every `<cometchat-*>` tag. Add it to every module that uses CometChat components.\n\n### Standalone component setup (Angular 14+)\n\n```typescript\n// chat.component.ts\nimport { Component } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\nimport { CometChatConversations } from \"@cometchat/chat-uikit-angular\";\nimport { CUSTOM_ELEMENTS_SCHEMA } from \"@angular/core\";\n\n@Component({\n  selector: \"app-chat\",\n  standalone: true,\n  imports: [CommonModule, CometChatConversations],\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n  template: `<cometchat-conversations></cometchat-conversations>`,\n})\nexport class ChatComponent {}\n```\n\n---\n\n## 4. Assets configuration (mandatory)\n\nThe Angular UI Kit ships icon assets that must be linked in `angular.json`. Without this, icons render as broken images.\n\n```json\n// angular.json — inside build.options.assets\n\"assets\": [\n  \"src/favicon.ico\",\n  \"src/assets\",\n  {\n    \"glob\": \"**/*\",\n    \"input\": \"./node_modules/@cometchat/chat-uikit-angular/assets/\",\n    \"output\": \"assets/\"\n  }\n]\n```\n\n**⚠️ Missing assets config = broken icons throughout the UI Kit.** This is the most commonly missed setup step. Always verify `angular.json` before debugging icon issues.\n\n---\n\n## 5. Environment variables\n\nAngular does not use `.env` files or `process.env`. Configuration lives in `src/environments/environment.ts` (TypeScript constant objects).\n\n### Environment file structure\n\n```typescript\n// src/environments/environment.ts  (development)\nexport const environment = {\n  production: false,\n  cometchat: {\n    appId: \"YOUR_APP_ID\",\n    region: \"us\",           // \"us\" | \"eu\" | \"in\"\n    authKey: \"YOUR_AUTH_KEY\",  // dev only — never in production builds\n  },\n};\n```\n\n```typescript\n// src/environments/environment.prod.ts  (production)\nexport const environment = {\n  production: true,\n  cometchat: {\n    appId: \"YOUR_APP_ID\",\n    region: \"us\",\n    // No authKey in production — use server-minted auth tokens\n    tokenEndpoint: \"https://api.yourapp.com/cometchat-token\",\n  },\n};\n```\n\n**⚠️ Never put `REST_API_KEY` in any environment file.** Angular bundles `environment.ts` into the client-side JavaScript. The REST API Key is server-only — it lives in your backend's environment variables, never in the Angular app.\n\n### Using environment values\n\n```typescript\nimport { environment } from \"../environments/environment\";\n\n// In your component or service:\nconst appId = environment.cometchat.appId;\n```\n\nAngular's build system automatically swaps `environment.ts` for `environment.prod.ts` when building with `--configuration production`.\n\n---\n\n## 6. CometChatThemeService\n\nThe Angular UI Kit uses `CometChatThemeService` (injected via Angular's DI) to control the palette. Inject it in your root component's constructor.\n\n```typescript\nimport { Component } from \"@angular/core\";\nimport { CometChatThemeService } from \"@cometchat/chat-uikit-angular\";\n\n@Component({ selector: \"app-root\", templateUrl: \"./app.component.html\" })\nexport class AppComponent {\n  constructor(private themeService: CometChatThemeService) {\n    // Set mode: \"light\" | \"dark\"\n    themeService.theme.palette.setMode(\"light\");\n    // Set primary brand color\n    themeService.theme.palette.setPrimary({ light: \"#6851D6\", dark: \"#6851D6\" });\n  }\n}\n```\n\n`CometChatThemeService` is a singleton provided at the root level — inject it once in `AppComponent` and the theme applies globally. See `cometchat-angular-theming` for the full token reference.\n\n---\n\n## 7. Package installation\n\n```bash\nnpm install @cometchat/chat-uikit-angular\nnpm install @cometchat/uikit-elements @cometchat/uikit-resources @cometchat/uikit-shared\n```\n\nThe UI Kit depends on `@cometchat/chat-sdk-javascript` (installed automatically as a peer dep). Do NOT install `@cometchat/chat-sdk-javascript` separately unless you need a specific version — let the UI Kit manage it.\n\n### Peer dependencies\n\n```bash\n# Required for Angular animations (used by some UI Kit components)\nnpm install @angular/animations\n```\n\nEnsure `BrowserAnimationsModule` is imported in `AppModule` (see § 3).\n\n---\n\n## 8. Anti-patterns\n\n1. **Do NOT call `CometChatUIKit.init()` inside a lazy-loaded module.** Init must complete before any `<cometchat-*>` component renders. Lazy-loaded modules mount after routing, which is too late.\n\n2. **Do NOT use a flat settings object with `CometChatUIKit.init()`.** Angular requires `UIKitSettingsBuilder` from `@cometchat/uikit-shared`. The flat-object pattern is React Native only.\n\n3. **Do NOT omit `CUSTOM_ELEMENTS_SCHEMA` from the module.** Every module that declares a component using `<cometchat-*>` tags needs it.\n\n4. **Do NOT skip the assets config in `angular.json`.** Icons will be broken without it.\n\n5. **Do NOT put `authKey` in `environment.prod.ts`.** Use server-minted auth tokens in production. See `cometchat-angular-production`.\n\n6. **Do NOT render `<cometchat-*>` components before `isReady`.** Gate on the init + login promise resolving. Use `*ngIf=\"isReady\"` on the container.\n\n7. **Do NOT call `login()` with a bare string.** It takes `{ uid: \"...\" }` or `{ authToken: \"...\" }`.\n\n8. **Do NOT import `@cometchat/chat-sdk-javascript` directly** unless you need SDK-level access (e.g., `CometChat.getUser(uid)`). The UI Kit re-exports the SDK's `CometChat` namespace — import from `@cometchat/chat-sdk-javascript` only when you need the raw SDK.\n\n9. **Do NOT forget `BrowserAnimationsModule`** in `AppModule`. Some UI Kit components use Angular animations; missing this module causes runtime errors.\n\n10. **Do NOT bundle `REST_API_KEY` in any Angular file.** Angular bundles everything in `src/` into the client JavaScript. Server-only keys belong on your backend.\n\n---\n\n## 9. i18n, RTL, and accessibility\n\n### i18n (translations)\n\nThe Angular UI Kit ships `CometChatLocalize` for built-in translations (~40 languages). Initialize it once alongside `CometChatUIKit.init()`:\n\n```typescript\nimport { CometChatLocalize } from \"@cometchat/chat-uikit-angular\";\n\n// In AppComponent.ngOnInit, after init resolves:\nCometChatLocalize.init(\"es\"); // \"fr\", \"de\", \"ar\", \"hi\", etc.\n```\n\nTo override specific strings, pass a resources object as the second positional argument:\n\n```typescript\nCometChatLocalize.init(\"en\", {\n  en: {\n    \"type a message\": \"Write your message…\",\n  },\n});\n```\n\n### RTL (right-to-left)\n\nThe UI Kit reads `dir=\"rtl\"` from the document root. Set it in `index.html` or toggle it dynamically:\n\n```html\n<!-- index.html -->\n<html dir=\"rtl\" lang=\"ar\">\n```\n\n```typescript\n// Toggle dynamically:\ndocument.documentElement.setAttribute(\"dir\", isRtl ? \"rtl\" : \"ltr\");\n```\n\nCometChat components flip automatically — no CometChat-specific config needed.\n\n### Accessibility\n\nDefault components ship with `aria-label` on icon-only buttons, `role=\"listbox\"` on lists, and keyboard navigation (`Tab`, `Enter`, `Esc`). When writing custom `ng-template` slot views:\n\n1. **Icon-only buttons** — add `aria-label=\"<verb>\"` (e.g. `aria-label=\"Send message\"`)\n2. **Custom list items** — keep `role=\"option\"` + `aria-selected` on the wrapper\n3. **Color overrides** — verify text contrast ≥ 4.5:1 against background\n\n---\n\n## 10. Docs MCP (recommended, not required)\n\nThe CometChat docs MCP gives runtime access to the most current Angular UI Kit docs. Install:\n\n```bash\nclaude mcp add --transport http cometchat-docs https://www.cometchat.com/docs/mcp\n```\n\nUse the MCP to verify prop names, callback signatures, theme token names, or error message meanings before writing any non-obvious code.\n\n---\n\n## Skill routing reference\n\n| Skill | When to load |\n|---|---|\n| `cometchat-angular-core` | Always — before any integration code |\n| `cometchat-angular-components` | Always — before writing any `<cometchat-*>` HTML |\n| `cometchat-angular-placement` | When integrating — for placement patterns |\n| `cometchat-angular-patterns` | For Angular-specific routing and module wiring |\n| `cometchat-angular-theming` | When customizing colors, dark mode, typography |\n| `cometchat-angular-features` | When adding calls, extensions, AI |\n| `cometchat-angular-customization` | When customizing components (slot views, formatters, builders) |\n| `cometchat-angular-production` | When setting up server-side auth + user management |\n| `cometchat-angular-troubleshooting` | When diagnosing build errors, runtime failures |","tags":["cometchat","angular","core","skills","agent-skills","ai-agent","chat","claude-code","cursor","messaging","nextjs","react"],"capabilities":["skill","source-cometchat","skill-cometchat-angular-core","topic-agent-skills","topic-ai-agent","topic-chat","topic-claude-code","topic-cometchat","topic-cursor","topic-messaging","topic-nextjs","topic-react","topic-react-native","topic-ui-kit"],"categories":["cometchat-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/cometchat/cometchat-skills/cometchat-angular-core","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add cometchat/cometchat-skills","source_repo":"https://github.com/cometchat/cometchat-skills","install_from":"skills.sh"}},"qualityScore":"0.463","qualityRationale":"deterministic score 0.46 from registry signals: · indexed on github topic:agent-skills · 27 github stars · SKILL.md body (15,345 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T19:04:47.944Z","embedding":null,"createdAt":"2026-05-07T13:05:07.249Z","updatedAt":"2026-05-18T19:04:47.944Z","lastSeenAt":"2026-05-18T19:04:47.944Z","tsv":"'/app.component':720 '/app.component.html':344,1072 '/cometchat-token':962 '/docs/mcp':1632 '/environments/environment':202,337,1009 '/node_modules':857 '1':124,380,432,455,478,1193,1561,1596 '10':1395,1599 '12':84 '13':85 '14':86,785 '15':88 '16':90 '2':413,1223,1576 '3':665,1188,1247,1589 '4':117,824,1268 '4.5':1595 '40':1441 '5':446,460,885,1283 '6':1032,1303 '6851d6':1092,1094 '7':1124,1324 '8':1189,1338 '9':1375,1423 'access':1350,1427,1530,1611 'ad':1718 'add':772,1566,1624 'ai':1721 'alongsid':1446 'alreadi':316,570 'alway':186,596,878,1667,1676 'angular':3,9,31,42,62,82,89,132,167,171,236,246,647,669,763,784,829,888,972,1000,1018,1035,1042,1117,1170,1233,1301,1387,1404,1406,1431,1616,1665,1674,1684,1693,1697,1705,1715,1724,1735,1748 'angular-specif':1696 'angular.json':840,849,880,1276 'angular/animations':1180 'angular/common':795 'angular/core':325,697,791,805,1061 'angular/platform-browser':701 'angular/platform-browser/animations':705 'anim':1171,1388 'anti':26,75,1191 'anti-pattern':25,74,1190 'anywher':533 'api':635,642,966,983,1400 'api.yourapp.com':961 'api.yourapp.com/cometchat-token':960 'app':32,80,274,289,341,444,512,594,809,917,945,1001,1069 'app-chat':808 'app-root':340,1068 'app.component.ts':280,320 'app.module.ts':690 'appcompon':347,718,741,744,1075,1108 'appcomponent.ngoninit':1454 'appid':915,943,1016 'appinitservic':286 'appli':1112 'appmodul':687,755,1186,1381 'ar':1462 'argument':1477 'aria':1536,1568,1572,1584 'aria-label':1535,1567,1571 'aria-select':1583 'asset':825,834,852,860,862,1273 'async':505,574 'auth':609,926,957,1294,1743 'authkey':924,950,1287 'authtoken':619,1337 'automat':1022,1143,1523 'await':516 'backend':625,627,993,1422 'background':1598 'bare':472,1331 'bash':1127,1167,1621 'belong':1419 'blank':150,411 'bootstrap':275,743 'brand':1088 'break':29,78,145 'broken':846,864,1280 'browseranimationsmodul':703,724,1182,1379 'browsermodul':699,723 'build':219,365,933,1020,1028,1752 'build.options.assets':851 'builder':189,252,1732 'built':1438 'built-in':1437 'bundl':973,1398,1407 'button':1542,1565 'call':229,287,293,1196,1327,1719 'callback':1640 'capit':545 'catch':231,386,439 'caus':1392 'chain':253 'chat':810 'chat.component.ts':787 'chatcompon':823 'class':346,754,822,1074 'claud':57,1622 'client':978,1413 'client-sid':977 'code':1655,1671 'color':1089,1590,1709 'come':606 'cometchat':2,8,41,59,131,143,153,224,314,378,400,405,430,443,453,458,476,633,646,675,728,770,779,914,942,1116,1209,1264,1300,1307,1363,1520,1526,1606,1628,1664,1673,1680,1683,1692,1704,1714,1723,1734,1747 'cometchat-angular-compon':1672 'cometchat-angular-cor':1,1663 'cometchat-angular-custom':1722 'cometchat-angular-featur':1713 'cometchat-angular-pattern':1691 'cometchat-angular-plac':1682 'cometchat-angular-product':645,1299,1733 'cometchat-angular-them':1115,1703 'cometchat-angular-troubleshoot':1746 'cometchat-doc':1627 'cometchat-specif':1525 'cometchat-uid':377,429,452,457,475 'cometchat.getuser':1352 'cometchat/chat-sdk-javascript':1141,1151,1342,1367 'cometchat/chat-uikit-angular':116,198,333,421,540,716,799,1065,1130,1452 'cometchat/chat-uikit-angular/assets':858 'cometchat/uikit-elements':1133 'cometchat/uikit-resources':122,1134 'cometchat/uikit-shared':120,177,194,329,1135,1237 'cometchatconvers':708,733,797,815 'cometchatconversationswithmessag':707,732 'cometchatgroup':714,739 'cometchatloc':1435,1450 'cometchatlocalize.init':1458,1479 'cometchatmessag':709,734 'cometchatmessagecompos':712,737 'cometchatmessagehead':710,735 'cometchatmessagelist':711,736 'cometchatthemeservic':19,1033,1039,1063,1079,1095 'cometchatuikit':196,331,419 'cometchatuikit.getloggedinuser':369,422,517 'cometchatuikit.init':138,220,259,366,1197,1232,1447 'cometchatuikit.login':140,375,427,618 'cometchatuikit.logout':659 'cometchatuikitloginlisten':538 'cometchatuikitloginlistener.getloggedinuser':543 'cometchatus':713,738 'common':874 'commonmodul':793,814 'complet':409,536,571,1206 'compon':144,151,303,310,322,338,401,412,531,559,676,729,752,780,782,789,806,1012,1054,1059,1066,1177,1210,1262,1308,1385,1521,1532,1675,1728 'config':21,69,863,1274,1528 'configur':826,896,1030 'consol':157 'console.error':232,387,440 'console.log':223,435 'const':203,354,514,523,541,549,910,938,1015 'constant':901 'constructor':1056,1076 'contain':391,1323 'context':503 'contrast':1594 'control':1046 'core':4,1666 'correct':277 'cover':97 'current':493,1615 'custom':692,746,756,801,817,1251,1555,1577,1708,1725,1727 'dark':1083,1093,1710 'de':1461 'debug':882 'declar':740,1260 'dedic':285 'default':553,1531 'dep':1147 'depend':312,1139,1166 'dev':213,928 'develop':415,464,908 'di':1044 'diagnos':1751 'differ':502 'dir':1497,1516 'direct':479,1343 'doc':1600,1607,1619,1629 'docs/ui-kit/angular/getting-started':114 'docs/ui-kit/angular/methods':115 'document':1501 'document.documentelement.setattribute':1515 'dynam':1510,1514 'e.g':1351,1570 'element':693,747,757,766,802,818,1252 'en':1480,1481 'endpoint':655 'ensur':1181 'enter':1551 'env':892 'environ':20,68,200,335,886,903,911,939,970,995,1003,1007 'environment.cometchat.appid':208,359,1017 'environment.cometchat.authkey':212,363 'environment.cometchat.region':210,361 'environment.prod.ts':1026,1289 'environment.ts':974,1024 'error':158,267,483,767,1394,1646,1753 'es':1459 'esc':1552 'etc':1464 'eu':922 'everi':40,441,674,769,775,1257 'everyth':1408 'exact':134 'except':164 'exist':500 'explicit':671 'export':119,121,123,345,753,821,909,937,1073,1359 'extens':1720 'fail':261,488 'failur':1755 'fals':351,913 'featur':1716 'file':893,904,971,1405 'first':94,105 'flat':184,244,1228,1240 'flat-object':1239 'flip':1522 'flow':510,580 'forget':1378 'formatt':1731 'foundat':5,37 'fr':1460 'full':1121 'gate':394,1311 'generat':628 'get':491 'getter':499,601 'getuid':526,552 'give':1609 'glob':855 'global':1113 'ground':112 'guard':530,562 'happen':270 'hardcod':583 'hi':1463 'html':388,1511,1681 'http':1626 'hung':161 'i18n':1424,1428 'icon':833,843,865,883,1277,1540,1563 'icon-on':1539,1562 'id':918,946 'identifi':587 'imag':847 'implement':348 'import':71,191,195,199,321,326,330,334,418,537,673,679,691,698,702,706,717,722,725,788,792,796,800,813,1006,1058,1062,1184,1341,1365,1449 'index.html':1506 'init':15,127,168,268,294,407,1204,1314,1456 'init-login-rend':126 'init/login':509,579 'initi':63,156,225,290,513,1443 'inject':1040,1049,1104 'input':856 'insid':295,507,577,850,1198 'instal':1126,1129,1132,1142,1150,1179,1620 'integr':13,46,1670,1687 'intern':54 'isreadi':350,393,403,1310,1320 'isrtl':1517 'issu':884 'item':1579 'javascript':490,980,1414 'json':848 'keep':1580 'key':643,927,967,984,1401,1418 'keyboard':1548 'kit':11,44,173,249,831,869,1037,1138,1162,1176,1356,1384,1433,1495,1618 'label':1537,1569,1573 'languag':1442 'late':1222 'lazi':298,1201,1213 'lazy-load':297,1200,1212 'left':1492 'let':1159 'level':1103,1349 'lifecycl':137 'light':1082,1085,1091 'link':838 'list':1546,1578 'listbox':1544 'live':897,990 'load':299,1202,1214,1662 'log':495,590 'logged-in':494,589 'loggedinus':434,438 'logic':595 'login':17,67,128,162,230,408,414,436,465,535,568,663,1315,1328 'logout':657 'lowercas':519 'ltr':1519 'manag':1163,1745 'mandatori':668,827 'may':315 'mcp':1601,1608,1623,1635 'mean':1648 'messag':1484,1487,1575,1647 'mint':956,1293 'miss':861,875,1389 'mode':416,616,1081,1711 'modul':70,300,666,672,682,776,1203,1215,1256,1258,1391,1701 'mount':305,1216 'must':269,677,836,1205 'myuid':524,550 'name':1639,1644 'namespac':1364 'nativ':180,240,1245 'navig':661,1549 'need':1155,1266,1346,1371,1529 'never':582,930,963,997 'new':205,356,442 'ng':390,1557 'ng-contain':389 'ng-templat':1556 'ngif':392,1319 'ngmodul':695,721 'ngoninit':282,352 'non':1653 'non-obvi':1652 'note':518,544 'npm':1128,1131,1178 'object':185,245,257,468,902,1230,1241,1472 'obvious':1654 'omit':215,1250 'one':135,462,598 'oninit':323,349 'option':1582 'order':18,64,130,147 'outlet':397 'output':859 'overrid':1466,1591 'packag':1125 'page':664 'palett':1048 'pass':254,474,1469 'pattern':16,27,66,76,110,169,237,656,1192,1242,1690,1694 'peer':1146,1165 'place':278 'placement':108,1685,1689 'plain':256 'posit':1476 'pre':448 'pre-seed':447 'primari':1087 'privat':1077 'process.env':895 'produc':148,410 'product':217,603,615,648,912,932,936,940,952,1031,1297,1302,1736 'promis':1316 'prop':1638 'provid':742,1099 'purpos':33 'put':964,1286 'raw':1373 're':1358 're-export':1357 'react':179,239,1244 'read':102,1496 'real':30,79 'recommend':1602 'refer':1123,1658 'region':919,947 'render':129,142,318,404,844,1211,1306 'requir':250,670,749,760,1168,1234,1604 'resolv':1317,1457 'resourc':1471 'rest':634,641,965,982,1399 'return':374,381 'right':1490 'right-to-left':1489 'role':1543,1581 'root':342,1053,1070,1102,1502 'rout':307,561,1218,1657,1699 'router':396 'rtl':1425,1488,1498,1518 'rule':6 'run':567 'runtim':1393,1610,1754 'safe':227 'schema':694,745,748,758,803,816,819,1253 'sdk':1348,1361,1374 'sdk-level':1347 'second':1475 'see':644,1114,1187,1298 'seed':449 'select':1585 'selector':339,807,1067 'send':1574 'separ':1152 'server':639,652,955,987,1292,1416,1741 'server-mint':954,1291 'server-on':638,986,1415 'server-sid':651,1740 'servic':1014 'set':101,355,367,1080,1086,1229,1503,1738 'setappid':207,358 'setauthkey':211,362 'setregion':209,360 'setup':667,688,783,876 'share':49 'ship':445,832,1434,1533 'side':653,979,1742 'signal':91 'signatur':1641 'silent':262,487 'singleton':1098 'skill':38,100,104,111,1656,1659 'skill-cometchat-angular-core' 'skip':1271 'slot':1559,1729 'sourc':53 'source-cometchat' 'specif':1157,1467,1527,1698 'src':1410 'src/assets':854 'src/environments/environment.prod.ts':935 'src/environments/environment.ts':23,899,907 'src/favicon.ico':853 'standalon':93,781,811 'standalone-first':92 'step':877 'string':473,614,1332,1468 'structur':905 'subscribepresenceforallus':218,364 'success':437 'support':81 'swap':1023 'sync':527,556 'system':610,1021 'tab':1550 'tag':771,1265 'take':466,1334 'teach':56 'templat':820,1558 'templateurl':343,1071 'test':450,613 'text':1593 'theme':1111,1118,1642,1706 'themeservic':1078 'themeservice.theme.palette.setmode':1084 'themeservice.theme.palette.setprimary':1090 'this.isready':384 'throughout':866 'throw':264,480,764 'time':565 'toggl':1508,1513 'token':622,630,654,958,1122,1295,1643 'tokenendpoint':959 'topic-agent-skills' 'topic-ai-agent' 'topic-chat' 'topic-claude-code' 'topic-cometchat' 'topic-cursor' 'topic-messaging' 'topic-nextjs' 'topic-react' 'topic-react-native' 'topic-ui-kit' 'translat':1429,1440 'transport':1625 'troubleshoot':1749 'true':385,812,941 'truth':113 'two':498 'type':266,482,1482 'typescript':190,319,417,485,504,658,689,786,900,906,934,1005,1057,1448,1478,1512 'typographi':1712 'ui':10,43,172,248,830,868,1036,1137,1161,1175,1355,1383,1432,1494,1617 'uid':141,376,379,428,431,454,459,469,477,585,605,1335,1353 'uikit':51 'uikit-wb-sourc':50 'uikitset':139,204,221 'uikitsettingsbuild':14,65,165,175,192,206,233,327,357,1235 'unknown':765 'unless':1153,1344 'unlik':178,238 'us':920,921,948 'use':47,174,182,187,242,461,506,528,572,597,617,636,686,731,778,891,953,1002,1038,1172,1226,1263,1290,1318,1386,1633 'user':371,373,382,424,426,451,497,515,525,542,551,592,1744 'v4':12,45 'valid':136 'valu':1004 'variabl':887,996 'verifi':879,1592,1637 'version':83,557,575,1158 'via':22,1041 'view':1560,1730 'void':353 'wb':52 'web':751 'wire':1702 'without':761,841,1281 'work':60 'wrapper':1588 'write':1485,1554,1650,1678 'www.cometchat.com':1631 'www.cometchat.com/docs/mcp':1630 'x':118","prices":[{"id":"68d0ee88-4424-4948-a5ea-e2409acebb7b","listingId":"fe410a44-daa3-4780-a0dd-062265122bc2","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"cometchat","category":"cometchat-skills","install_from":"skills.sh"},"createdAt":"2026-05-07T13:05:07.249Z"}],"sources":[{"listingId":"fe410a44-daa3-4780-a0dd-062265122bc2","source":"github","sourceId":"cometchat/cometchat-skills/cometchat-angular-core","sourceUrl":"https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-angular-core","isPrimary":false,"firstSeenAt":"2026-05-07T13:05:07.249Z","lastSeenAt":"2026-05-18T19:04:47.944Z"}],"details":{"listingId":"fe410a44-daa3-4780-a0dd-062265122bc2","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"cometchat","slug":"cometchat-angular-core","github":{"repo":"cometchat/cometchat-skills","stars":27,"topics":["agent-skills","ai-agent","chat","claude-code","cometchat","cursor","messaging","nextjs","react","react-native","ui-kit"],"license":null,"html_url":"https://github.com/cometchat/cometchat-skills","pushed_at":"2026-05-18T05:04:24Z","description":"Add CometChat chat to any React, Next.js, React Native, Angular, Android, iOS, or Flutter project through your AI coding agent. Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and 50+ more agents.","skill_md_sha":"ac265b69fbffd68887ca0698c32f3abb7c95cf9f","skill_md_path":"skills/cometchat-angular-core/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-angular-core"},"layout":"multi","source":"github","category":"cometchat-skills","frontmatter":{"name":"cometchat-angular-core","license":"MIT","description":"Foundational rules for CometChat Angular UI Kit v4 integration — UIKitSettingsBuilder init pattern, login order, CometChatThemeService, environment config via src/environments/environment.ts, and anti-patterns that break real Angular apps.","compatibility":"Angular >=12 <=15; @cometchat/chat-uikit-angular ^4; @cometchat/chat-sdk-javascript ^4"},"skills_sh_url":"https://skills.sh/cometchat/cometchat-skills/cometchat-angular-core"},"updatedAt":"2026-05-18T19:04:47.944Z"}}