Comments & Discussions Agent Skill

---
description: Threaded comments, @mentions, reactions, moderation queue, optimistic UI, and cursor pagination.
homepage: https://yepapi.com/skills/comments-discussions
metadata:
  tags: [comments, discussions, threads, moderation]
---

# Comments & Discussions

## Rules

- Threaded comments: `parent_id` foreign key on comments table — `null` for top-level, references parent for replies
- Optimistic UI: add comment to UI immediately, confirm with server response, rollback on error
- @mentions: parse `@username` in comment body — trigger user lookup dropdown on `@` keystroke, notify mentioned users
- Reactions: separate `reactions` table (commentId, userId, emoji) — unique constraint on (commentId, userId, emoji)
- Moderation: `status` field (published, flagged, removed) — moderation queue for flagged content, auto-flag with word list
- Soft delete: set `deletedAt` timestamp — show "deleted" placeholder for comments with replies, fully hide orphaned deleted comments
- Cursor pagination: `cursor` (commentId) + `limit` — ordered by `createdAt`, load older comments on scroll
- Edit history: store edits in separate table or JSON array — show "edited" indicator with last edit timestamp

## Patterns

\`\`\`ts
// Comment data model
// comments: id, postId, authorId, parentId (nullable), body, status, deletedAt, createdAt, updatedAt
// reactions: id, commentId, userId, emoji, createdAt (unique: [commentId, userId, emoji])
// mentions: id, commentId, mentionedUserId, createdAt

// Threaded query — fetch top-level + nested replies
const comments = await db.query.comments.findMany({
  where: and(eq(comments.postId, postId), isNull(comments.parentId)),
  with: {
    author: { columns: { id: true, name: true, avatar: true } },
    replies: {
      with: { author: { columns: { id: true, name: true, avatar: true } } },
      orderBy: [asc(comments.createdAt)],
    },
    reactions: true,
  },
  orderBy: [desc(comments.createdAt)],
  limit: 20,
});

// Optimistic comment add (React Query)
const addComment = useMutation({
  mutationFn: (body: string) => api.post(`/posts/${postId}/comments`, { body }),
  onMutate: async (body) => {
    await queryClient.cancelQueries({ queryKey: ["comments", postId] });
    const previous = queryClient.getQueryData(["comments", postId]);
    queryClient.setQueryData(["comments", postId], (old: Comment[]) => [
      { id: `temp-${Date.now()}`, body, author: currentUser, createdAt: new Date() },
      ...old,
    ]);
    return { previous };
  },
  onError: (_err, _body, context) => {
    queryClient.setQueryData(["comments", postId], context?.previous);
  },
  onSettled: () => queryClient.invalidateQueries({ queryKey: ["comments", postId] }),
});
\`\`\`

## Avoid

- Unlimited nesting depth — cap at 2-3 levels, then flatten deeper replies
- Loading all comments at once — use cursor pagination, especially for active discussions
- Client-side mention parsing only — validate and extract mentions server-side for notifications
- Hard deleting comments with replies — this orphans the thread; soft delete and show placeholder
- Reactions without unique constraints — allows duplicate reactions from the same user