How do I install the Velt Cursors Best Practices skill?

Run npx skillmds@latest add velt-js/velt-cursors-best-practices in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Velt Cursors Best Practices safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Velt Cursors Best Practices?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Velt Cursors Best Practices free to use?

Yes. Installing skills from SkillMD is free. This skill is licensed under MIT.

Who published Velt Cursors Best Practices?

velt-js (@velt-js) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Velt Cursors Best Practices by velt-js

Name: Velt Cursors Best Practices
Author: velt-js

Velt Cursors Best Practices

Velt Cursors implementation patterns and best practices for React, Next.js, and web applications. Use when adding real-time cursor tracking, collaborative cursor sharing, avatar-mode cursors, cursor element whitelisting, cursor inactivity timeouts, cursor position subscriptions, customizing the cursor pointer wireframe and its flat-config componentConfig template variables (cursorUser, showAvatar / showAudio / showVideo, huddle-on-cursor flags, helper functions), or customizing the Live Selection remote-user indicator wireframe (VeltSelectionElementPortalWireframe / velt-selection-element-portal, live-selection, selection-element-portal, userIndicatorPosition / userIndicatorType, selections). Triggers on any task involving live cursors, collaborative cursor display, live selection indicators, VeltCursor, VeltCursorPointerWireframe, VeltSelection*, cursor tracking on canvas or whiteboard, or showing where other users are pointing or selecting — even if the user doesn't explicitly say 'cursors' or 'live-selecti

velt-js Updated Sep 17, 2026

File contents

Velt Cursors Best Practices

Comprehensive implementation guide for Velt's real-time cursor tracking feature (and the sibling Live Selection indicator). Contains 13 rules across 7 categories covering setup, configuration, data access, events, UI customization, wireframe template variables, and debugging.

When to Apply

Reference these guidelines when:

Adding real-time cursor tracking to a canvas, whiteboard, or collaborative page
Configuring cursor display (avatar mode, name labels)
Restricting cursor visibility to specific page elements
Subscribing to cursor position data or user changes
Customizing cursor pointer appearance with wireframes
Debugging cursors not showing or tracking incorrectly

Rule Categories by Priority

Priority	Category	Impact	Prefix
1	Core Setup	CRITICAL	`core-`
2	Data Access	HIGH	`data-`
3	Configuration	HIGH-MEDIUM	`config-`
4	Events	MEDIUM	`events-`
5	UI Customization	MEDIUM	`ui-`
6	Wireframe Variables	MEDIUM	`wireframe-variables-`
7	Debugging	LOW-MEDIUM	`debug-`

Quick Reference

Core Setup (CRITICAL)

core-auth-provider — Use authProvider on VeltProvider, never identify()
core-setup — Add VeltCursor component inside content area (not toolbar)
core-document-setup — Set document context to scope cursors per document

Data Access (HIGH)

data-cursor-hooks — useCursorUsers, useCursorUtils React hooks
data-cursor-api — getCursorElement, getOnlineUsersOnCurrentDocument Observable

Configuration (HIGH-MEDIUM)

config-allowed-elements — Restrict cursors to specific DOM elements
config-avatar-mode — Show user avatars instead of name labels
config-inactivity-time — Configure inactive timeout threshold

Events (MEDIUM)

events-cursor-change — onCursorUserChange callback for position updates

UI Customization (MEDIUM)

ui-wireframes — Cursor pointer wireframe variants (Arrow, Avatar, Default, Huddle)

Wireframe Variables (MEDIUM)

wireframe-variables-cursors — Flat-config componentConfig.<path> variables for <velt-cursor> and <velt-cursor-pointer-wireframe> (cursorUser, showAvatar / showAudio / showVideo, huddle flags, helper functions)
wireframe-variables-live-selection — Flat-config componentConfig.<path> variables for <velt-selection-element-portal-wireframe> (selections, userIndicatorPosition, userIndicatorType, position) plus UserIndicatorPosition / UserIndicatorType / CursorPosition / Selection type reference

Debugging (LOW-MEDIUM)

debug-common-issues — Troubleshooting cursor tracking issues

How to Use

Read individual rule files for detailed explanations and code examples:

rules/shared/core/core-setup.md
rules/shared/config/config-allowed-elements.md
rules/shared/data/data-cursor-hooks.md

Compiled Documents

AGENTS.md — Compressed index of all rules with file paths (start here)
AGENTS.full.md — Full verbose guide with all rules expanded inline

---name: velt-cursors-best-practicesdescription: Velt Cursors implementation patterns and best practices for React, Next.js, and web applications. Use when adding real-time cursor tracking, collaborative cursor sharing, avatar-mode cursors, cursor element whitelisting, cursor inactivity timeouts, cursor position subscriptions, customizing the cursor pointer wireframe and its flat-config componentConfig template variables (cursorUser, showAvatar / showAudio / showVideo, huddle-on-cursor flags, helper functions), or customizing the Live Selection remote-user indicator wireframe (VeltSelectionElementPortalWireframe / velt-selection-element-portal, live-selection, selection-element-portal, userIndicatorPosition / userIndicatorType, selections). Triggers on any task involving live cursors, collaborative cursor display, live selection indicators, VeltCursor, VeltCursorPointerWireframe, VeltSelection*, cursor tracking on canvas or whiteboard, or showing where other users are pointing or selecting — even if the user doesn't explicitly say 'cursors' or 'live-selectilicense: MIT---# Velt Cursors Best PracticesComprehensive implementation guide for Velt's real-time cursor tracking feature (and the sibling Live Selection indicator). Contains 13 rules across 7 categories covering setup, configuration, data access, events, UI customization, wireframe template variables, and debugging.## When to ApplyReference these guidelines when:- Adding real-time cursor tracking to a canvas, whiteboard, or collaborative page- Configuring cursor display (avatar mode, name labels)- Restricting cursor visibility to specific page elements- Subscribing to cursor position data or user changes- Customizing cursor pointer appearance with wireframes- Debugging cursors not showing or tracking incorrectly## Rule Categories by Priority| Priority | Category | Impact | Prefix ||----------|----------|--------|--------|| 1 | Core Setup | CRITICAL | `core-` || 2 | Data Access | HIGH | `data-` || 3 | Configuration | HIGH-MEDIUM | `config-` || 4 | Events | MEDIUM | `events-` || 5 | UI Customization | MEDIUM | `ui-` || 6 | Wireframe Variables | MEDIUM | `wireframe-variables-` || 7 | Debugging | LOW-MEDIUM | `debug-` |## Quick Reference### Core Setup (CRITICAL)- `core-auth-provider` — Use authProvider on VeltProvider, never identify()- `core-setup` — Add VeltCursor component inside content area (not toolbar)- `core-document-setup` — Set document context to scope cursors per document### Data Access (HIGH)- `data-cursor-hooks` — useCursorUsers, useCursorUtils React hooks- `data-cursor-api` — getCursorElement, getOnlineUsersOnCurrentDocument Observable### Configuration (HIGH-MEDIUM)- `config-allowed-elements` — Restrict cursors to specific DOM elements- `config-avatar-mode` — Show user avatars instead of name labels- `config-inactivity-time` — Configure inactive timeout threshold### Events (MEDIUM)- `events-cursor-change` — onCursorUserChange callback for position updates### UI Customization (MEDIUM)- `ui-wireframes` — Cursor pointer wireframe variants (Arrow, Avatar, Default, Huddle)### Wireframe Variables (MEDIUM)- `wireframe-variables-cursors` — Flat-config `componentConfig.<path>` variables for `<velt-cursor>` and `<velt-cursor-pointer-wireframe>` (cursorUser, showAvatar / showAudio / showVideo, huddle flags, helper functions)- `wireframe-variables-live-selection` — Flat-config `componentConfig.<path>` variables for `<velt-selection-element-portal-wireframe>` (selections, userIndicatorPosition, userIndicatorType, position) plus `UserIndicatorPosition` / `UserIndicatorType` / `CursorPosition` / `Selection` type reference### Debugging (LOW-MEDIUM)- `debug-common-issues` — Troubleshooting cursor tracking issues## How to UseRead individual rule files for detailed explanations and code examples:```rules/shared/core/core-setup.mdrules/shared/config/config-allowed-elements.mdrules/shared/data/data-cursor-hooks.md```## Compiled Documents- `AGENTS.md` — Compressed index of all rules with file paths (start here)- `AGENTS.full.md` — Full verbose guide with all rules expanded inline

Frequently asked questions

Velt Cursors Best Practices

File contents

Velt Cursors Best Practices

When to Apply

Rule Categories by Priority

Quick Reference

Core Setup (CRITICAL)

Data Access (HIGH)

Configuration (HIGH-MEDIUM)

Events (MEDIUM)

UI Customization (MEDIUM)

Wireframe Variables (MEDIUM)

Debugging (LOW-MEDIUM)

How to Use

Compiled Documents

Related skills

Frequently asked questions

How do I install the Velt Cursors Best Practices skill?

What does the Velt Cursors Best Practices skill do?

Is Velt Cursors Best Practices safe to use?

Which AI agents work with Velt Cursors Best Practices?

Is Velt Cursors Best Practices free to use?

Who published Velt Cursors Best Practices?