{"id":"3d07f954-31bb-4c1c-b877-7724299f9f74","shortId":"Fp6vKk","kind":"skill","title":"cometchat-customization","tagline":"Customize a CometChat React UI Kit integration beyond what `cometchat init` and `cometchat apply-feature` produce — custom message bubbles, custom header views, custom subtitle views, custom empty/loading states, custom action menus, request builder filters, event listeners, and ","description":"> **Companion skills:** `cometchat-components` provides the component\n> catalog (what exists); this skill provides the customization workflow\n> (how to modify what exists). Use `cometchat-components` to look up\n> component names and props, then use this skill to plan and execute\n> the customization. For any pattern not covered below, the docs MCP\n> at `cometchat-docs` is the source of truth — query it before\n> generating any code.\n\n## Use this skill when\n\nThe user has already run `/cometchat` (or invoked the cometchat skill via their agent's mechanism — keyword \"cometchat\" or \"integrate chat\" works in most agents) (Phase A complete — there's a\nworking integration with `.cometchat/state.json`) and wants to **change\nhow a component looks or behaves** beyond what the CLI's deterministic\ncommands handle.\n\nTrigger phrases:\n- \"customize the message list\"\n- \"filter the conversations to only show X\"\n- \"change the message bubble color/shape/layout\"\n- \"add a custom header above the chat\"\n- \"subscribe to message-received events\"\n- \"show a custom loading state\"\n- \"add a custom action to the message options menu\"\n- \"I want to inject my own UI into CometChatX\"\n- `/cometchat customize`\n\n## Do not use this skill when\n\n- The user wants to enable a **packaged feature** (calls, polls, AI smart\n  replies, etc.) → use `cometchat-features` instead\n- The user wants to change **theme tokens** (primary color, font,\n  border radius) → use `cometchat-theming` instead — `cometchat\n  apply-theme` is deterministic and doesn't need this skill\n- The user wants to **start a new integration** → use the `cometchat`\n  dispatcher skill to run Phase A first\n- The user wants to **fix something broken** → use\n  `cometchat-troubleshooting` and run `cometchat doctor`\n\n## Docs MCP contract\n\nThis skill is **fundamentally docs-driven** — every customization\nquestion requires a fact (prop name, callback signature, builder method,\nevent topic, CSS selector) that lives in the canonical CometChat docs,\nnot in this skill's text. Embedding examples here would create drift\nthe moment the SDK changes.\n\nThe CometChat docs MCP at `cometchat-docs` is a **hard requirement**\nfor this skill. It's the source of truth for:\n\n- Component prop tables (every component, every prop, every default)\n- Custom view slots: `headerView`, `subtitleView`, `tailView`,\n  `optionsView`, `bubbleView`, `emptyStateView`, `loadingStateView`,\n  `errorStateView` (which components support which slots)\n- Message template overrides (`CometChatMessageTemplate.type`,\n  `category`, `contentView`, `headerView`, `footerView`)\n- Request builders for filtering data: `ConversationsRequestBuilder`,\n  `MessagesRequestBuilder`, `UsersRequestBuilder`, `GroupsRequestBuilder`,\n  `CallLogsRequestBuilder` and their methods\n- SDK events: `CometChatMessageEvents`, `CometChatUserEvents`,\n  `CometChatGroupEvents`, `CometChatCallEvents`, `CometChatUIEvents`\n  and the topic names\n- CSS selectors for component-level styling overrides\n  (`.cometchat-message-bubble-incoming`, `.cometchat-conversations-header`,\n  etc.)\n\n**Hard rules:**\n\n1. **Always query the docs MCP first** before generating any\n   customization code. Never invent prop names, builder methods, event\n   topics, or CSS classes from training-data memory.\n2. **If the docs MCP is not installed**, STOP. Tell the user:\n   \"Customization needs the CometChat docs MCP because every prop +\n   builder + event signature is canonical. Install it with\n   `claude mcp add --transport http cometchat-docs https://www.cometchat.com/docs/mcp`\n   and re-run.\"\n3. **Prefer composition (custom view props) over CSS overrides** when\n   both are options — composition is more stable across SDK versions.\n4. **Canonical reference URLs:**\n   - Components overview: https://www.cometchat.com/docs/ui-kit/react/components-overview\n   - Theming + styling: https://www.cometchat.com/docs/ui-kit/react/theme\n   - Events: https://www.cometchat.com/docs/ui-kit/react/events\n   - Methods: https://www.cometchat.com/docs/ui-kit/react/methods\n\n## Steps\n\n### Step 1 — Verify Phase A is done\n\n```bash\nnpx @cometchat/skills-cli info --json\n```\n\nIf `integrated` is `false`, **stop** and tell the user to run\n`/cometchat` first to create the base integration. Customization\nmodifies an existing integration; it doesn't create one.\n\nNote the `framework`, `experience`, `files_owned`, and `applied_features`\nfrom the response — you'll need them in the next steps.\n\n### Step 2 — Four-tier discovery: existing-component prop, new component, stylesheet, sample app\n\n> **START HERE:** Read the **component catalog** at\n> `references/component-catalog.md` (in this skill's directory). It has\n> the canonical list of all 88 exported symbols, all 14 sample-app\n> patterns, and a 40-row task→component lookup table. If the user's\n> request maps to an entry in the catalog, use that entry directly —\n> skip the rest of this step.\n\n**If the catalog doesn't have a match (or you need prop-level detail),\nwalk these FOUR discovery checks in this exact order:**\n\n1. **Existing-component prop check (2a):** does a component the\n   integration ALREADY mounts have a prop that does what the user is\n   asking for? **The kit follows a \"props over components\" philosophy\n   — most additions are props on existing components, not new\n   components.** This check goes FIRST.\n2. **New-component check (2b):** if 2a turned up nothing, is there a\n   built-in `CometChat<X>` component in `@cometchat/chat-uikit-react`'s\n   exports?\n3. **Stylesheet check (2c):** is there a `--cometchat-<x>` CSS\n   variable for any styling you'd write?\n4. **Sample app check (2d):** is there a reference implementation in\n   the sample app at\n   `github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app/src/components`\n   for the user's pattern?\n\nThe CometChat React UI Kit ships FOUR things, not one:\n- A \"props over components\" API where most features (search bar,\n  filters, custom views, click handlers, disable flags) are PROPS on\n  existing components — NOT new components\n- 60+ named React components in the npm package\n- A 200+ CSS variable system at\n  `@cometchat/chat-uikit-react/css-variables.css`\n- A reference sample app on GitHub with implementations for common\n  chat UX patterns (user/group details, threaded messages layout,\n  top-level home layout, multi-tab chat, notifications, new chat\n  dialog, etc.) that combine multiple kit components but aren't\n  shipped as single named exports\n\n**Critical:** the docs MCP does NOT index the sample app. When the MCP\nsays *\"no `CometChat<X>` component exists\"*, that only covers the npm\npackage — you must still check the sample app via GitHub before\nconcluding the user needs hand-rolled code.\n\nHand-rolling something the kit, the variable system, OR the sample\napp already provides means missing the kit's theming, accessibility,\ni18n, error handling, and every future SDK update.\n\n#### 2a. Existing-component prop check (do this FIRST)\n\n**Most chat features are already props on the components you have.**\nA user asking for \"add search\", \"filter conversations\", \"custom empty\nstate\", or \"click handler on a message\" is almost always asking for a\nprop, not a new component or custom code.\n\n**Process:**\n\n1. **List the CometChat components currently mounted in the\n   integration.** Read the integration's owned files (from\n   `state.json`) and grep for `<CometChat` JSX usage:\n   ```bash\n   grep -hoE '<CometChat[A-Z][a-zA-Z]*' \\\n     $(jq -r '.files_owned[]' .cometchat/state.json 2>/dev/null) \\\n     2>/dev/null | sort -u\n   ```\n2. **Query the docs MCP for the props of each mounted component:**\n   - `\"CometChatConversations props\"`\n   - `\"CometChatMessageList props\"`\n   - `\"CometChatMessageHeader props\"`\n   - `\"CometChatMessageComposer props\"`\n3. **Look for a prop that maps to the user's intent.** Common\n   mappings:\n\n| User asks for | Likely prop on which component |\n|---|---|\n| Search bar / \"add search\" | `showSearchBar` on `CometChatConversations` (or `onSearchBarClicked` to swap in `<CometChatSearch>` for advanced dual-scope search) |\n| Filter conversations | `conversationsRequestBuilder` on `CometChatConversations` |\n| Filter messages | `messagesRequestBuilder` on `CometChatMessageList` |\n| Filter users / groups | `usersRequestBuilder` / `groupsRequestBuilder` |\n| Custom empty state | `emptyStateView` on most list components |\n| Custom error UI | `errorStateView` |\n| Custom loading UI | `loadingStateView` |\n| Custom header above the list | `headerView` |\n| Custom message bubble | `templates` prop on `CometChatMessageList` (not a custom bubble component) |\n| Click handler on item / message / search bar / back button | `onItemClick`, `onMessageClick`, `onBack`, `onSearchBarClicked` |\n| Hide / disable a sub-feature | `disable*` boolean props (e.g. `disableTyping`, `disableReactions`) |\n| Custom subtitle / status / timestamp | `subtitleView`, `statusView`, `timestampView` |\n| Show / hide receipts | `hideReceipts` |\n| Selection mode | `selectionMode` on list components |\n\nIf you find a matching prop, **just add the prop and stop**. No new\ncomponents. No custom CSS. No new files. Surface to the user: *\"The\n`<X>` you already have supports this via the `<propName>` prop. Adding\nthat single prop.\"*\n\nIf 2a turns up nothing, proceed to 2b.\n\n#### 2b. New-component check (do this only if 2a turned up nothing)\n\n**Common requests that look like \"customization\" but are actually\n\"use the existing component\":**\n\n| User asks for | Use this built-in component |\n|---|---|\n| Threaded replies / \"wire up threads\" | `CometChatThreadHeader` + scope a `CometChatMessageList` and `CometChatMessageComposer` with `parentMessageId` |\n| Group members panel / \"list group members\" | `CometChatGroupMembers` |\n| Add members to a group | `CometChatAddMembers` |\n| Transfer group ownership | `CometChatTransferOwnership` |\n| Banned users management | `CometChatBannedMembers` |\n| Block/unblock users panel | `CometChatBlockedUsers` |\n| New chat / \"start a new conversation\" dialog | `CometChatNewChat` |\n| Create new group dialog | `CometChatCreateGroup` |\n| User / group details panel | `CometChatDetails` |\n| Mentions popover in composer | `CometChatMentionsFormatter` (already wired into the composer) |\n| Voice / video call buttons in header | `CometChatCallButtons` |\n| Outgoing call screen | `CometChatOutgoingCall` |\n| Incoming call notification | `CometChatIncomingCall` |\n| Ongoing call UI | `CometChatOngoingCall` |\n| Call logs list | `CometChatCallLogs` |\n| Reactions on messages | Already built into `CometChatMessageList` — check if it's just disabled |\n| Message bubble customization | Use the `templates` prop on `CometChatMessageList`, not a custom bubble component |\n\n**Search strategies, in this order:**\n\n1. **Query the docs MCP** with the user's intent in plain English.\n   Examples:\n   - `\"thread reply UI react ui kit\"` → finds `CometChatThreadHeader`\n   - `\"new chat dialog\"` → finds `CometChatNewChat`\n   - `\"group transfer ownership\"` → finds `CometChatTransferOwnership`\n   - `\"block user list\"` → finds `CometChatBlockedUsers`\n2. **Grep the user's installed package** for matching exports:\n   ```bash\n   grep -E \"^export.*CometChat[A-Z][a-zA-Z]+\" \\\n     node_modules/@cometchat/chat-uikit-react/dist/index.d.ts \\\n     2>/dev/null | head -50\n   ```\n3. **Browse the v6 components reference** at\n   https://www.cometchat.com/docs/ui-kit/react/components-overview\n\nIf you find a built-in component that matches, **use it as-is**.\nSurface to the user: *\"The kit already ships `CometChat<X>` for this.\nI'll wire it up directly.\"*\n\n#### 2c. Stylesheet check (do this even when you DO need custom layout glue)\n\nEven when you have to write some CSS for layout glue (positioning a\npanel, sizing a container, wiring up the height chain that\n`.cometchat-message-list` requires), **never hand-pick colors, fonts,\nborders, spacings, or radii from your head**. The kit ships a\ncanonical CSS variable system. Use it.\n\n**The rule:**\n- ✅ **OK:** custom CSS for layout glue (positioning, sizing, flex\n  containers, the height chain). Example: `.thread-wrapper { width:\n  400px; height: 100vh; display: flex; flex-direction: column; }`\n- ✅ **OK:** custom CSS that consumes kit variables. Example:\n  `.thread-wrapper { border-left: 1px solid var(--cometchat-border-color-light); background: var(--cometchat-background-color-01); }`\n- ❌ **NOT OK:** custom CSS for any header / button / icon / panel /\n  badge / divider that the kit already provides as a component.\n  Example: a hand-rolled `.thread-header` + `.thread-close` button when\n  `CometChatThreadHeader` exists.\n- ❌ **NOT OK:** hardcoded colors / fonts / borders / radii / spacings\n  that don't reference the `--cometchat-*` variables. Example:\n  `border: 1px solid #E8E8E8` instead of\n  `border: 1px solid var(--cometchat-border-color-light)`.\n\n**Discovery commands for the variable system:**\n```bash\n# List every --cometchat-* variable the kit defines\ngrep -oE '\\-\\-cometchat-[a-z0-9-]+' \\\n  node_modules/@cometchat/chat-uikit-react/css-variables.css \\\n  2>/dev/null | sort -u | head -60\n\n# Or search for a specific token category\ngrep -E '\\-\\-cometchat-(border|background|text|primary|font)' \\\n  node_modules/@cometchat/chat-uikit-react/css-variables.css \\\n  2>/dev/null | head -40\n```\n\n**Common variable categories** (query the docs MCP for the canonical\nlist — these change between SDK versions):\n\n| Category | Example variables |\n|---|---|\n| Brand colors | `--cometchat-primary-color`, `--cometchat-error-color`, `--cometchat-success-color` |\n| Backgrounds | `--cometchat-background-color-01` (white), `--cometchat-background-color-02`, `--cometchat-background-color-03` (light grey) |\n| Text | `--cometchat-text-color-primary`, `--cometchat-text-color-secondary`, `--cometchat-text-color-tertiary` |\n| Borders | `--cometchat-border-color-light`, `--cometchat-border-color-default`, `--cometchat-border-color-dark` |\n| Radii | `--cometchat-radius-1`, `--cometchat-radius-2`, `--cometchat-radius-3`, `--cometchat-radius-max` |\n| Fonts | `--cometchat-font-heading1-bold`, `--cometchat-font-heading4-medium`, `--cometchat-font-body-regular`, `--cometchat-font-caption2-regular` |\n| Spacing | `--cometchat-spacing-1` through `--cometchat-spacing-10` |\n| Shadows | `--cometchat-shadow-1`, `--cometchat-shadow-2`, `--cometchat-shadow-3` |\n\n#### 2d. Sample app reference check (do this when 2a + 2b turned up nothing)\n\nIf 2b didn't find a `CometChat<X>` component for the user's request,\n**don't immediately conclude they need custom code**. The kit ships a\n**reference sample app** at:\n\n> https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app/src/components\n\nwith implementations for common chat UX patterns that combine multiple\nkit components but aren't shipped as single named exports. Examples\nthat look like \"missing components\" but are in the sample app:\n\n| User asks for | Sample app reference path |\n|---|---|\n| User / group details panel | `sample-app/src/components/CometChatDetails/CometChatUserDetails.tsx` (group details is inline in `CometChatHome.tsx`'s `SideComponentGroup`) |\n| Threaded messages panel layout | `sample-app/src/components/CometChatDetails/CometChatThreadedMessages.tsx` |\n| Top-level chat layout (left pane + main + side rail) | `sample-app/src/components/CometChatHome/CometChatHome.tsx` |\n| Multi-tab chat (Chats / Calls / Users / Groups) | `sample-app/src/components/CometChatSelector/CometChatTabs.tsx` |\n| New conversation dialog with user/group picker | Inline in `CometChatHome.tsx` as `CometChatNewChatView` (CSS: `sample-app/src/styles/CometChatNewChat/CometChatNewChatView.css`) |\n| Search view (conversations + messages) | `sample-app/src/components/CometChatSearchView/` |\n| Call log details / history / recordings | `sample-app/src/components/CometChatCallLog/` (5 sub-files: Details, History, Info, Participants, Recordings) |\n| App state / active-chat React context | `sample-app/src/context/AppContext.jsx` + `appReducer.ts` |\n| Group ownership transfer modal | `sample-app/src/components/CometChatTransferOwnership/` |\n\nThese patterns include matching CSS at\n`sample-app/src/styles/<ComponentName>/` using BEM-style class names\nthat are already wired to the kit's CSS variable system.\n\n**Discovery commands:**\n\n```bash\n# List the sample app's components directory via the GitHub API\ncurl -s \"https://api.github.com/repos/cometchat/cometchat-uikit-react/contents/sample-app/src/components?ref=v6\" \\\n  | grep -oE '\"name\":\\s*\"[^\"]+\"' | head -30\n\n# Fetch a specific component file directly\ncurl -s \"https://raw.githubusercontent.com/cometchat/cometchat-uikit-react/v6/sample-app/src/components/CometChatDetails/CometChatUserDetails.tsx\"\n\n# Fetch its matching stylesheet\ncurl -s \"https://raw.githubusercontent.com/cometchat/cometchat-uikit-react/v6/sample-app/src/styles/CometChatDetails/CometChatUserDetails.css\"\n```\n\nYou can also use WebFetch on the URLs above. The docs MCP does NOT\nindex the sample app — you must fetch it from GitHub directly.\n\n**If you find a matching reference implementation:**\n\n1. Read BOTH the `.tsx` file AND its matching `.css` file (at\n   `sample-app/src/styles/<ComponentName>/`)\n2. Mirror the sample app's file/folder structure in the user's project,\n   e.g. `src/cometchat/CometChatDetails/CometChatUserDetails.tsx` plus\n   `src/cometchat/CometChatDetails/CometChatDetails.css`\n3. Match the **exact BEM class names** from the sample\n   (`.cometchat-user-details__header`,\n   `.cometchat-user-details__content-avatar`, etc.) — they're already\n   integrated with the kit's CSS variable system\n4. Strip the sample app's local dependencies that the user's project\n   doesn't have:\n   - `useContext(AppContext)` → inline the values\n   - `getLocalizedString(...)` → inline the English strings\n   - `cometchat-resources/` SVG icons → use Unicode equivalents or\n     strip them\n5. Tell the user: *\"The kit doesn't export this as a single component,\n   but the official sample app has the reference implementation at\n   `cometchat/cometchat-uikit-react/v6/sample-app/.../CometChat<X>`.\n   I'm adapting it to your project.\"*\n\n#### 2e. After discovery — decide what to do\n\nIn strict order, take the FIRST option that applies:\n\n1. **An existing component prop matches (2a):** add the prop. Done.\n   No new files. Most chat features land here.\n2. **A new component matches (2b) AND has its own styling:** use the\n   component as-is. Zero custom CSS.\n3. **A new component matches (2b) but you need layout glue:** use the\n   component; write minimal layout-only CSS that consumes\n   `--cometchat-*` variables (per 2c).\n4. **Sample app has a reference implementation (2d):** adapt the\n   sample app pattern, mirroring its file structure and BEM class\n   names.\n5. **None of the above:** then (and only then) proceed to Step 3 to\n   classify the request as a true customization.\n\n### Step 3 — Classify the customization\n\nRead the user's request and place it into one of these buckets. The\nright approach is different per bucket:\n\n| Bucket | Examples | Approach |\n|---|---|---|\n| **A. Custom view slot** | \"add a custom header above the conversation list\", \"show a custom empty state\", \"render messages with my own bubble\" | Use the corresponding `*View` prop (`headerView`, `emptyStateView`, `bubbleView`, etc.) — query the MCP for which prop the target component supports |\n| **B. Filter / pagination** | \"only show conversations with VIP users\", \"load 10 messages at a time\", \"show only joined groups\" | Use the corresponding RequestBuilder (`ConversationsRequestBuilder.setTags`, `setLimit`, `setUserAndGroupTags`, etc.) — query the MCP for the builder methods |\n| **C. Action / callback** | \"do X when a user clicks a conversation\", \"intercept message send\", \"log every search\" | Use the corresponding `on*` callback prop (`onItemClick`, `onSendButtonClick`, `onSearch`, etc.) — query the MCP for the callback signature |\n| **D. Event subscription** | \"show a toast when a new message arrives\", \"update my unread count when someone reads a message\", \"track typing indicators\" | Subscribe to the corresponding `CometChat*Events` topic (`CometChatMessageEvents.ccMessageSent`, `ccMessageRead`, `CometChatUserEvents.ccUserOnline`, etc.) — query the MCP for the event topic |\n| **E. Component-level CSS** | \"make incoming bubbles green\", \"hide the conversation timestamps\", \"compact the message list spacing\" | Add a CSS rule under `.cometchat <selector>` in the integration's global stylesheet — query the MCP for the right selector class. NEVER invent class names; the SDK's selectors are namespaced and prefix-protected. |\n| **F. Component composition** | \"wrap CometChatConversations with my own search bar\", \"render two CometChatGroups side by side\", \"embed CometChatMessageList inside my own card layout\" | Standard React composition. The CometChat components are React components — use them like any other component. Query the MCP for which props are required vs optional. |\n\nIf the user's request doesn't fit any bucket, **ask them to clarify** —\ndon't guess. Customization is the place where ambiguous requests\nproduce wrong code most often.\n\n### Step 4 — Query the docs MCP for the canonical pattern (only if Step 2 turned up nothing)\n\nOnce you've classified the request, query the docs MCP with a specific\nsearch:\n\n| Bucket | MCP query example |\n|---|---|\n| A. Custom view slot | \"headerView prop CometChatConversations\" |\n| B. Filter / pagination | \"ConversationsRequestBuilder methods setTags\" |\n| C. Action / callback | \"CometChatMessageList onMessageClick callback signature\" |\n| D. Event subscription | \"CometChatMessageEvents ccMessageSent subscribe\" |\n| E. Component-level CSS | \"CSS selector cometchat-message-bubble-incoming\" |\n| F. Component composition | \"CometChatConversations props required\" |\n\nThe MCP returns canonical, current docs. Read them BEFORE writing any\ncode. If multiple results come back, prefer the React UI Kit v6 result\nover older versions.\n\n### Step 5 — Identify the file to modify\n\nUse the framework + experience you noted in Step 1 to find the right\nfile. The integration's primary client file is conventional per\nframework:\n\n| Framework | Primary client file |\n|---|---|\n| reactjs (Vite) | `src/App.tsx` (renders the conversation list / messages) + `src/cometchat/CometChatSelector.tsx` (the selector) |\n| nextjs (App Router) | `src/app/cometchat/CometChatNoSSR.tsx` (renders the chat) + `src/app/cometchat/CometChatSelector.tsx` (the selector) |\n| nextjs (Pages Router) | `src/cometchat/CometChatNoSSR.tsx` + `src/cometchat/CometChatSelector.tsx` |\n| react-router (v6 + v7) | `app/cometchat/CometChatNoSSR.tsx` + `app/cometchat/CometChatSelector.tsx` |\n| astro | `src/cometchat/ChatApp.tsx` (the React island) + `src/cometchat/CometChatSelector.tsx` |\n\nFor CSS overrides (bucket E), the global stylesheet is:\n- reactjs → `src/index.css`\n- nextjs (App Router) → `src/app/globals.css`\n- nextjs (Pages Router) → `src/styles/globals.css`\n- react-router → `app/app.css`\n- astro → inside `src/cometchat/ChatApp.tsx` (NOT a global stylesheet)\n\nThese are also in `state.json` under `files_owned` if you need to verify.\n\n### Step 6 — Write the customization\n\nGenerate the code based on the docs MCP response from Step 4. Show the\nuser:\n\n1. **What you're going to change** (which file, which lines, the new\n   code)\n2. **Why** (which prop/builder/event the docs say to use)\n3. **A preview of the diff** (just the changed region, not the whole\n   file)\n\n**Wait for the user to confirm** before writing. Customization edits\nthe integration's owned files — drift detection will show this on the\nnext `cometchat info`. The user should know.\n\nIf the user confirms, write the change. If they don't, surface what\nthey'd want to change and stop.\n\n### Step 7 — Verify\n\n```bash\nnpx @cometchat/skills-cli verify --json\n```\n\nThe 5 AST checks still apply to customized files. If anything fails,\nsurface verbatim and offer to revert.\n\n```bash\nnpx @cometchat/skills-cli info --json\n```\n\nThe customized file will now show as drifted (its checksum no longer\nmatches the original template). This is expected — it's the\n**explicit** drift the user just asked for. Not a bug.\n\n### Step 8 — Tell the user what to do next\n\nThe dev server picks up React changes via HMR. Tell the user:\n1. Save the file (if their editor doesn't auto-save)\n2. Refresh the browser tab\n3. Test the customization\n\nThen offer to do another customization OR to return to the framework\nskill's Phase B menu.\n\n## Hard rules\n\n- **Always do the FOUR-tier discovery before adding any new component\n  or hand-rolled UI.** The kit follows a \"props over components\"\n  philosophy and ships FOUR things, not one:\n  (0) **props** on already-mounted components for most features\n      (search bar, filters, custom views, click handlers, disable\n      flags) — check this FIRST,\n  (1) 60+ named React components in `@cometchat/chat-uikit-react`,\n  (2) a 200+ CSS variable system in `css-variables.css`,\n  (3) a reference sample app at\n      `github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app/src/components`\n      with implementations for common chat UX patterns that combine\n      multiple kit components but aren't shipped as single named\n      exports (user/group details panels, thread layouts, top-level\n      home layout, notifications, new chat dialog, etc.).\n  The docs MCP does NOT index the sample app — fetch it from GitHub\n  directly. Adding a new component when an existing one's prop would\n  do, or hand-rolling something the kit, the variable system, or the\n  sample app already provides, means missing the kit's theming, i18n,\n  accessibility, and every future SDK update. Step 2 (subsections 2a\n  + 2b + 2c + 2d) is mandatory — do NOT skip it. **2a\n  (existing-component prop check) goes FIRST** because most features\n  are props on already-mounted components, not new components.\n- **Custom CSS is allowed ONLY for layout glue** (positioning,\n  sizing, flex/grid containers, the height chain). Even there, never\n  hardcode colors / fonts / borders / radii / spacings — always\n  reference `--cometchat-*` variables. Hand-rolled headers, buttons,\n  icons, panels, badges, dividers, etc. are NEVER OK if the kit\n  already provides them.\n- **Always query the docs MCP first** for any prop, builder, event, or\n  CSS selector. Never invent SDK API from memory.\n- **Verify Phase A is done** before customizing. This skill modifies\n  existing integration files; it does not create new ones.\n- **Show the user the change before writing**. Customization is\n  user-side intent — they need visibility.\n- **Drift detection is expected after customization**, not a bug.\n  The user's customizations live in `state.files_owned` and will\n  show up in `cometchat info` as modified. That's correct.\n- **Prefer composition over CSS overrides** when both are options —\n  composition is stable across SDK versions; CSS selectors are not.\n- **Never invent CSS class names** — query the MCP. The SDK's class\n  prefix is `.cometchat-` but the leaf names (`-message-bubble-incoming`,\n  `-conversations-header`, etc.) MUST come from the docs.\n- **If the docs MCP is not installed**, refuse to continue and tell\n  the user how to install it.\n- **Always use `npx @cometchat/skills-cli`** for any CLI commands.\n\n## What this skill does NOT do\n\n- It does not write **template** files (that's `cometchat init`)\n- It does not **enable packaged features** (that's `cometchat-features`\n  + `cometchat apply-feature`)\n- It does not **change theme tokens** (that's `cometchat-theming` +\n  `cometchat apply-theme`)\n- It does not **fix broken integrations** (that's\n  `cometchat-troubleshooting` + `cometchat doctor`)\n- It does not **add new components from scratch** — it customizes\n  components that the integration already uses\n\nFor anything in the \"does not\" list, route the user to the right\nskill/command instead of attempting it here.","tags":["cometchat","customization","skills","agent-skills","ai-agent","chat","claude-code","cursor","messaging","nextjs","react","react-native"],"capabilities":["skill","source-cometchat","skill-cometchat-customization","topic-agent-skills","topic-ai-agent","topic-chat","topic-claude-code","topic-cometchat","topic-cursor","topic-messaging","topic-nextjs","topic-react","topic-react-native","topic-ui-kit"],"categories":["cometchat-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/cometchat/cometchat-skills/cometchat-customization","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add cometchat/cometchat-skills","source_repo":"https://github.com/cometchat/cometchat-skills","install_from":"skills.sh"}},"qualityScore":"0.463","qualityRationale":"deterministic score 0.46 from registry signals: · indexed on github topic:agent-skills · 27 github stars · SKILL.md body (27,865 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T19:04:49.465Z","embedding":null,"createdAt":"2026-05-07T13:05:08.676Z","updatedAt":"2026-05-18T19:04:49.465Z","lastSeenAt":"2026-05-18T19:04:49.465Z","tsv":"'-30':2198 '-40':1805 '-50':1523 '-60':1783 '/cometchat':118,220,596,2380 '/cometchat/cometchat-uikit-react/tree/v6/sample-app/src/components':834,1995,3348 '/cometchat/cometchat-uikit-react/v6/sample-app/src/components/cometchatdetails/cometchatuserdetails.tsx':2209 '/cometchat/cometchat-uikit-react/v6/sample-app/src/styles/cometchatdetails/cometchatuserdetails.css':2218 '/dev/null':1100,1102,1521,1779,1803 '/docs/mcp':525 '/docs/ui-kit/react/components-overview':558,1533 '/docs/ui-kit/react/events':567 '/docs/ui-kit/react/methods':571 '/docs/ui-kit/react/theme':563 '/repos/cometchat/cometchat-uikit-react/contents/sample-app/src/components?ref=v6':2192 '/src/components/cometchatcalllog':2117 '/src/components/cometchatdetails/cometchatthreadedmessages.tsx':2058 '/src/components/cometchatdetails/cometchatuserdetails.tsx':2042 '/src/components/cometchathome/cometchathome.tsx':2072 '/src/components/cometchatsearchview':2108 '/src/components/cometchatselector/cometchattabs.tsx':2084 '/src/components/cometchattransferownership':2146 '/src/context/appcontext.jsx':2137 '/src/styles':2156,2266 '/src/styles/cometchatnewchat/cometchatnewchatview.css':2100 '0':3303 '01':1687,1844 '02':1850 '03':1855 '1':458,574,731,1059,1458,1894,1932,1942,2251,2404,2940,3062,3232,3325 '10':1937,2591 '100vh':1652 '14':672 '1px':1673,1740,1746 '2':486,634,778,1099,1101,1105,1495,1520,1778,1802,1898,1946,2267,2423,2832,3076,3244,3332,3440 '200':884,3334 '2a':737,785,1007,1295,1311,1959,2410,3442,3452 '2b':783,1301,1302,1960,1965,2428,2448,3443 '2c':804,1566,2468,3444 '2d':821,1951,2476,3445 '2e':2388 '3':530,801,1125,1524,1902,1950,2284,2443,2502,2512,3085,3249,3340 '4':550,817,2318,2469,2820,3058 '40':679 '400px':1650 '5':2118,2355,2490,2926,3157 '6':3043 '60':875,3326 '7':3149 '8':3212 '88':668 '9':1774 'a-z':1087,1510 'a-z0':1771 'a-za-z':1090,1513 'access':998,3433 'across':547,3616 'action':34,205,2616,2868 'activ':2130 'active-chat':2129 'actual':1323 'ad':1290,3280,3398 'adapt':2383,2477 'add':184,202,517,1031,1149,1263,1357,2411,2543,2708,3743 'addit':765 'advanc':1160 'agent':126,137 'ai':238 'allow':3476 'almost':1045 'alreadi':116,743,990,1020,1283,1398,1429,1555,1703,2165,2309,3307,3424,3467,3517,3754 'already-mount':3306,3466 'also':2221,3031 'alway':459,1046,3272,3497,3520,3673 'ambigu':2812 'anoth':3257 'anyth':3166,3757 'api':854,2187,3537 'api.github.com':2191 'api.github.com/repos/cometchat/cometchat-uikit-react/contents/sample-app/src/components?ref=v6':2190 'app':647,675,819,830,893,944,965,989,1953,1991,2027,2032,2041,2057,2071,2083,2099,2107,2116,2127,2136,2145,2155,2180,2236,2265,2271,2322,2373,2471,2480,2972,3011,3344,3392,3423 'app/app.css':3021 'app/cometchat/cometchatnossr.tsx':2991 'app/cometchat/cometchatselector.tsx':2992 'appcontext':2335 'appli':18,266,620,2403,3161,3710,3725 'apply-featur':17,3709 'apply-them':265,3724 'appreducer.ts':2138 'approach':2531,2538 'aren':928,2009,3362 'arriv':2659 'as-i':1546,2437 'ask':754,1029,1047,1140,1329,2029,2800,3206 'ast':3158 'astro':2993,3022 'attempt':3772 'auto':3242 'auto-sav':3241 'avatar':2305 'b':2581,2861,3268 'back':1221,2914 'background':1681,1685,1795,1839,1842,1848,1853 'badg':1698,3508 'ban':1367 'bar':859,1148,1220,2751,3314 'base':601,3050 'bash':580,1083,1505,1760,2176,3151,3174 'behav':157 'bem':2159,2288,2487 'bem-styl':2158 'beyond':11,158 'block':1490 'block/unblock':1371 'bodi':1921 'bold':1912 'boolean':1234 'border':257,1613,1671,1678,1728,1739,1745,1751,1794,1874,1877,1882,1887,3494 'border-left':1670 'brand':1825 'broken':300,3731 'brows':1525 'browser':3247 'bubbl':23,182,449,1204,1212,1440,1451,2561,2697,2890,3644 'bubbleview':397,2569 'bucket':2528,2535,2536,2799,2850,3002 'bug':3210,3583 'builder':37,329,415,474,507,2613,3529 'built':793,1334,1430,1539 'built-in':792,1333,1538 'button':1222,1406,1695,1719,3505 'c':2615,2867 'call':236,1405,1411,1415,1419,1422,2078,2109 'callback':327,2617,2636,2647,2869,2872 'calllogsrequestbuild':423 'canon':339,511,551,664,1624,1815,2827,2901 'caption2':1926 'card':2763 'catalog':50,653,696,709 'categori':410,1790,1808,1822 'ccmessageread':2680 'ccmessages':2878 'chain':1600,1644,3487 'chang':151,179,251,358,1818,3068,3093,3134,3145,3226,3563,3715 'chat':133,190,900,916,919,1017,1376,1481,2000,2062,2076,2077,2131,2419,2977,3353,3381 'check':726,736,775,782,803,820,962,1012,1306,1433,1568,1955,3159,3322,3457 'checksum':3188 'clarifi':2803 'class':480,2161,2289,2488,2727,2730,3626,3634 'classifi':2504,2513,2839 'claud':515 'cli':161,3679 'click':863,1039,1214,2623,3318 'client':2950,2958 'close':1718 'code':108,469,976,1057,1984,2816,2909,3049,3075 'color':255,1611,1679,1686,1726,1752,1826,1830,1834,1838,1843,1849,1854,1862,1867,1872,1878,1883,1888,3492 'color/shape/layout':183 'column':1658 'combin':923,2004,3357 'come':2913,3651 'cometchat':2,6,13,16,45,66,96,122,130,244,261,264,286,303,307,340,360,365,447,452,501,521,795,808,841,950,1062,1080,1086,1509,1557,1603,1677,1684,1736,1750,1763,1770,1793,1828,1832,1836,1841,1847,1852,1860,1865,1870,1876,1881,1886,1892,1896,1900,1904,1909,1914,1919,1924,1930,1935,1940,1944,1948,1970,2295,2300,2345,2465,2676,2713,2769,2888,3122,3499,3597,3637,3695,3706,3708,3721,3723,3736,3738 'cometchat-background-color':1683,1840,1846,1851 'cometchat-border-color-dark':1885 'cometchat-border-color-default':1880 'cometchat-border-color-light':1676,1749,1875 'cometchat-compon':44,65 'cometchat-conversations-head':451 'cometchat-custom':1 'cometchat-doc':95,364,520 'cometchat-error-color':1831 'cometchat-featur':243,3705 'cometchat-font-body-regular':1918 'cometchat-font-caption2-regular':1923 'cometchat-font-heading1-bold':1908 'cometchat-font-heading4-medium':1913 'cometchat-message-bubble-incom':446,2887 'cometchat-message-list':1602 'cometchat-primary-color':1827 'cometchat-radius':1891,1895,1899 'cometchat-radius-max':1903 'cometchat-resourc':2344 'cometchat-shadow':1939,1943,1947 'cometchat-spac':1929,1934 'cometchat-success-color':1835 'cometchat-text-color-primari':1859 'cometchat-text-color-secondari':1864 'cometchat-text-color-tertiari':1869 'cometchat-them':260,3720 'cometchat-troubleshoot':302,3735 'cometchat-user-detail':2294,2299 'cometchat/chat-uikit-react':798,3331 'cometchat/chat-uikit-react/css-variables.css':889,1777,1801 'cometchat/chat-uikit-react/dist/index.d.ts':1519 'cometchat/cometchat-uikit-react/v6/sample-app':2379 'cometchat/skills-cli':582,3153,3176,3676 'cometchat/state.json':147,1098 'cometchataddmemb':1362 'cometchatbannedmemb':1370 'cometchatblockedus':1374,1494 'cometchatcallbutton':1409 'cometchatcallev':432 'cometchatcalllog':1425 'cometchatconvers':1117,1153,1169,2746,2860,2895 'cometchatcreategroup':1387 'cometchatdetail':1392 'cometchatgroup':2754 'cometchatgroupev':431 'cometchatgroupmemb':1356 'cometchathome.tsx':2048,2093 'cometchatincomingcal':1417 'cometchatmentionsformatt':1397 'cometchatmessagecompos':1123,1347 'cometchatmessageev':429,2877 'cometchatmessageevents.ccmessagesent':2679 'cometchatmessagehead':1121 'cometchatmessagelist':1119,1174,1208,1345,1432,1447,2759,2870 'cometchatmessagetemplate.type':409 'cometchatnewchat':1382,1484 'cometchatnewchatview':2095 'cometchatongoingcal':1421 'cometchatoutgoingcal':1413 'cometchatthreadhead':1342,1479,1721 'cometchattransferownership':1366,1489 'cometchatuiev':433 'cometchatuserev':430 'cometchatuserevents.ccuseronline':2681 'cometchatx':219 'command':164,1755,2175,3680 'common':899,1137,1315,1806,1999,3352 'compact':2703 'companion':42 'complet':140 'compon':46,49,67,71,154,381,385,402,442,554,641,644,652,682,734,740,762,770,773,781,796,853,871,874,878,926,951,1010,1024,1054,1063,1116,1146,1187,1213,1255,1270,1305,1327,1336,1452,1528,1541,1707,1971,2007,2021,2182,2202,2368,2407,2426,2436,2446,2456,2579,2692,2743,2770,2773,2779,2882,2893,3283,3295,3309,3329,3360,3401,3455,3469,3472,3745,3750 'component-level':441,2691,2881 'compos':1396,1402 'composit':532,543,2744,2767,2894,3605,3613 'conclud':969,1980 'confirm':3104,3131 'consum':1663,2464 'contain':1595,1641,3484 'content':2304 'content-avatar':2303 'contentview':411 'context':2133 'continu':3664 'contract':311 'convent':2953 'convers':174,453,1034,1166,1380,2086,2103,2549,2586,2625,2701,2965,3647 'conversations-head':3646 'conversationsrequestbuild':419,1167,2864 'conversationsrequestbuilder.settags':2604 'correct':3603 'correspond':2564,2602,2634,2675 'count':2663 'cover':89,955 'creat':352,599,611,1383,3556 'critic':935 'css':333,438,479,537,809,885,1273,1586,1625,1634,1661,1691,2096,2151,2171,2260,2315,2442,2462,2694,2710,2884,2885,3000,3335,3474,3532,3607,3619,3625 'css-variables.css':3339 'curl':2188,2205,2214 'current':1064,2902 'custom':3,4,21,24,27,30,33,57,84,168,186,199,204,221,320,390,468,498,533,603,861,1035,1056,1180,1188,1192,1196,1202,1211,1239,1272,1320,1441,1450,1576,1633,1660,1690,1983,2441,2510,2515,2540,2545,2553,2807,2855,3046,3107,3163,3180,3252,3258,3316,3473,3546,3566,3580,3587,3749 'd':815,2649,2874,3142 'dark':1889 'data':418,484 'decid':2391 'default':389,1884 'defin':1767 'depend':2325 'detail':721,904,1390,2037,2044,2111,2122,2297,2302,3370 'detect':3115,3576 'determinist':163,269 'dev':3221 'dialog':920,1381,1386,1482,2087,3382 'didn':1966 'diff':3090 'differ':2533 'direct':700,1565,1657,2204,2243,3397 'directori':660,2183 'disabl':865,1228,1233,1438,3320 'disablereact':1238 'disabletyp':1237 'discoveri':638,725,1754,2174,2390,3278 'dispatch':287 'display':1653 'divid':1699,3509 'doc':92,97,309,317,341,361,366,462,489,502,522,937,1108,1461,1811,2229,2823,2844,2903,3053,3081,3385,3523,3654,3657 'docs-driven':316 'doctor':308,3739 'doesn':271,609,710,2331,2361,2795,3239 'done':579,2414,3544 'drift':353,3114,3186,3202,3575 'driven':318 'dual':1162 'dual-scop':1161 'e':1507,1792,2690,2880,3003 'e.g':1236,2280 'e8e8e8':1742 'edit':3108 'editor':3238 'emb':2758 'embed':348 'empti':1036,1181,2554 'empty/loading':31 'emptystateview':398,1183,2568 'enabl':232,3700 'english':1470,2342 'entri':693,699 'equival':2351 'error':1000,1189,1833 'errorstateview':400,1191 'etc':241,455,921,2306,2570,2607,2641,2682,3383,3510,3649 'even':1571,1579,3488 'event':39,196,331,428,476,508,564,2650,2677,2688,2875,3530 'everi':319,384,386,388,505,1003,1762,2630,3435 'exact':729,2287 'exampl':349,1471,1645,1666,1708,1738,1823,2016,2537,2853 'execut':82 'exist':52,63,606,640,733,769,870,952,1009,1326,1722,2406,3404,3454,3550 'existing-compon':639,732,1008,3453 'expect':3197,3578 'experi':616,2935 'explicit':3201 'export':669,800,934,1504,1508,2015,2363,3368 'f':2742,2892 'fact':324 'fail':3167 'fals':588 'featur':19,235,245,621,857,1018,1232,2420,3312,3462,3702,3707,3711 'fetch':2199,2210,2239,3393 'file':617,1074,1096,1276,2121,2203,2256,2261,2417,2484,2929,2945,2951,2959,3035,3070,3098,3113,3164,3181,3235,3552,3692 'file/folder':2273 'filter':38,172,417,860,1033,1165,1170,1175,2582,2862,3315 'find':1258,1478,1483,1488,1493,1536,1968,2246,2942 'first':293,464,597,777,1015,2400,3324,3459,3525 'fit':2797 'fix':298,3730 'flag':866,3321 'flex':1640,1654,1656 'flex-direct':1655 'flex/grid':3483 'follow':758,3291 'font':256,1612,1727,1798,1907,1910,1915,1920,1925,3493 'footerview':413 'four':636,724,846,3276,3299 'four-tier':635,3275 'framework':615,2934,2955,2956,3264 'fundament':315 'futur':1004,3436 'generat':106,466,3047 'getlocalizedstr':2339 'github':895,967,2186,2242,3396 'github.com':833,1994,3347 'github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app/src/components':832,1993,3346 'global':2718,3005,3027 'glue':1578,1589,1637,2453,3480 'go':3066 'goe':776,3458 'green':2698 'grep':1078,1084,1496,1506,1768,1791,2193 'grey':1857 'group':1177,1350,1354,1361,1364,1385,1389,1485,2036,2043,2080,2139,2599 'groupsrequestbuild':422,1179 'guess':2806 'hand':974,978,1609,1711,3286,3412,3502 'hand-pick':1608 'hand-rol':973,977,1710,3285,3411,3501 'handl':165,1001 'handler':864,1040,1215,3319 'hard':369,456,3270 'hardcod':1725,3491 'head':1522,1619,1782,1804,2197 'header':25,187,454,1197,1408,1694,1715,2298,2546,3504,3648 'headerview':393,412,1201,2567,2858 'heading1':1911 'heading4':1916 'height':1599,1643,1651,3486 'hide':1227,1247,2699 'hidereceipt':1249 'histori':2112,2123 'hmr':3228 'hoe':1085 'home':911,3377 'http':519 'i18n':999,3432 'icon':1696,2348,3506 'identifi':2927 'immedi':1979 'implement':826,897,1997,2250,2377,2475,3350 'includ':2149 'incom':450,1414,2696,2891,3645 'index':941,2233,3389 'indic':2671 'info':583,2124,3123,3177,3598 'init':14,3696 'inject':214 'inlin':2046,2091,2336,2340 'insid':2760,3023 'instal':493,512,1500,3661,3671 'instead':246,263,1743,3770 'integr':10,132,145,283,586,602,607,742,1068,1071,2310,2716,2947,3110,3551,3732,3753 'intent':1136,1467,3571 'intercept':2626 'invent':471,2729,3535,3624 'invok':120 'island':2997 'item':1217 'join':2598 'jq':1094 'json':584,3155,3178 'jsx':1081 'keyword':129 'kit':9,757,844,925,982,995,1477,1554,1621,1664,1702,1766,1986,2006,2169,2313,2360,2919,3290,3359,3416,3429,3516 'know':3127 'land':2421 'layout':907,912,1577,1588,1636,2054,2063,2452,2460,2764,3373,3378,3479 'layout-on':2459 'leaf':3640 'left':1672,2064 'level':443,720,910,2061,2693,2883,3376 'light':1680,1753,1856,1879 'like':1142,1319,2019,2776 'line':3072 'list':171,665,1060,1186,1200,1254,1353,1424,1492,1605,1761,1816,2177,2550,2706,2966,3762 'listen':40 'live':336,3588 'll':626,1561 'load':200,1193,2590 'loadingstateview':399,1195 'local':2324 'log':1423,2110,2629 'longer':3190 'look':69,155,1126,1318,2018 'lookup':683 'm':2382 'main':2066 'make':2695 'manag':1369 'mandatori':3447 'map':690,1131,1138 'match':714,1260,1503,1543,2150,2212,2248,2259,2285,2409,2427,2447,3191 'max':1906 'mcp':93,310,362,463,490,503,516,938,947,1109,1462,1812,2230,2573,2610,2644,2685,2722,2782,2824,2845,2851,2899,3054,3386,3524,3630,3658 'mean':992,3426 'mechan':128 'medium':1917 'member':1351,1355,1358 'memori':485,3539 'mention':1393 'menu':210,3269 'menus':35 'messag':22,170,181,194,208,406,448,906,1043,1171,1203,1218,1428,1439,1604,2052,2104,2557,2592,2627,2658,2668,2705,2889,2967,3643 'message-bubble-incom':3642 'message-receiv':193 'messagesrequestbuild':420,1172 'method':330,426,475,568,2614,2865 'minim':2458 'mirror':2268,2482 'miss':993,2020,3427 'modal':2142 'mode':1251 'modifi':61,604,2931,3549,3600 'modul':1518,1776,1800 'moment':355 'mount':744,1065,1115,3308,3468 'multi':914,2074 'multi-tab':913,2073 'multipl':924,2005,2911,3358 'must':960,2238,3650 'name':72,326,437,473,876,933,2014,2162,2195,2290,2489,2731,3327,3367,3627,3641 'namespac':2737 'need':273,499,627,717,972,1575,1982,2451,3039,3573 'never':470,1607,2728,3490,3512,3534,3623 'new':282,643,772,780,873,918,1053,1269,1275,1304,1375,1379,1384,1480,2085,2416,2425,2445,2657,3074,3282,3380,3400,3471,3557,3744 'new-compon':779,1303 'next':631,3121,3219 'nextj':2971,2981,3010,3014 'node':1517,1775,1799 'none':2491 'note':613,2937 'noth':788,1298,1314,1963,2835 'notif':917,1416,3379 'npm':881,957 'npx':581,3152,3175,3675 'oe':1769,2194 'offer':3171,3254 'offici':2371 'often':2818 'ok':1632,1659,1689,1724,3513 'older':2923 'onback':1225 'one':612,849,2525,3302,3405,3558 'ongo':1418 'onitemclick':1223,2638 'onmessageclick':1224,2871 'onsearch':2640 'onsearchbarclick':1155,1226 'onsendbuttonclick':2639 'option':209,542,2401,2789,3612 'optionsview':396 'order':730,1457,2397 'origin':3193 'outgo':1410 'overrid':408,445,538,3001,3608 'overview':555 'own':618,1073,1097,3036,3112,3591 'ownership':1365,1487,2140 'packag':234,882,958,1501,3701 'page':2982,3015 'pagin':2583,2863 'pane':2065 'panel':1352,1373,1391,1592,1697,2038,2053,3371,3507 'parentmessageid':1349 'particip':2125 'path':2034 'pattern':87,676,839,902,2002,2148,2481,2828,3355 'per':2467,2534,2954 'phase':138,291,576,3267,3541 'philosophi':763,3296 'phrase':167 'pick':1610,3223 'picker':2090 'place':2522,2810 'plain':1469 'plan':80 'plus':2282 'poll':237 'popov':1394 'posit':1590,1638,3481 'prefer':531,2915,3604 'prefix':2740,3635 'prefix-protect':2739 'preview':3087 'primari':254,1797,1829,1863,2949,2957 'proceed':1299,2499 'process':1058 'produc':20,2814 'project':2279,2330,2387 'prop':74,325,382,387,472,506,535,642,719,735,747,760,767,851,868,1011,1021,1050,1112,1118,1120,1122,1124,1129,1143,1206,1235,1261,1265,1289,1293,1445,2408,2413,2566,2576,2637,2785,2859,2896,3293,3304,3407,3456,3464,3528 'prop-level':718 'prop/builder/event':3079 'protect':2741 'provid':47,55,991,1704,3425,3518 'queri':103,460,1106,1459,1809,2571,2608,2642,2683,2720,2780,2821,2842,2852,3521,3628 'question':321 'r':1095 'radii':1616,1729,1890,3495 'radius':258,1893,1897,1901,1905 'rail':2068 'raw.githubusercontent.com':2208,2217 'raw.githubusercontent.com/cometchat/cometchat-uikit-react/v6/sample-app/src/components/cometchatdetails/cometchatuserdetails.tsx':2207 'raw.githubusercontent.com/cometchat/cometchat-uikit-react/v6/sample-app/src/styles/cometchatdetails/cometchatuserdetails.css':2216 're':528,2308,3065 're-run':527 'react':7,842,877,1475,2132,2766,2772,2917,2987,2996,3019,3225,3328 'react-rout':2986,3018 'reaction':1426 'reactj':2960,3008 'read':650,1069,2252,2516,2666,2904 'receipt':1248 'receiv':195 'record':2113,2126 'refer':552,825,891,1529,1734,1954,1989,2033,2249,2376,2474,3342,3498 'references/component-catalog.md':655 'refresh':3245 'refus':3662 'region':3094 'regular':1922,1927 'render':2556,2752,2963,2975 'repli':240,1338,1473 'request':36,414,689,1316,1976,2506,2520,2794,2813,2841 'requestbuild':2603 'requir':322,370,1606,2787,2897 'resourc':2346 'respons':624,3055 'rest':703 'result':2912,2921 'return':2900,3261 'revert':3173 'right':2530,2725,2944,3768 'roll':975,979,1712,3287,3413,3503 'rout':3763 'router':2973,2983,2988,3012,3016,3020 'row':680 'rule':457,1631,2711,3271 'run':117,290,306,529,595 'sampl':646,674,818,829,892,943,964,988,1952,1990,2026,2031,2040,2056,2070,2082,2098,2106,2115,2135,2144,2154,2179,2235,2264,2270,2293,2321,2372,2470,2479,3343,3391,3422 'sample-app':673,2039,2055,2069,2081,2097,2105,2114,2134,2143,2153,2263 'save':3233,3243 'say':948,3082 'scope':1163,1343 'scratch':3747 'screen':1412 'sdk':357,427,548,1005,1820,2733,3437,3536,3617,3632 'search':858,1032,1147,1150,1164,1219,1453,1785,2101,2631,2750,2849,3313 'secondari':1868 'select':1250 'selectionmod':1252 'selector':334,439,2726,2735,2886,2970,2980,3533,3620 'send':2628 'server':3222 'setlimit':2605 'settag':2866 'setuserandgrouptag':2606 'shadow':1938,1941,1945,1949 'ship':845,930,1556,1622,1987,2011,3298,3364 'show':177,197,1246,2551,2585,2596,2652,3059,3117,3184,3559,3594 'showsearchbar':1151 'side':2067,2755,2757,3570 'sidecomponentgroup':2050 'signatur':328,509,2648,2873 'singl':932,1292,2013,2367,3366 'size':1593,1639,3482 'skill':43,54,78,111,123,226,275,288,313,345,373,658,3265,3548,3683 'skill-cometchat-customization' 'skill/command':3769 'skip':701,3450 'slot':392,405,2542,2857 'smart':239 'solid':1674,1741,1747 'someon':2665 'someth':299,980,3414 'sort':1103,1780 'sourc':100,377 'source-cometchat' 'space':1614,1730,1928,1931,1936,2707,3496 'specif':1788,2201,2848 'src/app.tsx':2962 'src/app/cometchat/cometchatnossr.tsx':2974 'src/app/cometchat/cometchatselector.tsx':2978 'src/app/globals.css':3013 'src/cometchat/chatapp.tsx':2994,3024 'src/cometchat/cometchatdetails/cometchatdetails.css':2283 'src/cometchat/cometchatdetails/cometchatuserdetails.tsx':2281 'src/cometchat/cometchatnossr.tsx':2984 'src/cometchat/cometchatselector.tsx':2968,2985,2998 'src/index.css':3009 'src/styles/globals.css':3017 'stabl':546,3615 'standard':2765 'start':280,648,1377 'state':32,201,1037,1182,2128,2555 'state.files':3590 'state.json':1076,3033 'status':1241 'statusview':1244 'step':572,573,632,633,706,2501,2511,2819,2831,2925,2939,3042,3057,3148,3211,3439 'still':961,3160 'stop':494,589,1267,3147 'strategi':1454 'strict':2396 'string':2343 'strip':2319,2353 'structur':2274,2485 'style':444,560,813,2160,2433 'stylesheet':645,802,1567,2213,2719,3006,3028 'sub':1231,2120 'sub-featur':1230 'sub-fil':2119 'subscrib':191,2672,2879 'subscript':2651,2876 'subsect':3441 'subtitl':28,1240 'subtitleview':394,1243 'success':1837 'support':403,1285,2580 'surfac':1277,1549,3139,3168 'svg':2347 'swap':1157 'symbol':670 'system':887,985,1627,1759,2173,2317,3337,3419 'tab':915,2075,3248 'tabl':383,684 'tailview':395 'take':2398 'target':2578 'task':681 'tell':495,591,2356,3213,3229,3666 'templat':407,1205,1444,3194,3691 'tertiari':1873 'test':3250 'text':347,1796,1858,1861,1866,1871 'theme':252,262,267,559,997,3431,3716,3722,3726 'thing':847,3300 'thread':905,1337,1341,1472,1647,1668,1714,1717,2051,3372 'thread-clos':1716 'thread-head':1713 'thread-wrapp':1646,1667 'tier':637,3277 'time':2595 'timestamp':1242,2702 'timestampview':1245 'toast':2654 'token':253,1789,3717 'top':909,2060,3375 'top-level':908,2059,3374 'topic':332,436,477,2678,2689 'topic-agent-skills' 'topic-ai-agent' 'topic-chat' 'topic-claude-code' 'topic-cometchat' 'topic-cursor' 'topic-messaging' 'topic-nextjs' 'topic-react' 'topic-react-native' 'topic-ui-kit' 'track':2669 'train':483 'training-data':482 'transfer':1363,1486,2141 'transport':518 'trigger':166 'troubleshoot':304,3737 'true':2509 'truth':102,379 'tsx':2255 'turn':786,1296,1312,1961,2833 'two':2753 'type':2670 'u':1104,1781 'ui':8,217,843,1190,1194,1420,1474,1476,2918,3288 'unicod':2350 'unread':2662 'updat':1006,2660,3438 'url':553,2226 'usag':1082 'use':64,76,109,224,242,259,284,301,697,1324,1331,1442,1544,1628,2157,2222,2349,2434,2454,2562,2600,2632,2774,2932,3084,3674,3755 'usecontext':2334 'user':114,229,248,277,295,497,593,687,752,837,971,1028,1134,1139,1176,1280,1328,1368,1372,1388,1465,1491,1498,1552,1974,2028,2035,2079,2277,2296,2301,2328,2358,2518,2589,2622,2792,3061,3102,3125,3130,3204,3215,3231,3561,3569,3585,3668,3765 'user-sid':3568 'user/group':903,2089,3369 'usersrequestbuild':421,1178 'ux':901,2001,3354 'v6':1527,2920,2989 'v7':2990 'valu':2338 'var':1675,1682,1748 'variabl':810,886,984,1626,1665,1737,1758,1764,1807,1824,2172,2316,2466,3336,3418,3500 've':2838 'verbatim':3169 'verifi':575,3041,3150,3154,3540 'version':549,1821,2924,3618 'via':124,966,1287,2184,3227 'video':1404 'view':26,29,391,534,862,2102,2541,2565,2856,3317 'vip':2588 'visibl':3574 'vite':2961 'voic':1403 'vs':2788 'wait':3099 'walk':722 'want':149,212,230,249,278,296,3143 'webfetch':2223 'white':1845 'whole':3097 'width':1649 'wire':1339,1399,1562,1596,2166 'work':134,144 'workflow':58 'would':351,3408 'wrap':2745 'wrapper':1648,1669 'write':816,1584,2457,2907,3044,3106,3132,3565,3690 'wrong':2815 'www.cometchat.com':524,557,562,566,570,1532 'www.cometchat.com/docs/mcp':523 'www.cometchat.com/docs/ui-kit/react/components-overview':556,1531 'www.cometchat.com/docs/ui-kit/react/events':565 'www.cometchat.com/docs/ui-kit/react/methods':569 'www.cometchat.com/docs/ui-kit/react/theme':561 'x':178,2619 'z':1089,1093,1512,1516 'z0':1773 'za':1092,1515 'zero':2440","prices":[{"id":"bda535f3-82d4-46b5-9ae5-b0fd8a820ee5","listingId":"3d07f954-31bb-4c1c-b877-7724299f9f74","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"cometchat","category":"cometchat-skills","install_from":"skills.sh"},"createdAt":"2026-05-07T13:05:08.676Z"}],"sources":[{"listingId":"3d07f954-31bb-4c1c-b877-7724299f9f74","source":"github","sourceId":"cometchat/cometchat-skills/cometchat-customization","sourceUrl":"https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-customization","isPrimary":false,"firstSeenAt":"2026-05-07T13:05:08.676Z","lastSeenAt":"2026-05-18T19:04:49.465Z"}],"details":{"listingId":"3d07f954-31bb-4c1c-b877-7724299f9f74","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"cometchat","slug":"cometchat-customization","github":{"repo":"cometchat/cometchat-skills","stars":27,"topics":["agent-skills","ai-agent","chat","claude-code","cometchat","cursor","messaging","nextjs","react","react-native","ui-kit"],"license":null,"html_url":"https://github.com/cometchat/cometchat-skills","pushed_at":"2026-05-18T05:04:24Z","description":"Add CometChat chat to any React, Next.js, React Native, Angular, Android, iOS, or Flutter project through your AI coding agent. Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and 50+ more agents.","skill_md_sha":"999ddc67051e66403da32db76b0debd7bdb45709","skill_md_path":"skills/cometchat-customization/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-customization"},"layout":"multi","source":"github","category":"cometchat-skills","frontmatter":{"name":"cometchat-customization","license":"MIT","description":"Customize a CometChat React UI Kit integration beyond what `cometchat init` and `cometchat apply-feature` produce — custom message bubbles, custom header views, custom subtitle views, custom empty/loading states, custom action menus, request builder filters, event listeners, and component composition. Picks up where the framework skills end (after Phase A init succeeds).","compatibility":"Node.js >=18; @cometchat/chat-uikit-react ^6"},"skills_sh_url":"https://skills.sh/cometchat/cometchat-skills/cometchat-customization"},"updatedAt":"2026-05-18T19:04:49.465Z"}}