cometchat-angular-components
Installation
SKILL.md
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. |