cometchat-astro-patterns

Purpose

This skill teaches Claude how to integrate CometChat into an Astro project using React islands. Astro is a static-first framework -- most of the page is HTML rendered at build time. Interactive React components run as isolated "islands" in the browser. CometChat components are React islands that must use client:only="react" to bypass server rendering entirely.

Read these companion skills first:

• cometchat-core -- initialization, login, CSS, provider pattern, anti-patterns
• cometchat-components -- component catalog and composition patterns
• cometchat-placement -- WHERE to put chat (route, modal, drawer, embedded)

1. Project detection

A project uses Astro when package.json has astro as a dependency. CometChat integration also requires the React integration:

# Check for Astro + React
grep -E '"astro"|"@astrojs/react"' package.json