Velt Huddle Best Practices

Published by velt-js in agent-skills

Review recommended16 installs

What this skill does

Velt Huddle implementation patterns and best practices for React, Next.js, and web applications. Use when adding audio/video/screen sharing huddles, in-app voice or video calls, ephemeral chat within huddles, flock mode (follow me), cursor-mode huddle bubbles, or huddle webhook integration. Triggers on any task involving huddles, video calls, audio calls, screen sharing sessions, VeltHuddle, VeltHuddleTool, or collaborative real-time communication features — even if the user doesn't explicitly s

Add Velt Huddle Best Practices to your agent

Review the source and files first. When you are ready, copy the prompt instruction or use the CLI command supported by your environment.

Install with a prompt

Paste this into a compatible coding agent:

add this skill "velt-huddle-best-practices" from https://github.com/velt-js/agent-skills

Install with the CLI

Run this command in a controlled environment after reviewing the repository:

npx skills add https://github.com/velt-js/agent-skills --skill velt-huddle-best-practices

Skill instructions

Velt Huddle Best Practices

Comprehensive implementation guide for Velt's real-time audio, video, and screen sharing huddle feature. Contains 11 rules across 6 categories covering setup, configuration, webhooks, UI customization, wireframe template variables, and debugging.

When to Apply

Reference these guidelines when:

Adding audio/video/screen sharing to a collaborative app
Configuring huddle types (audio, video, screen, all)
Enabling ephemeral chat within huddles
Implementing flock mode (follow me) for shared navigation
Adding huddle bubble on user cursors
Handling huddle webhook events (created, joined)
Customizing huddle tool button UI
Debugging huddle connection or permission issues

Rule Categories by Priority

Priority	Category	Impact	Prefix
1	Core Setup	CRITICAL	`core-`
2	Configuration	HIGH-MEDIUM	`config-`
3	Events	MEDIUM	`events-`
4	UI Customization	MEDIUM	`ui-`
5	Wireframe Variables	MEDIUM	`wireframe-variables-`
6	Debugging	LOW-MEDIUM	`debug-`

Quick Reference

Core Setup (CRITICAL)

core-auth-provider — Use authProvider on VeltProvider, never identify()
core-setup — Add VeltHuddle at app root + VeltHuddleTool in toolbar
core-document-setup — Set document context to scope huddle per document

Configuration (HIGH-MEDIUM)

config-huddle-types — Select audio/video/screen/all mode
config-chat — Enable/disable ephemeral chat within huddle
config-flock-mode — Follow me mode on avatar click
config-cursor-mode — Huddle bubble on user cursors

Events (MEDIUM)

events-webhooks — Huddle created/joined webhook integration

UI Customization (MEDIUM)

ui-customization — Slots, CSS parts, custom button templates

Wireframe Variables (MEDIUM)

wireframe-variables-huddle — componentConfig.* flat-config variables on the huddle root, the huddle tool, and per-attendee tiles

Debugging (LOW-MEDIUM)

debug-common-issues — Troubleshooting huddle issues

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

Files included

AGENTS.full.md
AGENTS.md
metadata.json
rules/shared/_sections.md
rules/shared/config/config-chat.md
rules/shared/config/config-cursor-mode.md
rules/shared/config/config-flock-mode.md
rules/shared/config/config-huddle-types.md
rules/shared/core/core-auth-provider.md
rules/shared/core/core-document-setup.md
rules/shared/core/core-setup.md
rules/shared/debug/debug-common-issues.md
rules/shared/events/events-webhooks.md
rules/shared/ui/ui-customization.md
rules/shared/wireframe-variables/wireframe-variables-huddle.md
SKILL.md

More skills

Velt Huddle Best Practices: Install, Source and Security | FunnelSlayer