New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Cometchat React V7 Migration

by cometchat in cometchat/cometchat-skills

Upgrade a React app from CometChat UI Kit v6 → v7 (@cometchat/chat-uikit-react ^6 → ^7).

MITAuto-check passedMobile

Install Cometchat React V7 Migration

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

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

GitHub CLI
$ gh skill install cometchat/cometchat-skills cometchat-react-v7-migration --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-migration .claude/skills/cometchat-react-v7-migration && 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-migration
GitHub stars
129
Token cost
~2k tokens
SKILL.md length
746 words
Files
2 (incl. references)
Skills in repo
97
Repo updated
First seen
Licence
MIT

At a glance

Upgrade a React app from CometChat UI Kit v6 → v7 (@cometchat/chat-uikit-react ^6 → ^7).

  • Works in 6 steps: Detect the starting point. Confirm… → Update dependencies. npm install… → Scan the repo for v6 usage. Grep for the… → …
  • Tasks that involve iOS development
  • SKILL.md covers Companion skills (read first), Use this skill when, Migration workflow (BAKED) and Common pitfalls (BAKED), plus 1 more section
  • Calls npm

What it does

Cometchat React V7 Migration is an agent skill from cometchat/cometchat-skills. Upgrade a React app from CometChat UI Kit v6 → v7 (@cometchat/chat-uikit-react ^6 → ^7). Reads the repo's CometChat usage, applies the breaking-change map (deps, symbol renames, RxJS events → useCometChatEvents, DataSource → plugins, templates → plugins, theme prop, calling), fetches the prop-by-prop guide, and verifies the build. Triggers: 'upgrade my v6 uikit to v7', 'migrate cometchat react v6 to v7', 'upgrade @cometchat/chat-uikit-react to v7', 'cometchat v6 to v7', 'bump cometchat uikit'.

Its SKILL.md is about 2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files, including reference files (for example `references/migration-guide.md`). Compatibility notes: React =18 <21; FROM @cometchat/chat-uikit-react ^6 → ^7 (7.1.x, verified 7.1.0); @cometchat/chat-sdk-javascript ^4.1.13 (peer); dompurify ^3.3.1 required…

It sits in Mobile, covering iOS development and Design systems. It works with CometChat, React, RxJS and npm. 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 iOS development
  • Tasks that involve Design systems

Example prompts

  • “upgrade my v6 uikit to v7”
  • “migrate cometchat react v6 to v7”
  • “upgrade @cometchat/chat-uikit-react to v7”
  • “/cometchat-react-v7-migration”

Requirements

  • Node.js
  • Compatibility (from SKILL.md): React >=18 <21; FROM @cometchat/chat-uikit-react ^6 → ^7 (7.1.x, verified 7.1.0); @cometchat/chat-sdk-javascript ^4.1.13 (peer); dompurify ^3.3.1 required (install explicitly); rxjs removed

Workflow steps

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

  1. Detect the starting point. Confirm package.json has @cometchat/chat-uikit-react@6 (already @7 → STOP, nothing to migrate). Note the…
  2. Update dependencies. npm install @cometchat/chat-uikit-react@7 @cometchat/chat-sdk-javascript@^4.1.13 dompurify@^3.3.1 then npm uninstall…
  3. Scan the repo for v6 usage. Grep for the removed/renamed symbols + patterns from references/migration-guide.md: CometChatDocumentBubble…
  4. Apply the breaking-change map (references/migration-guide.md): symbol renames, RxJS *Events → the useCometChatEvents hook…
  5. Wrap the chat tree in CometChatProvider if it isn't already (v7 requires it above the components; init/login stay imperative and unchanged).
  6. Verify. Build/typecheck passes; NO v6 symbols remain (grep the removed names); the app renders inside CometChatProvider; migrated…

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

    React >=18 <21; FROM @cometchat/chat-uikit-react ^6 → ^7 (7.1.x, verified 7.1.0); @cometchat/chat-sdk-javascript ^4.1.13 (peer); dompurify ^3.3.1 required (install explicitly); rxjs removed

    From compatibility in the SKILL.md frontmatter.

Context cost

Cometchat React V7 Migration loads about 2k tokens when it runs, and up to ~5.3k if it reads all its reference files. Until then it costs about 133 tokens; SKILL.md has 746 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~133
When it runs · the whole SKILL.md, loaded when a task matches
~2k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~5.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 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). 746 words, ~1,962 tokens.

Download SKILL.mdSave it as .claude/skills/cometchat-react-v7-migration/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
cometchat-react-v7-migration
description
Upgrade a React app from CometChat UI Kit v6 → v7 (`@cometchat/chat-uikit-react` ^6 → ^7). Reads the repo's CometChat usage, applies the breaking-change map (deps, symbol renames, RxJS events → `useCometChatEvents`, DataSource → plugins, templates → plugins, theme prop, calling), fetches the prop-by-prop guide, and verifies the build. Triggers: 'upgrade my v6 uikit to v7', 'migrate cometchat react v6 to v7', 'upgrade @cometchat/chat-uikit-react to v7', 'cometchat v6 to v7', 'bump cometchat uikit'.
compatibility
React >=18 <21; FROM @cometchat/chat-uikit-react ^6 → ^7 (7.1.x, verified 7.1.0); @cometchat/chat-sdk-javascript ^4.1.13 (peer); dompurify ^3.3.1 required (install explicitly); rxjs removed
license
MIT
metadata.author
CometChat
metadata.version
1.0.0
metadata.tags
cometchat react migration upgrade v6 v7 uikit

Ground truth: migrates a React app FROM @cometchat/chat-uikit-react@6 TO @7. v7 target symbols are catalog-verified vs installed 7.1.0; the v6→v7 breaking-change map is BAKED in references/migration-guide.md (distilled from the official migration docs + a real v6.5.4→v7.1.0 export diff). The exhaustive prop-by-prop table is FETCHED from the docs migration .md twins. APPEND/transform the user's code — never wipe it; work on a branch and confirm before bulk edits (RULES.md).

Companion skills (read first)

  • cometchat-react-v7-core — the v7 init/login/render + CometChatProvider the migrated app lands on. This skill ASSUMES it.
  • cometchat-react-v7-components — the v7 component catalog (the target names).

Use this skill when

"upgrade my v6 UI Kit to v7", "migrate CometChat React v6→v7", "bump @cometchat/chat-uikit-react to v7". Precondition: the project currently has @cometchat/chat-uikit-react@6.

Migration workflow (BAKED)

  1. Detect the starting point. Confirm package.json has @cometchat/chat-uikit-react@6 (already @7 → STOP, nothing to migrate). Note the bundler (Vite/Next/CRA/React-Router/Astro → env prefix, per cometchat-react-v7-patterns) and whether the app uses calls / rxjs events / DataSource / message templates. Work on a branch; transform in place, never delete the user's code.
  2. Update dependencies. npm install @cometchat/chat-uikit-react@7 @cometchat/chat-sdk-javascript@^4.1.13 dompurify@^3.3.1 then npm uninstall rxjs (v7 drops rxjs; dompurify is required — the kit imports it at runtime; install it explicitly per the official docs, even though it's in the kit's dependencies). If the app uses calling, bump the Calls SDK to the v7 major: npm install @cometchat/calls-sdk-javascript@5 (v7 pins ^5.x — verified; it is NOT the same major as the v6-era build). Enabling calling also moves: on the mandated initFromSettings path use uiKit:{callsSDK:{}} (not the classic setCallingEnabled(true)).
  3. Scan the repo for v6 usage. Grep for the removed/renamed symbols + patterns from references/migration-guide.md: CometChatDocumentBubble, CometChatCompactMessageComposer, CometChatUrlsFormatter, CometChatTextHighlightFormatter, any *Events (CometChatMessageEvents/CometChatGroupEvents/CometChatCallEvents/CometChatUserEvents/CometChatConversationEvents/CometChatUIEvents), DataSource/DataSourceDecorator/ChatConfigurator, CometChatMessageTemplate / templates prop, textFormatters prop on CometChatMessageList/CometChatConversations (gone from the lists in v7 — textFormatters itself is NOT removed; see pitfalls), hideError/disableLoadingState props, data-theme attribute, localization (getLocalizedString(...), CometChatLocalize, unprefixed i18n keys like group_info that v7 moved under sample_ — §7), CometChatUIKitLoginListener, and the removed standalone components (CometChatEmojiKeyboard/CometChatMediaRecorder/CometChatToast/CometChatListItem/CometChatNotificationBadge). Produce the concrete change list.
  4. Apply the breaking-change map (references/migration-guide.md): symbol renames, RxJS *Events → the useCometChatEvents hook, DataSource/ChatConfigurator → CometChatMessagePlugin + the plugins prop, templates prop → plugins (textFormatters is NOT removed — relocate it, see pitfalls), data-theme → the theme prop, calling → uiKit:{callsSDK:{}} on initFromSettings (step 2), localization → the v7 method + map v6 keys to the bundled sample_* keys (or register via the INSTANCE method CometChatLocalize.getSharedInstance()?.addTranslation(...) — NOT a static) — see migration-guide.md §7; look up the EXACT key in the uikit source (resources/<lang>/translation.json) / docs / GitHub, never guess. For any component's exact prop change NOT in the baked map, FETCH the prop-by-prop table via cometchat-react-v7-core/references/docs-map.md → migration-property-changes.
  5. Wrap the chat tree in CometChatProvider if it isn't already (v7 requires it above the components; init/login stay imperative and unchanged).
  6. Verify. Build/typecheck passes; NO v6 symbols remain (grep the removed names); the app renders inside CometChatProvider; migrated events/plugins/calling work. Reuse cometchat-react-v7-core "Verify it works".
Show full SKILL.md (281 more words)Show less

Common pitfalls (BAKED)

  • Leftover rxjs event subscriptions — v6 *Events.<x>.subscribe() do NOT fire in v7; convert every one to useCometChatEvents((event) => …) (SDK + UI events share one bus). Publish via usePublishEvent().
  • Forgetting CometChatProvider — v7 components read it; symptom = context/"not initialized" errors even though init ran.
  • CometChatMessageTemplate / templates props — removed from components; move custom message rendering to a CometChatMessagePlugin passed via plugins. textFormatters is NOT removed — it stays a prop in v7 (verified vs 7.1.0) on CometChatMessageComposer, the bubble components (Text/Image/Video/Audio/File/…), CometChatSearch and CometChatMessageInformation, but it is GONE from CometChatMessageList/CometChatConversations. Keep it as a prop on those components. The list's bubbles take formatters from the text plugin's getTextFormatters(), so to keep a v6 list-level formatter, override that one method — plugins={[{ ...CometChatTextPlugin, getTextFormatters: () => [/* defaults + yours */] }]} (provider plugins precede the defaults, so it wins).
  • Dependency drift — missing the new dompurify peer dep, or leftover rxjs, breaks the build; do both halves of step 2.
  • Calling silently off — v7 needs calling turned on in the init settings (uiKit: { callsSDK: {} } via CometChatUIKit.initFromSettings; or the classic .setCallingEnabled(true) on UIKitSettingsBuilder) — not a provider prop; without it, call buttons hide and the Calls SDK never loads.
  • Bubble routing — the message list now defaults to the multi-attachment bubbles (CometChatImageBubble→CometChatImagesBubble, singular CometChatFileBubble still ships); code that imported singular bubble names for the list default may need the plural.
  • Don't mass-remove hideError — it's removed from list components but retained on CometChatMessageComposer; textFormatters likewise still exists on the message-bubble components. Scope the removals; don't blanket-strip.

Verify it works

Build/typecheck is green; a repo-wide grep finds NO removed v6 symbols (CometChatDocumentBubble, CometChatCompactMessageComposer, *Events, DataSource, DataSourceDecorator, ChatConfigurator, CometChatMessageTemplate, CometChatUIKitLoginListener); the app renders inside CometChatProvider; and any migrated events / plugins / calling work. Full prop-by-prop reference: fetch migration-property-changes via cometchat-react-v7-core/references/docs-map.md.

© 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

SKILL.md and 1 other file (references) in skills/cometchat-react-v7-migration of cometchat/cometchat-skills.

  • SKILL.md
  • references/migration-guide.md

Open the folder on GitHubat commit 911b108

Compare with similar skills

Cometchat React V7 Migration 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 Migration compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Cometchat React V7 Migration this skillcometchat/cometchat-skills129—~2kAutomated safety check: PassMIT
Native App Designercuriositech/some_claude_skills243—~1.9kAutomated safety check: NotesMIT
Frontend UI StandardsMaxHan7/frontend-ui-standards-skill106—~2.4kAutomated safety check: PassMIT
Frontend Designavibebuilder/claude-prime120—~2.1kAutomated safety check: PassMIT
Lovable Cleanupsickn33/agentic-awesome-skills47k1 repos~3.7kAutomated safety check: NotesMIT
Build Nitro Modulesmargelo/react-native-skills175—~9.9kAutomated safety check: PassMIT

Similar skills

  • Native App Designer

    curiositech/some_claude_skills

    Creates breathtaking iOS/Mac and web apps with organic, non-AI aesthetic.

    243 GitHub stars~1.9k tokensUpdated 1 mo ago
    MobileAuto-check: notes

  • Frontend UI Standards

    MaxHan7/frontend-ui-standards-skill

    A skill your agent uses when implementing, refactoring, or reviewing frontend UI across SwiftUI, React, React Native, Flutter, web, or mobile apps.

    106 GitHub stars~2.4k tokensUpdated 3 mo ago
    Frontend & DesignAuto-check passed

  • Frontend Design

    avibebuilder/claude-prime

    Builds distinctive, production-grade UIs that avoid generic AI aesthetics.

    120 GitHub stars~2.1k tokensUpdated 4 mo ago
    Frontend & DesignAuto-check passed

  • Lovable Cleanup

    sickn33/agentic-awesome-skills

    Audits and strips Lovable scaffolding from Vite + React projects — removes lovable-tagger, swaps placeholder assets, prunes unused Radix deps, cleans generated docs, and neutralizes stale…

    47k GitHub starsUsed in 1 repo~3.7k tokens
    DevelopmentAuto-check: notes

  • Build Nitro Modules

    margelo/react-native-skills

    Builds and designs React Native Nitro Modules with Nitrogen, HybridObject TypeScript specs, Nitro View components, generated native implementations, zero-copy and native-state APIs, Swift/Kotlin/C++…

    175 GitHub stars~9.9k tokensUpdated 1 mo ago
    MobileAuto-check passed

  • macOS App Design

    vaayne/mori

    A skill your agent uses when designing or building native macOS applications with SwiftUI or AppKit.

    303 GitHub stars~789 tokensUpdated 2 mo ago
    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.

    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

Works with

Categories

Questions about Cometchat React V7 Migration

What does Cometchat React V7 Migration do?

Upgrade a React app from CometChat UI Kit v6 → v7 (@cometchat/chat-uikit-react ^6 → ^7). Cometchat React V7 Migration is an agent skill from cometchat/cometchat-skills. Upgrade a React app from CometChat UI Kit v6 → v7 (@cometchat/chat-uikit-react ^6 → ^7).

When should I use Cometchat React V7 Migration?

Cometchat React V7 Migration fits situations like: tasks that involve iOS development; tasks that involve Design systems.

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

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

How do I install Cometchat React V7 Migration in Codex?

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

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

What does Cometchat React V7 Migration need to run?

Going by SKILL.md and its folder, Cometchat React V7 Migration needs the command-line tools its instructions call (npm). Our summary lists: Node.js. Compatibility (from SKILL.md): React >=18 <21; FROM @cometchat/chat-uikit-react ^6 → ^7 (7.1.x, verified 7.1.0); @cometchat/chat-sdk-javascript ^4.1.13 (peer); dompurify ^3.3.1 required (install explicitly); rxjs removed.

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

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

About 2k tokens (SKILL.md is roughly 7.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 3.3k tokens, read only when the agent opens those files.

What are the alternatives to Cometchat React V7 Migration?

Skills that share tags, products or a category with Cometchat React V7 Migration: Native App Designer (curiositech/some_claude_skills, 243 stars), Frontend UI Standards (MaxHan7/frontend-ui-standards-skill, 106 stars), Frontend Design (avibebuilder/claude-prime, 120 stars) and Lovable Cleanup (sickn33/agentic-awesome-skills, 47k 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 Migration?

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.