Agent skill

Cometchat Angular V5 Patterns

by cometchat in cometchat/cometchat-skills

Angular project-shape glue for CometChat — Angular CLI vs Nx, standalone vs NgModule, environment file wiring, SSR/Angular Universal, lazy routes, and RxJS/signals state patterns.

MITAuto-check passedDevelopment

Install Cometchat Angular V5 Patterns

skills CLI
$ npx skills add cometchat/cometchat-skills --skill cometchat-angular-v5-patterns -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install cometchat/cometchat-skills cometchat-angular-v5-patterns --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/cometchat/cometchat-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/cometchat-angular-v5-patterns .claude/skills/cometchat-angular-v5-patterns && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
cometchat-angular-v5-patterns
GitHub stars
129
Token cost
~1.6k tokens
SKILL.md length
622 words
Files
1
Skills in repo
97
Repo updated
First seen
Licence
MIT

At a glance

Angular project-shape glue for CometChat — Angular CLI vs Nx, standalone vs NgModule, environment file wiring, SSR/Angular Universal, lazy routes, and RxJS/signals state patterns.

  • Works in 5 steps: Kit components in declarations → Angular… → Unguarded init under SSR → window is not… → Init inside a lazy chunk → runs late, or… → …
  • Tasks that involve Monorepo tooling
  • SKILL.md covers Companion skills (read first), Use this skill when, Detect the shape first and NgModule instead of standalone, plus 6 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Cometchat Angular V5 Patterns is an agent skill from cometchat/cometchat-skills. Angular project-shape glue for CometChat — Angular CLI vs Nx, standalone vs NgModule, environment file wiring, SSR/Angular Universal, lazy routes, and RxJS/signals state patterns. Triggers: 'add cometchat to my nx workspace', 'ngmodule not standalone', 'angular universal ssr', 'lazy load the chat route', 'window is not defined'.

Its SKILL.md is about 1.6k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts. Compatibility notes: @cometchat/chat-uikit-angular ^5 (5.1.0–5.2.0 verified); Angular 17-21; CLI or Nx

It sits in Development, covering Monorepo tooling. It works with Angular, CometChat, RxJS and Nx. The repository describes itself as: Add CometChat chat & messaging and voice & video calls to any React, Next.js, React Native, Angular, Android, iOS, or Flutter project through your AI coding agent. Works with… The licence is MIT.

When your agent uses it

  • Tasks that involve Monorepo tooling

Example prompts

  • “add cometchat to my nx workspace”
  • “ngmodule not standalone”
  • “angular universal ssr”
  • “/cometchat-angular-v5-patterns”

Requirements

  • Compatibility (from SKILL.md): @cometchat/chat-uikit-angular ^5 (5.1.0–5.2.0 verified); Angular 17-21; CLI or Nx

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. Kit components in declarations → Angular error; they belong in imports.
  2. Unguarded init under SSR → window is not defined at build or first request.
  3. Init inside a lazy chunk → runs late, or twice.
  4. Nx: env/styles edited at the workspace root → silently no effect; they belong to the app project.
  5. Signals and observables for the same value → two update paths, drifting UI.

What it can do on your machine

Read from SKILL.md and the folder at commit 911b108. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

  • Compatibility

    @cometchat/chat-uikit-angular ^5 (5.1.0–5.2.0 verified); Angular 17-21; CLI or Nx

    From compatibility in the SKILL.md frontmatter.

Context cost

Cometchat Angular V5 Patterns loads about 1.6k tokens when it runs. Until then it costs about 90 tokens; SKILL.md has 622 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~90
When it runs · the whole SKILL.md, loaded when a task matches
~1.6k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from cometchat/cometchat-skills at commit 911b108, republished under its MIT licence (© cometchat). 622 words, ~1,620 tokens.

Download SKILL.mdSave it as .claude/skills/cometchat-angular-v5-patterns/SKILL.md (or your agent's skills folder).
name
cometchat-angular-v5-patterns
description
Angular project-shape glue for CometChat — Angular CLI vs Nx, standalone vs NgModule, environment file wiring, SSR/Angular Universal, lazy routes, and RxJS/signals state patterns. Triggers: 'add cometchat to my nx workspace', 'ngmodule not standalone', 'angular universal ssr', 'lazy load the chat route', 'window is not defined'.
compatibility
@cometchat/chat-uikit-angular ^5 (5.1.0–5.2.0 verified); Angular 17-21; CLI or Nx
license
MIT
metadata.author
CometChat
metadata.version
1.0.0
metadata.tags
cometchat angular patterns v5 nx ssr universal ngmodule standalone lazy rxjs signals

Ground truth: this skill is Angular PROJECT-SHAPE glue — CLI vs Nx, standalone vs NgModule, environment.ts, SSR, lazy routes. CometChat API surface belongs to cometchat-angular-v5-core; fetch any symbol via cometchat-angular-v5-core/references/docs-map.md. Where the Angular UI Kit docs genuinely do not cover a shape (SSR / Angular Universal), this file says so explicitly and marks the guidance as the pack's own — absence from the guide is never silently presented as documented.

Companion skills (read first)

  • cometchat-angular-v5-core — install, credentials, init→login→render. Assumed.
  • cometchat-angular-v5-placement — routing a chat page.

Use this skill when

The blocker is the project shape, not CometChat: a monorepo, NgModules, SSR, or where config lives.

Detect the shape first

SignalShapeDeltas
nx.json presentNx workspaceenv files, project-level styles, path aliases
angular.json + src/main.tsAngular CLIthe default; core's recipe applies as-is
app.module.ts presentNgModule appcomponents go in imports: of the module
server.ts / @angular/ssrSSR / Universalbrowser-only guards, see below

NgModule instead of standalone

The kit's components are standalone, which means an NgModule app imports them into the module's imports array — the same array, a different file:

ts
// app.module.ts
import { NgModule } from '@angular/core';
import { CometChatConversationsComponent, CometChatMessageListComponent } from '@cometchat/chat-uikit-angular';
import { ChatComponent } from './chat/chat.component';   // YOUR (non-standalone) component

@NgModule({
  declarations: [ChatComponent],
  imports: [CometChatConversationsComponent, CometChatMessageListComponent],
})
export class AppModule {}

Do not add them to declarations — they are not yours to declare, and Angular will error. Init moves from main.ts into an APP_INITIALIZER provider on the module.

Nx workspaces

Three things move:

  • Environment files live under the app project, e.g. apps/<app>/src/environments/environment.ts. fileReplacements go in that project's project.json, not a root angular.json.
  • The kit stylesheet is registered in the app project's build styles array with a workspace-root-relative path: node_modules/@cometchat/chat-uikit-angular/styles/css-variables.css.
  • Shared wrapper libs may re-export the kit's components; a lib that re-exports must also list them in its own imports, or consumers get the silent no-render.

Nx does not change the CometChat API at all — only where config lives.

SSR / Angular Universal

The kit is a browser client. The SDK touches window, localStorage and WebSockets, none of which exist on the server.

ts
import { Component, inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { CometChatUIKit } from '@cometchat/chat-uikit-angular';
import { environment } from '../environments/environment';

@Component({ selector: 'app-root', standalone: true, template: '<router-outlet />' })
export class AppComponent {
  constructor() {
    if (isPlatformBrowser(inject(PLATFORM_ID))) {
      const { appId, region, authKey } = environment.cometchat;
      // init only in the browser — on the server this throws "window is not defined"
      CometChatUIKit.initFromSettings({
        appId, region,
        credentials: { authKey },
        chatSDK: { presenceSubscription: { type: 'ALL_USERS' } },
      });
    }
  }
}

Rules:

  • Guard every init/login call with isPlatformBrowser.
  • Render chat components client-side only (@defer on hydration, or an *ngIf on a browser flag). Server-rendering them produces markup that immediately mismatches.
  • ThemeService is already SSR-safe — it writes data-theme through the DOCUMENT token rather than touching document directly.
  • Do not attempt to prerender a chat route; there is nothing meaningful to prerender.

Not in the docs. The Angular UI Kit docs do not cover SSR / Angular Universal. The guards above are derived from what the SDK touches (window, localStorage, WebSockets) and are the pack's own guidance — absence from the guide is not a signal that they are unnecessary.

Show full SKILL.md (213 more words)Show less

Lazy-loading the chat route

ts
{ path: 'chat', loadComponent: () => import('./chat/chat.component').then(m => m.ChatComponent) }

Lazy loading the route is fine and recommended — the kit is large. Init still happens once at bootstrap, not in the lazy chunk, or the first navigation pays for it and a second navigation re-runs it.

State — signals or RxJS, one of them

ChatStateService exposes both (activeUser signal, activeUser$ observable). Pick one style per component and stay in it; mixing produces two update paths for the same value.

  • Signals in templates: no subscription, no teardown, no async pipe.
  • Observables when composing with other streams: always takeUntil(destroy$) in ngOnDestroy.

Never mirror either into your own field — see placement's "two sources of truth" pitfall.

Common pitfalls

  1. Kit components in declarations → Angular error; they belong in imports.
  2. Unguarded init under SSR → window is not defined at build or first request.
  3. Init inside a lazy chunk → runs late, or twice.
  4. Nx: env/styles edited at the workspace root → silently no effect; they belong to the app project.
  5. Signals and observables for the same value → two update paths, drifting UI.

Verify it works

ng build (and ng build --ssr where applicable) passes · chat renders in the browser · no window is not defined on the server · navigating to the lazy route once initialises once · config resolves in every configuration you build.

© cometchat, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in skills/cometchat-angular-v5-patterns of cometchat/cometchat-skills.

Open the folder on GitHubat commit 911b108

Compare with similar skills

Cometchat Angular V5 Patterns next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Cometchat Angular V5 Patterns compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Cometchat Angular V5 Patterns this skillcometchat/cometchat-skills129—~1.6kAutomated safety check: PassMIT
Zardzard-ui/zardui1.2k—~3.8kAutomated safety check: PassMIT
Update Cnw Templatesnrwl/nx29k—~1.9kAutomated safety check: NotesMIT
Angular ToolingKilo-Org/kilo-marketplace189—~1.7kAutomated safety check: PassMIT
Angular Developerradix-ng/primitives274—~1.2kAutomated safety check: PassMIT
Nx Importnrwl/nx29k5 repos~3.5kAutomated safety check: PassMIT

Similar skills

  • Zard

    zard-ui/zardui

    Manages zard/ui components and projects — adding, composing, styling, and debugging Angular UI built on TailwindCSS v4.

    1.2k GitHub stars~3.8k tokensUpdated today
    DevelopmentAuto-check passed
  • Update the CNW (create-nx-workspace) template repos (nrwl/empty-template, nrwl/react-template, etc.) to a target nx version via nx migrate, verify each repo, and open a PR per repo.

    29k GitHub stars~1.9k tokensUpdated today
    DevelopmentAuto-check: notes
  • Angular Tooling

    Kilo-Org/kilo-marketplace

    Use Angular CLI and development tools effectively in Angular v20+ projects.

    189 GitHub stars~1.7k tokensUpdated 8 days ago
    DevelopmentAuto-check passed
  • Angular Developer

    radix-ng/primitives

    Angular framework reference for building this signals-first, headless directive library.

    274 GitHub stars~1.2k tokensUpdated 8 days ago
    DevelopmentAuto-check passed
  • Nx Import

    nrwl/nx

    Import, merge, or combine repositories into an Nx workspace using nx import.

    29k GitHub starsUsed in 5 repos~3.5k tokens
    DevelopmentAuto-check passed
  • Nx Workspace

    nomcopter/react-mosaic

    Explore and understand Nx workspaces. An agent skill from nomcopter/react-mosaic.

    4.8k GitHub starsUsed in 7 repos~1.9k tokens
    DevelopmentAuto-check passed

More from cometchat/cometchat-skills

All 97 skills in this repo
  • CometChat Android Calls SDK v5

    cometchat/cometchat-skills

    Adds voice and video calling to an Android app in Kotlin with the headless CometChat Calls SDK v5, covering meeting-style rooms, 1:1 ringing calls, call logs and recording.

    129 GitHub stars~5.2k tokensUpdated 2 days ago
    Auto-check passed
  • CometChat Android v5 Headless SDK

    cometchat/cometchat-skills

    Builds chat on Android with your own UI against the headless CometChat Chat SDK v5, covering install, Jetifier conflicts, credentials and init-before-login ordering.

    129 GitHub stars~4k tokensUpdated 2 days ago
    Auto-check passed
  • CometChat Angular Component Picker

    cometchat/cometchat-skills

    Picks and customizes CometChat's Angular UI Kit components by their verified component list, exact input and output event names, and the surfaces that have no kit component at all.

    129 GitHub stars~2.6k tokensUpdated 2 days ago
    Auto-check passed
  • CometChat Angular Features

    cometchat/cometchat-skills

    Enables or builds CometChat features such as polls, reactions, smart replies and pinned messages in an Angular app, first classifying how much client code each one needs.

    129 GitHub stars~2.6k tokensUpdated 2 days ago
    Auto-check passed
  • CometChat Angular Chat Placement

    cometchat/cometchat-skills

    Decides where CometChat chat UI goes in an Angular app: a dedicated route, a dashboard panel, a support widget or the full multi-pane app, with thread and search panels.

    129 GitHub stars~2.2k tokensUpdated 2 days ago
    Auto-check passed
  • Cometchat iOS V5 SDK

    cometchat/cometchat-skills

    Add voice & video calling to any iOS app FROM SCRATCH with the headless CometChat Calls SDK v5 (CometChatCallsSDK, via Swift Package Manager) — no UI Kit.

    129 GitHub stars~5.2k tokensUpdated 2 days ago
    Auto-check passed

Questions about Cometchat Angular V5 Patterns

What does Cometchat Angular V5 Patterns do?

Angular project-shape glue for CometChat — Angular CLI vs Nx, standalone vs NgModule, environment file wiring, SSR/Angular Universal, lazy routes, and RxJS/signals state patterns. Cometchat Angular V5 Patterns is an agent skill from cometchat/cometchat-skills. Angular project-shape glue for CometChat — Angular CLI vs Nx, standalone vs NgModule, environment file wiring, SSR/Angular Universal, lazy routes, and RxJS/signals state patterns.

When should I use Cometchat Angular V5 Patterns?

Cometchat Angular V5 Patterns fits situations like: tasks that involve Monorepo tooling.

How do I install Cometchat Angular V5 Patterns in Claude Code?

Run `npx skills add cometchat/cometchat-skills --skill cometchat-angular-v5-patterns -a claude-code`. Or copy the skill folder (skills/cometchat-angular-v5-patterns in cometchat/cometchat-skills) into .claude/skills/cometchat-angular-v5-patterns in your project. Claude Code loads it when a task matches its description.

How do I install Cometchat Angular V5 Patterns in Codex?

Run `npx skills add cometchat/cometchat-skills --skill cometchat-angular-v5-patterns -a codex`. Or copy the skill folder (skills/cometchat-angular-v5-patterns in cometchat/cometchat-skills) into .agents/skills/cometchat-angular-v5-patterns in your project. Codex loads it when a task matches its description.

Can I use Cometchat Angular V5 Patterns in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add cometchat/cometchat-skills --skill cometchat-angular-v5-patterns -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/cometchat-angular-v5-patterns, .gemini/skills/cometchat-angular-v5-patterns, .github/skills/cometchat-angular-v5-patterns and .opencode/skills/cometchat-angular-v5-patterns in your project.

What does Cometchat Angular V5 Patterns need to run?

SKILL.md names no scripts, command-line tools or credentials: Cometchat Angular V5 Patterns is instructions for the agent only. Compatibility (from SKILL.md): @cometchat/chat-uikit-angular ^5 (5.1.0–5.2.0 verified); Angular 17-21; CLI or Nx.

Does Cometchat Angular V5 Patterns access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Cometchat Angular V5 Patterns safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Cometchat Angular V5 Patterns use?

Cometchat Angular V5 Patterns is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Cometchat Angular V5 Patterns use?

About 1.6k tokens (SKILL.md is roughly 6.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Cometchat Angular V5 Patterns?

Skills that share tags, products or a category with Cometchat Angular V5 Patterns: Zard (zard-ui/zardui, 1.2k stars), Update Cnw Templates (nrwl/nx, 29k stars), Angular Tooling (Kilo-Org/kilo-marketplace, 189 stars) and Angular Developer (radix-ng/primitives, 274 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Cometchat Angular V5 Patterns?

cometchat (a GitHub organization) maintains it in cometchat/cometchat-skills, which has 129 GitHub stars. The repository holds 97 skills in this directory. The repository was last updated on October 5, 2026.

Source: cometchat/cometchat-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.