Angular Best Practices
aiskillstore/marketplace
Angular performance optimization and best practices guide. An agent skill from aiskillstore/marketplace.
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.
$ npx skills add cometchat/cometchat-skills --skill cometchat-angular-v5-troubleshooting -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install cometchat/cometchat-skills cometchat-angular-v5-troubleshooting --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ 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-srcUse ~/.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/
Install the "cometchat-angular-v5-troubleshooting" agent skill from https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-angular-v5-troubleshooting into .claude/skills/cometchat-angular-v5-troubleshooting/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "cometchat-angular-v5-troubleshooting", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-angular-v5-troubleshootingType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add cometchat/cometchat-skills --skill cometchat-angular-v5-troubleshooting -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install cometchat/cometchat-skills cometchat-angular-v5-troubleshooting --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/cometchat/cometchat-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/cometchat-angular-v5-troubleshooting .agents/skills/cometchat-angular-v5-troubleshooting && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "cometchat-angular-v5-troubleshooting" agent skill from https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-angular-v5-troubleshooting into .agents/skills/cometchat-angular-v5-troubleshooting/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "cometchat-angular-v5-troubleshooting", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add cometchat/cometchat-skills --skill cometchat-angular-v5-troubleshooting -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install cometchat/cometchat-skills cometchat-angular-v5-troubleshooting --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/cometchat/cometchat-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/cometchat-angular-v5-troubleshooting .cursor/skills/cometchat-angular-v5-troubleshooting && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "cometchat-angular-v5-troubleshooting" agent skill from https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-angular-v5-troubleshooting into .cursor/skills/cometchat-angular-v5-troubleshooting/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "cometchat-angular-v5-troubleshooting", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/cometchat/cometchat-skills.git --path skills/cometchat-angular-v5-troubleshooting--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add cometchat/cometchat-skills --skill cometchat-angular-v5-troubleshooting -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install cometchat/cometchat-skills cometchat-angular-v5-troubleshooting --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/cometchat/cometchat-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/cometchat-angular-v5-troubleshooting .gemini/skills/cometchat-angular-v5-troubleshooting && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "cometchat-angular-v5-troubleshooting" agent skill from https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-angular-v5-troubleshooting into .gemini/skills/cometchat-angular-v5-troubleshooting/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "cometchat-angular-v5-troubleshooting", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install cometchat/cometchat-skills cometchat-angular-v5-troubleshootingInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add cometchat/cometchat-skills --skill cometchat-angular-v5-troubleshooting -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/cometchat/cometchat-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/cometchat-angular-v5-troubleshooting .github/skills/cometchat-angular-v5-troubleshooting && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "cometchat-angular-v5-troubleshooting" agent skill from https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-angular-v5-troubleshooting into .github/skills/cometchat-angular-v5-troubleshooting/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "cometchat-angular-v5-troubleshooting", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add cometchat/cometchat-skills --skill cometchat-angular-v5-troubleshooting -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install cometchat/cometchat-skills cometchat-angular-v5-troubleshooting --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/cometchat/cometchat-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/cometchat-angular-v5-troubleshooting .opencode/skills/cometchat-angular-v5-troubleshooting && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "cometchat-angular-v5-troubleshooting" agent skill from https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-angular-v5-troubleshooting into .opencode/skills/cometchat-angular-v5-troubleshooting/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "cometchat-angular-v5-troubleshooting", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
cometchat-angular-v5-troubleshootingDiagnose 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. 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.
5 steps, taken from the first numbered list in SKILL.md.
Read from SKILL.md and the folder at commit 911b108. It shows what the files ask for, not the result of running them.
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.
Shell commands in SKILL.md call:
npmFrom the folder's file list and the shell code blocks in SKILL.md.
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.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
@cometchat/chat-uikit-angular ^5 (5.1.0–5.2.0 verified); Angular 17-21
From compatibility in the SKILL.md frontmatter.
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.
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.
The automated check noted patterns worth knowing about, such as sudo or a known installer.
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.
The full file from cometchat/cometchat-skills at commit 911b108, republished under its MIT licence (© cometchat). 1,177 words, ~2,279 tokens.
.claude/skills/cometchat-angular-v5-troubleshooting/SKILL.md (or your agent's skills folder).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.mdpage (base + paths incometchat-angular-v5-core/references/docs-map.md). EveryCometChat*symbol named here exists in theangular-v5catalog; a fix that requires a symbol not in the catalog is a bug in this file, not a missing export.
cometchat-angular-v5-core — references/anti-patterns.md and references/troubleshooting.md carry the same table in more depth.Something is wrong and the error message is unhelpful or absent.
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?
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 |
|---|---|---|
| Icons missing/blank across the kit | assets not registered in angular.json | add the src/lib/assets glob → output: assets; the most commonly missed step |
| Scrolling the list scrolls the WHOLE page | shell/columns missing overflow: hidden | min-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 OWN | add 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 nothing | add 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 recover | No 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 be | component not in imports: [] | add the class to that component's imports |
| Blank pane, markup correct | ancestor has no height | html, body { height: 100% } + 100dvh + min-height: 0 |
| Lists render but always empty | rendered before login() resolved | init → login before bootstrap, or gate the route |
| Click handler never fires | wrong output name | use the verified name; there is no cc prefix |
| Selected row never highlights | activeConversation not bound | bind it to the same state as the message pane |
| Messages arrive, UI does not update | async 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 change | no teardown | takeUntil(destroy$) + removeMessageListener(id) in ngOnDestroy |
| Duplicate messages after navigating | listener registered twice, never removed | register 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 ERESOLVE | project on Angular 22 | peer range is <22.0.0; use @angular/cli@21 |
| Build error: path not exported by package | @import of the kit stylesheet | register the full node_modules/... path in angular.json |
| Config empty at runtime | credentials in .env | Angular reads environment.ts, not .env |
| Import will not compile | bare class name used | use the exported …Component form |
| Header shows one chat, messages another | [user]/[group] mismatch | pass the same subject to header, list and composer |
| Reply button does nothing | no thread surface rendered | wire a thread panel or hide the affordance |
| Feature missing, no error | dashboard extension off | enable it for the app the credentials point at |
| Call buttons render as empty zero-size elements | uiKit.callsSDK missing from initFromSettings | add uiKit: { callsSDK: {} }; installing the package does not enable calling. Check CometChatUIKit.isCallingEnabled() |
| Lists show "OOPS!" on first load and Retry does nothing | first fetch raced login; ConversationsService caches the failure | bootstrap AFTER login resolves; give the user a retry that remounts the component |
| Calls never ring | listener not at app root, or calls SDK absent | mount <cometchat-incoming-call> at root; install the calls SDK |
| Calls fail on a LAN IP | getUserMedia needs a secure context | use HTTPS or localhost |
window is not defined | SSR running browser code | guard with isPlatformBrowser |
| Dropdown clipped | ancestor overflow: hidden or transform | remove it from the chain |
| Layout jumps when data loads | box sizes to content | pin the height so loading and loaded share one box |
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:
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.
core/references/docs-map.md) and compare every input you pass.CometChatUIKit.setLogLevel(...).core. If that works, the fault is in your composition; if it does not, it is setup.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.
--force or --legacy-peer-deps past an ERESOLVE — you install an untested combination and the failure moves somewhere harder to find.!important to fight the kit's styles — a token is not applying because the stylesheet is not registered.© cometchat, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Just SKILL.md in skills/cometchat-angular-v5-troubleshooting of cometchat/cometchat-skills.
Open the folder on GitHubat commit 911b108
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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Cometchat Angular V5 Troubleshooting this skillcometchat/cometchat-skills | 129 | — | ~2.3k | Automated safety check: Notes | MIT | |
| Angular Best Practicesaiskillstore/marketplace | 430 | 5 repos | ~3.4k | Automated safety check: Pass | None | |
| React DevTools Profile Analyzerkeybase/client | 9.3k | — | ~978 | Automated safety check: Pass | BSD-3-Clause | |
| Native App Performanceharperreed/dotfiles | 334 | 4 repos | ~538 | Automated safety check: Pass | None | |
| Pixijs Performancepixijs/pixijs-skills | 347 | — | ~4.6k | Automated safety check: Pass | MIT | |
| Performance Profilingconorluddy/xclaude-plugin | 183 | — | ~7.3k | Automated safety check: Pass | MIT |
aiskillstore/marketplace
Angular performance optimization and best practices guide. An agent skill from aiskillstore/marketplace.
keybase/client
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.
harperreed/dotfiles
Native macOS/iOS app performance profiling via xctrace/Time Profiler and CLI-only analysis of Instruments traces.
pixijs/pixijs-skills
A skill your agent uses when profiling or optimizing a PixiJS v8 app for FPS, draw calls, or GPU memory.
conorluddy/xclaude-plugin
Instruments integration and performance analysis workflows for iOS apps.
dpearson2699/swift-ios-skills
Debug iOS apps and profile performance using LLDB, the interactive Memory Graph Debugger, and Instruments.
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.
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.
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.
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.
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.
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.
Categories
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.
Cometchat Angular V5 Troubleshooting fits situations like: tasks that involve Performance optimization.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.