Agent skill

CometChat Angular Features

by cometchat in cometchat/cometchat-skills

Enables or builds CometChat features such as polls, reactions, smart replies and pinned messages in an Angular app, first classifying how much client code each one needs.

MITAuto-check passedFrontend & Design

Install CometChat Angular Features

skills CLI
$ npx skills add cometchat/cometchat-skills --skill cometchat-angular-v5-features -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install cometchat/cometchat-skills cometchat-angular-v5-features --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/cometchat/cometchat-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/cometchat-angular-v5-features .claude/skills/cometchat-angular-v5-features && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
cometchat-angular-v5-features
GitHub stars
129
Token cost
~2.6k tokens
SKILL.md length
1,141 words
Files
4 (incl. references)
Skills in repo
97
Repo updated
First seen
Licence
MIT

At a glance

Enables or builds CometChat features such as polls, reactions, smart replies and pinned messages in an Angular app, first classifying how much client code each one needs.

  • Works in 7 steps: Building a feature that is already on —… → Assuming every extension is zero-code —… → Declaring a feature absent because… → …
  • Enabling a CometChat feature such as polls or reactions in an Angular app
  • SKILL.md covers Companion skills (read first), Use this skill when, FIRST — classify the request and Already on by default — do NOT…, plus 6 more sections
  • Reaches cometchat.com

What it does

Before touching code, the agent classifies the request, because most CometChat features need none. Some are already on, such as reactions, mentions, receipts and typing indicators. Dashboard extensions like polls, stickers, translation and link preview only need enabling in the dashboard. Host-composed features, such as pinned messages or reminders, need the extension enabled and then your own UI built with callExtension to send and fetch. AI features like smart replies need dashboard enablement and an optional component, and threads, search, custom message types, text formatters and calls take real client code.

A features file in the pack root is the ground truth for what exists, so a feature that is not listed there is never invented, and exact enablement steps are fetched from the documentation topic on each entry. The skill assumes companion skills for installation, credentials and component names. It targets the @cometchat/chat-uikit-angular package at version 5 on Angular 17 to 21.

When your agent uses it

  • Enabling a CometChat feature such as polls or reactions in an Angular app
  • Finding out whether a chat feature needs any client code at all
  • Building the UI for a host-composed extension like pinned or saved messages
  • Adding smart replies, translation or stickers to an existing chat screen

Example prompts

  • “Add polls to our Angular chat screen.”
  • “Let users save and bookmark messages in the Angular app.”
  • “Turn on smart replies and tell me whether any client code is needed.”
  • “Send a custom message type that carries an order status card.”

Requirements

  • @cometchat/chat-uikit-angular version 5 in an Angular 17 to 21 app
  • A CometChat dashboard account to enable extensions
  • The companion cometchat-angular-v5-core skill
  • Compatibility (from SKILL.md): @cometchat/chat-uikit-angular ^5 (5.1.0–5.2.0 verified); Angular 17-21

Workflow steps

7 steps, taken from the first numbered list in SKILL.md.

  1. Building a feature that is already on — hand-rolled reaction pickers are the classic. Check the "already on" list first.
  2. Assuming every extension is zero-code — 10 of them render no affordance and need CometChat.callExtension(). Equally, do not write code for…
  3. Declaring a feature absent because node_modules has no method for it — extensions have no named SDK method; they go through the generic…
  4. Re-implementing a server-side feature in the browser — localStorage, an in-memory Map, or a local BehaviorSubject where an extension…
  5. Offering a feature Angular does not have — E2E encryption, live streaming, email replies.
  6. Forgetting the dashboard step — the code is right, the feature is off, and it looks broken.
  7. Treating reactions/mentions as extensions — they are core in v5.

What it can do on your machine

Read from SKILL.md and the folder at commit 911b108. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript and html).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • cometchat.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

  • Compatibility

    @cometchat/chat-uikit-angular ^5 (5.1.0–5.2.0 verified); Angular 17-21

    From compatibility in the SKILL.md frontmatter.

Context cost

CometChat Angular Features loads about 2.6k tokens when it runs, and up to ~7.2k if it reads all its reference files. Until then it costs about 259 tokens; SKILL.md has 1,141 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~259
When it runs · the whole SKILL.md, loaded when a task matches
~2.6k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~7.2k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from cometchat/cometchat-skills at commit 911b108, republished under its MIT licence (© cometchat). 1,141 words, ~2,630 tokens.

Download SKILL.mdSave it as .claude/skills/cometchat-angular-v5-features/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.
name
cometchat-angular-v5-features
description
Enable or build any CometChat feature in an Angular app, and say which need zero client code. Covers: reactions · mentions · threaded replies · search · read receipts · typing indicators · presence · media & file attachments · voice notes · polls · stickers · GIFs · message translation · link preview · thumbnails · pin message · save / bookmark messages · reminders · message shortcuts · voice transcription · rich media preview · URL shortener · collaborative whiteboard & document · disappearing messages · support desk integrations · AI smart replies, conversation starter, summary and assistant · voice & video calling · push notifications · notification feed · moderation & reporting · campaigns · custom message types · text formatters & rich text · card messages. Triggers: 'add polls angular', 'enable reactions', 'let users save/bookmark messages', 'pin a message', 'add smart replies', 'turn on translation', 'add stickers or GIFs', 'send a custom message type', 'enable an extension angular'.
compatibility
@cometchat/chat-uikit-angular ^5 (5.1.0–5.2.0 verified); Angular 17-21
license
MIT
metadata.author
CometChat
metadata.version
1.0.0
metadata.tags
cometchat angular features v5 extensions ai reactions polls stickers translation

Ground truth: the feature existence oracle is features.angular-v5.json (pack root). A feature a user asks for MUST be an id there — if it is not listed it does not exist; do not invent it. Exact enablement steps and payloads are FETCHED from each entry's docs_topic (a PATH — resolve it against DOCS_BASE in cometchat-angular-v5-core/references/docs-map.md). UI component names come from the angular-v5 catalog.

Companion skills (read first)

  • cometchat-angular-v5-core — install, credentials, init→login→render. Assumed, never restated.
  • cometchat-angular-v5-components — component names, inputs/outputs, slots.

Use this skill when

Someone asks to add or enable a capability: "add polls", "enable reactions", "turn on smart replies".

FIRST — classify the request

Most features need no client code at all. Writing some is the most common mistake here.

ClassWhat you doExamples
Already onNothing. Confirm and show where it appears.reactions, mentions, receipts, typing, media attachments, voice notes
Dashboard extension — zero codeEnable in the dashboard. Nothing else — the kit either mounts a dedicated bubble component or renders it inline automatically.polls, stickers, collaborative whiteboard, collaborative document, message translation, link preview, thumbnail generation
Dashboard extension — HOST-COMPOSEDEnable in the dashboard, then you build the UI: CometChat.callExtension() to send/fetch, your own component to render. The dashboard toggle alone does nothing visible.pin message, save message, message shortcuts, voice transcription, rich media preview, GIFs, reminders, URL shortener, disappearing messages, support integrations
Dashboard + AIEnable in the dashboard, then optionally place a component.smart replies, conversation starter, conversation summary, AI assistant
Client codeReal wiring.threads, search, custom message types, text formatters, rich text, calls

10 of the 17 extensions are host-composed — nearly two-thirds. needs_stitching: true in features.angular-v5.json is the authoritative signal (not ui_components: three zero-code entries — message translation, link preview, thumbnail generation — legitimately have ui_components: [] because they render inline into an existing bubble/menu rather than through a separately-importable component). Verify against needs_stitching before answering, never from memory or from this table's examples alone.

Ask which app in the dashboard before telling someone to toggle something.

Already on by default — do NOT "add" these

reactions · mentions · delivery/read receipts · typing indicators · media & file attachments · voice notes.

These are core in v5, not extensions. Angular's extensions page does not list reactions or mentions, which confirms it. If one is not visible the cause is a missing @Input() or an unsized container — not a missing feature. Never write a reaction picker or typing indicator by hand.

Dashboard extensions — enabling is necessary, NOT always sufficient

Dashboard → your app → Extensions → enable. Then check the running app, because there are two kinds:

Auto-rendered — emit nothing. The kit surfaces these itself once enabled: polls, stickers, collaborative document/whiteboard (bubbles in the message list), link preview and thumbnails (inside the bubble), message translation (an entry in the message menu).

Host-composed — the kit renders NO affordance. Enabling them changes nothing visible; you must call the extension and render your own control:

ts
import { CometChat } from '@cometchat/chat-sdk-javascript';

// SEND — exact slug, endpoint and payload are on the extension's own docs page
await CometChat.callExtension('pin-message', 'POST', 'v1/pin', { msgId, receiverType });

Send is only a third of the job. You also need to FETCH the pinned/saved list back and RENDER it — full pattern, incl. the type-safe way to turn a fetched entry into displayable text: references/host-composed-extensions.md.

Currently host-composed in Angular (10): pin message · save message · message shortcuts · voice transcription · rich media preview · GIFs · reminders · URL shortener · disappearing messages · support integrations. needs_stitching: true in features.angular-v5.json is the authoritative signal — not ui_components, see the table above.

Do not conclude a feature "does not exist" because the kit has no component and the SDK has no named method for it. Extensions are reached through the generic CometChat.callExtension() — there is no pinMessage() to grep for. Searching node_modules for the SEND/FETCH calls will find nothing and that is expected.

docs_topic is a PATH, not a URL. Prefix it with DOCS_BASE from cometchat-angular-v5-core/references/docs-map.md, then append .md: {DOCS_BASE} + /fundamentals/pin-message + .md Do not hardcode https://www.cometchat.com/docs/.... DOCS_BASE may point at a docs preview while a docs change is in flight, and a hardcoded production URL silently reads the pre-change page — so you would fetch a page that is missing the very detail you were sent to find.

Available (from Angular's extensions page): Bitly · Link Preview · Message Shortcuts · Pin Message · Rich Media Preview · Save Message · Thumbnail Generation · TinyURL · Voice Transcription · Giphy · Message Translation · Polls · Reminders · Stickers · Stipop · Tenor · Collaborative Document · Collaborative Whiteboard · Disappearing Messages · Chatwoot · Intercom.

Two have a bubble you may reference when customizing, but you still do not mount them yourself: CometChatPollBubbleComponent, CometChatStickerBubbleComponent.

Not available for Angular: end-to-end encryption, live streaming, email replies. They exist for other platforms. Say so plainly rather than improvising.

Show full SKILL.md (407 more words)Show less

AI features

Enable in the dashboard (AI section), then place the component you need:

html
<cometchat-smart-replies></cometchat-smart-replies>
<cometchat-conversation-starter></cometchat-conversation-starter>
<cometchat-conversation-summary></cometchat-conversation-summary>

<cometchat-message-list> also emits smartReplyClick and conversationStarterClick when those are enabled, so the built-in surfaces work without extra components. The AI assistant is CometChatAIAssistantChat — no Component suffix.

Features that DO need code

FeatureWhere
Threaded repliescometchat-angular-v5-placement — thread panel
Searchcometchat-angular-v5-placement — search column
Custom message typesreferences/custom-messages.md
Text formatters / rich textreferences/formatters.md
Voice & video callscometchat-angular-v5-calls
Push notificationscometchat-angular-v5-push

Common pitfalls

  1. Building a feature that is already on — hand-rolled reaction pickers are the classic. Check the "already on" list first.
  2. Assuming every extension is zero-code — 10 of them render no affordance and need CometChat.callExtension(). Equally, do not write code for the auto-rendered ones.
  3. Declaring a feature absent because node_modules has no method for it — extensions have no named SDK method; they go through the generic callExtension(). Check the extension's docs page before saying it is unsupported.
  4. Re-implementing a server-side feature in the browser — localStorage, an in-memory Map, or a local BehaviorSubject where an extension exists. Saved/pinned messages, reminders and shortcuts are stored server-side and are per-user across devices; a browser-local copy does not sync to the user's phone and dies with the cache. If a request is about remembering something about a message, check features.angular-v5.json before writing storage of your own.
  5. Offering a feature Angular does not have — E2E encryption, live streaming, email replies.
  6. Forgetting the dashboard step — the code is right, the feature is off, and it looks broken.
  7. Treating reactions/mentions as extensions — they are core in v5.

Verify it works

The feature appears in a real conversation · you wrote no code for a dashboard-only feature · the dashboard toggle is on for the app the credentials point at.

Explain what you built (REQUIRED close)

Tell the developer what changed, naming the files: the feature you just enabled (and whether it needed a dashboard toggle). Flag anything dev-only as dev-only, and say what you did not touch — this is additive.

Then offer these THREE options as a SELECTABLE choice and WAIT for the pick — never auto-continue (RULES.md §19):

  1. Add another feature → another grow-set feature from features.angular-v5.json that is NEITHER wired NOR already enabled — ASK about dashboard state rather than assuming. Never offer an auto entry (reactions, mentions, receipts, typing, media) — those are core in v5 and already on.
  2. Customize theming → cometchat-angular-v5-customization.
  3. Test it manually → do nothing further; hand back so the user runs it.

© cometchat, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 3 other files (references) in skills/cometchat-angular-v5-features of cometchat/cometchat-skills.

  • SKILL.md
  • references/custom-messages.md
  • references/formatters.md
  • references/host-composed-extensions.md

Open the folder on GitHubat commit 911b108

Compare with similar skills

CometChat Angular Features next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

CometChat Angular Features compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
CometChat Angular Features this skillcometchat/cometchat-skills129—~2.6kAutomated safety check: PassMIT
Angular HttpClient StandardsHoangNguyen0403/agent-skills-standard570—~652Automated safety check: PassMIT
Phase 6 UI Integrationww-w-ai/bkit-claude-code600—~4.3kAutomated safety check: NotesApache-2.0
Spartan UI Angular Componentsspartan-ng/spartan2.9k—~2.4kAutomated safety check: PassMIT
Angular Idioms and Patternsirahardianto/awesome-agv157—~3.8kAutomated safety check: PassMIT
Angular ArchitectJeffallan/claude-skills12k—~1.5kAutomated safety check: PassMIT

Similar skills

  • Angular HttpClient Standards

    HoangNguyen0403/agent-skills-standard

    Sets rules for Angular HTTP code: functional interceptors, typed requests, services that own every call, and httpResource for reactive data loading in Angular 17+.

    570 GitHub stars~652 tokensUpdated today
    Frontend & DesignAuto-check passed
  • Phase 6 UI Integration

    ww-w-ai/bkit-claude-code

    Implement frontend UI and integrate with backend APIs — state management and API clients.

    600 GitHub stars~4.3k tokensUpdated 10 days ago
    Frontend & DesignAuto-check: notes
  • Helps add, compose, debug and style spartan/ui components in Angular projects, using its Brain headless primitives and Helm styled layer through the @spartan-ng/cli generators.

    2.9k GitHub stars~2.4k tokensUpdated yesterday
    Frontend & DesignAuto-check passed
  • Angular Idioms and Patterns

    irahardianto/awesome-agv

    Coding conventions for Angular 19 and later: standalone components, signals, OnPush change detection, lazy routes and where RxJS still belongs.

    157 GitHub stars~3.8k tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed
  • Angular Architect

    Jeffallan/claude-skills

    Builds Angular 17+ features with standalone components, signals, NgRx state, RxJS patterns and lazy-loaded routing, then checks bundle size and test coverage.

    12k GitHub stars~1.5k tokensUpdated 4 days ago
    Frontend & DesignAuto-check passed
  • Oma Frontend

    first-fluke/oh-my-agent

    Implement or modify web UI in React, Next.js, or Angular. An agent skill from first-fluke/oh-my-agent.

    1.3k GitHub stars~3.2k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

More from cometchat/cometchat-skills

All 97 skills in this repo
  • CometChat Android Calls SDK v5

    cometchat/cometchat-skills

    Adds voice and video calling to an Android app in Kotlin with the headless CometChat Calls SDK v5, covering meeting-style rooms, 1:1 ringing calls, call logs and recording.

    129 GitHub stars~5.2k tokensUpdated 2 days ago
    Auto-check passed
  • CometChat Android v5 Headless SDK

    cometchat/cometchat-skills

    Builds chat on Android with your own UI against the headless CometChat Chat SDK v5, covering install, Jetifier conflicts, credentials and init-before-login ordering.

    129 GitHub stars~4k tokensUpdated 2 days ago
    Auto-check passed
  • CometChat Angular Component Picker

    cometchat/cometchat-skills

    Picks and customizes CometChat's Angular UI Kit components by their verified component list, exact input and output event names, and the surfaces that have no kit component at all.

    129 GitHub stars~2.6k tokensUpdated 2 days ago
    Auto-check passed
  • CometChat Angular Chat Placement

    cometchat/cometchat-skills

    Decides where CometChat chat UI goes in an Angular app: a dedicated route, a dashboard panel, a support widget or the full multi-pane app, with thread and search panels.

    129 GitHub stars~2.2k tokensUpdated 2 days ago
    Auto-check passed
  • Cometchat iOS V5 SDK

    cometchat/cometchat-skills

    Add voice & video calling to any iOS app FROM SCRATCH with the headless CometChat Calls SDK v5 (CometChatCallsSDK, via Swift Package Manager) — no UI Kit.

    129 GitHub stars~5.2k tokensUpdated 2 days ago
    Auto-check passed
  • Cometchat JS V5 SDK

    cometchat/cometchat-skills

    Add voice & video calling to any web app FROM SCRATCH with the headless CometChat Calls SDK v5 (@cometchat/calls-sdk-javascript@5) — no prebuilt UI Kit.

    129 GitHub stars~3.9k tokensUpdated 2 days ago
    Auto-check passed

Questions about CometChat Angular Features

What does CometChat Angular Features do?

Enables or builds CometChat features such as polls, reactions, smart replies and pinned messages in an Angular app, first classifying how much client code each one needs. Before touching code, the agent classifies the request, because most CometChat features need none. Some are already on, such as reactions, mentions, receipts and typing indicators.

When should I use CometChat Angular Features?

CometChat Angular Features fits situations like: enabling a CometChat feature such as polls or reactions in an Angular app; finding out whether a chat feature needs any client code at all; building the UI for a host-composed extension like pinned or saved messages; adding smart replies, translation or stickers to an existing chat screen.

How do I install CometChat Angular Features in Claude Code?

Run `npx skills add cometchat/cometchat-skills --skill cometchat-angular-v5-features -a claude-code`. Or copy the skill folder (skills/cometchat-angular-v5-features in cometchat/cometchat-skills) into .claude/skills/cometchat-angular-v5-features in your project. Claude Code loads it when a task matches its description.

How do I install CometChat Angular Features in Codex?

Run `npx skills add cometchat/cometchat-skills --skill cometchat-angular-v5-features -a codex`. Or copy the skill folder (skills/cometchat-angular-v5-features in cometchat/cometchat-skills) into .agents/skills/cometchat-angular-v5-features in your project. Codex loads it when a task matches its description.

Can I use CometChat Angular Features in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add cometchat/cometchat-skills --skill cometchat-angular-v5-features -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/cometchat-angular-v5-features, .gemini/skills/cometchat-angular-v5-features, .github/skills/cometchat-angular-v5-features and .opencode/skills/cometchat-angular-v5-features in your project.

What does CometChat Angular Features need to run?

SKILL.md names no scripts, command-line tools or credentials: CometChat Angular Features is instructions for the agent only. Our summary lists: @cometchat/chat-uikit-angular version 5 in an Angular 17 to 21 app; A CometChat dashboard account to enable extensions; The companion cometchat-angular-v5-core skill. Compatibility (from SKILL.md): @cometchat/chat-uikit-angular ^5 (5.1.0–5.2.0 verified); Angular 17-21.

Does CometChat Angular Features access the network?

SKILL.md names 1 domain. In commands or code: cometchat.com; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is CometChat Angular Features safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does CometChat Angular Features use?

CometChat Angular Features is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does CometChat Angular Features use?

About 2.6k tokens (SKILL.md is roughly 11k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 4.6k tokens, read only when the agent opens those files.

What are the alternatives to CometChat Angular Features?

Skills that share tags, products or a category with CometChat Angular Features: Angular HttpClient Standards (HoangNguyen0403/agent-skills-standard, 570 stars), Phase 6 UI Integration (ww-w-ai/bkit-claude-code, 600 stars), Spartan UI Angular Components (spartan-ng/spartan, 2.9k stars) and Angular Idioms and Patterns (irahardianto/awesome-agv, 157 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains CometChat Angular Features?

cometchat (a GitHub organization) maintains it in cometchat/cometchat-skills, which has 129 GitHub stars. The repository holds 97 skills in this directory. The repository was last updated on October 5, 2026.

Source: cometchat/cometchat-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.