# Avatar Profile

> Avatar design, profile displays, user representation, initials fallback, and presence indicators.

- Skill: `dragoon0x/avatar-profile` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/avatar-profile`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/avatar-profile/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/avatar-profile

---


# Avatar & Profile Patterns

## Avatar Sizes
| Size | Use Case | Pixels |
|------|----------|--------|
| XS | Dense lists, inline mentions | 24px |
| SM | Comments, chat messages | 32px |
| MD | Cards, list items | 40px |
| LG | Profile headers, sidebars | 56-64px |
| XL | Profile pages, account settings | 96-128px |

## Fallback Chain
1. User-uploaded photo
2. Initials on colored background (derived from name hash for consistency)
3. Generic silhouette icon (absolute last resort)

## Initials
- Use first letter of first and last name (JD for John Doe)
- Single name: use first two letters (JO for John)
- Background color: derive from a hash of the name (same person = same color always)
- Text color: white on dark backgrounds, dark on light

## Presence Indicators
- Green dot: online/active
- Yellow dot: idle/away
- Red dot: busy/do not disturb
- Gray dot or no dot: offline
- Position: bottom-right corner of avatar
- Size: 25-30% of avatar diameter

## Group Avatars
- Stack with overlap (show 3, "+5 more")
- Overlap from left to right
- Most recent or most relevant on top
- Click to expand full list