cometchat-angular-components
Purpose
Teaches Claude every component the Angular UI Kit v4 exports, with the HTML selectors, Angular [Input] bindings, (Output) events, ng-template slot views, request builders, and style objects that actually exist. This is the authoritative reference — never invent component names or bindings; look them up here.
Read cometchat-angular-core before this skill — module imports, CUSTOM_ELEMENTS_SCHEMA, and init/login are prerequisites.
Ground truth: docs/ui-kit/angular/components-overview, per-component doc pages at docs/ui-kit/angular/, and @cometchat/chat-uikit-angular@4.x exports.
How to use this catalog
Angular UI Kit components are Angular standalone components that render as custom HTML elements. Three patterns cover almost every use case:
| Pattern | Components | Use when |
|---|---|---|
| Composite (quickest) | <cometchat-conversations-with-messages> — renders a 3-panel layout (Conversations + Messages + Details) in one tag |
Full-page route placements with ≥ 1024px of horizontal space. The composite reserves room for a Details panel — in narrower containers (modals, sidebars, drawers) the Details slot stays empty and the layout looks broken. |
| Two-pane (custom layout) | <cometchat-conversations> + <cometchat-messages> side by side |
Modal / dialog / sidebar / drawer placements (anywhere narrower than ~1024px). You wire the click handler from Conversations to set the active user/group on Messages. |
| Granular (full control) | <cometchat-message-header> + <cometchat-message-list> + <cometchat-message-composer> |
Embedded chat surfaces with no inbox — e.g. a "Contact seller" modal that opens a 1:1 thread directly, or a per-page chat panel pinned to a specific user/group. |
More from cometchat/cometchat-skills
cometchat
Entry-point for CometChat integration in any React, React Native, Angular, Android, Flutter, or iOS project — web (React/Next.js/React Router/Astro), React Native (Expo/bare), Angular (12-15), native Android (V5 stable, V6 beta), Flutter (V5 stable, V6 beta), and native iOS (V5 stable). Detects the framework, gathers requirements through an interactive conversation, and writes production-quality integration code.
31cometchat-react-nextjs
Integrate CometChat React UI Kit v6 into a Next.js project (App Router or Pages Router) using the @cometchat/skills-cli. Replaces the v1 prose skill once the CLI is published to npm.
12cometchat-theming
Customize CometChat UI to match the user's app design system. Covers the CSS variable cascade, preset themes, brand color overrides, design system extraction, dark mode, and framework-specific override locations.
10cometchat-react-reactjs
Integrate CometChat React UI Kit v6 into a React (Vite or CRA) project using the @cometchat/skills-cli. Replaces the v1 prose skill once the CLI is published to npm.
10cometchat-troubleshooting
Diagnose and fix problems with a CometChat integration. Runs verify checks, detects drift, queries the docs MCP for symptom-to-cause lookups, and proposes targeted fixes. Works on any state — broken, missing, or drifted integrations.
9cometchat-react-react-router
Integrate CometChat React UI Kit v6 into a React Router project (v6 or v7) using the @cometchat/skills-cli. Replaces the v1 prose skill once the CLI is published to npm.
9