[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6MFKQ06WRT2535TYAB4QRQK":3,"skill-same:01M6MFKQ06WRT2535TYAB4QRQK":85},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":23,"publishedAt":45,"linkOnly":46,"markdownContent":47,"markdownBody":48,"frontMatter":49,"refName":55,"commitSha":56,"skillDirectory":57,"forksCount":58,"repositoryHtmlUrl":59,"repositoryHomepageUrl":60,"ownerHtmlUrl":61,"ownerBlogUrl":62,"ownerDescription":63,"updatedAt":64,"install":65,"resources":78},"01M6MFKQ06WRT2535TYAB4QRQK","cometchat-react-v7-placement",null,"Where CometChat chat goes in a React app shell and how to wire each layout — full-screen, sidebar\u002Fsplit, popup\u002Fwidget, or embedded in an existing page. Triggers: 'add chat as a sidebar', 'full screen chat page', 'chat popup widget', 'embed chat in my dashboard'.","hashgraph-online\u002Fawesome-codex-plugins","hashgraph-online","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F160371962?v=4","01M6CNB6NRJVNNGN14TR01Q6D3","HOL (Hashgraph Online)","01M6JT1HSKKG9V68KQAQGBA7XP",1571,"MIT","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fcometchat\u002Fcometchat-skills\u002Fskills\u002Fcometchat-react-v7-placement\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",[24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44],"cometchat react v7 placement","cometchat","react","add","embed","split","uikit","Existing","triggers","page","as","goes","app","full","my","verified","screen","how","layout","dashboard","how to","2026-11-10 10:12:30",false,"---\nname: cometchat-react-v7-placement\ndescription: \"Where CometChat chat goes in a React app shell and how to wire each layout — full-screen, sidebar\u002Fsplit, popup\u002Fwidget, or embedded in an existing page. Triggers: 'add chat as a sidebar', 'full screen chat page', 'chat popup widget', 'embed chat in my dashboard'.\"\nlicense: \"MIT\"\ncompatibility: \"React >=18; @cometchat\u002Fchat-uikit-react ^7 (7.2.x, verified 7.2.4)\"\nmetadata:\n  author: \"CometChat\"\n  version: \"1.1.0\"\n  tags: \"cometchat react placement layout uikit v7\"\n---\n\n> **Ground truth:** `@cometchat\u002Fchat-uikit-react@7`. Uses only components defined in `cometchat-react-v7-core`\u002F`-components` (from live v7 docs). Status: **catalog-verified vs installed 7.1.0 (exports-only web-v7.json).** Fetch layout-specific props from the component's **`.md` twin** (`..\u002Fcometchat-react-v7-core\u002Freferences\u002Fdocs-map.md`).\n\n## Companion skills (read first)\n- `cometchat-react-v7-core` — install, `init→login→render`, provider. This skill ASSUMES it.\n- `cometchat-react-v7-components` — the component catalog this composes.\n\n## Use this skill when\nDeciding\u002F​wiring WHERE chat lives — and either (a) **growing the core surface into the whole combined chat app** (selector tabs ↔ messages ↔ details\u002Fthread\u002Fsearch side panel + incoming call) when the user asks for the full app, or (b) a scoped-down sidebar\u002Fsplit, popup\u002Ffloating widget, or embedded panel. Triggers: \"build a full chat app\", \"add users\u002Fgroups\u002Fcalls tabs and a side panel\", \"add chat as a sidebar\", \"full screen chat page\", \"chat popup widget\", \"embed chat in my dashboard\". Note: a plain unscoped \"add chat\" defaults to the production-ready CORE surface (list ↔ message pane) in `cometchat-react-v7-core` — grow to the combined app below only on request.\n\n## Prerequisites & install\nCovered by core. No new package.\n\n## Placement patterns (BAKED) — each composes core components\n- **Core surface (THE DEFAULT for an unscoped \"add chat\") — production-ready, but lean.** Inside `CometChatErrorBoundary` → ONE `CometChatProvider`, a **two-column** layout: a `CometChatConversations` LIST ↔ a MESSAGE pane (`CometChatMessageHeader` + `CometChatMessageList` + `CometChatMessageComposer`), sized per `..\u002Fcometchat-react-v7-core\u002Freferences\u002Flayout.md`, with the **thread-replies panel** and the **in-chat scoped message search** wired by DEFAULT (opt-out only) and the global conversation search bar wired-or-hidden, collapsing to one pane on mobile. One small host state object coordinates {selected conversation, which side view (thread | in-chat-search | none)}. Complete and wired — NOT a bare demo — but NOT the whole app. See the \"Core-surface recipe\" below.\n- **Grow to the full combined app (on request) — the whole app the official sample ships.** When the user asks for the full app, grow the core surface into a **three-column** layout, all under `CometChatErrorBoundary` → ONE `CometChatProvider`: a SELECTOR column (the list for the active tab — `CometChatConversations` \u002F `CometChatUsers` \u002F `CometChatGroups` \u002F `CometChatCallLogs` — + a tab bar), a MESSAGE pane, and a mutually-exclusive SIDE panel (user\u002Fgroup details, a thread `CometChatThreadHeader` + list\u002Fcomposer, or a scoped `CometChatSearch`), plus `CometChatIncomingCall` mounted at root. One host state object coordinates {active tab, selected user\u002Fgroup, thread parent, which side panel}. It is the UNION of the core surface + these growths — see the \"Combined-app recipe (grow target)\" below. Least-code = reach for these drop-ins (HOW).\n- **Sidebar \u002F split:** conversations list in a fixed side panel; the message pane fills the rest. Selection state links list → message pane. (Scoped-down variant.)\n- **Popup \u002F floating widget:** a toggle button mounts the chat panel in an overlay; keep `CometChatProvider` mounted at app root so init\u002Flogin persist across open\u002Fclose. (Scoped-down variant.)\n- **Embedded panel:** drop the message components into an existing page region; reuse the host layout\u002Fcontainers. (Scoped-down variant.)\n\n> Default to the CORE surface for a plain \"add chat\"; grow to the full combined app when the user asks for the whole app; honor an explicit smaller scope (the narrower three).\n\n\n## Recipes (FETCH — `references\u002Frecipes.md`)\nThe two production recipes — full TSX + the 3-column CSS — live in `references\u002Frecipes.md` (progressive disclosure; load it when you build):\n- **Core-surface recipe** — THE DEFAULT for a plain \"add chat\": `CometChatErrorBoundary` → one `CometChatProvider` → two-column list ↔ message pane, thread panel + in-chat scoped search wired by default, mobile one-pane collapse.\n- **Combined-app recipe** — the GROW target (whole app, on request): three columns (selector tabs ↔ message pane ↔ mutually-exclusive details\u002Fthread\u002Fsearch side panel) + `CometChatIncomingCall`.\n\nBoth encode the same invariants — **keep them when you emit the code**:\n> **Selection has THREE obligations (AUDIT-079)** — a selection that only opens a pane is a dead-end: (1) render the pane; (2) REFLECT it in the list (pass `activeConversation`\u002F`activeUser`\u002F`activeGroup` so the row highlights); (3) every opened side panel is CLOSEABLE (wire `onBack`\u002F`onClose`).\n> **A list-header action (\"New chat\"\u002F\"Create group\") goes in the list's `headerView`** — which REPLACES the default header, so render the title AND the button together inside it — NOT a sibling above the list (AUDIT-083; pattern in `..\u002Fcometchat-react-v7-core\u002Freferences\u002Fcomponent-props.md`).\n\nBoth satisfy the reflow-free-surface standard (`..\u002Fcometchat-react-v7-core\u002Freferences\u002Flayout.md`) and collapse to one pane on mobile (below). The recipes use the `useIsMobile` hook defined in the **Responsive \u002F mobile** section below.\n\n## Responsive \u002F mobile — one screen at a time (MANDATORY for any multi-pane layout)\nEvery pattern above that shows more than one pane (full-screen two-pane, sidebar\u002Fsplit, list+thread\u002Fdetail) MUST collapse to a SINGLE screen at a time on small viewports — a fixed side-by-side layout that squashes on a phone is a defect (`RULES.md` §14), not a style choice. The kit has **no responsive shell** (no `WithMessages`\u002F`CometChatUI`); you compose it from the same selection state, gated by a breakpoint.\n- **Mobile = a navigation stack:** conversations list → tap a conversation → the message pane REPLACES the list full-screen → tap the header → the profile\u002Fthread panel REPLACES the message pane. Wide viewport → the SAME state renders side-by-side.\n- **Reuse the built-in back button (don't hand-roll one):** `CometChatMessageHeader` ships `hideBackButton` (default `false`) + `onBack()`. On mobile wire `onBack` to clear the selection (pop to the list) and keep the button visible; on wide set `hideBackButton` (the list is always there).\n\n```tsx\n\u002F\u002F SSR-guarded breakpoint hook\nfunction useIsMobile(query = \"(max-width: 768px)\") {\n  const read = () => typeof window !== \"undefined\" && window.matchMedia(query).matches;\n  const [m, setM] = useState(read);\n  useEffect(() => {\n    const mq = window.matchMedia(query);\n    const on = () => setM(mq.matches);\n    mq.addEventListener(\"change\", on);\n    return () => mq.removeEventListener(\"change\", on);\n  }, [query]);\n  return m;\n}\n\n\u002F\u002F Mobile: render exactly ONE pane based on state; wide: render them side-by-side.\nconst isMobile = useIsMobile();\nif (isMobile) {\n  if (detail && selected) return \u003CDetailOrThread onClose={() => setDetail(null)} \u002F>;\n  if (selected) return (\n    \u003CMessagePane>\n      \u003CCometChatMessageHeader {...target} hideBackButton={false} onBack={() => setSelected(null)} \u002F>\n      {\u002F* list + composer *\u002F}\n    \u003C\u002FMessagePane>\n  );\n  return \u003CCometChatConversations onItemClick={pick} \u002F>;   \u002F\u002F list only\n}\n\u002F\u002F wide → the two\u002Fthree-pane layout, header with hideBackButton\n```\nNative (RN\u002FFlutter): use the platform navigator (stack navigation) — one screen per route — not a web split view.\n\n## Layout wiring per placement\n- **Every placement satisfies the reflow-free-surface standard (`..\u002Fcometchat-react-v7-core\u002Freferences\u002Flayout.md`)** — pin a content-INDEPENDENT height (full-screen → `100dvh`; sidebar\u002Fsplit → the panes take a viewport or flex\u002Fgrid-supplied height; popup\u002Fembedded → a fixed height e.g. `600px` or a sized grid\u002Fflex cell — **never `min-height`\u002F`auto`**), prepare the ancestor chain, and size the columns with `min-height:0`\u002F`overflow:hidden`. The kit fills its parent, so a content-driven container both collapses the chat to ~0px AND grows-into-place as content loads (the two named failure modes).\n- Keep `CometChatProvider` at a stable ancestor (not remounted per route\u002Ftoggle) so init+login survive navigation.\n- Manage the selected conversation\u002Fuser\u002Fgroup in host state and pass it to the message components. Fetch the exact selection props from the component's `.md` twin (`..\u002Fcometchat-react-v7-core\u002Freferences\u002Fdocs-map.md`).\n- Reuse the app's existing routing\u002Flayout; add wiring, never rewrite (`RULES.md`).\n- **Open an overlay\u002Fcompanion IN the pane its trigger lives in — not full-screen (AUDIT-014).** Search opened from the `CometChatConversations` search bar (`onSearchBarClicked` → `CometChatSearch`) renders **in the conversations list column, over the list** — the message pane stays visible; `onBack`\u002Fresult-click returns to the list. Do NOT take over the whole screen (it hides the conversation the user was reading). Header search (`onSearchOptionClicked`, scoped by `uid`\u002F`guid`) opens the same way. A full-screen replacement is correct ONLY on a **mobile single-pane** (§ responsive), where the search IS the list-level screen. Same principle for any pane-rooted affordance (thread\u002Fprofile open in the side panel, not full-screen on desktop).\n\n```tsx\n\u002F\u002F Wide: the LEFT column shows search when open, else the list — message pane stays.\nconst listColumn = searchOpen\n  ? \u003CCometChatSearch onBack={() => setSearchOpen(false)} onConversationClicked={pick} onMessageClicked={jump} \u002F>\n  : \u003CCometChatConversations showSearchBar onSearchBarClicked={() => setSearchOpen(true)} onItemClick={pick} \u002F>;\n\u002F\u002F \u003Caside className=\"list-column\">{listColumn}\u003C\u002Faside> \u003Cmain>{messagePane}\u003C\u002Fmain>\n\u002F\u002F Mobile (single-pane): if (searchOpen) render \u003CCometChatSearch\u002F> full-screen (it's the list screen).\n```\n\n## Common pitfalls (BAKED)\n- Remounting `CometChatProvider` on every route\u002Ftoggle (re-triggers init\u002Flogin). Rendering the message pane before a conversation is selected. Nesting multiple providers.\n- **Shipping a fixed side-by-side layout with no small-viewport collapse** — the #1 layout defect. On a phone the list + message panes squash and tapping a conversation does nothing visible. Always add the mobile single-pane branch above and wire the header's built-in `onBack` (AUDIT-011).\n- **Not wrapping the surface in `CometChatErrorBoundary`** — a render error in any kit component then blanks the whole page (white screen) instead of showing a localized fallback + retry. Both recipes above wrap the surface; keep it.\n- **A surface that grows into place as content loads (load-transition reflow)** — small while the list loads, then jumps to full size. The box is content-driven, not pinned: satisfy `layout.md` (pinned `100dvh`, prepared ancestor chain, `min-height:0` columns) and let the kit's own `loadingView`\u002F`emptyView` fill the pinned box — don't gate the surface behind your own placeholder→chat swap (AUDIT-023).\n- **Over-delivering the whole combined app on a plain \"add chat\"** — the default is the Core-surface recipe (list ↔ message pane); grow to the Combined-app recipe (selector tabs + side panel + incoming call) only when the user asks for the whole app.\n\n## Verify it works\nChat renders in the chosen layout inside a `CometChatErrorBoundary`, and on a narrow viewport it collapses to ONE pane at a time (list → message → back) — no squashed side-by-side panes on a phone. Default \"add chat\" ⇒ the Core-surface recipe (list ↔ message pane, sized, affordances wired-or-hidden); the whole combined app (tabs + side panel + incoming call) is the grow target for an explicit full-app ask.\n\n**Close (after it builds):** end with the shared 3-option selectable menu and WAIT for the pick — **(1) add another feature** (suggest a few not-yet-wired) · **(2) customize theming** · **(3) test it manually** (stop; let the user check). Same contract as the `cometchat-react-v7-core` close (`RULES.md` §19).\n","> **Ground truth:** `@cometchat\u002Fchat-uikit-react@7`. Uses only components defined in `cometchat-react-v7-core`\u002F`-components` (from live v7 docs). Status: **catalog-verified vs installed 7.1.0 (exports-only web-v7.json).** Fetch layout-specific props from the component's **`.md` twin** (`..\u002Fcometchat-react-v7-core\u002Freferences\u002Fdocs-map.md`).\n\n## Companion skills (read first)\n- `cometchat-react-v7-core` — install, `init→login→render`, provider. This skill ASSUMES it.\n- `cometchat-react-v7-components` — the component catalog this composes.\n\n## Use this skill when\nDeciding\u002F​wiring WHERE chat lives — and either (a) **growing the core surface into the whole combined chat app** (selector tabs ↔ messages ↔ details\u002Fthread\u002Fsearch side panel + incoming call) when the user asks for the full app, or (b) a scoped-down sidebar\u002Fsplit, popup\u002Ffloating widget, or embedded panel. Triggers: \"build a full chat app\", \"add users\u002Fgroups\u002Fcalls tabs and a side panel\", \"add chat as a sidebar\", \"full screen chat page\", \"chat popup widget\", \"embed chat in my dashboard\". Note: a plain unscoped \"add chat\" defaults to the production-ready CORE surface (list ↔ message pane) in `cometchat-react-v7-core` — grow to the combined app below only on request.\n\n## Prerequisites & install\nCovered by core. No new package.\n\n## Placement patterns (BAKED) — each composes core components\n- **Core surface (THE DEFAULT for an unscoped \"add chat\") — production-ready, but lean.** Inside `CometChatErrorBoundary` → ONE `CometChatProvider`, a **two-column** layout: a `CometChatConversations` LIST ↔ a MESSAGE pane (`CometChatMessageHeader` + `CometChatMessageList` + `CometChatMessageComposer`), sized per `..\u002Fcometchat-react-v7-core\u002Freferences\u002Flayout.md`, with the **thread-replies panel** and the **in-chat scoped message search** wired by DEFAULT (opt-out only) and the global conversation search bar wired-or-hidden, collapsing to one pane on mobile. One small host state object coordinates {selected conversation, which side view (thread | in-chat-search | none)}. Complete and wired — NOT a bare demo — but NOT the whole app. See the \"Core-surface recipe\" below.\n- **Grow to the full combined app (on request) — the whole app the official sample ships.** When the user asks for the full app, grow the core surface into a **three-column** layout, all under `CometChatErrorBoundary` → ONE `CometChatProvider`: a SELECTOR column (the list for the active tab — `CometChatConversations` \u002F `CometChatUsers` \u002F `CometChatGroups` \u002F `CometChatCallLogs` — + a tab bar), a MESSAGE pane, and a mutually-exclusive SIDE panel (user\u002Fgroup details, a thread `CometChatThreadHeader` + list\u002Fcomposer, or a scoped `CometChatSearch`), plus `CometChatIncomingCall` mounted at root. One host state object coordinates {active tab, selected user\u002Fgroup, thread parent, which side panel}. It is the UNION of the core surface + these growths — see the \"Combined-app recipe (grow target)\" below. Least-code = reach for these drop-ins (HOW).\n- **Sidebar \u002F split:** conversations list in a fixed side panel; the message pane fills the rest. Selection state links list → message pane. (Scoped-down variant.)\n- **Popup \u002F floating widget:** a toggle button mounts the chat panel in an overlay; keep `CometChatProvider` mounted at app root so init\u002Flogin persist across open\u002Fclose. (Scoped-down variant.)\n- **Embedded panel:** drop the message components into an existing page region; reuse the host layout\u002Fcontainers. (Scoped-down variant.)\n\n> Default to the CORE surface for a plain \"add chat\"; grow to the full combined app when the user asks for the whole app; honor an explicit smaller scope (the narrower three).\n\n\n## Recipes (FETCH — `references\u002Frecipes.md`)\nThe two production recipes — full TSX + the 3-column CSS — live in `references\u002Frecipes.md` (progressive disclosure; load it when you build):\n- **Core-surface recipe** — THE DEFAULT for a plain \"add chat\": `CometChatErrorBoundary` → one `CometChatProvider` → two-column list ↔ message pane, thread panel + in-chat scoped search wired by default, mobile one-pane collapse.\n- **Combined-app recipe** — the GROW target (whole app, on request): three columns (selector tabs ↔ message pane ↔ mutually-exclusive details\u002Fthread\u002Fsearch side panel) + `CometChatIncomingCall`.\n\nBoth encode the same invariants — **keep them when you emit the code**:\n> **Selection has THREE obligations (AUDIT-079)** — a selection that only opens a pane is a dead-end: (1) render the pane; (2) REFLECT it in the list (pass `activeConversation`\u002F`activeUser`\u002F`activeGroup` so the row highlights); (3) every opened side panel is CLOSEABLE (wire `onBack`\u002F`onClose`).\n> **A list-header action (\"New chat\"\u002F\"Create group\") goes in the list's `headerView`** — which REPLACES the default header, so render the title AND the button together inside it — NOT a sibling above the list (AUDIT-083; pattern in `..\u002Fcometchat-react-v7-core\u002Freferences\u002Fcomponent-props.md`).\n\nBoth satisfy the reflow-free-surface standard (`..\u002Fcometchat-react-v7-core\u002Freferences\u002Flayout.md`) and collapse to one pane on mobile (below). The recipes use the `useIsMobile` hook defined in the **Responsive \u002F mobile** section below.\n\n## Responsive \u002F mobile — one screen at a time (MANDATORY for any multi-pane layout)\nEvery pattern above that shows more than one pane (full-screen two-pane, sidebar\u002Fsplit, list+thread\u002Fdetail) MUST collapse to a SINGLE screen at a time on small viewports — a fixed side-by-side layout that squashes on a phone is a defect (`RULES.md` §14), not a style choice. The kit has **no responsive shell** (no `WithMessages`\u002F`CometChatUI`); you compose it from the same selection state, gated by a breakpoint.\n- **Mobile = a navigation stack:** conversations list → tap a conversation → the message pane REPLACES the list full-screen → tap the header → the profile\u002Fthread panel REPLACES the message pane. Wide viewport → the SAME state renders side-by-side.\n- **Reuse the built-in back button (don't hand-roll one):** `CometChatMessageHeader` ships `hideBackButton` (default `false`) + `onBack()`. On mobile wire `onBack` to clear the selection (pop to the list) and keep the button visible; on wide set `hideBackButton` (the list is always there).\n\n```tsx\n\u002F\u002F SSR-guarded breakpoint hook\nfunction useIsMobile(query = \"(max-width: 768px)\") {\n  const read = () => typeof window !== \"undefined\" && window.matchMedia(query).matches;\n  const [m, setM] = useState(read);\n  useEffect(() => {\n    const mq = window.matchMedia(query);\n    const on = () => setM(mq.matches);\n    mq.addEventListener(\"change\", on);\n    return () => mq.removeEventListener(\"change\", on);\n  }, [query]);\n  return m;\n}\n\n\u002F\u002F Mobile: render exactly ONE pane based on state; wide: render them side-by-side.\nconst isMobile = useIsMobile();\nif (isMobile) {\n  if (detail && selected) return \u003CDetailOrThread onClose={() => setDetail(null)} \u002F>;\n  if (selected) return (\n    \u003CMessagePane>\n      \u003CCometChatMessageHeader {...target} hideBackButton={false} onBack={() => setSelected(null)} \u002F>\n      {\u002F* list + composer *\u002F}\n    \u003C\u002FMessagePane>\n  );\n  return \u003CCometChatConversations onItemClick={pick} \u002F>;   \u002F\u002F list only\n}\n\u002F\u002F wide → the two\u002Fthree-pane layout, header with hideBackButton\n```\nNative (RN\u002FFlutter): use the platform navigator (stack navigation) — one screen per route — not a web split view.\n\n## Layout wiring per placement\n- **Every placement satisfies the reflow-free-surface standard (`..\u002Fcometchat-react-v7-core\u002Freferences\u002Flayout.md`)** — pin a content-INDEPENDENT height (full-screen → `100dvh`; sidebar\u002Fsplit → the panes take a viewport or flex\u002Fgrid-supplied height; popup\u002Fembedded → a fixed height e.g. `600px` or a sized grid\u002Fflex cell — **never `min-height`\u002F`auto`**), prepare the ancestor chain, and size the columns with `min-height:0`\u002F`overflow:hidden`. The kit fills its parent, so a content-driven container both collapses the chat to ~0px AND grows-into-place as content loads (the two named failure modes).\n- Keep `CometChatProvider` at a stable ancestor (not remounted per route\u002Ftoggle) so init+login survive navigation.\n- Manage the selected conversation\u002Fuser\u002Fgroup in host state and pass it to the message components. Fetch the exact selection props from the component's `.md` twin (`..\u002Fcometchat-react-v7-core\u002Freferences\u002Fdocs-map.md`).\n- Reuse the app's existing routing\u002Flayout; add wiring, never rewrite (`RULES.md`).\n- **Open an overlay\u002Fcompanion IN the pane its trigger lives in — not full-screen (AUDIT-014).** Search opened from the `CometChatConversations` search bar (`onSearchBarClicked` → `CometChatSearch`) renders **in the conversations list column, over the list** — the message pane stays visible; `onBack`\u002Fresult-click returns to the list. Do NOT take over the whole screen (it hides the conversation the user was reading). Header search (`onSearchOptionClicked`, scoped by `uid`\u002F`guid`) opens the same way. A full-screen replacement is correct ONLY on a **mobile single-pane** (§ responsive), where the search IS the list-level screen. Same principle for any pane-rooted affordance (thread\u002Fprofile open in the side panel, not full-screen on desktop).\n\n```tsx\n\u002F\u002F Wide: the LEFT column shows search when open, else the list — message pane stays.\nconst listColumn = searchOpen\n  ? \u003CCometChatSearch onBack={() => setSearchOpen(false)} onConversationClicked={pick} onMessageClicked={jump} \u002F>\n  : \u003CCometChatConversations showSearchBar onSearchBarClicked={() => setSearchOpen(true)} onItemClick={pick} \u002F>;\n\u002F\u002F \u003Caside className=\"list-column\">{listColumn}\u003C\u002Faside> \u003Cmain>{messagePane}\u003C\u002Fmain>\n\u002F\u002F Mobile (single-pane): if (searchOpen) render \u003CCometChatSearch\u002F> full-screen (it's the list screen).\n```\n\n## Common pitfalls (BAKED)\n- Remounting `CometChatProvider` on every route\u002Ftoggle (re-triggers init\u002Flogin). Rendering the message pane before a conversation is selected. Nesting multiple providers.\n- **Shipping a fixed side-by-side layout with no small-viewport collapse** — the #1 layout defect. On a phone the list + message panes squash and tapping a conversation does nothing visible. Always add the mobile single-pane branch above and wire the header's built-in `onBack` (AUDIT-011).\n- **Not wrapping the surface in `CometChatErrorBoundary`** — a render error in any kit component then blanks the whole page (white screen) instead of showing a localized fallback + retry. Both recipes above wrap the surface; keep it.\n- **A surface that grows into place as content loads (load-transition reflow)** — small while the list loads, then jumps to full size. The box is content-driven, not pinned: satisfy `layout.md` (pinned `100dvh`, prepared ancestor chain, `min-height:0` columns) and let the kit's own `loadingView`\u002F`emptyView` fill the pinned box — don't gate the surface behind your own placeholder→chat swap (AUDIT-023).\n- **Over-delivering the whole combined app on a plain \"add chat\"** — the default is the Core-surface recipe (list ↔ message pane); grow to the Combined-app recipe (selector tabs + side panel + incoming call) only when the user asks for the whole app.\n\n## Verify it works\nChat renders in the chosen layout inside a `CometChatErrorBoundary`, and on a narrow viewport it collapses to ONE pane at a time (list → message → back) — no squashed side-by-side panes on a phone. Default \"add chat\" ⇒ the Core-surface recipe (list ↔ message pane, sized, affordances wired-or-hidden); the whole combined app (tabs + side panel + incoming call) is the grow target for an explicit full-app ask.\n\n**Close (after it builds):** end with the shared 3-option selectable menu and WAIT for the pick — **(1) add another feature** (suggest a few not-yet-wired) · **(2) customize theming** · **(3) test it manually** (stop; let the user check). Same contract as the `cometchat-react-v7-core` close (`RULES.md` §19).\n",{"name":5,"license":15,"metadata":50,"description":7,"compatibility":54},{"tags":51,"author":52,"version":53},"cometchat react placement layout uikit v7","CometChat","1.1.0","React >=18; @cometchat\u002Fchat-uikit-react ^7 (7.2.x, verified 7.2.4)","main","cebc3dce495d7eb80d3b1d5841f877a4a92e162d","plugins\u002Fcometchat\u002Fcometchat-skills\u002Fskills\u002Fcometchat-react-v7-placement",490,"https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins","https:\u002F\u002Fhol.org\u002Fplugins\u002Fbest-codex-plugins","https:\u002F\u002Fgithub.com\u002Fhashgraph-online","https:\u002F\u002Fhol.org","Open-source standards and developer tools for interoperable AI agents: discovery, identity, communication, payments, privacy and security.","2026-11-14 02:12:02",{"source":8,"skillName":5,"commands":66,"prompt":76,"zipAvailable":77},[67,70,73],{"tool":68,"command":69},"npx","npx skills add hashgraph-online\u002Fawesome-codex-plugins --skill cometchat-react-v7-placement",{"tool":71,"command":72},"bunx","bunx skills add hashgraph-online\u002Fawesome-codex-plugins --skill cometchat-react-v7-placement",{"tool":74,"command":75},"pnpm","pnpm dlx skills add hashgraph-online\u002Fawesome-codex-plugins --skill cometchat-react-v7-placement","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fcometchat\u002Fcometchat-skills\u002Fskills\u002Fcometchat-react-v7-placement\u002FSKILL.md",true,[79],{"path":80,"resourceType":81,"resourceTypeDesc":82,"sizeBytes":83,"sourceHtmlUrl":84},"references\u002Frecipes.md","REFERENCE","参考文档",25565,"https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fcometchat\u002Fcometchat-skills\u002Fskills\u002Fcometchat-react-v7-placement\u002Freferences\u002Frecipes.md",[86,95,102,109,136,161],{"skillNo":87,"name":88,"nameZh":6,"description":89,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":90,"licenseFileUrl":6,"sourceHtmlUrl":91,"categories":92,"keywords":93,"publishedAt":94},"01M746ZWACVKMZ1BJXJZHYJSSX","migrate-to-e2e","Moves an existing Playwright, Cypress, Selenium, Appium, Detox, Maestro, or TesterArmy suite to e2e one slice at a time, with the old suite running beside the new one until each ported test is proven. Keeps a MIGRATION.md progress file so any later session resumes where the last stopped. Optionally plants a defect to show both suites catch it. Use for \u002Fmigrate-to-e2e, \"migrate our tests to e2e\", \"port these Maestro flows\", \"move our TesterArmy tests\", or when a project has an e2e config and an older suite still running.","Apache-2.0","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Ftester-army\u002Fe2e\u002Fskills\u002Fmigrate-to-e2e\u002FSKILL.md",[],[],"2026-11-11 15:11:14",{"skillNo":96,"name":97,"nameZh":6,"description":98,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":90,"licenseFileUrl":6,"sourceHtmlUrl":99,"categories":100,"keywords":101,"publishedAt":94},"01M746ZPTAX1Q0FBKAB1CYND7E","e2e","Writes, runs, and debugs end-to-end tests for web and mobile apps with e2e, the agentic test runner, which mixes agent.act goals with exact locator assertions on a Playwright browser or an iOS or Android device. Also drives a project's running app live over the e2e MCP server to look at a screen, check a UI change, take a screenshot or record a video, and try a locator; and runs bug bashes, parallel e2e explore runs with each bug proven by a repro test. Use when a project depends on e2e or has an e2e.config.ts, when asked for end-to-end, browser, mobile, or agentic UI tests, to check a change in the running app, to QA or bug bash an app or branch, or when an e2e run fails.","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Ftester-army\u002Fe2e\u002Fskills\u002Fe2e\u002FSKILL.md",[],[],{"skillNo":103,"name":104,"nameZh":6,"description":105,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":90,"licenseFileUrl":6,"sourceHtmlUrl":106,"categories":107,"keywords":108,"publishedAt":94},"01M746ZJN784HVHMDP9MQGCSGG","create-verification-skill","Generate a project-local verify-\u003Capp> skill on top of e2e, so any coding agent can launch the app, check it is worth driving, exercise a feature the way a user does, keep evidence, and bug bash it. Writes the skill, a feature map with one explore charter per feature, and proves it once. Use for \u002Fcreate-verification-skill, \"make a verification skill for this repo\", or when a project has no scripted way to prove UI behavior.","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Ftester-army\u002Fe2e\u002Fskills\u002Fcreate-verification-skill\u002FSKILL.md",[],[],{"skillNo":110,"name":111,"nameZh":6,"description":112,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":90,"licenseFileUrl":6,"sourceHtmlUrl":113,"categories":114,"keywords":115,"publishedAt":45},"01M716A6ETNB9B1SQ3GXZC75VR","deja-search","deja-vu memory — search the user's past AI coding sessions with the deja CLI. Holds what they already settled and never wrote into the repo (naming rules, banned or already-tried tools, required checks before merge, preferred values, who owns what). Use before your first edit in a task, before you call a change done or ready to merge, before you recommend a tool, library, design or reviewer, before re-debugging an error that may already be solved, when they say 'didn't we fix this before', 'what did we decide about X' or 'I already have that', and before telling them something on this machine does not exist.","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fvshulcz\u002Fdeja-vu\u002Fskills\u002Fdeja-search\u002FSKILL.md",[],[116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135],"search","deja search","never","error","ready","memory","re","decide","fix","design","debugging","when","you","done","reviewer","io","change","cli","merge","past",{"skillNo":137,"name":138,"nameZh":6,"description":139,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":90,"licenseFileUrl":6,"sourceHtmlUrl":140,"categories":141,"keywords":142,"publishedAt":45},"01M716A3J2W5SENSE9VGMXB375","deja-reflect","End-of-session reflection and memory curation with deja-vu. Review what was decided, what commands broke and what repaired them, and record durable project rules or decisions with deja remember so the next session starts with them.","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fvshulcz\u002Fdeja-vu\u002Fskills\u002Fdeja-reflect\u002FSKILL.md",[],[143,144,145,131,146,147,148,149,150,151,152,153,154,155,121,156,157,158,159,160],"deja reflect","reflect","review","with","record","github","next","https","node","Rules","decisions","brew","remember","project rules","project","session","end","reflection",{"skillNo":162,"name":163,"nameZh":6,"description":164,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":90,"licenseFileUrl":6,"sourceHtmlUrl":165,"categories":166,"keywords":176,"publishedAt":45},"01M715T3RR4BAYSR57HPPTJ0PF","revid","Make, edit, export and post AI videos with Revid (revid.ai) through the Revid MCP server. Use whenever the user wants a short-form or long-form video made (from an idea, a script, a URL, an article, a PDF, a tweet, a product page, their own clips, or a song), wants to find what is going viral on TikTok, YouTube, Instagram or X before making something, wants to edit or re-export an existing Revid project, generate a standalone AI image or clip, make a series episode, or publish and schedule a finished video to connected social accounts. Covers setup (hosted MCP with OAuth, or an API key), the 36 tools, credits, polling and the rules for publishing. Routes to the more specific revid-* skills when one fits.","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Ftmakersas\u002Frevid-skills\u002Fskills\u002Frevid\u002FSKILL.md",[167,170,173],{"categoryNo":168,"categoryName":169,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000016","图像与多媒体",{"categoryNo":171,"categoryName":172,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":174,"categoryName":175,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000010","后端与接口",[163,177,178,179,180,181,182,157,183,122,184,185,186,187,127,188,189,190,191,192],"URL","Video","short-form","standalone","PDF","viral","tiktok","short","social","MCP","song","image","mcp server","schedule","api","publish"]