Add real-time collaboration (comments, presence, cursors, CRDT editing, notifications) to React and Next.js apps.
Add live cursor tracking to show real-time cursor positions of other users.
# Add Cursors
Add live cursor tracking to a React or Next.js application.
## Trigger
Use when the user wants to show real-time cursor positions of other users on the page.
## Workflow
1. Verify Velt is set up. If not, run /install-velt first.
2. Use the `install_velt_interactive` MCP tool with cursors feature.
3. Follow the guided flow (plan → approve → apply).
## Guardrails
- No dedicated agent-skill exists for cursors. Use velt-docs MCP as primary reference.
- Query velt-docs MCP with: "How to add Velt cursors to a React app?"
- VeltCursor component renders remote user cursors.
- Cursors are scoped to the current document.
## Output
- VeltCursor component added
- Live cursor positions displayed for all active users
- Cursor labels showing user namesAdd real-time collaborative editing using Velt CRDT with Tiptap, BlockNote, CodeMirror, or ReactFlow.
# Add CRDT
Add real-time collaborative editing using Velt CRDT (Yjs-backed).
## Trigger
Use when the user wants collaborative editing with Tiptap, BlockNote, CodeMirror, ReactFlow, or custom CRDT stores.
## Workflow
1. Ask which editor the user wants to make collaborative:
- **Tiptap**: Rich text editor
- **BlockNote**: Block-based editor
- **CodeMirror**: Code editor
- **ReactFlow**: Node-based diagrams
- **Custom CRDT store**: Raw text/array/map/xml stores
2. Verify Velt is set up. If not, run /install-velt first.
3. Use the `install_velt_interactive` MCP tool with CRDT feature and the selected editor type.
4. Follow the guided flow (plan → approve → apply).
## Guardrails
- CRITICAL: When using Tiptap, MUST disable undo/redo: `StarterKit.configure({ undoRedo: false })` (NOT `history` — StarterKit has no "history" option)
- Each editor instance needs a unique `editorId`.
- Add CSS for collaboration cursors.
- Choose the correct store type: text for plain text, xml for rich text editors, map for key-value, array for lists.
- Consult the installed **velt-crdt-best-practices** skill for detailed implementation patterns.
## Output
- CRDT packages installed
- Editor configured with Velt CRDT extension
- Collaboration cursors styled
- Real-time sync working between usersAdd collaborative commenting features (freestyle, popover, text, stream, page, editor-integrated) to your app.
# Add Comments
Add collaborative commenting to a React or Next.js application.
## Trigger
Use when the user wants to add any type of comment feature: freestyle (click-anywhere), popover (cell/element-bound), text (highlight), stream (Google Docs-style), page (sidebar), or editor-integrated (TipTap, Lexical, Slate).
## Workflow
1. Ask which comment mode the user wants. Explain the options briefly:
- **Freestyle**: Click anywhere to pin comments (default, good for design feedback)
- **Popover**: Google Sheets-style, bound to specific elements
- **Text**: Highlight text to comment (Google Docs-style)
- **Stream**: Comments in side column, scroll-synced with content
- **Page**: Page-level comments via sidebar
- **TipTap/Lexical/Slate**: Editor-integrated text comments
2. Verify Velt is set up (VeltProvider, auth, document). If not, run /install-velt first.
3. Use the `install_velt_interactive` MCP tool with the selected comment type.
4. Follow the guided installation flow (plan → approve → apply).
5. Validate the installation.
## Guardrails
- Follow embedded velt-comments rules for correct component placement.
- For popover mode: every commentable element needs a unique ID + matching targetElementId.
- For editor integrations: MUST set `textMode={false}` on VeltComments.
- VeltCommentTool is required for freestyle mode — users can't initiate comments without it.
- Consult the installed **velt-comments-best-practices** skill for detailed implementation patterns.
## Output
- VeltComments component added with correct mode
- Comment tool/trigger added to UI
- Comment sidebar configured (if applicable)
- Working comment creation and displayAdd in-app notifications, email (SendGrid), and webhook integrations.
# Add Notifications
Add in-app notifications to a React or Next.js application.
## Trigger
Use when the user wants notification features: bell icon, notification panel, email notifications, or webhook integrations.
## Workflow
1. Verify Velt is set up. If not, run /install-velt first.
2. Use the `install_velt_interactive` MCP tool with notifications feature.
3. Follow the guided flow (plan → approve → apply).
4. Ask if they want email (SendGrid) or webhook integrations configured.
## Guardrails
- Notifications must be enabled in Velt Console FIRST (console.velt.dev > Configuration).
- VeltNotificationsTool provides the bell icon — place it in the toolbar/header.
- Use tabConfig to customize which tabs appear (forYou, all, documents).
- For email: requires SendGrid API key configured in Velt Console.
- Consult the installed **velt-notifications-best-practices** skill for detailed implementation patterns.
## Output
- VeltNotificationsTool added to UI
- Notification panel configured with appropriate tabs
- Email/webhook delivery set up (if requested)Add real-time user presence indicators showing who is active on a page.
# Add Presence
Add real-time user presence indicators to a React or Next.js application.
## Trigger
Use when the user wants to show who is currently viewing or active on a page/document.
## Workflow
1. Verify Velt is set up. If not, run /install-velt first.
2. Use the `install_velt_interactive` MCP tool with presence feature.
3. Follow the guided flow (plan → approve → apply).
## Guardrails
- No dedicated agent-skill exists for presence. Use velt-docs MCP as primary reference.
- Query velt-docs MCP with: "How to add Velt presence to a React app?"
- VeltPresence component shows user avatars of active users.
- Presence is scoped to the current document (set via setDocuments).
## Output
- VeltPresence component added to UI
- Active user avatars displayed
- Presence updates in real-timeFull guided installation of the Velt collaboration SDK into a React or Next.js project.
# Install Velt
Full guided installation of the Velt collaboration SDK into a React or Next.js project.
## Trigger
Use when the user wants to set up Velt from scratch, add Velt to an existing project, or install multiple Velt features at once.
## Workflow
1. Ask the user which features they want: Comments, Presence, Cursors, Notifications, Recorder, CRDT (collaborative editing). If unsure, recommend starting with Comments + Presence.
2. Use the `install_velt_interactive` MCP tool in **guided** mode with `stage: "plan"`.
- If the tool returns `awaiting_discovery_consent`: ask the user YES/NO for codebase scanning.
- If the tool returns `awaiting_discovery_verification`: show scan results, ask the user to verify.
- If the tool returns `awaiting_manual_wiring_answers`: present the questionnaire to the user.
- If the tool returns `plan_generated`: show the plan and ask for approval.
3. Once the plan is approved, **BEFORE implementing, read the relevant agent-skills rules** for the selected features:
- **Always read:** identity-jwt-generation, debug-multi-user-testing rules from velt-setup-best-practices
- **For CRDT (Tiptap):** read tiptap-setup-react, tiptap-nextjs-ssr, tiptap-cursor-css, tiptap-comments-integration, tiptap-initial-content rules from velt-crdt-best-practices
- **For Comments (editor-integrated):** read mode-tiptap (or mode-lexical/mode-slate) rule from velt-comments-best-practices
- Then implement following those rules exactly — do not improvise patterns
4. After implementing, run `npm run build` to verify. If the build fails, read the error, fix it, and rebuild. Do not declare success until the build passes.
5. Call `install_velt_interactive` with `stage: "apply"` for final validation.
6. Report validation results.
## Guardrails
- ALWAYS ask ONE question at a time — never batch questions.
- If codebase scan is unsure about DocumentId or User identity, DO NOT guess. Ask the user explicitly:
- Where should DocumentId come from? (route param, database ID, slug, etc.)
- How is user identity determined? (auth provider, userId field, email, etc.)
- Any multi-tenant/org context needed?
- Prefer embedded agent-skills guidance FIRST. Only query velt-docs MCP for missing info.
- VeltProvider goes in page.tsx, NOT layout.tsx for Next.js App Router.
- Ensure "use client" directive on all files importing from @veltdev/react.
## Priority Chain
1. Embedded rules (velt-core, velt-auth, velt-document-identity) — use these first
2. Installed agent-skills (velt-setup-best-practices, velt-comments-best-practices, velt-crdt-best-practices, velt-notifications-best-practices) — consult for detailed patterns
3. velt-docs MCP — query only for follow-up questions or features without embedded coverage
## Output
- Fully installed and configured Velt SDK
- Working VeltProvider with auth
- Document identity configured
- Selected features integrated
- Validation resultsCapture a screenshot of the running application for visual reference or comment placement analysis.
# Screenshot
Capture a screenshot of the running application for visual reference.
## Trigger
Use when the user wants to see the current state of their app, identify UI areas for comment placement, or verify visual changes after Velt integration.
## Workflow
1. Ensure the app is running (default: localhost:3000).
2. Use the `take_project_screenshot` MCP tool.
3. Display the screenshot to the user.
4. If needed, use `detect_comment_placement` to analyze the UI for optimal comment locations.
## Guardrails
- App must be running on localhost before taking screenshot.
- Default URL is http://localhost:3000 — ask user if their dev server uses a different port.
- Screenshot uses Playwright — it may need to be installed first.
## Output
- Screenshot of the running application
- Optional: recommended comment placement locationsVelt Comments implementation patterns and best practices for React, Next.js, and web applications. Use when adding collaborative commenting features, comment modes (Freestyle, Popover, Stream, Text, Page), rich text editor comments (TipTap, SlateJS, Lexical), media player comments, or chart comments.
# Velt Comments Best Practices
Comprehensive implementation guide for Velt's collaborative comments feature in React and Next.js applications. Contains 47 rules across 9 categories, prioritized by impact to guide automated code generation and integration patterns.
## When to Apply
Reference these guidelines when:
- Adding collaborative commenting to a React/Next.js application
- Implementing any Velt comment mode (Freestyle, Popover, Stream, Text, Page, Inline)
- Integrating comments with rich text editors (TipTap, SlateJS, Lexical)
- Adding comments to media players (Video, Lottie animations)
- Adding comments to charts (Highcharts, ChartJS, Nivo)
- Building custom comment interfaces with standalone components
## Rule Categories by Priority
| Priority | Category | Impact | Prefix |
|----------|----------|--------|--------|
| 1 | Core Setup | CRITICAL | `core-` |
| 2 | Comment Modes | HIGH | `mode-` |
| 3 | Standalone Components | MEDIUM-HIGH | `standalone-` |
| 4 | Comment Surfaces | MEDIUM-HIGH | `surface-` |
| 5 | UI Customization | MEDIUM | `ui-` |
| 6 | Data Model | MEDIUM | `data-` |
| 7 | Debugging & Testing | LOW-MEDIUM | `debug-` |
| 8 | Moderation & Permissions | LOW | `permissions-` |
| 9 | Attachments & Reactions | MEDIUM | `attach-` |
## Quick Reference
### 1. Core Setup (CRITICAL)
- `core-provider-setup` - Initialize VeltProvider with API key
- `core-authentication` - Authenticate users before using comments
- `core-document-setup` - Configure document context for comments
### 2. Comment Modes (HIGH)
- `mode-freestyle` - Pin comments anywhere on page
- `mode-popover` - Google Sheets-style cell comments
- `mode-stream` - Google Docs-style sidebar stream
- `mode-text` - Text highlight comments
- `mode-page` - Page-level comments via sidebar
- `mode-inline-comments` - Traditional inline thread style
- `mode-tiptap` - TipTap editor integration
- `mode-slatejs` - SlateJS editor integration
- `mode-lexical` - Lexical editor integration
- `mode-canvas` - Canvas/drawing comments
- `mode-lottie-player` - Lottie animation frame comments
- `mode-video-player-prebuilt` - Velt prebuilt video player
- `mode-video-player-custom` - Custom video player integration
- `mode-chart-highcharts` - Highcharts data point comments
- `mode-chart-chartjs` - ChartJS data point comments
- `mode-chart-nivo` - Nivo charts data point comments
- `mode-chart-custom` - Custom chart integration
### 3. Standalone Components (MEDIUM-HIGH)
- `standalone-comment-pin` - Manual comment pin positioning
- `standalone-comment-thread` - Render comment threads
- `standalone-comment-composer` - Add comments programmatically
### 4. Comment Surfaces (MEDIUM-HIGH)
- `surface-sidebar` - Comments sidebar component
- `surface-sidebar-v2` - Primitive-architecture V2 sidebar with 27+ composable primitives, unified filter model, and focused-thread view
- `surface-sidebar-button` - Toggle sidebar button
### 5. UI Customization (MEDIUM)
- `ui-comment-dialog` - Customize comment dialog
- `ui-comment-bubble` - Customize comment bubble
- `ui-wireframes` - Use wireframe components
- `ui-autocomplete-primitives` - Use standalone autocomplete primitive components to build custom autocomplete UIs without requiring the full VeltAutocomplete panel
### 6. Data Model (MEDIUM)
- `data-context-metadata` - Add custom metadata
- `data-comment-annotations` - Work with annotations
- `data-filtering-grouping` - Filter and group comments
- `data-activity-action-types` - Use CommentActivityActionTypes constant for type-safe comment activity filtering instead of raw strings
- `data-trigger-activities` - Set triggerActivities on CommentData to auto-create activity records via POST /v2/commentannotations/add
- `data-comment-annotation-data-provider` - Use config-based URL endpoints on CommentAnnotationDataProvider without placeholder callbacks; additionalFields replicates fields to resolver while retaining in Velt storage; fieldsToRemove strips fields from Velt's DB for PII removal
- `data-agent-fields-query` - Use agentFields on CommentRequestQuery to filter getCommentAnnotationCount() to agent-tagged annotations; unread count equals total count when agentFields is set
### 7. Debugging & Testing (LOW-MEDIUM)
- `debug-common-issues` - Common issues and solutions
- `debug-verification` - Verification checklist
### 8. Moderation & Permissions (LOW)
- `permissions-private-mode` - Control global comment visibility with enablePrivateMode/disablePrivateMode and update per-annotation visibility with updateVisibility
- `permissions-comment-saved-event` - Subscribe to the commentSaved event for reliable post-persist side-effects (webhooks, analytics, external sync)
- `permissions-visibility-option-dropdown` - Enable the visibility dropdown in the comment composer to let users select public or private before submitting, and subscribe to visibilityOptionClicked events
- `permissions-comment-save-triggered-event` - Use commentSaveTriggered for immediate UI feedback (spinners, disabled states) on save button click — before the async database write completes
- `permissions-comment-interaction-events` - Prefer past-tense event aliases commentToolClicked and sidebarButtonClicked over the present-tense originals in new code
- `permissions-anonymous-user-data-provider` - Register setAnonymousUserDataProvider() to resolve tagged contact emails to userIds at comment save time
### 9. Attachments & Reactions (MEDIUM)
- `attach-download-control` - Control attachment download behavior and intercept clicks
## How to Use
Read individual rule files for detailed explanations and code examples:
```
rules/shared/core/core-provider-setup.md
rules/shared/mode/mode-popover.md
```
Each rule file contains:
- Brief explanation of why it matters
- Incorrect code example with explanation
- Correct code example with explanation
- Source pointers to official documentation
## Compiled Documents
- `AGENTS.md` — Compressed index of all rules with file paths (start here)
- `AGENTS.full.md` — Full verbose guide with all rules expanded inlineVelt CRDT (Yjs) collaborative editing best practices for real-time applications. This skill should be used when implementing collaborative features using Velt CRDT stores, integrating with editors like Tiptap, BlockNote, CodeMirror, or ReactFlow, or debugging sync issues. Triggers on tasks involving real-time collaboration, multiplayer editing, CRDT stores, or Velt SDK integration.
# Velt CRDT Best Practices
Comprehensive best practices guide for implementing real-time collaborative editing with Velt CRDT (Yjs), maintained by Velt. Contains 38 rules across 5 categories, prioritized by impact to guide automated code generation and debugging.
## When to Apply
Reference these guidelines when:
- Setting up Velt client and CRDT stores
- Integrating with Tiptap, BlockNote, CodeMirror, or ReactFlow
- Implementing real-time synchronization
- Managing version history and checkpoints
- Debugging collaboration or sync issues
- Testing multi-user collaboration
## Rule Categories by Priority
| Priority | Category | Impact | Prefix |
|----------|----------|--------|--------|
| 1 | Core CRDT | CRITICAL | `core-` |
| 2 | Tiptap Integration | CRITICAL | `tiptap-` |
| 3 | BlockNote Integration | HIGH | `blocknote-` |
| 4 | CodeMirror Integration | HIGH | `codemirror-` |
| 5 | ReactFlow Integration | HIGH | `reactflow-` |
## Quick Reference
### 1. Core CRDT (CRITICAL)
- `core-install` - Install correct CRDT packages for your framework
- `core-velt-init` - Initialize Velt client before creating stores
- `core-store-create-react` - Use useVeltCrdtStore hook for React
- `core-store-create-vanilla` - Use createVeltStore for non-React
- `core-store-types` - Choose correct store type (text/array/map/xml)
- `core-store-subscribe` - Subscribe to store changes for remote updates
- `core-store-update` - Use update() method to modify values
- `core-version-save` - Save named version checkpoints
- `core-encryption` - Use custom encryption provider for sensitive data
- `core-webhooks` - Use webhooks to listen for CRDT data changes
- `core-rest-api` - Use REST API to retrieve CRDT data server-side
- `core-activity-debounce` - Use setActivityDebounceTime() to control how frequently batched CRDT editor activities are flushed
- `core-activity-action-types` - Use CrdtActivityActionTypes constant for type-safe CRDT activity filtering instead of raw strings
- `core-message-stream` - Use CrdtElement message-stream methods (pushMessage, onMessage, getMessages, getSnapshot, saveSnapshot, pruneMessages) for Yjs-backed collaborative editors
- `core-debug-storemap` - Use VeltCrdtStoreMap for runtime debugging
- `core-debug-testing` - Test with multiple browser profiles
### 2. Tiptap Integration (CRITICAL)
- `tiptap-install` - Install Tiptap CRDT packages
- `tiptap-setup-react` - Use useVeltTiptapCrdtExtension for React
- `tiptap-setup-vanilla` - Use createVeltTipTapStore for non-React
- `tiptap-disable-history` - Disable Tiptap history to prevent conflicts
- `tiptap-editor-id` - Use unique editorId per instance
- `tiptap-cursor-css` - Add CSS for collaboration cursors
- `tiptap-testing` - Test collaboration with multiple users
### 3. BlockNote Integration (HIGH)
- `blocknote-install` - Install BlockNote CRDT package
- `blocknote-setup-react` - Use useVeltBlockNoteCrdtExtension
- `blocknote-editor-id` - Use unique editorId per instance
- `blocknote-testing` - Test collaboration with multiple users
### 4. CodeMirror Integration (HIGH)
- `codemirror-install` - Install CodeMirror CRDT packages
- `codemirror-setup-react` - Use useVeltCodeMirrorCrdtExtension for React
- `codemirror-setup-vanilla` - Use createVeltCodeMirrorStore for non-React
- `codemirror-ycollab` - Wire yCollab extension with store's Yjs objects
- `codemirror-editor-id` - Use unique editorId per instance
- `codemirror-testing` - Test collaboration with multiple users
### 5. ReactFlow Integration (HIGH)
- `reactflow-install` - Install ReactFlow CRDT package
- `reactflow-setup-react` - Use useVeltReactFlowCrdtExtension
- `reactflow-handlers` - Use CRDT handlers for node/edge changes
- `reactflow-editor-id` - Use unique editorId per instance
- `reactflow-testing` - Test collaboration with multiple users
## How to Use
Read individual rule files for detailed explanations and code examples:
```
rules/shared/core/core-install.md
rules/shared/tiptap/tiptap-disable-history.md
```
Each rule file contains:
- Brief explanation of why it matters
- Incorrect code example with explanation
- Correct code example with explanation
- Verification checklist
- Source pointer to Velt documentation
## Compiled Documents
- `AGENTS.md` — Compressed index of all rules with file paths (start here)
- `AGENTS.full.md` — Full verbose guide with all rules expanded inlineAnswer questions about Velt features, best practices, and SDK usage.
# Velt Help
Answer questions about Velt's collaboration SDK, features, and best practices.
## Trigger
Use when the user asks general questions about Velt, needs clarification on features, or wants to understand how Velt components work.
## Workflow
1. Check if the question is covered by embedded rules (velt-core, velt-auth, velt-document-identity, velt-comments, velt-crdt, velt-notifications). If so, answer from embedded knowledge.
2. Check installed agent-skills (velt-setup-best-practices, velt-comments-best-practices, velt-crdt-best-practices, velt-notifications-best-practices) for detailed patterns and code examples.
3. If neither source covers the question, query the velt-docs MCP server for the answer.
4. Provide a clear, concise answer with code examples where applicable.
## Priority Chain
1. Embedded rules — always check first
2. Reference agent-skills — detailed patterns with code examples
3. velt-docs MCP — query for anything not covered above
## Guardrails
- Always cite which source the answer came from.
- If the answer involves setup, refer the user to /install-velt instead.
- For feature-specific questions, refer to the relevant /add-* skill.
## Output
- Clear answer to the user's Velt question
- Code examples where applicable
- Links to relevant Velt documentationVelt Notifications implementation patterns and best practices for React, Next.js, and web applications. Use when adding in-app notifications, notification panels, email notifications via SendGrid, webhook integrations, or user notification preference management.
# Velt Notifications Best Practices
Comprehensive implementation guide for Velt's notification system in React and Next.js applications. Contains 15 rules across 8 categories, prioritized by impact to guide automated code generation and integration patterns.
## When to Apply
Reference these guidelines when:
- Adding in-app notifications to a React/Next.js application
- Setting up the VeltNotificationsTool and VeltNotificationsPanel
- Configuring notification tabs (For You, All, Documents, People)
- Accessing notification data via hooks or REST APIs
- Managing user notification preferences and channels
- Reading or writing per-user notification config via REST API (document-level or org-level)
- Setting up email notifications with SendGrid
- Creating custom notifications via REST API
- Integrating with external services via webhooks
- Configuring notification delay and batching to reduce noise
## Rule Categories by Priority
| Priority | Category | Impact | Prefix |
|----------|----------|--------|--------|
| 1 | Core Setup | CRITICAL | `core-` |
| 2 | Panel Configuration | HIGH | `panel-` |
| 3 | Data Access | HIGH | `data-` |
| 4 | Settings Management | MEDIUM-HIGH | `settings-` |
| 5 | Notification Triggers | MEDIUM | `triggers-` |
| 6 | Delivery Channels | MEDIUM | `delivery-` |
| 7 | UI Customization | MEDIUM | `ui-` |
| 8 | Debugging & Testing | LOW-MEDIUM | `debug-` |
## Quick Reference
### 1. Core Setup (CRITICAL)
- `core-setup` — Enable notifications and add VeltNotificationsTool
### 2. Panel Configuration (HIGH)
- `panel-tabs` — Configure notification panel tabs (forYou, all, documents, people)
- `panel-display` — Control panel open mode (popover vs sidebar)
### 3. Data Access (HIGH)
- `data-hooks` — Use React hooks to access notification data
- `data-rest-api` — Use REST APIs for server-side notification management
- `data-notification-data-provider` — Register NotificationDataProvider to route custom notification fetch and delete through your own backend; applies only to notificationSource === 'custom' notifications; pipeline order is notification → user → comment
### 4. Settings Management (MEDIUM-HIGH)
- `settings-channels` — Configure notification delivery channels
- `settings-config-rest-api` — Read and write per-user notification config at document or org level via REST API
### 5. Notification Triggers (MEDIUM)
- `triggers-custom` — Create custom notifications via REST API
### 6. Delivery Channels (MEDIUM)
- `delivery-email` — Set up email notifications with SendGrid
- `delivery-webhooks` — Integrate with external services via webhooks
- `delivery-delay-batching` — Configure opt-in server-side delay and batching pipeline
### 7. UI Customization (MEDIUM)
- `ui-wireframes` — Customize notification components with wireframes
### 8. Debugging & Testing (LOW-MEDIUM)
- `debug-common-issues` — Common issues and solutions
## How to Use
Read individual rule files for detailed explanations and code examples:
```
rules/shared/core/core-setup.md
rules/shared/panel/panel-tabs.md
```
Each rule file contains:
- Brief explanation of why it matters
- Incorrect code example with explanation
- Correct code example with explanation
- Source pointers to official documentation
## Compiled Documents
- `AGENTS.md` — Compressed index of all rules with file paths (start here)
- `AGENTS.full.md` — Full verbose guide with all rules expanded inlineVelt collaboration SDK setup guide for React, Next.js, Angular, Vue, and HTML applications. Use this skill when setting up Velt for the first time, configuring VeltProvider, implementing user authentication, or initializing document collaboration.
# Velt Setup Best Practices
Comprehensive setup guide for Velt collaboration SDK. Contains 21 rules across 8 categories covering installation, authentication, document setup, and project organization.
## When to Apply
Reference these guidelines when:
- Setting up Velt in a new React, Next.js, Angular, Vue, or HTML project
- Configuring VeltProvider and API keys
- Implementing user authentication with Velt (userId, organizationId)
- Setting up JWT token generation for production
- Initializing documents with documentId
- Organizing Velt-related files in your project
## Rule Categories by Priority
| Priority | Category | Impact | Prefix |
|----------|----------|--------|--------|
| 1 | Installation | CRITICAL | `install-` |
| 2 | Provider Wiring | CRITICAL | `provider-` |
| 3 | Identity | CRITICAL | `identity-` |
| 4 | Document Identity | CRITICAL | `document-` |
| 5 | Config | HIGH | `config-` |
| 6 | Project Structure | MEDIUM | `structure-` |
| 7 | Routing Surfaces | MEDIUM | `surface-` |
| 8 | Debugging & Testing | LOW-MEDIUM | `debug-` |
## How to Use
Read individual rule files for detailed explanations and code examples:
```
rules/react/installation/install-react-packages.md
rules/react/provider-wiring/provider-velt-provider-setup.md
rules/shared/_sections.md
```
Each rule file contains:
- Brief explanation of why it matters
- Incorrect code example with explanation
- Correct code example with explanation
- Verification checklist
- Source pointers to official docs
## 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