skills.rest
velt-js
velt-jsOFFICIAL
Explore all skills by this author →
Website𝕏@veltjsGitHub

velt-cursors-best-practices

Implement real-time collaborative cursor tracking with the Velt SDK in React and web applications.

1|Updated Jan 23, 2026
Search Tags:#collaboration#React#wireframe#cursor tracking#velt#real-time cursors#setdocuments
One-click install
npx skills add https://github.com/velt-js/agent-skills --skill velt-cursors-best-practices-velt-js
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: velt-cursors-best-practices
Source: https://github.com/velt-js/agent-skills/tree/main/skills/velt-cursors-best-practices
Command: npx skills add https://github.com/velt-js/agent-skills --skill velt-cursors-best-practices-velt-js

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @veltdev/react, and includes references (resource) components.

What problem does it solve? Adding live cursor tracking to collaborative apps involves subtle setup requirements — correct VeltCursor placement, per-document scoping, and authProvider authentication — and getting any of them wrong means cursors never render or leak across documents. This Skill provides 13 evidence-backed rules covering setup, configuration, data access, events, wireframe customization, and debugging for Velt Cursors. ## Core Features & Use Cases - Core Setup Rules: Enforce authProvider over deprecated identify(), place VeltCursor inside the collaborative content area, and scope cursors per document with setDocuments to prevent cross-document leakage. - Configuration & Data Access: Restrict cursors to specific DOM elements via allowedElementIds, enable avatar mode, tune inactivity timeouts, and read cursor state with useCursorUsers / useCursorUtils hooks or the getCursorElement Observable API. - Wireframe Customization: Customize the cursor pointer with VeltCursorPointerWireframe variants (Arrow, Avatar, Default, Audio/Video Huddle) and bind flat-config componentConfig template variables like cursorUser, showAvatar, and showVideo. - Use Case: When building a collaborative whiteboard and remote cursors appear in the toolbar or from other documents, the debugging checklist pinpoints the missing setDocuments call or the JSON.stringify mistake on allowedElementIds. ## Quick Start Ask the agent to add Velt real-time cursor tracking to your React canvas component with document scoping and avatar mode enabled.

Frequently Asked Questions about velt-cursors-best-practices

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

FAQPage Schema
How do I add real-time cursors to a React app with Velt?▼

Render the VeltCursor component from @veltdev/react inside your collaborative content area, wrapped by VeltProvider with a valid apiKey and authProvider. Then call useSetDocuments in a child component to scope cursors to the current document.

How do I restrict Velt cursors to specific elements on the page?▼

Use the allowedElementIds prop on VeltCursor, passing a JSON-stringified array like JSON.stringify(["canvas-area"]). Programmatically, call cursorElement.allowedElementIds(["canvas-area"]) with a plain array via useCursorUtils or getCursorElement.

Why are Velt cursors not showing in my application?▼

Check that VeltProvider has valid apiKey and authProvider props, useSetDocuments is called in a child component after authentication, VeltCursor is inside the provider tree, the 'use client' directive is present in Next.js, and your domain is safelisted in the Velt Console.

Why do I see cursors from other documents in Velt?▼

Cross-document cursor leakage happens when setDocuments is not called or uses a stale document ID. Ensure useSetDocuments waits for useCurrentUser to return a valid user and updates the document ID on route changes.

Can I customize the Velt cursor pointer appearance?▼

Yes, use VeltCursorPointerWireframe with sub-components like Arrow, Avatar, Default.Name, AudioHuddle, and VideoHuddle to control structure. Bind per-user data via flat-config componentConfig template variables such as componentConfig.cursorUser.name, and set shadowDom={false} to apply custom CSS.

Should I use identify() or authProvider for Velt authentication?▼

Always use the authProvider prop on VeltProvider or the useVeltAuthProvider hook. The useIdentify hook and client.identify() are deprecated and lack automatic token refresh, error handling, and retry logic.

Related Skills

Explore More Software Engineering Skills→
mahg-esmahg-es
3

auth-middleware

Implement JWT-based authenticate and authorize middleware for Express routes.

Official
Advanced
chriscarteruxchriscarterux

real-time-collaboration-patterns

Implement real-time collaboration patterns using CRDTs, operational transforms, and WebSocket messaging.

Community
Intermediate
qenex-aiqenex-ai

Real-time and WebSocket

Implement WebSocket presence tracking and real-time messaging across connected clients.

Official
Advanced
Muath2000Muath2000

realtime-collab-engineer

Design real-time collaboration systems with CRDT, WebSocket, and Yjs.

Community
Advanced