Agent skill

Cometchat Angular V5 Migration

by cometchat in cometchat/cometchat-skills

Upgrade an Angular app from CometChat UI Kit v4 → v5 (@cometchat/chat-uikit-angular ^4 → ^5).

MITAuto-check passedMobile

Install Cometchat Angular V5 Migration

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

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

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

At a glance

Upgrade an Angular app from CometChat UI Kit v4 → v5 (@cometchat/chat-uikit-angular ^4 → ^5).

  • Works in 6 steps: Detect the starting point. Confirm… → Update dependencies. npm install… → Scan the repo for v4 usage. Grep for… → …
  • Tasks that involve iOS development
  • SKILL.md covers Companion skills (read first), Use this skill when, Migration workflow (BAKED) and Common pitfalls (BAKED), plus 1 more section
  • Calls npm

What it does

Cometchat Angular V5 Migration is an agent skill from cometchat/cometchat-skills. Upgrade an Angular app from CometChat UI Kit v4 → v5 (@cometchat/chat-uikit-angular ^4 → ^5). Reads the repo's CometChat usage, applies the breaking-change map (deps, composite components removed, bare→Component renames, CometChatThemeService → CSS variables, event inputs → Outputs, DataSource → composition, localization renames), fetches the exhaustive guide, and verifies the build. Triggers: 'upgrade my v4 uikit to v5', 'migrate cometchat angular v4 to v5', 'upgrade @cometchat/chat-uikit-angular to v5'…

Its SKILL.md is about 1.9k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files, including reference files (for example `references/migration-guide.md`). Compatibility notes: Angular 17-21; FROM @cometchat/chat-uikit-angular ^4 (4.3.36) → ^5 (5.1.0–5.2.0 verified); @cometchat/chat-sdk-javascript ^4.1.13 (peer)…

It sits in Mobile, covering iOS development, Design systems and Internationalization. It works with CometChat, Angular and npm. 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 iOS development
  • Tasks that involve Design systems
  • Tasks that involve Internationalization

Example prompts

  • “upgrade my v4 uikit to v5”
  • “migrate cometchat angular v4 to v5”
  • “upgrade @cometchat/chat-uikit-angular to v5”
  • “/cometchat-angular-v5-migration”

Requirements

  • Node.js
  • Compatibility (from SKILL.md): Angular 17-21; FROM @cometchat/chat-uikit-angular ^4 (4.3.36) → ^5 (5.1.0–5.2.0 verified); @cometchat/chat-sdk-javascript ^4.1.13 (peer); @cometchat/cards-angular ^1.0.0 (new peer, undocumented in the official guide); @cometchat/uikit-elements/-resources/-shared removed

Workflow steps

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

  1. Detect the starting point. Confirm package.json has @cometchat/chat-uikit-angular@4 (already @5 → STOP, nothing to migrate). Note whether…
  2. Update dependencies. npm install @cometchat/chat-uikit-angular@5 @cometchat/chat-sdk-javascript@^4.1.13 @cometchat/cards-angular@^1.0.0…
  3. Scan the repo for v4 usage. Grep for every symbol in references/migration-guide.md §2 (composites, no-equivalent standalones…
  4. Apply the breaking-change map (references/migration-guide.md): §2/§2b symbol removals + renames, §3 theming (CometChatThemeService +…
  5. Rebuild every composite from modules. v5 has no composite components at all — CometChatConversationsWithMessages etc. must become a…
  6. Verify. Build/typecheck passes; NO v4 symbols remain (grep references/migration-guide.md §2's full list); every kit component is in its…

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

    Shell commands in SKILL.md call:

    • npm

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

  • Network

    No URLs in SKILL.md. Its commands use npm, which can reach the network depending on how they are called.

    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

    Angular 17-21; FROM @cometchat/chat-uikit-angular ^4 (4.3.36) → ^5 (5.1.0–5.2.0 verified); @cometchat/chat-sdk-javascript ^4.1.13 (peer); @cometchat/cards-angular ^1.0.0 (new peer, undocumented in the official guide); @cometchat/uikit-elements/-resources/-shared removed

    From compatibility in the SKILL.md frontmatter.

Context cost

Cometchat Angular V5 Migration loads about 1.9k tokens when it runs, and up to ~6.9k if it reads all its reference files. Until then it costs about 151 tokens; SKILL.md has 760 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~151
When it runs · the whole SKILL.md, loaded when a task matches
~1.9k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~6.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). 760 words, ~1,908 tokens.

Download SKILL.mdSave it as .claude/skills/cometchat-angular-v5-migration/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
cometchat-angular-v5-migration
description
Upgrade an Angular app from CometChat UI Kit v4 → v5 (`@cometchat/chat-uikit-angular` ^4 → ^5). Reads the repo's CometChat usage, applies the breaking-change map (deps, composite components removed, bare→Component renames, CometChatThemeService → CSS variables, event inputs → Outputs, DataSource → composition, localization renames), fetches the exhaustive guide, and verifies the build. Triggers: 'upgrade my v4 uikit to v5', 'migrate cometchat angular v4 to v5', 'upgrade @cometchat/chat-uikit-angular to v5', 'cometchat angular v4 to v5', 'bump cometchat angular uikit'.
compatibility
Angular 17-21; FROM @cometchat/chat-uikit-angular ^4 (4.3.36) → ^5 (5.1.0–5.2.0 verified); @cometchat/chat-sdk-javascript ^4.1.13 (peer); @cometchat/cards-angular ^1.0.0 (new peer, undocumented in the official guide); @cometchat/uikit-elements/-resources/-shared removed
license
MIT
metadata.author
CometChat
metadata.version
1.0.0
metadata.tags
cometchat angular migration upgrade v4 v5 uikit

Ground truth: migrates an Angular app FROM @cometchat/chat-uikit-angular@4 TO @5. v5 target symbols are catalog-verified vs installed 5.1.0; the v4→v5 breaking-change map is BAKED in references/migration-guide.md (distilled from the official "Upgrading From V4" guide + a real v4.3.36→v5.1.0 export diff — 146 genuine removals, 33 bare→Component renames, kept separate). The exhaustive per-component prop table is FETCHED from cometchat-angular-v5-components/references/catalog.md + the docs .md twins. APPEND/transform the user's code — never wipe it; work on a branch and confirm before bulk edits (RULES.md).

Companion skills (read first)

  • cometchat-angular-v5-core — the v5 init/login/render the migrated app lands on. This skill ASSUMES it.
  • cometchat-angular-v5-components — the v5 component catalog (the target names + real inputs/outputs).
  • cometchat-angular-v5-placement — how to rebuild a v4 composite from v5 modules (§2 of the migration guide points here per composite).

Use this skill when

"upgrade my v4 UI Kit to v5", "migrate CometChat Angular v4→v5", "bump @cometchat/chat-uikit-angular to v5". Precondition: the project currently has @cometchat/chat-uikit-angular@4.

Migration workflow (BAKED)

  1. Detect the starting point. Confirm package.json has @cometchat/chat-uikit-angular@4 (already @5 → STOP, nothing to migrate). Note whether the app uses composite components (…WithMessages/…WithDetails), CometChatThemeService, *Style inputs, DataSource/ChatConfigurator, or custom localization keys — each drives a later step. Work on a branch; transform in place, never delete the user's code.
  2. Update dependencies. npm install @cometchat/chat-uikit-angular@5 @cometchat/chat-sdk-javascript@^4.1.13 @cometchat/cards-angular@^1.0.0 then npm uninstall @cometchat/uikit-elements @cometchat/uikit-resources @cometchat/uikit-shared. @cometchat/cards-angular is a genuine new 5.1.0 peer the official guide never mentions — install it or the build fails on a missing peer, not a CometChat error.
  3. Scan the repo for v4 usage. Grep for every symbol in references/migration-guide.md §2 (composites, no-equivalent standalones, DataSource/decorators, the ~35 *Style objects) and §2b (the 33 bare-name renames) — produce the concrete change list before editing anything. A bare name is not automatically "removed"; check §2b first.
  4. Apply the breaking-change map (references/migration-guide.md): §2/§2b symbol removals + renames, §3 theming (CometChatThemeService + *Style → CSS variables + the real ThemeService, not the official guide's own hand-rolled matchMedia example — see the warning in §3), §4 event-input → Output rename, §5 DataSource/ChatConfigurator → MessageBubbleConfigService or "nothing, it's auto-rendered," §6 drop CUSTOM_ELEMENTS_SCHEMA + convert to standalone, §7 optional ChatStateService adoption, §8 localization method renames. The baked map is a closed list, not a prop reference — FETCH the rest (RULES.md § Fetch discipline; never node_modules/**/*.d.ts), routed from cometchat-angular-v5-core/references/docs-map.md: the official guide {DOCS_BASE}/ui-kit/angular/customization/migration-guide.md for anything the map omits; a component's exact inputs/outputs/slots from its own .md twin (Angular has no migration-property-changes page — there is no single prop-diff table); an SDK method for a capability with no v5 component ({SDK_DOCS_BASE}/sdk/javascript/groups-overview.md et al.) — that is where the host-composed group surfaces in step 5 come from.
  5. Rebuild every composite from modules. v5 has no composite components at all — CometChatConversationsWithMessages etc. must become a hand-stitched surface. Use cometchat-angular-v5-placement/references/core-surface.md (1:1) or combined-app.md (tabbed) as the target shape, not a literal prop-for-prop port — the composite's configuration options (which v4 had many of) don't exist in v5; its behavior is what you're reproducing.
  6. Verify. Build/typecheck passes; NO v4 symbols remain (grep references/migration-guide.md §2's full list); every kit component is in its consumer's imports: []; the app renders after init→login resolves (cometchat-angular-v5-core/references/lifecycle.md). Reuse cometchat-angular-v5-core "Verify it works".
Show full SKILL.md (255 more words)Show less

Common pitfalls (BAKED)

  • Porting the official guide's own theming example. It shows a hand-rolled matchMedia listener for OS-follow — that predates the real v5 mechanism. ThemeService.initFromPreference() already does this; don't reintroduce v4-era manual theme-tracking code (§3).
  • Treating a bare v4 name as removed when it's only renamed. Check §2b (33 bare→Component renames) before concluding a component is gone — most "missing" names are one word away from their v5 form.
  • Missing @cometchat/cards-angular. Genuinely undocumented in the official migration guide; the install fails on a peer-dependency error that looks unrelated to the migration.
  • Forgetting imports: [] after dropping CUSTOM_ELEMENTS_SCHEMA. v4's schema tolerated unregistered elements; v5's standalone components render nothing, silently if omitted from imports: [] — the single most common v5 failure mode, and migrated code is exactly where it's missed (cometchat-angular-v5-core/SKILL.md).
  • Rebuilding a composite as a literal prop-for-prop port. v4 composites had large configuration surfaces (*Style objects, callback inputs) with no v5 equivalent — port the behavior, not the configuration, using cometchat-angular-v5-placement's real recipes as the target.
  • Assuming every DataSourceDecorator needs MessageBubbleConfigService. Some were registering a built-in extension (polls, stickers, translation) — v5 auto-renders most of those once enabled in the dashboard, with nothing to register (cometchat-angular-v5-features/SKILL.md; verify against needs_stitching in features.angular-v5.json, never assume).

Verify it works

Build/typecheck is green; a repo-wide grep finds NO §2 v4 symbols (composites, CometChatThemeService, DataSource/ChatConfigurator, any *Style object, any bare §2b name unqualified); every kit component is in imports: []; the app renders once init→login resolves; migrated theming follows the OS via ThemeService, not a leftover matchMedia listener. Full per-component prop reference: cometchat-angular-v5-components/references/catalog.md + the docs .md twins.

© 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 1 other file (references) in skills/cometchat-angular-v5-migration of cometchat/cometchat-skills.

  • SKILL.md
  • references/migration-guide.md

Open the folder on GitHubat commit 911b108

Compare with similar skills

Cometchat Angular V5 Migration 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 Migration compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Cometchat Angular V5 Migration this skillcometchat/cometchat-skills129—~1.9kAutomated safety check: PassMIT
Igniteui Angular BuildIgniteUI/igniteui-angular599—~898Automated safety check: PassCustom licence
Frontend UI StandardsMaxHan7/frontend-ui-standards-skill106—~2.4kAutomated safety check: PassMIT
Igniteui Angular TestingIgniteUI/igniteui-angular599—~950Automated safety check: PassCustom licence
Building With Lobe UIlobehub/lobe-ui2.2k—~2kAutomated safety check: PassMIT
macOS App Designvaayne/mori303—~789Automated safety check: PassMIT

Similar skills

  • Igniteui Angular Build

    IgniteUI/igniteui-angular

    Quick-reference for building the core Ignite UI for Angular library and related packages.

    599 GitHub stars~898 tokensUpdated today
    Frontend & DesignAuto-check passed
  • Frontend UI Standards

    MaxHan7/frontend-ui-standards-skill

    A skill your agent uses when implementing, refactoring, or reviewing frontend UI across SwiftUI, React, React Native, Flutter, web, or mobile apps.

    106 GitHub stars~2.4k tokensUpdated 3 mo ago
    Frontend & DesignAuto-check passed
  • Igniteui Angular Testing

    IgniteUI/igniteui-angular

    Quick-reference for running Ignite UI for Angular test suites.

    599 GitHub stars~950 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
  • macOS App Design

    vaayne/mori

    A skill your agent uses when designing or building native macOS applications with SwiftUI or AppKit.

    303 GitHub stars~789 tokensUpdated 2 mo ago
    MobileAuto-check passed
  • Liquid Glass

    robinebers/openusage

    Implement, refactor, or review modern macOS SwiftUI UI for the new design system and Liquid Glass.

    4.3k GitHub stars~2.2k tokensUpdated yesterday
    MobileAuto-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 Migration

What does Cometchat Angular V5 Migration do?

Upgrade an Angular app from CometChat UI Kit v4 → v5 (@cometchat/chat-uikit-angular ^4 → ^5). Cometchat Angular V5 Migration is an agent skill from cometchat/cometchat-skills. Upgrade an Angular app from CometChat UI Kit v4 → v5 (@cometchat/chat-uikit-angular ^4 → ^5).

When should I use Cometchat Angular V5 Migration?

Cometchat Angular V5 Migration fits situations like: tasks that involve iOS development; tasks that involve Design systems; tasks that involve Internationalization.

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

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

How do I install Cometchat Angular V5 Migration in Codex?

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

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

What does Cometchat Angular V5 Migration need to run?

Going by SKILL.md and its folder, Cometchat Angular V5 Migration needs the command-line tools its instructions call (npm). Our summary lists: Node.js. Compatibility (from SKILL.md): Angular 17-21; FROM @cometchat/chat-uikit-angular ^4 (4.3.36) → ^5 (5.1.0–5.2.0 verified); @cometchat/chat-sdk-javascript ^4.1.13 (peer); @cometchat/cards-angular ^1.0.0 (new peer, undocumented in the official guide); @cometchat/uikit-elements/-resources/-shared removed.

Does Cometchat Angular V5 Migration access the network?

SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

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

Cometchat Angular V5 Migration 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 Migration 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. Its references folder adds about 5k tokens, read only when the agent opens those files.

What are the alternatives to Cometchat Angular V5 Migration?

Skills that share tags, products or a category with Cometchat Angular V5 Migration: Igniteui Angular Build (IgniteUI/igniteui-angular, 599 stars), Frontend UI Standards (MaxHan7/frontend-ui-standards-skill, 106 stars), Igniteui Angular Testing (IgniteUI/igniteui-angular, 599 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 Migration?

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.