Agent skill

Cometchat Angular V5 Troubleshooting

by cometchat in cometchat/cometchat-skills

Diagnose a broken CometChat Angular integration — blank panes, silent no-render, empty lists, events that never fire, UI that does not update, memory leaks, install failures.

MITAuto-check: notesDevelopment

Install Cometchat Angular V5 Troubleshooting

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

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

GitHub CLI
$ gh skill install cometchat/cometchat-skills cometchat-angular-v5-troubleshooting --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-troubleshooting .claude/skills/cometchat-angular-v5-troubleshooting && 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-troubleshooting
GitHub stars
129
Token cost
~2.3k tokens
SKILL.md length
1,177 words
Files
1
Skills in repo
97
Repo updated
First seen
Licence
MIT

At a glance

Diagnose a broken CometChat Angular integration — blank panes, silent no-render, empty lists, events that never fire, UI that does not update, memory leaks, install failures.

  • Works in 5 steps: Confirm the symbol is real. The exported… → Fetch the component's docs page… → Check the browser console for a… → …
  • Tasks that involve Performance optimization
  • SKILL.md covers Companion skills (read first), Use this skill when, Start here — Angular fails… and Symptom → cause → fix, plus 4 more sections
  • Calls npm

What it does

Cometchat Angular V5 Troubleshooting is an agent skill from cometchat/cometchat-skills. Diagnose a broken CometChat Angular integration — blank panes, silent no-render, empty lists, events that never fire, UI that does not update, memory leaks, install failures. Symptom to cause to fix. Triggers: 'chat not showing', 'blank screen', 'nothing renders', 'click handler not firing', 'messages not updating', 'ERESOLVE', 'cometchat not working'.

Its SKILL.md is about 2.3k 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

It sits in Development, covering Performance optimization. It works with CometChat and Angular. 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 Performance optimization

Example prompts

  • “chat not showing”
  • “blank screen”
  • “nothing renders”
  • “/cometchat-angular-v5-troubleshooting”

Requirements

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

Workflow steps

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

  1. Confirm the symbol is real. The exported class name, not the docs title.
  2. Fetch the component's docs page (core/references/docs-map.md) and compare every input you pass.
  3. Check the browser console for a CometChat error code before assuming it is a UI problem.
  4. Raise the log level: CometChatUIKit.setLogLevel(...).
  5. Reduce to the golden path from core. If that works, the fault is in your composition; if it does not, it is setup.

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

    Shell commands in SKILL.md call:

    • npm

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

  • Network

    No URLs in SKILL.md. Its commands use npm, which can reach the network depending on how they are called.

    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

    From compatibility in the SKILL.md frontmatter.

Context cost

Cometchat Angular V5 Troubleshooting loads about 2.3k tokens when it runs. Until then it costs about 98 tokens; SKILL.md has 1,177 words of instructions outside code blocks.

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

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: notes

The automated check noted patterns worth knowing about, such as sudo or a known installer.

  • NoteMentions a .env fileSKILL.md:59
    onfig empty at runtime | credentials in `.env` | Angular reads `environment.ts`, not `.env` |

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). 1,177 words, ~2,279 tokens.

Download SKILL.mdSave it as .claude/skills/cometchat-angular-v5-troubleshooting/SKILL.md (or your agent's skills folder).
name
cometchat-angular-v5-troubleshooting
description
Diagnose a broken CometChat Angular integration — blank panes, silent no-render, empty lists, events that never fire, UI that does not update, memory leaks, install failures. Symptom to cause to fix. Triggers: 'chat not showing', 'blank screen', 'nothing renders', 'click handler not firing', 'messages not updating', 'ERESOLVE', 'cometchat not working'.
compatibility
@cometchat/chat-uikit-angular ^5 (5.1.0–5.2.0 verified); Angular 17-21
license
MIT
metadata.author
CometChat
metadata.version
1.0.0
metadata.tags
cometchat angular troubleshooting v5 debug blank-screen silent-failure diagnostics

Ground truth: @cometchat/chat-uikit-angular@5 (5.1.0–5.2.0 verified). Symptoms map to causes verified against the installed kit and the live {DOCS_BASE}/ui-kit/angular/troubleshooting.md page (base + paths in cometchat-angular-v5-core/references/docs-map.md). Every CometChat* symbol named here exists in the angular-v5 catalog; a fix that requires a symbol not in the catalog is a bug in this file, not a missing export.

Companion skills (read first)

  • cometchat-angular-v5-core — references/anti-patterns.md and references/troubleshooting.md carry the same table in more depth.

Use this skill when

Something is wrong and the error message is unhelpful or absent.

Start here — Angular fails SILENTLY

Four of the five most common CometChat-Angular faults produce no error at all. Do not wait for a stack trace.

Run these four checks in order before anything else:

1. Is the component in imports: []? Missing → Angular treats <cometchat-conversations> as unknown HTML and renders nothing. No error, no warning, blank space. This is the single most common cause.

2. Does the container have height?

css
html, body { height: 100%; margin: 0; }

Plus a 100dvh shell and min-height: 0 on every flex column. An unsized ancestor collapses the list to 0px — markup correct, nothing visible.

3. Did login() resolve before render? Lists render empty with no error when there is no session. Check CometChatUIKit.getLoggedInUser() is non-null at the moment the component mounts.

4. Is the binding name real? (ccConversationClicked) never fires — the real output is (itemClick). Angular does not warn about unknown outputs. Verified names are in cometchat-angular-v5-components.

Symptom → cause → fix

SymptomCauseFix
Icons missing/blank across the kitassets not registered in angular.jsonadd the src/lib/assets glob → output: assets; the most commonly missed step
Scrolling the list scrolls the WHOLE pageshell/columns missing overflow: hiddenmin-height: 0 lets it shrink; overflow: hidden keeps the scroll inside the pane — both are required
List doesn't scroll at all — bottom items unreachable<cometchat-conversations>/-users/-groups/-call-logs/-search/-message-list has no flex: 1; min-height: 0 of its OWNadd the .cc-fill class to the tag itself, not just its ancestors — the list resolves an internal height: 100% and does not size itself
Whole surface runs past the viewport / clipped, on a routed page only<cometchat-error-boundary> is the template root and ships no :host sizing, so a height: 100% shell under it resolves against nothingadd cometchat-error-boundary { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; } — it is styled by ELEMENT, not by a class. Symptom hides when the shell uses 100dvh (viewport-relative), appears the moment it becomes 100% under a routed outlet
<cometchat-call-logs> shows "OOPS! Looks like something went wrong"KIT BUG (5.1.0), not your code: CallLogsService builds new CometChatUIKitCalls.CallLogRequestBuilder() without awaiting the lazy calls-SDK load, so the accessor is still null. Zero network requests are made — it fails before fetching, and Retry does not recoverNo host-side fix. Do not hand-roll around it; report it. Note (error) will NOT surface it — call-logs has no error output (it takes an onError INPUT)
Blank space where chat should becomponent not in imports: []add the class to that component's imports
Blank pane, markup correctancestor has no heighthtml, body { height: 100% } + 100dvh + min-height: 0
Lists render but always emptyrendered before login() resolvedinit → login before bootstrap, or gate the route
Click handler never fireswrong output nameuse the verified name; there is no cc prefix
Selected row never highlightsactiveConversation not boundbind it to the same state as the message pane
Messages arrive, UI does not updateasync SDK callback doesn't repaint (Angular 21 is zoneless by default, so NgZone.run() won't help)write to a signal or call ChangeDetectorRef.markForCheck() after the update (core lifecycle.md)
Memory grows per route changeno teardowntakeUntil(destroy$) + removeMessageListener(id) in ngOnDestroy
Duplicate messages after navigatinglistener registered twice, never removedregister with a stable id; remove on destroy
"Please wait until the previous login request ends."concurrent login()cache the in-flight promise
npm install fails ERESOLVEproject on Angular 22peer range is <22.0.0; use @angular/cli@21
Build error: path not exported by package@import of the kit stylesheetregister the full node_modules/... path in angular.json
Config empty at runtimecredentials in .envAngular reads environment.ts, not .env
Import will not compilebare class name useduse the exported …Component form
Header shows one chat, messages another[user]/[group] mismatchpass the same subject to header, list and composer
Reply button does nothingno thread surface renderedwire a thread panel or hide the affordance
Feature missing, no errordashboard extension offenable it for the app the credentials point at
Call buttons render as empty zero-size elementsuiKit.callsSDK missing from initFromSettingsadd uiKit: { callsSDK: {} }; installing the package does not enable calling. Check CometChatUIKit.isCallingEnabled()
Lists show "OOPS!" on first load and Retry does nothingfirst fetch raced login; ConversationsService caches the failurebootstrap AFTER login resolves; give the user a retry that remounts the component
Calls never ringlistener not at app root, or calls SDK absentmount <cometchat-incoming-call> at root; install the calls SDK
Calls fail on a LAN IPgetUserMedia needs a secure contextuse HTTPS or localhost
window is not definedSSR running browser codeguard with isPlatformBrowser
Dropdown clippedancestor overflow: hidden or transformremove it from the chain
Layout jumps when data loadsbox sizes to contentpin the height so loading and loaded share one box
Show full SKILL.md (317 more words)Show less

Where the docs contradict this skill

One entry above still disagrees with {DOCS_BASE}/ui-kit/angular/overview.md, and this skill is right because it is verified against the published package:

  • Angular 22 — the docs list it as supported; the peer range excludes it and npm install hard-fails. Do not follow the docs here, and never --force past it.

Also verify against the installed package:

  • @cometchat/cards-angular — required since 5.1.0. (The overview's peer list now lists it — corrected upstream, verified against cometchat/docs, 2026-09-09.)

If a fix in this table seems to contradict a guide, check the installed package before changing course.

When the table does not cover it

  1. Confirm the symbol is real. The exported class name, not the docs title.
  2. Fetch the component's docs page (core/references/docs-map.md) and compare every input you pass.
  3. Check the browser console for a CometChat error code before assuming it is a UI problem.
  4. Raise the log level: CometChatUIKit.setLogLevel(...).
  5. Reduce to the golden path from core. If that works, the fault is in your composition; if it does not, it is setup.

Verify it works

A fix is done when the symptom is gone and you can say which of the four silent-failure causes it was. If you cannot name the cause, the fix is a coincidence and it will come back.

Re-check after any fix: chat renders with real data · clicking a conversation opens it · sending a message appears immediately · a second browser receives it live · no console errors · nothing collapsed to zero height.

What NOT to do

  • Do not --force or --legacy-peer-deps past an ERESOLVE — you install an untested combination and the failure moves somewhere harder to find.
  • Do not add !important to fight the kit's styles — a token is not applying because the stylesheet is not registered.
  • Do not rebuild a component by hand because an affordance looks broken. It is nearly always a missing input or an unsized container.

© 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-troubleshooting of cometchat/cometchat-skills.

Open the folder on GitHubat commit 911b108

Compare with similar skills

Cometchat Angular V5 Troubleshooting 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 Troubleshooting compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Cometchat Angular V5 Troubleshooting this skillcometchat/cometchat-skills129—~2.3kAutomated safety check: NotesMIT
Angular Best Practicesaiskillstore/marketplace4305 repos~3.4kAutomated safety check: PassNone
React DevTools Profile Analyzerkeybase/client9.3k—~978Automated safety check: PassBSD-3-Clause
Native App Performanceharperreed/dotfiles3344 repos~538Automated safety check: PassNone
Pixijs Performancepixijs/pixijs-skills347—~4.6kAutomated safety check: PassMIT
Performance Profilingconorluddy/xclaude-plugin183—~7.3kAutomated safety check: PassMIT

Similar skills

  • Angular Best Practices

    aiskillstore/marketplace

    Angular performance optimization and best practices guide. An agent skill from aiskillstore/marketplace.

    430 GitHub starsUsed in 5 repos~3.4k tokens
    DevelopmentAuto-check passed
  • Parses a React DevTools Profiler JSON export with Python scripts to find re-render storms, commit fan-out and why a component rendered, without opening the DevTools UI.

    9.3k GitHub stars~978 tokensUpdated yesterday
    DevelopmentAuto-check passed
  • Native App Performance

    harperreed/dotfiles

    Native macOS/iOS app performance profiling via xctrace/Time Profiler and CLI-only analysis of Instruments traces.

    334 GitHub starsUsed in 4 repos~538 tokens
    DevelopmentAuto-check passed
  • Pixijs Performance

    pixijs/pixijs-skills

    A skill your agent uses when profiling or optimizing a PixiJS v8 app for FPS, draw calls, or GPU memory.

    347 GitHub stars~4.6k tokensUpdated 6 days ago
    DevelopmentAuto-check passed
  • Performance Profiling

    conorluddy/xclaude-plugin

    Instruments integration and performance analysis workflows for iOS apps.

    183 GitHub stars~7.3k tokensUpdated 25 days ago
    DevelopmentAuto-check passed
  • Debugging Instruments

    dpearson2699/swift-ios-skills

    Debug iOS apps and profile performance using LLDB, the interactive Memory Graph Debugger, and Instruments.

    1.2k GitHub stars~3.6k tokensUpdated 2 mo ago
    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 Troubleshooting

What does Cometchat Angular V5 Troubleshooting do?

Diagnose a broken CometChat Angular integration — blank panes, silent no-render, empty lists, events that never fire, UI that does not update, memory leaks, install failures. Cometchat Angular V5 Troubleshooting is an agent skill from cometchat/cometchat-skills. Diagnose a broken CometChat Angular integration — blank panes, silent no-render, empty lists, events that never fire, UI that does not update, memory leaks, install failures.

When should I use Cometchat Angular V5 Troubleshooting?

Cometchat Angular V5 Troubleshooting fits situations like: tasks that involve Performance optimization.

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

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

How do I install Cometchat Angular V5 Troubleshooting in Codex?

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

Can I use Cometchat Angular V5 Troubleshooting 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-troubleshooting -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-troubleshooting, .gemini/skills/cometchat-angular-v5-troubleshooting, .github/skills/cometchat-angular-v5-troubleshooting and .opencode/skills/cometchat-angular-v5-troubleshooting in your project.

What does Cometchat Angular V5 Troubleshooting need to run?

Going by SKILL.md and its folder, Cometchat Angular V5 Troubleshooting needs the command-line tools its instructions call (npm). Our summary lists: Node.js. Compatibility (from SKILL.md): @cometchat/chat-uikit-angular ^5 (5.1.0–5.2.0 verified); Angular 17-21.

Does Cometchat Angular V5 Troubleshooting access the network?

SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Cometchat Angular V5 Troubleshooting safe to install?

Our automated static check of SKILL.md found notes only (mentions a .env file), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.

What licence does Cometchat Angular V5 Troubleshooting use?

Cometchat Angular V5 Troubleshooting 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 Troubleshooting use?

About 2.3k tokens (SKILL.md is roughly 9.1k 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 Troubleshooting?

Skills that share tags, products or a category with Cometchat Angular V5 Troubleshooting: Angular Best Practices (aiskillstore/marketplace, 430 stars), React DevTools Profile Analyzer (keybase/client, 9.3k stars), Native App Performance (harperreed/dotfiles, 334 stars) and Pixijs Performance (pixijs/pixijs-skills, 347 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 Troubleshooting?

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.