Can I customize the generated chat UI?

Absolutely. The skill generates standard shadcn/ui components in your components folder, allowing you to fully customize the styling and behavior.

How does the skill handle user authentication?

It depends on the 'auth' skill to provide a 'withAuth' guard, ensuring that only authenticated users can read or send messages.

How does it handle typing indicators?

It leverages Liveblocks Presence to broadcast 'isTyping' states to all members of a channel in real-time.

Does this skill require a specific backend?

Yes, it requires a Postgres database managed via Drizzle ORM and a Liveblocks account to handle real-time message broadcasting and presence.

Does it support file attachments out of the box?

Yes, it is designed to work with the 'storage' skill to facilitate file uploads and display them as attachments within the chat interface.

Real-Time Group Chat

Name: Real-Time Group Chat
Author: mattwoodco

bymattwoodco

•

Collaboration Tools

Deploys a full-featured real-time messaging system with threads, reactions, and mentions using Drizzle and Liveblocks.

This skill automates the implementation of professional-grade group chat infrastructure within Next.js applications. It integrates Liveblocks for low-latency message delivery and presence, Drizzle ORM for robust data persistence, and shadcn/ui for a polished, modern interface. By handling the complexities of threaded replies, emoji reactions, and file attachments, it allows developers to quickly add collaborative communication features to any project without building the underlying logic from scratch.

Key Features

013 GitHub stars

02Threaded conversations with a dedicated side-panel reply view

03Persistent data storage for channels and messages using Drizzle ORM

04Integrated file attachment support via the storage skill

05Interactive emoji reactions and @mention resolution logic

06Real-time message delivery and presence indicators via Liveblocks

Use Cases

01Implementing internal real-time collaboration tools for enterprise apps

02Adding a team communication hub to a project management tool

03Building community-driven discussion channels for a SaaS platform

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mattwoodco/skills group-chat

For use in Claude.ai and ChatGPT

Download Skill