How does this skill handle data conflicts?

It utilizes Liveblocks' CRDT (Conflict-free Replicated Data Types) storage, which automatically resolves state conflicts to ensure all users see the same data.

Which frameworks are supported by this skill?

This skill is specifically designed for Next.js applications using the App Router and requires the 'auth' and 'env-config' skills as prerequisites.

Can I customize the appearance of cursors and avatars?

Yes, the skill generates standard React components in your project that you can fully customize to match your application's design system.

What is the Real-time Claude Code skill?

It is a specialized capability for the Claude Code CLI that automates the installation and configuration of Liveblocks to enable multiplayer features in web applications.

Does this skill require a Liveblocks account?

Yes, you will need a Liveblocks account to obtain the necessary Secret and Public API keys for your environment variables.

Real-time Collaboration

Name: Real-time Collaboration
Author: mattwoodco

bymattwoodco

•

Collaboration Tools

Enables seamless multiplayer features including live cursors, presence indicators, and conflict-free state synchronization using Liveblocks.

This skill automates the integration of Liveblocks into Next.js applications, providing a robust foundation for real-time collaborative experiences. It handles the complex setup of room-based authentication, type-safe state configuration, and high-performance UI components like live cursor overlays and user presence bars. By leveraging CRDT-based storage, it ensures data remains consistent across all participants, making it ideal for building shared whiteboards, collaborative editors, or interactive dashboards.

Key Features

01Conflict-free state synchronization via CRDT storage

02Real-time presence bar showing active users in a room

03Type-safe configuration for presence and user metadata

04High-performance live cursor tracking with user avatars

05Secure room-based authentication using Next.js API routes

063 GitHub stars

Use Cases

01Adding 'who's online' presence indicators to project management apps

02Creating interactive multiplayer whiteboards and design tools

03Building collaborative document or code editors

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mattwoodco/skills realtime

For use in Claude.ai and ChatGPT

Download Skill