skills.rest
gursheyss
gursheyssCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

convex-realtime

Provide client-side patterns for reactive apps with real-time subscriptions and optimistic updates.

Updated Feb 8, 2026
Search Tags:#caching#subscriptions#realtime#pagination#convex#optimistic-updates
One-click install
npx skills add https://github.com/gursheyss/styx --skill convex-realtime-gursheyss
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: convex-realtime
Source: https://github.com/gursheyss/styx/tree/main/.agents/skills/convex-realtime
Command: npx skills add https://github.com/gursheyss/styx --skill convex-realtime-gursheyss

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Patterns for building reactive applications including subscription management, optimistic updates, cache behavior, and pagination with cursor-based loading.

Core Features & Use Cases

  • Automatic Subscriptions: useQuery creates a subscription that updates automatically
  • Smart Caching and Consistency: Query results are cached and shared across components
  • Cursor-Based Pagination and Infinite Scroll: Efficiently load data in pages and on-demand
  • Optimistic Updates: Show changes immediately with rollback on failure
  • Multiple Subscriptions and Mutations: Compose data from different sources and mutate with live feedback

Quick Start

Set up a React component that subscribes to a data source and renders in real time with automatic updates.

Frequently Asked Questions about convex-realtime

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

FAQPage Schema
How do I manage real-time subscriptions across multiple React components reading shared data?▼

Real-time subscriptions across multiple components are managed by using a query hook that automatically creates a subscription. Results are cached and shared across components to maintain consistent views with minimal re-renders.

What is the best way to implement optimistic updates with automatic rollback on mutation failure?▼

Optimistic updates with rollback are implemented by immediately showing UI changes upon mutation and reverting the state if the operation fails. This pattern provides live feedback while ensuring data consistency during errors.

How does cursor-based pagination work for infinite scroll in reactive applications?▼

Cursor-based pagination for infinite scroll works by efficiently loading data in sequential pages on demand. This pattern fetches subsequent data chunks using cursors rather than offsets, ensuring stable real-time data rendering.

Can I compose data from different real-time subscriptions and mutate them with live feedback?▼

Yes, you can compose data from different real-time subscriptions and mutate them with live feedback. The pattern library supports multiple subscriptions and mutations, allowing components to aggregate data from various sources seamlessly.

Does this pattern library require manual cache invalidation when mutating shared data?▼

No, manual cache invalidation is not required when mutating shared data. The smart caching mechanism automatically synchronizes query results across components, ensuring all views remain consistent without explicit cache clearing.

Related Skills

Explore More Software Engineering Skills→
windyskywindysky

moai-platform-convex

Build Convex-based real-time backends with TypeScript, reactive queries, and Clerk/Auth0.

Community
Advanced
CaiZongyuanCaiZongyuan
2

tanstack-db

Implement reactive data layers with TanStack DB collections and live queries.

Community
Advanced
Mark393295827Mark393295827
1

frontend-patterns

Provide reusable React and Next.js frontend patterns with TypeScript examples.

Community
Advanced
tdcaretdcare
1

salvo-realtime

Implement WebSocket and Server-Sent Events in Salvo-based Rust services.

Community
Intermediate