# velt-arrows-best-practices

> Claude/Codex skill by [@velt-js](https://omgskills.com/library/velt-js/index.md) · 0 stars · Updated 2026-06-24

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

```sh
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-practices
```

## From 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.

## Links

- HTML page: https://omgskills.com/library/velt-js/velt-plugin-cursor/skills/velt-arrows-best-practices/
- GitHub: https://github.com/velt-js/velt-plugin-cursor
- Author: [@velt-js](https://omgskills.com/library/velt-js/index.md)

## More from this repo

- [install-velt](https://omgskills.com/library/velt-js/velt-plugin-cursor/skills/install-velt/index.md) — Full guided installation of the Velt collaboration SDK into a React or Next.js project.
   - [@velt-js](https://omgskills.com/library/velt-js/index.md) · 0 stars
- [velt-activity-best-practices](https://omgskills.com/library/velt-js/velt-plugin-cursor/skills/velt-activity-best-practices/index.md) — Velt Activity Logs implementation patterns and best practices for React, Next.js, and web applications.
   - [@velt-js](https://omgskills.com/library/velt-js/index.md) · 0 stars
- [velt-approval-engine-best-practices](https://omgskills.com/library/velt-js/velt-plugin-cursor/skills/velt-approval-engine-best-practices/index.md) — Best practices for the Velt Approval Engine — the declarative workflow runtime for multi-step agent + human approval...
   - [@velt-js](https://omgskills.com/library/velt-js/index.md) · 0 stars