Skill LibraryPrompt Skill1 DesignsTop Views

Realtime Collaboration Presence

Design online state, avatar stacks, cursors/selections, conflict feedback, offline recovery, and accessible announcements for multiplayer editors, canvases, docs, boards, and comments.

Skill Uses0

Recorded selections across prompt workflows.

Public Designs1

Ranked by views, then community favorites.

Prompt Lines10

Reusable instruction lines for generation.

Author@Interface Lab

Implementation

Skill Directive

Description

Design online state, avatar stacks, cursors/selections, conflict feedback, offline recovery, and accessible announcements for multiplayer editors, canvases, docs, boards, and comments.

TagsImplementation

Skill Prompt

- Inputs must include collaboration object, sync model, presence data fields, user scale, permission roles, cursor/selection/comment-anchor display needs, offline strategy, conflict risk, and privacy requirements.
- Separate the data layers first: persistent document state, ephemeral presence, comments/notifications, permissions, and audit logs are different; do not write cursors or online state into permanent content history.
- Presence UI covers at least self, others online, idle/away, typing/editing, selected object, cursor/selection, following user, offline/reconnecting, and permission-limited states.
- Avatar stacks handle overflow, duplicate colors, name tooltip, status text, and keyboard reachability; small presence badges cannot rely only on color.
- Cursors and selections should be lightweight, dismissible, or density-adjustable; in dense canvases, low-performance devices, and reduced-motion contexts, limit animation and realtime tracking frequency.
- Conflict and save state stay visible: optimistic update, saving, saved, sync delayed, conflict, read-only, reconnecting, and offline queue each need copy and recovery paths.
- Comment anchors/collaboration annotations locate each other from list, canvas, and detail; deleted objects, permission changes, or version rollback need understandable orphan/archived states.
- Frontend implementation can use Yjs awareness, Liveblocks presence, or custom websockets; it needs throttling, color assignment, session cleanup, heartbeat timeout, and privacy-minimized fields.
- Deliver a presence schema, room lifecycle, avatar/cursor/comment UI rules, sync state machine, conflict copy, accessibility notes, privacy notes, and multi-tab/offline QA checklist.
- Sources referenced: Yjs Awareness CRDT, Liveblocks React presence, Fluent Avatar/AvatarGroup presence guidance, and Carbon status indicators. The content is rewritten as Interface Lab collaboration skill guidance.

Public directive summary shown; Pro unlocks the full prompt.

Layout Info

Designs below are ordered by views. Top items use live previews; the rest stay fast thumbnail cards.

Unlock Pro All Skills

Realtime Collaboration Presence

More pages using Realtime Collaboration Presence