Agent skill

Cometchat React Native Components

by cometchat in cometchat/cometchat-skills

The closed list of CometChat React Native UI Kit v5 components, what each one is for, and how to put custom UI INSIDE a component's view slot instead of stacking it on top.

MITAuto-check passedMobile

Install Cometchat React Native Components

skills CLI
$ npx skills add cometchat/cometchat-skills --skill cometchat-react-native-components -a claude-code

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

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

At a glance

The closed list of CometChat React Native UI Kit v5 components, what each one is for, and how to put custom UI INSIDE a component's view slot instead of stacking it on top.

  • Works in 5 steps: camelCase slot props — itemView is… → Rendering a sibling above a list instead… → Placing a bubble component directly —… → …
  • Tasks that involve Cross-platform mobile apps
  • SKILL.md covers Companion skills (read first), Use this skill when, Prerequisites & install and Component catalog (closed list), plus 3 more sections
  • Calls npm

What it does

Cometchat React Native Components is an agent skill from cometchat/cometchat-skills. The closed list of CometChat React Native UI Kit v5 components, what each one is for, and how to put custom UI INSIDE a component's view slot instead of stacking it on top. Triggers: which CometChat component React Native, custom header RN chat, add a button to the conversation list, custom list item RN, CometChat component list, add an avatar to my chat, show a profile picture, status indicator RN, badge RN, list item RN.

Its SKILL.md is about 2k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts. Compatibility notes: React Native =0.77; @cometchat/chat-uikit-react-native ^5.4.0

It sits in Mobile, covering Cross-platform mobile apps 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 Design systems

Example prompts

  • “/cometchat-react-native-components”

Requirements

  • Compatibility (from SKILL.md): React Native >=0.77; @cometchat/chat-uikit-react-native ^5.4.0

Workflow steps

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

  1. camelCase slot props — itemView is ignored silently. RN uses ItemView.
  2. Rendering a sibling above a list instead of using its slot — duplicate headers, broken scroll.
  3. Placing a bubble component directly — the list renders bubbles; use a template (customization).
  4. Reaching for a removed component — check the closed list above before emitting.
  5. Assuming CometChatGroupMembers covers banned users — it lists active members only.

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 Native >=0.77; @cometchat/chat-uikit-react-native ^5.4.0

    From compatibility in the SKILL.md frontmatter.

Context cost

Cometchat React Native Components loads about 2k tokens when it runs. Until then it costs about 115 tokens; SKILL.md has 642 words of instructions outside code blocks.

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

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). 642 words, ~1,978 tokens.

Download SKILL.mdSave it as .claude/skills/cometchat-react-native-components/SKILL.md (or your agent's skills folder).
name
cometchat-react-native-components
description
The closed list of CometChat React Native UI Kit v5 components, what each one is for, and how to put custom UI INSIDE a component's view slot instead of stacking it on top. Triggers: which CometChat component React Native, custom header RN chat, add a button to the conversation list, custom list item RN, CometChat component list, add an avatar to my chat, show a profile picture, status indicator RN, badge RN, list item RN.
compatibility
React Native >=0.77; @cometchat/chat-uikit-react-native ^5.4.0
license
MIT
metadata.author
CometChat
metadata.version
1.0.0
metadata.tags
chat cometchat react-native components slots views composition

Ground truth: catalog rn-v5.json (216 public symbols) — the closed list below IS the catalog. A component not in it does not exist. Fetch props per component via core/references/docs-map.md.

Companion skills (read first)

  • cometchat-react-native-core — install, provider chain, init→login→render. Assumed, not repeated here.

Use this skill when

  • "which component do I use for X" · "add a button to the conversation list header"
  • "custom list row" · "replace the message bubble" · "what components ship in v5"

Prerequisites & install

None beyond core.

Component catalog (closed list)

Lists

ComponentPurpose
CometChatConversationsrecent-conversations list — the usual entry screen
CometChatUsersuser directory
CometChatGroupsgroup directory
CometChatGroupMembersactive members of a group (not banned — see below)

Message pane

ComponentPurpose
CometChatMessageHeadertitle, presence, back, call buttons
CometChatMessageListthe scrollback; renders bubbles, receipts, reactions
CometChatMessageComposerinput, attachments, voice notes
CometChatCompactMessageComposersingle-line composer for tight layouts
CometChatThreadHeaderthread replies — a screen on RN, not a side panel
CometChatMessageInformationper-message delivery/read detail

Search · AI · notifications

ComponentPurpose
CometChatSearchmessage + conversation search
CometChatAIAssistantChatHistory · CometChatAIAssistantToolsAI assistant surfaces
CometChatConversationStarter · CometChatSmartReplies · CometChatConversationSummaryAI suggestions
CometChatNotificationFeedin-app notification feed

Calling — needs @cometchat/calls-sdk-react-native

ComponentPurpose
CometChatCallButtonsaudio/video call triggers
CometChatIncomingCall · CometChatOutgoingCall · CometChatOngoingCallcall lifecycle screens
CometChatCallLogscall history list (detail views were removed in v5)

Bubbles — the list renders these itself; place them only in a custom template CometChatTextBubble · CometChatImageBubble · CometChatVideoBubble · CometChatAudioBubble · CometChatFileBubble · CometChatVoiceNoteBubble · CometChatStickerBubble · CometChatCollaborativeDocumentBubble · CometChatCollaborativeWhiteBoardBubble · CometChatMeetCallBubble

Multi-attachment — RN only, no React equivalent CometChatAttachmentPreview · CometChatAttachmentPreviewItem · CometChatAttachmentTile · CometChatAttachmentTray · CometChatAttachmentViewer and the plural bubbles CometChatImagesBubble · CometChatVideosBubble · CometChatAudiosBubble · CometChatFilesBubble.

DOCS GAP (RN-G4): all nine are undocumented. Build from the kit source and say so.

Not components — but public and load-bearing ChatConfigurator · DataSourceDecorator · CometChatMessageTemplate (custom message types → customization) · CometChatThemeProvider + useTheme() · CometChatI18nProvider · CometChatUIEventHandler · CometChatUiKitConstants.

Primitives & building blocks — exported, and what you reach for when composing a custom row, header or bubble yourself. Existence is baked here; fetch each one's props from the docs (core/references/docs-map.md) — do not infer them from .d.ts.

GroupExports
IdentityCometChatAvatar · CometChatStatusIndicator · CometChatBadge · CometChatDate
Row shellCometChatListItem
OverlaysCometChatActionSheet · CometChatBottomSheet · CometChatConfirmDialog · CometChatReportDialog · CometChatMediaViewer
Composer add-onsCometChatEmojiKeyboard · CometChatMediaRecorder · CometChatInlineAudioRecorder · CometChatCreatePoll · CometChatSuggestionList · CometChatMessagePreview · CometChatMessageComposerAction · CometChatMessageOption
ReactionsCometChatReactions · CometChatQuickReactions · CometChatReactionList
Text formattersCometChatTextFormatter · CometChatMentionsFormatter · CometChatUrlsFormatter · CometChatRichTextFormatter
HelpersCometChatUIKit · CometChatUIKitHelper · CometChatSoundManager

Changing a user's own avatar/name is not a component — it is the SDK call CometChat.updateCurrentUserDetails(); see cometchat-react-native-sdk.

Show full SKILL.md (276 more words)Show less
Components that do NOT exist in v5

CometChatErrorBoundary · CometChatDetails · CometChatAddMembers · CometChatBannedMembers · CometChatTransferOwnership · CometChatContacts · every *WithMessages composite · CometChatCallLogDetails / History / Participants / Recordings. They were removed in kit v5. Each has an SDK-fallback path in core/references/docs-map.md — banned members has no UI surface at all, so an app that bans must also wire view + unban.

Custom UI goes IN a slot, not on top

Every list and header exposes view slots. Custom UI belongs inside the slot so the component keeps its own layout, scrolling and empty/error states. Stacking a sibling above the list is the classic mistake — it double-renders headers and breaks scroll.

⚠️ RN slot props are PascalCase. React's are camelCase; a ported snippet silently does nothing because an unknown prop is simply ignored.

ComponentSlots
CometChatConversationsItemView · TitleView · SubtitleView · LeadingView · TrailingView · SearchView · EmptyView · ErrorView · LoadingView
CometChatUsers / CometChatGroupsItemView · TitleView · SubtitleView · LeadingView · TrailingView · EmptyView · ErrorView · LoadingView
CometChatMessageHeaderItemView · TitleView · SubtitleView · LeadingView · TrailingView · AuxiliaryButtonView
CometChatMessageListHeaderView · FooterView · EmptyView · ErrorView · LoadingView
CometChatMessageComposerHeaderView · SendButtonView · AuxiliaryButtonView · CustomView
tsx
import { CometChatConversations } from "@cometchat/chat-uikit-react-native";
import { Pressable, Text } from "react-native";

<CometChatConversations
  TrailingView={() => (
    <Pressable onPress={onArchive}>
      <Text>Archive</Text>
    </Pressable>
  )}
/>;

Slot names differ per component — fetch the exact list from that component's docs page rather than copying from a sibling.

Common pitfalls

  1. camelCase slot props — itemView is ignored silently. RN uses ItemView.
  2. Rendering a sibling above a list instead of using its slot — duplicate headers, broken scroll.
  3. Placing a bubble component directly — the list renders bubbles; use a template (customization).
  4. Reaching for a removed component — check the closed list above before emitting.
  5. Assuming CometChatGroupMembers covers banned users — it lists active members only.

Verify it works

  • Every emitted component appears in catalogs/rn-v5.json.
  • npm run verify:fences:rn-v5 is green.
  • On device: custom slot content renders inside the component, and the list still scrolls.

© 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-components of cometchat/cometchat-skills.

Open the folder on GitHubat commit 911b108

Compare with similar skills

Cometchat React Native Components 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 Native Components compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Cometchat React Native Components this skillcometchat/cometchat-skills129—~2kAutomated safety check: PassMIT
Expo Design Systempproenca/dot-skills214—~3.5kAutomated safety check: PassMIT
Frontend UI StandardsMaxHan7/frontend-ui-standards-skill106—~2.4kAutomated safety check: PassMIT
Frontend Designavibebuilder/claude-prime120—~2.1kAutomated safety check: PassMIT
UniwindOhh-889/skyroc795—~1.4kAutomated safety check: PassMIT
Design SystemWrongStack/WrongStack368—~3.9kAutomated safety check: PassMIT

Similar skills

  • Expo Design System

    pproenca/dot-skills

    Airbnb-DLS-aligned design system engineering for Expo / React Native apps targeting both web and native iOS, built on Unistyles v3, Reanimated, Skia, and FlashList.

    214 GitHub stars~3.5k tokensUpdated 1 mo ago
    MobileAuto-check passed
  • 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
  • Uniwind

    Ohh-889/skyroc

    Uniwind — Tailwind CSS v4 styling for React Native. An agent skill from Ohh-889/skyroc.

    795 GitHub stars~1.4k tokensUpdated 1 mo ago
    Frontend & DesignAuto-check passed
  • Design System

    WrongStack/WrongStack

    Use this skill BEFORE writing or restyling ANY user-facing interface.

    368 GitHub stars~3.9k tokensUpdated today
    Frontend & DesignAuto-check passed
  • JSON Render Catalog

    yonatangross/orchestkit

    json-render component catalog patterns for AI-safe generative UI.

    288 GitHub stars~6.4k tokensUpdated yesterday
    Frontend & DesignAuto-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

Categories

Questions about Cometchat React Native Components

What does Cometchat React Native Components do?

The closed list of CometChat React Native UI Kit v5 components, what each one is for, and how to put custom UI INSIDE a component's view slot instead of stacking it on top. Cometchat React Native Components is an agent skill from cometchat/cometchat-skills. The closed list of CometChat React Native UI Kit v5 components, what each one is for, and how to put custom UI INSIDE a component's view slot instead of stacking it on top.

When should I use Cometchat React Native Components?

Cometchat React Native Components fits situations like: tasks that involve Cross-platform mobile apps; tasks that involve Design systems.

How do I install Cometchat React Native Components in Claude Code?

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

How do I install Cometchat React Native Components in Codex?

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

Can I use Cometchat React Native Components 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-components -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-components, .gemini/skills/cometchat-react-native-components, .github/skills/cometchat-react-native-components and .opencode/skills/cometchat-react-native-components in your project.

What does Cometchat React Native Components need to run?

Going by SKILL.md and its folder, Cometchat React Native Components needs the command-line tools its instructions call (npm). Compatibility (from SKILL.md): React Native >=0.77; @cometchat/chat-uikit-react-native ^5.4.0.

Does Cometchat React Native Components 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 Components 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 Components use?

Cometchat React Native Components 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 Components use?

About 2k tokens (SKILL.md is roughly 7.9k 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 Components?

Skills that share tags, products or a category with Cometchat React Native Components: Expo Design System (pproenca/dot-skills, 214 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 Components?

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.