velt-suggestions-best-practices

Implement Velt Suggestions propose-then-review editing workflows in React and Next.js applications.

1|Updated Jan 23, 2026
One-click install
npx skills add https://github.com/velt-js/agent-skills --skill velt-suggestions-best-practices-velt-js
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: velt-suggestions-best-practices
Source: https://github.com/velt-js/agent-skills/tree/main/skills/velt-suggestions-best-practices
Command: npx skills add https://github.com/velt-js/agent-skills --skill velt-suggestions-best-practices-velt-js

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @veltdev/react.

What problem does it solve? Building a propose-then-review editing workflow — where humans or AI agents suggest changes that reviewers accept or reject — requires correctly wiring suggestion targets, capture pipelines, lifecycle events, and state application, which is easy to get wrong without canonical guidance. ## Core Features & Use Cases - Suggestion Targets & Mode: Tag DOM elements with data-velt-suggestion-target, register getters for complex multi-control values, and toggle suggestion mode with reactive state observation. - Three Capture Approaches: Auto-commit via onTargetEditCommit, deferred commit via the targetEditCommit event for validation gating, and manual startSuggestion/commitSuggestion for AI agent flows. - Lifecycle & Querying: Handle suggestionAccepted/suggestionRejected events idempotently, track statuses (pending/accepted/rejected/stale/apply_failed), detect drift, and query suggestions for custom UI badges and sidebars. - Use Case: A project management app where team members suggest changes to task fields (priority, assignee, due date) and the project owner accepts or rejects them from the Velt comment dialog, with accepted values applied to app state. ## Quick Start Ask the agent to add Velt suggestion mode to your React form inputs so edits become proposals that reviewers can accept or reject.

Frequently Asked Questions about velt-suggestions-best-practices

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

FAQPage Schema
How do I add suggestion mode to form inputs with Velt in React?▼

Tag each input with data-velt-suggestion-target using a stable targetId, then call enableSuggestionMode from the useEnableSuggestionMode hook. Pass onTargetEditCommit in the config to auto-create suggestions with a summary when edits commit.

How do I handle accept and reject events for Velt suggestions?▼

Subscribe with useCommentEventCallback for suggestionAccepted and suggestionRejected, since the accept/reject UI lives on the comment dialog. Read targetId and newValue from commentAnnotation.suggestion and apply the change idempotently to your state.

Can an AI agent programmatically create Velt suggestions?▼

Yes, use the manual capture approach: call startSuggestion(targetId) to snapshot the current value, then commitSuggestion with the newValue, summary, and metadata. A human reviewer then accepts or rejects the proposal via the Velt comment dialog.

Does Velt Suggestions work without setting up Velt Comments?▼

No, Suggestions require Velt Comments to be configured first because the accept/reject UI renders on the Velt comment dialog. Ensure VeltProvider is set up with authProvider and Comments are working before adding Suggestions.

Why is my Velt suggestion never created when editing a complex field?▼

The registered getter likely reads app state that only updates after commit, so oldValue and newValue match and the diff short-circuits. The getter must read live edit-time state, usually directly from the DOM input values.

What happens when a Velt suggestion target no longer exists at accept time?▼

The suggestion transitions to stale status instead of accepted, and a suggestionStale event fires on the SuggestionElement. Build your UI to handle stale gracefully, such as showing a target-no-longer-exists message.