convex-realtime
npx machina-cli add skill Microck/ordinary-claude-skills/convex-realtime --openclawConvex Realtime - Live Data Subscriptions
When to use this skill
- Building live dashboards that update instantly
- Implementing collaborative editing features
- Creating real-time chat applications
- Showing instant notifications to users
- Building activity feeds that update live
- Implementing user presence indicators
- Creating reactive search with live results
- Building multiplayer or collaborative features
- Showing real-time analytics and metrics
- Implementing live document collaboration
- Creating real-time forms with validation
- Building features requiring instant synchronization
When to use this skill
- Building realtime features, live updates, collaborative apps.
- When working on related tasks or features
- During development that requires this expertise
Use when: Building realtime features, live updates, collaborative apps.
Auto-Updating Queries
```typescript const messages = useQuery(api.messages.list, { channelId }); // Automatically updates when data changes! ```
Resources
Source
git clone https://github.com/Microck/ordinary-claude-skills/blob/main/skills_all/convex-realtime/SKILL.mdView on GitHub Overview
Convex-realtime enables real-time features by using Convex reactive queries that auto-update when data changes. It eliminates manual polling and powers live collaboration, instant updates, and reactive UIs across clients. Use it for dashboards, collaborative editing, chats, presence, and other instant-synchronization features.
How This Skill Works
Developers create reactive queries (via useQuery) that subscribe to data sources. When underlying data changes, Convex automatically updates the query results and the UI, keeping all clients synchronized without polling. Example pattern: const messages = useQuery(api.messages.list, { channelId });
When to Use It
- Building live dashboards that update instantly
- Implementing collaborative editing features
- Creating real-time chat applications
- Showing instant notifications to users
- Building live activity feeds with automatic updates
Quick Start
- Step 1: Define a reactive query using useQuery(api.yourCollection.list, { ... })
- Step 2: Bind the query results to your UI so it re-renders on changes
- Step 3: Use mutations to push updates and verify automatic propagation across clients
Best Practices
- Scope reactive queries narrowly to reduce update scope and re-renders
- Filter by identifiers (e.g., channelId) to localize updates
- Combine reactive data with optimistic UI for responsiveness
- Handle errors and latency gracefully for real-time UX
- Monitor performance and minimize unnecessary re-renders
Example Use Cases
- Live dashboards that reflect metrics in real time
- Collaborative editors with presence indicators
- Chat applications streaming messages as they arrive
- Real-time notifications and alerts
- Activity feeds updating as events occur
