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

velt-comments-best-practices

Implements Velt collaborative comments in React and Next.js applications with evidence-backed patterns.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Integrating Velt's collaborative commenting SDK involves many decisions—choosing comment modes, wiring authentication, configuring sidebars, and handling agent-generated annotations—and mistakes in setup cause comments to silently fail. This Skill provides 87 prioritized, evidence-backed rules so AI agents generate correct Velt Comments integrations on the first attempt. ## Core Features & Use Cases - Comment Mode Patterns: Covers Freestyle, Popover, Stream, Text, Page, and Inline modes plus integrations with TipTap, SlateJS, Lexical, Apryse WebViewer, video players, Lottie animations, and chart libraries (Highcharts, ChartJS, Nivo). - Agent Comment Annotations: Documents the exact REST API payloads for AI agents creating suggestion-type annotations (agentSource, agentId, executionId, reason) and the suggestionAccepted/suggestionRejected client events for accept/reject workflows. - UI Customization & Wireframes: Details sidebar V2 primitives, Comment Dialog wireframe slot binding via template variables (velt-data, velt-if, velt-class), and standalone component patterns. - Use Case: A developer building a code review tool asks the agent to have a linting bot post findings as Velt comments; the Skill supplies the correct POST /v2/commentannotations/add payload with the agent block and the React event handlers for reviewer accept/reject. ## Quick Start Ask the agent to add Velt popover-mode comments to your React table component using the velt-comments-best-practices rules.

Frequently Asked Questions about velt-comments-best-practices

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

FAQPage Schema
How do I add Velt comments to a React application?▼

Wrap your app in VeltProvider with your API key and an authProvider containing the user object and a generateToken callback. Then call client.setDocuments to establish document context and render the VeltComments component.

How do I create AI agent comment annotations with the Velt REST API?▼

Send POST /v2/commentannotations/add with type 'suggestion' and an agent block on commentData[0] containing agentSource 'external', agentName, agentId, executionId, and a reason object. Authenticate with x-velt-api-key and x-velt-auth-token headers.

Which Velt comment mode should I use for my use case?▼

Use Freestyle for pin-anywhere comments, Popover for table cells, Stream for Google Docs-style sidebar threads, Text for highlight comments, Page for page-level feedback, and Inline for traditional thread layouts. Dedicated integrations exist for TipTap, SlateJS, Lexical, and Apryse WebViewer.

Does Velt comments work with Next.js App Router?▼

Yes, Velt comments work with Next.js App Router by marking the provider component with the 'use client' directive. The VeltProvider and VeltComments components must render on the client side since they depend on browser APIs.

Why are my Velt comments not showing or saving?▼

The most common causes are missing user authentication via authProvider and missing document context via setDocuments or useSetDocument. The SDK will not function until both an authenticated user and a document ID are established.

How do I handle accept and reject events for agent suggestions in React?▼

Use the useCommentEventCallback hook with the 'suggestionAccepted' and 'suggestionRejected' event names, not the generic commentSaved event. These dedicated events fire when reviewers act on agent-generated suggestion annotations.

Related Skills

Explore More Software Engineering Skills→
CerisonAutomationCerisonAutomation

vellum-github-app-setup

Set up a GitHub App under an organization with manifest flow and vault storage.

Community
Advanced
faqndo97faqndo97
32

noticed

Orchestrate multi-channel notifications for Rails applications via email, Slack, and webhooks.

Community
Advanced
alatyshaualatyshau

commentary

Adds attributed inline comments to Markdown documents using a structured marker syntax.

Community
Basic
MehakanisMehakanis

openai-chatkit-backend-python

Build a self-hosted Python ChatKit backend connecting to the Agents SDK.

Community
Advanced