diff --git a/ui-kit/react/astro-integration.mdx b/ui-kit/react/astro-integration.mdx
index a6fbadea1..1849b4a78 100644
--- a/ui-kit/react/astro-integration.mdx
+++ b/ui-kit/react/astro-integration.mdx
@@ -18,7 +18,7 @@ description: "Add CometChat to an Astro app in 5 steps: create project, install,
| CSS | `import "@cometchat/chat-uikit-react/css-variables.css"` in your React island |
| Calling | Optional. Install `@cometchat/calls-sdk-javascript` to enable |
| Other frameworks | [React.js](/ui-kit/react/react-js-integration) · [Next.js](/ui-kit/react/next-js-integration) · [React Router](/ui-kit/react/react-router-integration) |
-| AI Skills | `npx skills add cometchat/cometchat-skills --all` — [GitHub](https://github.com/cometchat/cometchat-skills) |
+| AI Skills | `npx skills add cometchat/cometchat-skills` — [GitHub](https://github.com/cometchat/cometchat-skills) |
@@ -35,15 +35,17 @@ CometChat UI Kit requires browser APIs (`window`, `WebSocket`, `document`). In A
Skip the manual steps — use [CometChat Skills](https://github.com/cometchat/cometchat-skills) to integrate via your AI coding agent. It auto-detects Astro, sets up `@astrojs/react` if needed, and scaffolds a complete chat integration using React islands with `client:only="react"`.
```bash
-npx skills add cometchat/cometchat-skills --all
+npx skills add cometchat/cometchat-skills
```
Then ask your agent to "integrate CometChat" or run `/cometchat`. It will:
1. Detect Astro and verify `@astrojs/react` is configured
-2. Present three chat experience options (Conversation List, One-to-One, Tab-Based)
+2. Present three chat experiences — multi-conversation, single thread, or full messenger
3. Create a React island in `src/cometchat/ChatApp.tsx` with CSS imported inside the component (Astro constraint), and an `.astro` page with `client:only="react"`
+4. Verify with AST checks (init order, no leaked auth keys, error UI, etc.)
+5. Show the Phase B menu: theme presets, 40+ features, component customization, floating widget, production auth, and diagnostics
-Works with Claude Code, Cursor, Kiro, VS Code Copilot, Codex, and any agent that reads markdown context.
+Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and [30+ more agents](https://github.com/vercel-labs/skills).
---
diff --git a/ui-kit/react/next-js-integration.mdx b/ui-kit/react/next-js-integration.mdx
index b6e07bd47..12bcfcf23 100644
--- a/ui-kit/react/next-js-integration.mdx
+++ b/ui-kit/react/next-js-integration.mdx
@@ -18,7 +18,7 @@ description: "Add CometChat to a Next.js app in 5 steps: create project, install
| CSS | `@import url("@cometchat/chat-uikit-react/css-variables.css");` in global CSS |
| Calling | Optional. Install `@cometchat/calls-sdk-javascript` to enable |
| Other frameworks | [React.js](/ui-kit/react/react-js-integration) · [React Router](/ui-kit/react/react-router-integration) · [Astro](/ui-kit/react/astro-integration) |
-| AI Skills | `npx skills add cometchat/cometchat-skills --all` — [GitHub](https://github.com/cometchat/cometchat-skills) |
+| AI Skills | `npx skills add cometchat/cometchat-skills` — [GitHub](https://github.com/cometchat/cometchat-skills) |
@@ -39,15 +39,17 @@ CometChat UI Kit requires browser APIs (`window`, `WebSocket`, `document`). In N
Skip the manual steps — use [CometChat Skills](https://github.com/cometchat/cometchat-skills) to integrate via your AI coding agent. It auto-detects Next.js (App Router or Pages Router), collects credentials from `.env.local`, and scaffolds a complete chat integration with `dynamic(..., { ssr: false })`, `"use client"` directives, and TypeScript types.
```bash
-npx skills add cometchat/cometchat-skills --all
+npx skills add cometchat/cometchat-skills
```
Then ask your agent to "integrate CometChat" or run `/cometchat`. It will:
1. Detect your Next.js version and router type (App Router vs Pages Router)
-2. Present three chat experience options (Conversation List, One-to-One, Tab-Based)
+2. Present three chat experiences — multi-conversation, single thread, or full messenger
3. Create components in `src/app/cometchat/`, set up SSR prevention with `dynamic` + `ssr: false`, and import CSS in `globals.css`
+4. Verify with AST checks (init order, no leaked auth keys, error UI, etc.)
+5. Show the Phase B menu: theme presets, 40+ features, component customization, floating widget, production auth, and diagnostics
-Works with Claude Code, Cursor, Kiro, VS Code Copilot, Codex, and any agent that reads markdown context.
+Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and [30+ more agents](https://github.com/vercel-labs/skills).
---
diff --git a/ui-kit/react/overview.mdx b/ui-kit/react/overview.mdx
index caa7654aa..c6428219d 100644
--- a/ui-kit/react/overview.mdx
+++ b/ui-kit/react/overview.mdx
@@ -14,7 +14,7 @@ description: "Prebuilt React components for chat, voice, and video calling. Supp
| SSR | Client-side only. Use `ssr: false` or `client:only="react"` |
| Localization | 19 languages built-in |
| Source | [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6) |
-| AI Skills | `npx skills add cometchat/cometchat-skills --all` — [GitHub](https://github.com/cometchat/cometchat-skills) |
+| AI Skills | `npx skills add cometchat/cometchat-skills` — [GitHub](https://github.com/cometchat/cometchat-skills) |
@@ -28,22 +28,59 @@ The CometChat React UI Kit provides prebuilt, customizable components for adding
## Integrate with AI Coding Agents
-Use [CometChat Skills](https://github.com/cometchat/cometchat-skills) to integrate the React UI Kit using your AI coding agent. Skills auto-detect your framework, collect credentials, and scaffold a complete chat integration — conversations, one-to-one chat, or tab-based chat — with the correct SSR pattern, TypeScript types, and error handling.
+Use [CometChat Skills](https://github.com/cometchat/cometchat-skills) to integrate the React UI Kit using your AI coding agent. Skills auto-detect your framework, collect credentials, and scaffold a complete chat integration — multi-conversation, single thread, or full messenger — with the correct SSR pattern, TypeScript types, and error handling.
-Works with Claude Code, Cursor, Kiro, VS Code Copilot, Codex, and any agent that reads markdown context.
+Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and [30+ more agents](https://github.com/vercel-labs/skills).
```bash
-npx skills add cometchat/cometchat-skills --all
+npx skills add cometchat/cometchat-skills
```
Then ask your agent to "integrate CometChat" or run `/cometchat` — it handles the rest.
+| # | Experience | What it is | Use case |
+|---|---|---|---|
+| 1 | Multi-conversation | Two-panel: conversation list + active thread | Messaging apps, team chat, inboxes |
+| 2 | Single thread | One chat window for two known users or a group | Support widgets, marketplace chat, embedded consult |
+| 3 | Full messenger | Bottom tab bar: Chats / Calls / Users / Groups | Social apps, community platforms, dating |
+
+```
+/cometchat 1 # Multi-conversation
+/cometchat 2 # Single thread
+/cometchat 3 # Full messenger
+```
+
+After the initial integration, the skill continues with a Phase B menu: theme presets (slack / whatsapp / discord / notion), 40+ features (calls, polls, reactions, AI smart replies), component customization, floating chat widget, production auth, server-side user management, and diagnostics.
+
+
+
+For the best Phase B experience (component customization, SDK events, request builders), install the docs MCP:
+
+**Claude Code:**
+```bash
+claude mcp add --transport http cometchat-docs https://www.cometchat.com/docs/mcp
+```
+
+**Cursor** (`.cursor/mcp.json`):
+```json
+{ "mcpServers": { "cometchat-docs": { "url": "https://www.cometchat.com/docs/mcp" } } }
+```
+
+**Windsurf:**
+```json
+{ "mcpServers": { "cometchat-docs": { "type": "sse", "serverUrl": "https://www.cometchat.com/docs/mcp" } } }
+```
+
+No authentication required. Not needed for the initial integration — the CLI handles Phase A without it.
+
+
+
Auto-detect framework, scaffold chat integration
- Claude Code · Cursor · Kiro · VS Code Copilot · Codex
+ Claude Code · Cursor · Codex · VS Code Copilot · Windsurf · Cline · Kiro
diff --git a/ui-kit/react/react-js-integration.mdx b/ui-kit/react/react-js-integration.mdx
index a0bd2b8ae..4e78115fc 100644
--- a/ui-kit/react/react-js-integration.mdx
+++ b/ui-kit/react/react-js-integration.mdx
@@ -17,7 +17,7 @@ description: "Add CometChat to a React.js app in 5 steps: create project, instal
| CSS | `@import url("@cometchat/chat-uikit-react/css-variables.css");` in global CSS |
| Calling | Optional. Install `@cometchat/calls-sdk-javascript` to enable |
| Other frameworks | [Next.js](/ui-kit/react/next-js-integration) · [React Router](/ui-kit/react/react-router-integration) · [Astro](/ui-kit/react/astro-integration) |
-| AI Skills | `npx skills add cometchat/cometchat-skills --all` — [GitHub](https://github.com/cometchat/cometchat-skills) |
+| AI Skills | `npx skills add cometchat/cometchat-skills` — [GitHub](https://github.com/cometchat/cometchat-skills) |
@@ -34,15 +34,17 @@ This guide walks you through adding CometChat to a React.js app. By the end you'
Skip the manual steps — use [CometChat Skills](https://github.com/cometchat/cometchat-skills) to integrate via your AI coding agent. It auto-detects React.js / Vite / CRA, collects credentials from `.env`, and scaffolds a complete chat integration with the correct file layout and TypeScript types.
```bash
-npx skills add cometchat/cometchat-skills --all
+npx skills add cometchat/cometchat-skills
```
Then ask your agent to "integrate CometChat" or run `/cometchat`. It will:
1. Detect your bundler (Vite or CRA) and set the correct env prefix (`VITE_` or `REACT_APP_`)
-2. Present three chat experience options (Conversation List, One-to-One, Tab-Based)
+2. Present three chat experiences — multi-conversation, single thread, or full messenger
3. Scaffold init → login → render in `main.tsx`, create components in `src/cometchat/`, and import CSS
+4. Verify with AST checks (init order, no leaked auth keys, error UI, etc.)
+5. Show the Phase B menu: theme presets, 40+ features, component customization, floating widget, production auth, and diagnostics
-Works with Claude Code, Cursor, Kiro, VS Code Copilot, Codex, and any agent that reads markdown context.
+Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and [30+ more agents](https://github.com/vercel-labs/skills).
---
diff --git a/ui-kit/react/react-router-integration.mdx b/ui-kit/react/react-router-integration.mdx
index a1be88309..461685c66 100644
--- a/ui-kit/react/react-router-integration.mdx
+++ b/ui-kit/react/react-router-integration.mdx
@@ -18,7 +18,7 @@ description: "Add CometChat to a React Router app in 5 steps: create project, in
| CSS | `@import url("@cometchat/chat-uikit-react/css-variables.css");` in global CSS |
| Calling | Optional. Install `@cometchat/calls-sdk-javascript` to enable |
| Other frameworks | [React.js](/ui-kit/react/react-js-integration) · [Next.js](/ui-kit/react/next-js-integration) · [Astro](/ui-kit/react/astro-integration) |
-| AI Skills | `npx skills add cometchat/cometchat-skills --all` — [GitHub](https://github.com/cometchat/cometchat-skills) |
+| AI Skills | `npx skills add cometchat/cometchat-skills` — [GitHub](https://github.com/cometchat/cometchat-skills) |
@@ -35,15 +35,17 @@ CometChat UI Kit requires browser APIs (`window`, `WebSocket`, `document`). In R
Skip the manual steps — use [CometChat Skills](https://github.com/cometchat/cometchat-skills) to integrate via your AI coding agent. It auto-detects React Router v6 or v7, collects credentials from `.env`, and scaffolds a complete chat integration with `lazy()` + `Suspense` + `mounted` guard for SSR prevention.
```bash
-npx skills add cometchat/cometchat-skills --all
+npx skills add cometchat/cometchat-skills
```
Then ask your agent to "integrate CometChat" or run `/cometchat`. It will:
1. Detect your React Router version (v6 JSX routing vs v7 file-based routing)
-2. Present three chat experience options (Conversation List, One-to-One, Tab-Based)
+2. Present three chat experiences — multi-conversation, single thread, or full messenger
3. Create components in `app/cometchat/`, register a `/chat` route in `app/routes.ts` (v7) or add a `` (v6), and import CSS
+4. Verify with AST checks (init order, no leaked auth keys, error UI, etc.)
+5. Show the Phase B menu: theme presets, 40+ features, component customization, floating widget, production auth, and diagnostics
-Works with Claude Code, Cursor, Kiro, VS Code Copilot, Codex, and any agent that reads markdown context.
+Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and [30+ more agents](https://github.com/vercel-labs/skills).
---