convex-realtime

Implement real-time subscriptions, caching, and optimistic updates for Convex applications.

1|1|Updated Feb 7, 2026
One-click install
npx skills add https://github.com/mauricioacp/tanstack-convex-better-auth-template --skill convex-realtime-mauricioacp
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: convex-realtime
Source: https://github.com/mauricioacp/tanstack-convex-better-auth-template/tree/main/.agents/skills/convex-realtime
Command: npx skills add https://github.com/mauricioacp/tanstack-convex-better-auth-template --skill convex-realtime-mauricioacp

SYSTEM DOCUMENTATION & REQUIREMENTS

## What problem does it solve?

Convex apps often struggle to keep the UI in sync with live data and latency, leading to stale views and complex state management. This Skill provides proven patterns for real-time subscriptions, smart caching, and optimistic updates to keep interfaces responsive and consistent.

## Core Features & Use Cases

  • Real-time subscriptions that automatically update components as data changes.
  • Smart caching ensures shared, up-to-date results with minimal re-renders.
  • Optimistic updates to improve perceived performance during mutations, with safe rollback on errors.
  • Cursor-based pagination for efficient navigation of large datasets.

### Quick Start

Run the Convex real-time tutorial to see live updates in action.

Frequently Asked Questions about convex-realtime

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

FAQPage Schema
How do I implement real-time subscriptions in Convex with React?

Real-time subscriptions in Convex use the React client to automatically update components as data changes. This ensures live data streams keep UI views consistent without manual polling or complex state management.

What is the best way to handle optimistic updates in a Convex app?

Optimistic updates in a Convex app improve perceived performance during mutations by applying changes locally first. This Skill provides patterns for safe rollback on errors, ensuring interfaces remain responsive and consistent.

How does cursor-based pagination work with Convex useQuery?

Cursor-based pagination with Convex useQuery enables efficient navigation of large datasets. It fetches data incrementally using cursors, ensuring minimal re-renders and consistent views across UI components that rely on live data streams.

Do I need to use the Convex React client to manage reactive data caching?

Yes, using the Convex React client is required. It provides hooks like useQuery and useMutation that handle smart caching, ensuring shared, up-to-date results with minimal re-renders across your application components.

Why does my Convex real-time UI show stale views after mutations?

Stale views in Convex real-time UIs happen when reactive patterns lack proper subscription management or optimistic updates. Applying consistent caching and safe rollback patterns ensures interfaces sync immediately with live data streams.

Can I apply reactive data patterns across multiple pages in a Convex application?

Yes, reactive data patterns can be applied across UI components and pages in a Convex application. This ensures consistent views and minimal re-renders when relying on live data streams and cursor-based pagination.