Design System
WrongStack/WrongStack
Use this skill BEFORE writing or restyling ANY user-facing interface.
Migrate a React Native app from CometChat UI Kit v4 to v5 — the 16 removed components, what replaces each, the composite-to-modular rewrite, and the theming change from setter objects to a provider.
Install Cometchat React Native Migration
$ npx skills add cometchat/cometchat-skills --skill cometchat-react-native-migration -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install cometchat/cometchat-skills cometchat-react-native-migration --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-react-native-migration .claude/skills/cometchat-react-native-migration && 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-react-native-migration" agent skill from https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-react-native-migration into .claude/skills/cometchat-react-native-migration/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "cometchat-react-native-migration", 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-react-native-migrationType 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-react-native-migration -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install cometchat/cometchat-skills cometchat-react-native-migration --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-react-native-migration .agents/skills/cometchat-react-native-migration && 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-react-native-migration" agent skill from https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-react-native-migration into .agents/skills/cometchat-react-native-migration/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "cometchat-react-native-migration", 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-react-native-migration -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install cometchat/cometchat-skills cometchat-react-native-migration --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-react-native-migration .cursor/skills/cometchat-react-native-migration && 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-react-native-migration" agent skill from https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-react-native-migration into .cursor/skills/cometchat-react-native-migration/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "cometchat-react-native-migration", 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-react-native-migration--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-react-native-migration -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install cometchat/cometchat-skills cometchat-react-native-migration --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-react-native-migration .gemini/skills/cometchat-react-native-migration && 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-react-native-migration" agent skill from https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-react-native-migration into .gemini/skills/cometchat-react-native-migration/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "cometchat-react-native-migration", 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-react-native-migrationInstalls 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-react-native-migration -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-react-native-migration .github/skills/cometchat-react-native-migration && 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-react-native-migration" agent skill from https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-react-native-migration into .github/skills/cometchat-react-native-migration/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "cometchat-react-native-migration", 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-react-native-migration -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-react-native-migration --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-react-native-migration .opencode/skills/cometchat-react-native-migration && 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-react-native-migration" agent skill from https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-react-native-migration into .opencode/skills/cometchat-react-native-migration/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "cometchat-react-native-migration", 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.
Facts
- Skill name
cometchat-react-native-migration- GitHub stars
- 130
- Token cost
- ~1.3k tokens
- SKILL.md length
- 503 words
- Files
- 1
- Skills in repo
- 97
- Repo updated
- First seen
- Licence
- MIT
At a glance
Migrate a React Native app from CometChat UI Kit v4 to v5 — the 16 removed components, what replaces each, the composite-to-modular rewrite, and the theming change from setter objects to a provider.
- Works in 6 steps: Upgrade the packages and the peer set;… → Replace composites with the three-part… → Add navigation so each surface is its… → …
- Tasks that involve Cross-platform mobile apps
- SKILL.md covers Companion skills (read first), Use this skill when, Prerequisites & install and What actually changed:…, plus 5 more sections
- Calls npm
What it does
Cometchat React Native Migration is an agent skill from cometchat/cometchat-skills. Migrate a React Native app from CometChat UI Kit v4 to v5 — the 16 removed components, what replaces each, the composite-to-modular rewrite, and the theming change from setter objects to a provider. Triggers: upgrade CometChat React Native v4 to v5, CometChatConversationsWithMessages removed, migrate RN chat uikit, CometChatDetails not found, v4 to v5 breaking changes.
Its SKILL.md is about 1.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: migrating @cometchat/chat-uikit-react-native ^4 → ^5.4.0
It sits in Mobile, covering Cross-platform mobile apps, Theming and dark mode and Design systems. It works with CometChat and React Native. 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 Cross-platform mobile apps
- Tasks that involve Theming and dark mode
- Tasks that involve Design systems
Example prompts
- “/cometchat-react-native-migration”
Requirements
- Compatibility (from SKILL.md): migrating @cometchat/chat-uikit-react-native ^4 → ^5.4.0
Workflow steps
6 steps, taken from the first numbered list in SKILL.md.
- Upgrade the packages and the peer set; get it building before touching UI.
- Replace composites with the three-part message screen (core).
- Add navigation so each surface is its own screen (placement).
- Rebuild the detail/management screens on the SDK — the longest step; scope it explicitly.
- Move theming to the provider (customization).
- Re-check calls and push on real devices; the native layer changed too.
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
migrating @cometchat/chat-uikit-react-native ^4 → ^5.4.0
From compatibility in the SKILL.md frontmatter.
Context cost
Cometchat React Native Migration loads about 1.3k tokens when it runs. Until then it costs about 101 tokens; SKILL.md has 503 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.
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). 503 words, ~1,297 tokens.
Download SKILL.mdSave it as
.claude/skills/cometchat-react-native-migration/SKILL.md (or your agent's skills folder).- name
- cometchat-react-native-migration
- description
- Migrate a React Native app from CometChat UI Kit v4 to v5 — the 16 removed components, what replaces each, the composite-to-modular rewrite, and the theming change from setter objects to a provider. Triggers: upgrade CometChat React Native v4 to v5, CometChatConversationsWithMessages removed, migrate RN chat uikit, CometChatDetails not found, v4 to v5 breaking changes.
- compatibility
- migrating @cometchat/chat-uikit-react-native ^4 → ^5.4.0
- license
- MIT
- metadata.author
- CometChat
- metadata.version
- 1.0.0
- metadata.tags
- chat cometchat react-native migration upgrade v4 v5 breaking-changes
Ground truth: the public-export diff between kit v4 and
@cometchat/chat-uikit-react-native@5.4.0, verified againstcatalogs/rn-v5.json(216 symbols) — every removal below is confirmed absent, not assumed. Docs:/ui-kit/react-native/upgrading-from-v4·property-changes.
Companion skills (read first)
cometchat-react-native-core— the v5 install, provider chain and ordering you are migrating to.
Use this skill when
- "upgrade our chat from v4 to v5" · "
CometChatConversationsWithMessagesis gone" · "CometChatDetailsnot found"
Prerequisites & install
v5 changes the peer set as well as the API — reinstall from core's list rather than bumping one
package.
What actually changed: composites became parts
v4 shipped end-to-end components. One tag gave you a list, a message view, details and threads. v5 removes them so each piece is customizable — which is better, and is also a rewrite of your chat screen, not a version bump. Budget accordingly.
16 components removed — each verified absent from the v5 catalog
Composites → stitch the parts yourself
| v4 | v5 |
|---|---|
CometChatConversationsWithMessages | CometChatConversations + a message screen |
CometChatUsersWithMessages | CometChatUsers + a message screen |
CometChatGroupsWithMessages | CometChatGroups + a message screen |
CometChatMessages | CometChatMessageHeader + CometChatMessageList + CometChatMessageComposer |
CometChatThreadedMessages | CometChatThreadHeader on its own screen |
The message screen is three components in a flex: 1 container — see core. Navigation between list
and pane is placement.
Detail & management screens → no replacement component
CometChatDetails · CometChatContacts · CometChatAddMembers · CometChatBannedMembers ·
CometChatTransferOwnership · CometChatUserMemberWrapper
⚠️ This is the migration's real cost. v5 ships nothing equivalent. You build these screens on the SDK:
Screen SDK user / group details CometChat.getUser·getGroup·updateGroupadd members addMembersToGroupbanned members BannedMembersRequestBuilder·unbanGroupMembertransfer ownership transferGroupOwnership
CometChatGroupMemberslists active members only. If your v4 app could ban, it could also show and unban — keep that pair, or you ship a one-way door.Do not invent a layout: the official sample app has real implementations —
github.com/cometchat/cometchat-uikit-react-native/tree/v5/examples/SampleApp. Those are sample-app directory paths, never imports.
Call-log detail screens → list only
CometChatCallLogDetails · CometChatCallLogHistory · CometChatCallLogParticipants ·
CometChatCallLogRecordings · CometChatCallLogsWithDetails are gone. CometChatCallLogs (the list)
remains; details come from CometChatCalls.CallLogRequestBuilder in the calls SDK.
Show full SKILL.md (196 more words)Show less
Theming: setter objects → provider
- let myTheme = new CometChatTheme({});
- myTheme.palette.setMode("dark");
+ <CometChatThemeProvider theme={{ mode: "dark" }}>CometChatContext / CometChatProvider are gone. Read the active theme with useTheme().
Details in customization.
Migration order that avoids a broken middle
- Upgrade the packages and the peer set; get it building before touching UI.
- Replace composites with the three-part message screen (
core). - Add navigation so each surface is its own screen (
placement). - Rebuild the detail/management screens on the SDK — the longest step; scope it explicitly.
- Move theming to the provider (
customization). - Re-check calls and push on real devices; the native layer changed too.
Common pitfalls
- Treating it as a version bump — the chat screen is rewritten.
- Looking for a v5 details component — there isn't one.
- Dropping banned-members because there is no component — you lose the unban path.
- Porting v4 theming setters — replaced by the provider.
- Keeping v4's single-screen conditional rendering — v5 apps want a navigator.
- Skipping the device pass — peers and native config changed.
Verify it works
- No removed symbol appears anywhere: grep for
WithMessages,CometChatDetails,CometChatMessages. - Every emitted symbol is in
catalogs/rn-v5.json. npm run verify:fences:rn-v5is green.- On device: every v4 flow still exists — including viewing and unbanning banned members.
© 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-native-migration of cometchat/cometchat-skills.
Open the folder on GitHubat commit 911b108
Compare with similar skills
Cometchat React Native 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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Cometchat React Native Migration this skillcometchat/cometchat-skills | 130 | — | ~1.3k | Automated safety check: Pass | MIT | |
| Design SystemWrongStack/WrongStack | 370 | — | ~3.9k | Automated safety check: Pass | MIT | |
| Frontend UI StandardsMaxHan7/frontend-ui-standards-skill | 106 | — | ~2.4k | Automated safety check: Pass | MIT | |
| Frontend Designavibebuilder/claude-prime | 120 | — | ~2.1k | Automated safety check: Pass | MIT | |
| UniwindOhh-889/skyroc | 795 | — | ~1.4k | Automated safety check: Pass | MIT | |
| UI UX Pro Maxsaoudi-h/solar-icons | 184 | 18 repos | ~11k | Automated safety check: Notes | Custom licence |
Similar skills
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.
Frontend Design
avibebuilder/claude-prime
Builds distinctive, production-grade UIs that avoid generic AI aesthetics.
Uniwind
Ohh-889/skyroc
Uniwind — Tailwind CSS v4 styling for React Native. An agent skill from Ohh-889/skyroc.
UI UX Pro Max
saoudi-h/solar-icons
UI/UX design intelligence for web and mobile. An agent skill from saoudi-h/solar-icons.
Theming
Code-with-Beto/skills
Scaffold a unified, cross-platform color theme system into an Expo Router app.
More from cometchat/cometchat-skills
All 97 skills in this repoCometChat 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.
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.
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.
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.
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.
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.
Related
Works with
Categories
Questions about Cometchat React Native Migration
What does Cometchat React Native Migration do?
Migrate a React Native app from CometChat UI Kit v4 to v5 — the 16 removed components, what replaces each, the composite-to-modular rewrite, and the theming change from setter objects to a provider. Cometchat React Native Migration is an agent skill from cometchat/cometchat-skills. Migrate a React Native app from CometChat UI Kit v4 to v5 — the 16 removed components, what replaces each, the composite-to-modular rewrite, and the theming change from setter objects to a provider.
When should I use Cometchat React Native Migration?
Cometchat React Native Migration fits situations like: tasks that involve Cross-platform mobile apps; tasks that involve Theming and dark mode; tasks that involve Design systems.
How do I install Cometchat React Native Migration in Claude Code?
Run `npx skills add cometchat/cometchat-skills --skill cometchat-react-native-migration -a claude-code`. Or copy the skill folder (skills/cometchat-react-native-migration in cometchat/cometchat-skills) into .claude/skills/cometchat-react-native-migration in your project. Claude Code loads it when a task matches its description.
How do I install Cometchat React Native Migration in Codex?
Run `npx skills add cometchat/cometchat-skills --skill cometchat-react-native-migration -a codex`. Or copy the skill folder (skills/cometchat-react-native-migration in cometchat/cometchat-skills) into .agents/skills/cometchat-react-native-migration in your project. Codex loads it when a task matches its description.
Can I use Cometchat React Native 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-native-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-native-migration, .gemini/skills/cometchat-react-native-migration, .github/skills/cometchat-react-native-migration and .opencode/skills/cometchat-react-native-migration in your project.
What does Cometchat React Native Migration need to run?
Going by SKILL.md and its folder, Cometchat React Native Migration needs the command-line tools its instructions call (npm). Compatibility (from SKILL.md): migrating @cometchat/chat-uikit-react-native ^4 → ^5.4.0.
Does Cometchat React Native 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 Native 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 Native Migration use?
Cometchat React Native 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 Native Migration use?
About 1.3k tokens (SKILL.md is roughly 5.2k 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 Native Migration?
Skills that share tags, products or a category with Cometchat React Native Migration: Design System (WrongStack/WrongStack, 370 stars), Frontend UI Standards (MaxHan7/frontend-ui-standards-skill, 106 stars), Frontend Design (avibebuilder/claude-prime, 120 stars) and Uniwind (Ohh-889/skyroc, 795 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Cometchat React Native Migration?
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.