Chat messaging
Skill Dragoon0x/everything-design-taste/skills/chat-messaging
Chat interface design, message bubbles, conversation patterns, typing indicators, and real-time messaging UX.From its SKILL.md
npx -y skills add Dragoon0x/everything-design-taste --skill chat-messagingAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 9 stars9 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
SKILL.md
1.6 KB, 330 tokens by cl100k_base, as published. Nobody here has run it
Chat & Messaging Patterns
Message Bubbles
- Sent messages: Right-aligned, brand/accent color background
- Received messages: Left-aligned, neutral/gray background
- Status indicators: Sent (single check), Delivered (double check), Read (blue/colored check)
- Timestamps: Show for each message or group by time (messages within 5 minutes share a timestamp)
Input Area
- Multi-line text input that grows with content (up to ~4 lines, then scroll)
- Attachment button (files, images, audio)
- Emoji picker
- Send button (enabled only when input has content)
- Shift+Enter for new line, Enter to send
Typing Indicator
- Show "[Name] is typing..." with animated dots
- Position: bottom of message list, left-aligned
- Show for 3-5 seconds after last keystroke
- Multiple users: "[Name] and [Name] are typing..."
Real-Time
- New messages appear at the bottom
- Auto-scroll to bottom on new message (only if already at bottom)
- "New messages" indicator if user scrolled up
- Optimistic send (show message immediately, confirm silently)
Message Types
| Type | Display |
|---|---|
| Text | Bubble with rendered markdown |
| Image | Thumbnail with lightbox on click |
| File | File icon + name + size, click to download |
| Audio | Mini waveform player |
| Link | Rich preview (OG image, title, description) |
| System | Centered, muted text, no bubble |
What ships with it
Read from the repository
Just SKILL.md. No reference files, no scripts.