velt-setup-best-practices_skill

Overview

This skill is a concise setup guide for integrating the Velt collaboration SDK into React, Next.js, Angular, Vue, and plain HTML apps. It captures prioritized best practices for installation, provider wiring, identity, document initialization, configuration, and project layout. Use it to avoid common setup mistakes and speed up secure, maintainable collaboration integration.

How this skill works

The skill inspects recommended wiring patterns for VeltProvider, authentication claims (userId, organizationId), JWT usage for production, and document identity initialization. It outlines installation steps, configuration flags, and routing surface considerations, plus a verification checklist for each rule. The guidance is organized by priority so you can apply critical items first.

When to use it

• When adding Velt to a new React, Next.js, Angular, Vue, or HTML project
• When configuring VeltProvider and supplying API keys or environment variables
• When implementing user authentication and server-side JWT generation
• When initializing or migrating collaborative documents using documentId
• When organizing project files and routing surfaces for collaboration features

Best practices

• Install official Velt packages via package manager and pin versions for reproducible builds
• Wrap app roots with VeltProvider early and propagate configuration from a single source
• Always provide authenticated identity (userId and organizationId) and validate tokens server-side in production
• Derive stable documentId values and avoid exposing mutable identifiers to clients
• Store API keys and sensitive flags in server-only environment variables; use short-lived JWTs for clients
• Place Velt-related code in a dedicated folder and include small verification tests and example pages

Example use cases

• Bootstrapping Velt in a Next.js app with server-side JWT issuance and client VeltProvider setup
• Adding real-time document collaboration to an Angular component with a stable documentId
• Creating a demo Vue app that demonstrates identity flow and document initialization for QA
• Migrating an existing HTML editor to Velt by implementing provider wiring and minimal routing surfaces
• Organizing project structure: /velt/provider.ts, /velt/auth.ts, and /velt/docs for rule-aligned code