# Messaging Chat Design

> Chat and messaging interface design including conversations, message types, and real-time communication.

- Skill: `dragoon0x/messaging-chat-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/messaging-chat-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/messaging-chat-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: dragoon0x (https://skillmd.com/u/dragoon0x)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dragoon0x/messaging-chat-design

---


# Messaging Chat Design

## Conversation List
- Avatar + name + last message preview + timestamp.
- Unread indicator (bold text + badge count).
- Pinned conversations at top.
- Search conversations.

## Chat Interface
- Messages: left-aligned (others) and right-aligned (you).
- Bubble style with subtle background differentiation.
- Timestamps: grouped by day, inline for gaps > 30 min.
- Read receipts: sent → delivered → read (optional).
- Typing indicator: "Alex is typing..."

## Message Types
- Text with link previews.
- Images (tap to fullscreen, gallery for multiple).
- Files (icon + filename + size + download).
- Voice messages (waveform + duration + play button).
- Reactions (emoji on long-press/hover).
- Reply/thread (quote original message).

## Input Area
- Multiline text input that grows.
- Attachment button (image, file, camera).
- Emoji picker.
- Send on Enter (Shift+Enter for newline).
- Character/file size limits shown when approaching.