realtime

Integrates Liveblocks real-time collaboration with presence cursors and CRDT state sync for Next.js App Router apps.

3|Updated Feb 14, 2026
One-click install
npx skills add https://github.com/mattwoodco/skills --skill realtime-mattwoodco
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: realtime
Source: https://github.com/mattwoodco/skills/tree/main/skills/realtime
Command: npx skills add https://github.com/mattwoodco/skills --skill realtime-mattwoodco

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires auth, env-config, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This skill enables real-time collaboration features within applications, allowing multiple users to interact with shared data and see each other's presence and actions simultaneously.

Core Features & Use Cases

  • Live Cursors: Display other users' cursor positions and names in real-time.
  • Presence Indicators: Show who is currently online and active in a shared room.
  • Conflict-Free State Sync: Synchronize application state across users using CRDTs for seamless collaboration.
  • Room-Based Access: Manage user access and permissions on a per-room basis.
  • Use Case: Integrating collaborative editing into a document or a design tool, enabling multiple users to work on the same canvas or document simultaneously with live updates.

Quick Start

Integrate Liveblocks for real-time collaboration by following the setup steps provided in the skill's documentation.

Frequently Asked Questions about realtime

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

FAQPage Schema
How do I implement real-time collaboration and live cursors in a Next.js application?

Synchronize application state across users for real-time collaboration using Conflict-Free Replicated Data Types (CRDTs). This mechanism ensures seamless state synchronization and resolves data conflicts automatically when multiple users interact simultaneously.

Do I need authentication and environment configuration setup before adding real-time presence?

Yes, you need authentication and environment configuration setup before adding real-time presence. This skill requires prior setup of authentication and environment configuration skills to manage room-based access control and user permissions securely.

How do I manage user access and permissions for a collaborative editing room?

Manage user access and permissions for a collaborative editing room by utilizing room-based access control. This feature allows you to restrict and manage user permissions on a per-room basis for shared documents or canvases.

What is the best way to add collaborative editing to a design tool using state sync?

The best way to add collaborative editing to a design tool using state sync is integrating Liveblocks with CRDTs. This allows multiple users to work on the same canvas simultaneously with live updates and conflict-free state synchronization.