Agent skill

Cometchat Angular V5 Customization

by cometchat in cometchat/cometchat-skills

Brand and customize the CometChat Angular UI Kit — CSS variable tokens, light/dark via ThemeService, localization, date/time formats, global config, and swapping component regions with ng-template.

MITAuto-check passedFrontend & Design

Install Cometchat Angular V5 Customization

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

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

GitHub CLI
$ gh skill install cometchat/cometchat-skills cometchat-angular-v5-customization --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-customization .claude/skills/cometchat-angular-v5-customization && 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-customization
GitHub stars
129
Token cost
~1.9k tokens
SKILL.md length
797 words
Files
1
Skills in repo
97
Repo updated
First seen
Licence
MIT

At a glance

Brand and customize the CometChat Angular UI Kit — CSS variable tokens, light/dark via ThemeService, localization, date/time formats, global config, and swapping component regions with ng-template.

  • Works in 5 steps: Hand-rolling OS theme detection —… → Replacing itemView for a colour change —… → Styling generated class names — breaks… → …
  • Tasks that involve Design tokens
  • SKILL.md covers Companion skills (read first), Use this skill when, Pick the smallest lever and CSS variables, plus 8 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Cometchat Angular V5 Customization is an agent skill from cometchat/cometchat-skills. Brand and customize the CometChat Angular UI Kit — CSS variable tokens, light/dark via ThemeService, localization, date/time formats, global config, and swapping component regions with ng-template. Triggers: 'change the chat colours', 'match my brand angular', 'dark mode', 'translate the chat', 'change the date format', 'custom avatar in the list'.

Its SKILL.md is about 1.9k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts. Compatibility notes: @cometchat/chat-uikit-angular ^5 (5.1.0–5.2.0 verified); Angular 17-21

It sits in Frontend & Design, covering Design tokens, Theming and dark mode and Internationalization. It works with CometChat and Angular. The repository describes itself as: Add CometChat chat & messaging and voice & video calls to any React, Next.js, React Native, Angular, Android, iOS, or Flutter project through your AI coding agent. Works with… The licence is MIT.

When your agent uses it

  • Tasks that involve Design tokens
  • Tasks that involve Theming and dark mode
  • Tasks that involve Internationalization

Example prompts

  • “change the chat colours”
  • “match my brand angular”
  • “dark mode”
  • “/cometchat-angular-v5-customization”

Requirements

  • Compatibility (from SKILL.md): @cometchat/chat-uikit-angular ^5 (5.1.0–5.2.0 verified); Angular 17-21

Workflow steps

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

  1. Hand-rolling OS theme detection — ThemeService.initFromPreference() already does it.
  2. Replacing itemView for a colour change — loses selection, presence and receipts.
  3. Styling generated class names — breaks on the next kit release.
  4. !important wars — the stylesheet is not registered, or the rule is out of cascade.
  5. Two theme sources — ThemeService plus your own data-theme writer; they drift.

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 css and typescript).

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

  • Network

    No URLs in SKILL.md.

    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 V5 Customization loads about 1.9k tokens when it runs. Until then it costs about 96 tokens; SKILL.md has 797 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~96
When it runs · the whole SKILL.md, loaded when a task matches
~1.9k

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). 797 words, ~1,905 tokens.

Download SKILL.mdSave it as .claude/skills/cometchat-angular-v5-customization/SKILL.md (or your agent's skills folder).
name
cometchat-angular-v5-customization
description
Brand and customize the CometChat Angular UI Kit — CSS variable tokens, light/dark via ThemeService, localization, date/time formats, global config, and swapping component regions with ng-template. Triggers: 'change the chat colours', 'match my brand angular', 'dark mode', 'translate the chat', 'change the date format', 'custom avatar in the list'.
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 customization theming v5 branding dark-mode localization tokens

Ground truth: @cometchat/chat-uikit-angular@5 (5.1.0–5.2.0 verified). Theme tokens, ThemeService and the global config are FETCHED from {DOCS_BASE}/ui-kit/angular/customization/theming.md, /customization/global-config.md, /customization/localization.md, /customization/date-time-formatting.md and /message-bubble-styling.md — base + paths in cometchat-angular-v5-core/references/docs-map.md. CSS variable names are version-pinned; never invent a token.

Companion skills (read first)

  • cometchat-angular-v5-core — install and references/theming.md for the token basics. Assumed.
  • cometchat-angular-v5-components — view slots, when the change is structural rather than visual.

Use this skill when

Changing how the kit looks or reads: colours, fonts, dark mode, language, date formats, or replacing a region's markup.

Pick the smallest lever

WantUseCost
Different colours / spacingCSS variablesone stylesheet
Light ↔ darkThemeServiceone line
Different languageCometChatLocalizeconfig
Different date formatper-component *DateTimeFormat inputsone input
Different markup in a region*View slot + ng-templatea template
Different behaviournot customization — see features or components—

Reach for the first that works. Replacing a whole region to change a colour throws away selection, presence and receipts.

CSS variables

Every visual is a --cometchat-* custom property. Override wherever it cascades — usually styles.css.

css
:root {
  --cometchat-primary-color: #6851D6;
  --cometchat-border-color-default: #DCDCDC;
  --cometchat-text-color-primary: #141414;
}

Scope to part of the app by setting them on a wrapper instead of :root. Full token list: {DOCS_BASE}/ui-kit/angular/customization/theming.md.

Never target generated class names with descendant selectors — they change between releases. Never use !important; if a token is not applying, the kit stylesheet is not registered (angular.json → styles) or your rule is not in the cascade path.

Light / dark — ThemeService does it all

ts
import { Component, inject } from '@angular/core';
import { ThemeService } from '@cometchat/chat-uikit-angular';

@Component({ selector: 'app-root', standalone: true, template: '<router-outlet />' })
export class AppComponent {
  constructor() { inject(ThemeService).initFromPreference(); }
}

That single call respects the OS prefers-color-scheme, applies data-theme to <html> via the DOCUMENT token (SSR-safe), and keeps its own matchMedia listener so the UI follows the OS live.

⚠️ It does NOT persist, despite its docstrings. Verified against shipped 5.1.0: initFromPreference() claims to read localStorage first and setTheme()/toggleTheme() claim to persist, but the class never touches localStorage — a manual toggle is lost on reload. If the user needs a toggle that survives reload, add persistence around the service (cometchat-angular-v5-core/references/theming.md) rather than replacing it; a second matchMedia listener will drift from currentTheme().

Toggle: themeService.toggleTheme() — do not compute the next value yourself. Set a specific mode: themeService.setTheme('dark'). Read: themeService.currentTheme() — a signal, so it works directly in templates.

Divergence from the docs. {DOCS_BASE}/ui-kit/angular/customization/theming.md documents setTheme(), toggleTheme() and setting data-theme by hand, but does not mention initFromPreference() or following the OS prefers-color-scheme. initFromPreference() is real and verified against the installed 5.1.0 kit — prefer it over a hand-written matchMedia listener. Do not "correct" it away because the guide omits it; the omission is a docs gap, not evidence the method is wrong.

Do not hand-roll a matchMedia('(prefers-color-scheme: dark)') listener. That is the React recipe; React's kit cannot read the OS. Angular's can, and duplicating it creates state that drifts from currentTheme().

Localization

CometChatLocalize ships 19 languages. Set the language once at startup; the TranslatePipe and getLocalizedString() read from it. To override individual strings or add a language, fetch {DOCS_BASE}/ui-kit/angular/customization/localization.md — the override shape is version-specific and worth reading rather than guessing.

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

Date & time formats

Per-component inputs, not global CSS: lastMessageDateTimeFormat (conversations), messageSentAtDateTimeFormat (search), callInitiatedDateTimeFormat (call logs), lastActiveAtDateTimeFormat (message header). Pipes CalendarDatePipe, MessageDatePipe and ConversationDatePipe are exported if you need the same formatting in your own markup.

Global config

COMETCHAT_GLOBAL_CONFIG is an injection token for app-wide kit defaults. Prefer it over repeating the same input on every component instance. Details: {DOCS_BASE}/ui-kit/angular/customization/global-config.md.

Structural changes

Replacing markup rather than styling it is a view slot — itemView, titleView, subtitleView, leadingView, trailingView, headerView, emptyView, errorView, loadingView. See cometchat-angular-v5-components. Override the smallest slot that does the job.

Common pitfalls

  1. Hand-rolling OS theme detection — ThemeService.initFromPreference() already does it.
  2. Replacing itemView for a colour change — loses selection, presence and receipts.
  3. Styling generated class names — breaks on the next kit release.
  4. !important wars — the stylesheet is not registered, or the rule is out of cascade.
  5. Two theme sources — ThemeService plus your own data-theme writer; they drift.

Verify it works

Brand colours apply in both themes · dark mode survives a reload ONLY if you persisted the choice yourself (the kit does not — see the warning above); without that, a reload falls back to the OS setting · the OS theme is respected on first load · localized strings render · overridden regions keep click, presence and receipts working.

Explain what you built (REQUIRED close)

Tell the developer what changed, naming the files: what you themed — which tokens changed and whether light/dark follows the OS. 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 → a feature from features.angular-v5.json, or deeper structural customization via view slots. Never offer an auto entry (reactions, mentions, receipts, typing, media) — those are core in v5 and already on.
  2. Add a feature (search, calls, polls, AI) → cometchat-angular-v5-features.
  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

Just SKILL.md in skills/cometchat-angular-v5-customization of cometchat/cometchat-skills.

Open the folder on GitHubat commit 911b108

Compare with similar skills

Cometchat Angular V5 Customization 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 V5 Customization compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Cometchat Angular V5 Customization this skillcometchat/cometchat-skills129—~1.9kAutomated safety check: PassMIT
Impeccablebestofjs/bestofjs3.1k27 repos~2.6kAutomated safety check: PassMIT
Figma Design System Builderwarpdotdev/warp65k2 repos~4.4kAutomated safety check: PassAGPL-3.0
Scalar Design Systemscalar/scalar16k—~2.7kAutomated safety check: PassMIT
Building With Lobe UIlobehub/lobe-ui2.2k—~2kAutomated safety check: PassMIT
Material Design 3 UI/UX Guideskydashnet/material-design-3-ui-skill130—~3kAutomated safety check: PassMIT

Similar skills

  • Impeccable

    bestofjs/bestofjs

    A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…

    3.1k GitHub starsUsed in 27 repos~2.6k tokens
    Frontend & DesignAuto-check passed
  • Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.

    65k GitHub starsUsed in 2 repos~4.4k tokens
    Frontend & DesignAuto-check passed
  • Scalar's design system — design tokens, theming (@scalar/themes), CSS variables, and the @scalar/components library.

    16k GitHub stars~2.7k tokensUpdated today
    Frontend & DesignAuto-check passed
  • Building With Lobe UI

    lobehub/lobe-ui

    Build UI with the LobeHub design ecosystem — @lobehub/ui (plus its base-ui, chat, mobile, awesome, brand, mdx, i18n namespaces), @lobehub/icons, @lobehub/charts, @lobehub/fluent-emoji and…

    2.2k GitHub stars~2k tokensUpdated today
    Frontend & DesignAuto-check passed
  • Material Design 3 UI/UX Guide

    skydashnet/material-design-3-ui-skill

    Guides designing, reviewing or implementing interfaces that follow Google's Material Design 3 system: semantic tokens, component states, adaptive layout and accessibility.

    130 GitHub stars~3k tokensUpdated 6 days ago
    Frontend & DesignAuto-check passed
  • UI Design System

    try-works/role-model

    React UI component systems with TailwindCSS + Radix + shadcn/ui.

    117 GitHub stars~5k tokensUpdated today
    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 Features

    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.

    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

Questions about Cometchat Angular V5 Customization

What does Cometchat Angular V5 Customization do?

Brand and customize the CometChat Angular UI Kit — CSS variable tokens, light/dark via ThemeService, localization, date/time formats, global config, and swapping component regions with ng-template. Cometchat Angular V5 Customization is an agent skill from cometchat/cometchat-skills. Brand and customize the CometChat Angular UI Kit — CSS variable tokens, light/dark via ThemeService, localization, date/time formats, global config, and swapping component regions with ng-template.

When should I use Cometchat Angular V5 Customization?

Cometchat Angular V5 Customization fits situations like: tasks that involve Design tokens; tasks that involve Theming and dark mode; tasks that involve Internationalization.

How do I install Cometchat Angular V5 Customization in Claude Code?

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

How do I install Cometchat Angular V5 Customization in Codex?

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

Can I use Cometchat Angular V5 Customization 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-customization -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-customization, .gemini/skills/cometchat-angular-v5-customization, .github/skills/cometchat-angular-v5-customization and .opencode/skills/cometchat-angular-v5-customization in your project.

What does Cometchat Angular V5 Customization need to run?

SKILL.md names no scripts, command-line tools or credentials: Cometchat Angular V5 Customization is instructions for the agent only. Compatibility (from SKILL.md): @cometchat/chat-uikit-angular ^5 (5.1.0–5.2.0 verified); Angular 17-21.

Does Cometchat Angular V5 Customization access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Cometchat Angular V5 Customization 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 V5 Customization use?

Cometchat Angular V5 Customization 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 V5 Customization use?

About 1.9k tokens (SKILL.md is roughly 7.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Cometchat Angular V5 Customization?

Skills that share tags, products or a category with Cometchat Angular V5 Customization: Impeccable (bestofjs/bestofjs, 3.1k stars), Figma Design System Builder (warpdotdev/warp, 65k stars), Scalar Design System (scalar/scalar, 16k stars) and Building With Lobe UI (lobehub/lobe-ui, 2.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Cometchat Angular V5 Customization?

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.