Agent skill

Cometchat React V7 Troubleshooting

by cometchat in cometchat/cometchat-skills

Diagnose a broken CometChat React v7 integration — blank panes, a collapsed/0-height surface, empty lists, no messages, the kit's error state, events that never fire, or a versionconflict.

MITAuto-check passedMobile

Install Cometchat React V7 Troubleshooting

skills CLI
$ npx skills add cometchat/cometchat-skills --skill cometchat-react-v7-troubleshooting -a claude-code

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

GitHub CLI
$ gh skill install cometchat/cometchat-skills cometchat-react-v7-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-react-v7-troubleshooting .claude/skills/cometchat-react-v7-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-react-v7-troubleshooting
GitHub stars
130
Token cost
~1.4k tokens
SKILL.md length
614 words
Files
1
Skills in repo
97
Repo updated
First seen
Licence
MIT

At a glance

Diagnose a broken CometChat React v7 integration — blank panes, a collapsed/0-height surface, empty lists, no messages, the kit's error state, events that never fire, or a versionconflict.

  • Works in 2 steps: A kit component rendered before init() +… → The container has no height. The kit…
  • Mobile work in your project
  • SKILL.md covers Companion skills (read first), Use this skill when, Start here — React fails on… and Symptom → cause → fix, plus 3 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Cometchat React V7 Troubleshooting is an agent skill from cometchat/cometchat-skills. Diagnose a broken CometChat React v7 integration — blank panes, a collapsed/0-height surface, empty lists, no messages, the kit's error state, events that never fire, or a versionconflict. Triggers: 'cometchat react not working', 'chat is blank', 'conversations empty', 'messages not showing react', 'something went wrong cometchat', 'cometchat react errors', 'why is my chat broken'.

Its SKILL.md is about 1.4k 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-react ^7 (7.1.x–7.2.x verified); React 18–19; Vite / Next.js / CRA / React Router / Astro

It sits in Mobile. It works with CometChat and React. 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

  • Mobile work in your project

Example prompts

  • “cometchat react not working”
  • “chat is blank”
  • “conversations empty”
  • “/cometchat-react-v7-troubleshooting”

Requirements

  • Compatibility (from SKILL.md): @cometchat/chat-uikit-react ^7 (7.1.x–7.2.x verified); React 18–19; Vite / Next.js / CRA / React Router / Astro

Workflow steps

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

  1. A kit component rendered before init() + login() resolved. The surface must be gated on the resolved logged-in user. Rendering it eagerly…
  2. The container has no height. The kit fills its parent; a parent at height:auto/0 collapses it to a sliver. This is a host CSS defect, not…

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.

    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-react ^7 (7.1.x–7.2.x verified); React 18–19; Vite / Next.js / CRA / React Router / Astro

    From compatibility in the SKILL.md frontmatter.

Context cost

Cometchat React V7 Troubleshooting loads about 1.4k tokens when it runs. Until then it costs about 105 tokens; SKILL.md has 614 words of instructions outside code blocks.

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

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). 614 words, ~1,351 tokens.

Download SKILL.mdSave it as .claude/skills/cometchat-react-v7-troubleshooting/SKILL.md (or your agent's skills folder).
name
cometchat-react-v7-troubleshooting
description
Diagnose a broken CometChat React v7 integration — blank panes, a collapsed/0-height surface, empty lists, no messages, the kit's error state, events that never fire, or a version_conflict. Triggers: 'cometchat react not working', 'chat is blank', 'conversations empty', 'messages not showing react', 'something went wrong cometchat', 'cometchat react errors', 'why is my chat broken'.
compatibility
@cometchat/chat-uikit-react ^7 (7.1.x–7.2.x verified); React 18–19; Vite / Next.js / CRA / React Router / Astro
license
MIT
metadata.author
CometChat
metadata.version
1.0.0
metadata.tags
cometchat react v7 troubleshooting debug diagnostics blank-screen version-conflict

Ground truth: @cometchat/chat-uikit-react@7. Symbols/signatures are verified against cometchat-react-v7-core + its catalog and FETCHED via references/docs-map.md; the rules referenced (init order, layout sizing, credentials) are RULES.md. This diagnostics catalog is cross-checked against the live {DOCS_BASE}/ui-kit/react/troubleshooting.md page (base + paths in cometchat-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":

  1. 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.
  2. The container has no height. The kit fills its parent; a parent at height:auto/0 collapses it to a sliver. This is a host CSS defect, not a kit bug (RULES.md → Layout / sizing).

Symptom → cause → fix

SymptomLikely causeFix
Blank/white, no errorsSurface rendered before init+login resolvedGate render on the resolved user; keep CometChatErrorBoundary for a visible fallback
Blank during SSR / window is not definedA 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-leftAncestor chain has no heighthtml,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 emptyNew/seeded app has no conversations yet, or scope excludes themSend a first message; check conversationsRequestBuilder scope (user/group) matches intent
login() fails "user not found"UID does not exist in the appUse a real UID (Dashboard → Users; fresh apps seed cometchat-uid-1) — never a guessed superhero*
Nothing updates liveMissing/duplicated listeners, or StrictMode double-mountAdd 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 missingUse the kit component / correct key; ensure CometChatProvider wraps the tree
Works in dev, blank in prodWrong env prefix → Auth Key/App ID missing in the bundleFix the bundler prefix; grep the build (cometchat-react-v7-production)
version_conflict on detectProject on UI Kit v6 while skills target v7STOP 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)
Show full SKILL.md (139 more words)Show less

When the table does not cover it

Open the browser console + network tab: a 401 is auth (bad token/Auth Key/Region), a 402 is a plan-gated feature (e.g. Search — enable it in the dashboard), a 4xx "no conversation yet" is benign. Then fetch the feature's page via cometchat-react-v7-core/references/docs-map.md. Never diagnose from node_modules/.d.ts or memory.

Verify it works

Init+login resolve before the surface renders · the surface has real dimensions (not a sliver) · conversations render or show the kit's empty state (not the error state) · a message sends and arrives live · no raw localization keys · production build carries no Auth Key.

What NOT to do

Do not silence the error boundary to hide a thrown call; do not hard-code a UID to dodge "user not found"; do not read kit internals to work around a missing prop — fetch the documented prop instead.

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

Open the folder on GitHubat commit 911b108

Compare with similar skills

Cometchat React V7 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 React V7 Troubleshooting compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Cometchat React V7 Troubleshooting this skillcometchat/cometchat-skills130—~1.4kAutomated safety check: PassMIT
Add Icon Mappinglobehub/lobe-icons2.6k—~1.5kAutomated safety check: WarnMIT
Add Featureecency/vision-mobile262—~1.9kAutomated safety check: PassMIT
ThemingCode-with-Beto/skills141—~2.5kAutomated safety check: PassNone
Socket Event Listenerr0adkll/Campfire140—~2.5kAutomated safety check: PassGPL-3.0
React Native Experttech-leads-club/agent-skills7k—~3.2kAutomated safety check: PassCC-BY-4.0

Similar skills

  • Add Icon Mapping

    lobehub/lobe-icons

    Add or modify icon keyword mappings for providers, models, or agents in lobe-icons.

    2.6k GitHub stars~1.5k tokensUpdated today
    MobileAuto-check: warnings
  • Add Feature

    ecency/vision-mobile

    A skill your agent uses when adding a new screen, route, or user-facing feature to the Ecency mobile React Native app, covering navigator registration, route params, i18n strings and styling.

    262 GitHub stars~1.9k tokensUpdated 2 days ago
    MobileAuto-check passed
  • Theming

    Code-with-Beto/skills

    Scaffold a unified, cross-platform color theme system into an Expo Router app.

    141 GitHub stars~2.5k tokensUpdated 2 mo ago
    MobileAuto-check passed
  • Socket Event Listener

    r0adkll/Campfire

    Enforce the Campfire pattern for feature modules to react to Audiobookshelf socket events.

    140 GitHub stars~2.5k tokensUpdated today
    MobileAuto-check passed
  • React Native Expert

    tech-leads-club/agent-skills

    Guides React Native and Expo work for cross-platform apps: Expo Router navigation, fast lists, Reanimated animation, platform-specific code and project structure.

    7k GitHub stars~3.2k tokensUpdated 17 days ago
    MobileAuto-check passed
  • Frontend Optimistic Mutations

    sickn33/agentic-awesome-skills

    A portable, framework-agnostic discipline for the write path of any React or React Native app using a query/cache layer.

    47k GitHub starsUsed in 1 repo~3.6k tokens
    MobileAuto-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.

    130 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.

    130 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.

    130 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.

    130 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.

    130 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.

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

Works with

Categories

Questions about Cometchat React V7 Troubleshooting

What does Cometchat React V7 Troubleshooting do?

Diagnose a broken CometChat React v7 integration — blank panes, a collapsed/0-height surface, empty lists, no messages, the kit's error state, events that never fire, or a versionconflict. Cometchat React V7 Troubleshooting is an agent skill from cometchat/cometchat-skills. Diagnose a broken CometChat React v7 integration — blank panes, a collapsed/0-height surface, empty lists, no messages, the kit's error state, events that never fire, or a versionconflict.

When should I use Cometchat React V7 Troubleshooting?

Cometchat React V7 Troubleshooting fits situations like: mobile work in your project.

How do I install Cometchat React V7 Troubleshooting in Claude Code?

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

How do I install Cometchat React V7 Troubleshooting in Codex?

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

Can I use Cometchat React V7 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-react-v7-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-react-v7-troubleshooting, .gemini/skills/cometchat-react-v7-troubleshooting, .github/skills/cometchat-react-v7-troubleshooting and .opencode/skills/cometchat-react-v7-troubleshooting in your project.

What does Cometchat React V7 Troubleshooting need to run?

SKILL.md names no scripts, command-line tools or credentials: Cometchat React V7 Troubleshooting is instructions for the agent only. Compatibility (from SKILL.md): @cometchat/chat-uikit-react ^7 (7.1.x–7.2.x verified); React 18–19; Vite / Next.js / CRA / React Router / Astro.

Does Cometchat React V7 Troubleshooting 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 React V7 Troubleshooting 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 React V7 Troubleshooting use?

Cometchat React V7 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 React V7 Troubleshooting use?

About 1.4k tokens (SKILL.md is roughly 5.4k 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 React V7 Troubleshooting?

Skills that share tags, products or a category with Cometchat React V7 Troubleshooting: Add Icon Mapping (lobehub/lobe-icons, 2.6k stars), Add Feature (ecency/vision-mobile, 262 stars), Theming (Code-with-Beto/skills, 141 stars) and Socket Event Listener (r0adkll/Campfire, 140 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Cometchat React V7 Troubleshooting?

cometchat (a GitHub organization) maintains it in cometchat/cometchat-skills, which has 130 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.