Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add cometchat/cometchat-skills --skill cometchat-react-v7-troubleshootinggit clone --depth 1 https://github.com/cometchat/cometchat-skillsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/cometchat/cometchat-skills/cometchat-react-v7-troubleshooting)<a href="https://agentmods.dev/skills/cometchat/cometchat-skills/cometchat-react-v7-troubleshooting"><img src="https://agentmods.dev/badge/skills/cometchat/cometchat-skills/cometchat-react-v7-troubleshooting/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/cometchat/cometchat-skills/cometchat-react-v7-troubleshooting"><img src="https://agentmods.dev/badge/skills/cometchat/cometchat-skills/cometchat-react-v7-troubleshooting.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00104 | $0.01387 |
| Opus 5.5 | $0.00042 | $0.00555 |
| Sonnet 5.5 | $0.00021 | $0.00277 |
| Haiku 4.5 | $0.00010 | $0.00139 |
Grade A, and why
cometchat-react-v7-troubleshooting scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 25d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 48 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Ground truth:
@cometchat/chat-uikit-react@7. Symbols/signatures are verified againstcometchat-react-v7-core+ its catalog and FETCHED viareferences/docs-map.md; the rules referenced (init order, layout sizing, credentials) areRULES.md. This diagnostics catalog is cross-checked against the live{DOCS_BASE}/ui-kit/react/troubleshooting.mdpage (base + paths incometchat-react-v7-core/references/docs-map.md), and adds the host-side/runtime symptoms it doesn't cover.
Companion skills (read first)
cometchat-react-v7-core— the correct init→login→render order, credentials, and the reflow-free layout the fixes below restore.
Use this skill when
A React CometChat integration compiles but misbehaves at runtime: blank, empty, unresponsive, or throwing.
Start here — React fails on the ORDER and the BOX
Two causes explain most "it's blank":
- A kit component rendered before
init()+login()resolved. The surface must be gated on the resolved logged-in user. Rendering it eagerly (or during SSR) yields an empty/erroring pane. - The container has no height. The kit fills its parent; a parent at
height:auto/0collapses it to a sliver. This is a host CSS defect, not a kit bug (RULES.md→ Layout / sizing).
Symptom → cause → fix
| Symptom | Likely cause | Fix |
|---|---|---|
| Blank/white, no errors | Surface rendered before init+login resolved | Gate render on the resolved user; keep CometChatErrorBoundary for a visible fallback |
Blank during SSR / window is not defined |
A kit component imported or rendered on the server (Next.js, Astro, Remix) | Render the surface client-only — "use client" + dynamic(..., { ssr:false }) (Next), client:only (Astro); see core references/ssr.md |
| Surface ~0px / cramped top-left | Ancestor chain has no height | html,body,#root{height:100%} + a pinned surface (100dvh full-app) + panes min-height:0; see core references/layout.md |
| "OOPS! Looks like something went wrong" | The kit's error state — a call threw (often a custom ConversationsRequestBuilder with no .setLimit(n), or a bad Region) |
Add .setLimit(30); confirm Region matches the dashboard app |
| Conversations empty | New/seeded app has no conversations yet, or scope excludes them | Send a first message; check conversationsRequestBuilder scope (user/group) matches intent |
login() fails "user not found" |
UID does not exist in the app | Use a real UID (Dashboard → Users; fresh apps seed cometchat-uid-1) — never a guessed superhero* |
| Nothing updates live | Missing/duplicated listeners, or StrictMode double-mount | Add listeners with a stable ID, remove on unmount; guard the init/login in-flight (cometchat-react-v7-patterns) |
| Roster rows appear TWICE + ~30 "duplicate key" errors (dev only) | React StrictMode double-invokes effects; the roster drop-ins CometChatUsers/CometChatGroups/CometChatGroupMembers double-append (kit de-dupe gap; CometChatConversations is unaffected) |
A dev-only StrictMode artifact — gone in vite build/prod. Do NOT remove StrictMode to "fix" it; verify the roster in a production build. Kit issue — report upstream |
Localized keys shown raw (e.g. group_info) |
Wrong/stale i18n key or provider missing | Use the kit component / correct key; ensure CometChatProvider wraps the tree |
| Works in dev, blank in prod | Wrong env prefix → Auth Key/App ID missing in the bundle | Fix the bundler prefix; grep the build (cometchat-react-v7-production) |
version_conflict on detect |
Project on UI Kit v6 while skills target v7 | STOP and reconcile — migrate v6→v7 (cometchat-react-v7-migration), or stay on v6 by installing the older v4 skills pack (it targets the v6 UI Kit) |
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 25d ago First seen · 48 lines · 104 tokens per session scan A fc914d158b38
cometchat-react-v7-troubleshooting is a skill published in the GitHub repository cometchat/cometchat-skills (149 stars, last pushed 4d ago), licensed MIT. It adds 104 tokens to every session and 1,387 once invoked, about $0.0004 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-24.
Other skills, from other repositories
react-component-performance
Diagnoses slow React components and applies render-time fixes — re-renders, memo/useMemo/useCallback, list virtualization, Profiler traces. Not for API or database latency.
nextjs-validator
Validates Next.js 16 config and flags deprecated 14/15 patterns — proxy.ts, Turbopack, Cache Components, App Router. Use before Next.js work or when auditing a project.
react-debugging
Debug React applications by inspecting components, props, and the component tree. Use when the user is debugging React apps, wants to inspect component props/state, find which component renders an element, or understand the React component hierarchy.
react-doctor
Use when finishing a feature, fixing a bug, before committing React code, or when the user types /doctor, asks to scan, triage, or clean up React diagnostics. Covers lint, accessibility, bundle size, architecture. Includes a regression check and a full local-triage workflow that fetches the canonical playbook.
react-doctor
Run after making React changes to catch issues early. Use when reviewing code, finishing a feature, or fixing bugs in a React project.
tanstack-devtools
Centralized, extensible devtools panel for TanStack libraries with a plugin architecture.