velt-arrows-best-practices
Best practices for Velt Arrows — the directional arrow annotation feature that lets users draw arrows pinned to DOM elements for visual feedback, design review, or collaborative pointing. Use whenever the user is adding Velt Arrows to their app, placing the VeltArrows or VeltArrowTool components, restricting arrows to specific DOM regions via allowedElementIds, enabling dark mode, customizing the arrow tool button (CSS ::part hooks or full custom-button slot replacement), reading the ArrowAnnotation data model (annotationId, from, targetElement, position, props.arrowLength / props.arrowAngle), or working with the ArrowElement API (client.getArrowElement). Triggers on any task involving Velt Arrows, drawn arrow pins, arrow annotations, directional pointing UI, design-review arrows, the VeltArrows / VeltArrowTool / velt-arrows / velt-arrow-tool web components, or ArrowAnnotation — even when the user does not explicitly say 'Velt' or 'arrows'.
Install
With your agent
Install OMGSkills skill "velt-js/velt-plugin-cursor:skills/velt-arrows-best-practices" into this agent's normal skills directory: call the OMGSkills MCP get_install_plan tool for your agent and run the script it returns (it installs only the pinned commit and verifies SKILL.md), and stop if MCP or the pin is unavailable. Do not overwrite or change existing skills without asking me.
Manual command
git clone https://github.com/velt-js/velt-plugin-cursor /tmp/velt-plugin-cursor && ln -s /tmp/velt-plugin-cursor/skills/velt-arrows-best-practices ~/.claude/skills/velt-arrows-best-practicesFrom README
Velt Arrows Best Practices Implementation guide for the Velt Arrows feature — a directional-arrow annotation primitive that lets users draw arrows pinned to DOM elements (or specific regions of them) for visual feedback, design review, and collaborative pointing. When to Apply Reference these guidelines when: Setting up Velt Arrows in a React, Next.js, or HTML app Placing the (or ) root component and the (or ) trigger Restricting where arrows can be drawn via allowedElementIds (prop OR arrowElement.allowedElementIds() method) Enabling darkMode Replacing the default arrow-tool button with a custom button (child-slot pattern) Styling the arrow tool via CSS ::part(...) hooks Typing against ArrowAnnotation and AnnotationProperty (including arrowLength / arrowAngle) from the data model Calling client.getArrowElement() to get the ArrowElement handle For general SDK (VeltProvider, auth, document identity) see velt- -best-practices.
More from this repo
install-velt
Full guided installation of the Velt collaboration SDK into a React or Next.js project.
velt-activity-best-practices
Velt Activity Logs implementation patterns and best practices for React, Next.js, and web applications.
velt-approval-engine-best-practices
Best practices for the Velt Approval Engine — the declarative workflow runtime for multi-step agent + human approval...