skills.rest
MAX5271
MAX5271COMMUNITY
Explore all skills by this author →
GitHub

cometchat-astro-patterns

Configures Astro React islands with client-only rendering for CometChat chat components.

Updated May 28, 2026
Search Tags:#astro#css variables#cometchat#react islands#client-only hydration#uikit integration#inter-island communication
One-click install
npx skills add https://github.com/MAX5271/CometChat --skill cometchat-astro-patterns-max5271
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cometchat-astro-patterns
Source: https://github.com/MAX5271/CometChat/tree/main/.claude/skills/cometchat-astro-patterns
Command: npx skills add https://github.com/MAX5271/CometChat --skill cometchat-astro-patterns-max5271

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Integrating CometChat UI kit into an Astro app often fails because Astro server-renders by default, but CometChat React components require browser-only globals like window and document.

Core Features & Use Cases

  • client:only React islands: Ensures every CometChat-rendering component uses client:only="react" to prevent server-render crashes.
  • Provider-in-island setup: Shows how to mount CometChatProvider inside the React island so initialization and login occur in the browser context.
  • Astro-specific CSS handling: Ensures the UI Kit CSS variables import stays inside the React component so styling reaches the island.
  • Island communication patterns: Provides practical approaches (custom DOM events, Nanostores, URL-based state) to coordinate between multiple islands like a navbar and a chat drawer.
  • Use case: You want a static-first Astro site with a messages page and a “Message” drawer that reliably works without window-not-defined build errors.

Quick Start

Ask to integrate CometChat into your Astro project by applying the client:only="react" rule, importing CometChat UI CSS inside the React components, and using a CometChatProvider mounted within each chat React island.

Frequently Asked Questions about cometchat-astro-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
Why does CometChat cause window is not defined errors during my Astro build?▼

Astro server-renders components by default, but CometChat React components require browser-only globals like window and document, causing build-time crashes. You must mark every CometChat-rendering component as client:only="react" to skip server rendering and execute strictly in the browser context.

How do I integrate CometChat into an Astro project using React islands?▼

To integrate CometChat into Astro, apply client:only="react" to your chat components, mount CometChatProvider inside the React island for browser initialization, and import the UI Kit CSS variables directly within the React component so styling reaches the island properly.

How do I share state between multiple React islands in Astro for a chat drawer and navbar?▼

Inter-island state sharing in Astro can be achieved using custom DOM events, Nanostores, or URL-based state parameters. These patterns coordinate actions across distinct React islands, allowing a navbar island to trigger a chat drawer island without shared component hierarchy.

Do I need @astrojs/react to use CometChat UI components in my Astro application?▼

Yes, Astro projects must use @astrojs/react to render React islands for CometChat integration. This integration targets Astro projects using React islands for chat pages, drawers, and modals, ensuring client:only hydration prevents server-render crashes.

Why are my CometChat React components missing UI styling when rendered as Astro islands?▼

CometChat UI styling is missing because the UI Kit CSS variables import must be placed inside the React component itself. Keeping CSS imports inside the React island ensures the styling reaches the client-only rendered component correctly during hydration.

Can I use CometChat with static-first Astro sites without losing server-side performance?▼

Yes, you can maintain a static-first Astro site by isolating CometChat into client:only="react" islands. This approach renders static HTML for standard content while hydrating interactive chat pages, drawers, and modals exclusively in the browser.

Related Skills

Explore More Software Engineering Skills→
oakossoakoss
14

astro

Create content-driven websites with Astro content collections and island architecture.

Official
Intermediate
HerbertJulioHerbertJulio
20

dev-create-island

Create interactive island components with customizable hydration strategies for Astro projects.

Community
Intermediate
mae616mae616
9

astro

Guide Astro project design with HTML-first Islands and SSG-first rendering.

Community
Basic
cometchatcometchat
74

cometchat-astro-patterns

Integrate CometChat UI Kit v6 into Astro projects using React islands.

Official
Advanced