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

velt-presence-best-practices

Implement Velt user presence avatars, status indicators, and cursor tracking in React applications.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Developers integrating the Velt collaboration SDK often misconfigure presence features, causing avatars to show users across all documents, stale online statuses, or broken cursor tracking. This Skill provides 15 evidence-backed rules covering correct setup, configuration, and debugging of Velt Presence. ## Core Features & Use Cases - Presence Setup & Scoping: Enforces authProvider-based authentication (never deprecated identify()) and setDocuments scoping so presence only shows users in the current document. - Configuration Patterns: Covers inactivity/offline timeouts, maxUsers avatar overflow, self-visibility toggling, location-based filtering, and flock mode (follow me) shared navigation with onNavigate SPA routing. - Data Access & Customization: Documents React hooks (usePresenceData, usePresenceEventCallback), vanilla JS Observable APIs, VeltPresenceWireframe UI customization, and componentConfig template-variable binding. - Use Case: When adding a "who's online" avatar row to a Next.js document editor, the agent applies the core-setup, core-document-setup, and config-inactivity-time rules to produce verified code with a checklist. ## Quick Start Ask the agent to add Velt presence avatars with online/away/offline status to your React toolbar, scoped to the current document.

Frequently Asked Questions about velt-presence-best-practices

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

FAQPage Schema
How do I add user presence avatars to a React app with Velt?▼

Add the VeltPresence component from @veltdev/react inside your toolbar, wrapped in VeltProvider with an authProvider. Call useSetDocuments in a child component to scope presence to the current document so only users viewing that document appear.

How to configure away and offline timeouts in Velt Presence?▼

Set the inactivityTime and offlineInactivityTime props on VeltPresence, or call setInactivityTime and setOfflineInactivityTime on the presence element. Defaults are 5 minutes for away and 10 minutes for offline; tab focus loss triggers away immediately.

Why is Velt presence showing users from all documents?▼

This happens when setDocuments is never called to scope presence. Use the useSetDocuments hook in a child of VeltProvider, after the user is authenticated, and update the document ID on route changes.

Can I use VeltCursor with TipTap or other text editors?▼

No, VeltCursor is designed for canvas and spatial applications like ReactFlow or whiteboards. Text editors such as TipTap, SlateJS, and CodeMirror should use Velt CRDT bindings for caret tracking instead.

How do I customize Velt presence avatar UI?▼

Use VeltPresenceWireframe and VeltPresenceTooltipWireframe components to define custom avatar list and tooltip layouts. Bind data via componentConfig template variables with velt-data, velt-if, and velt-class directives, and set shadowDom={false} only when custom CSS is needed.

What is flock mode in Velt Presence?▼

Flock mode is a follow-me feature where one user leads a shared navigation session and followers' screens mirror the leader's clicks, scrolls, and page navigations. Enable it with flockMode={true} and use onNavigate with defaultFlockNavigation={false} for SPA routing.

Related Skills

Explore More Software Engineering Skills→
TechCorp25TechCorp25

zello-auth

Integrates Zello SDK authentication with the EnforcementMAPS AuthContext lifecycle in React Native.

Community
Intermediate
rnavarychrnavarych
14

role-fullstack:real-time-features

Implement real-time features using WebSockets, SSE, and managed services.

Community
Advanced
mgd34msumgd34msu
4

liveblocks

Integrate real-time collaborative features into React applications using the Liveblocks SDK.

Community
Intermediate
channel-iochannel-io

evaluate-rag

Runs Playwright-based tests to score RAG responses and generate an evaluation report.

Official
Intermediate