# Avatar Profile Patterns

> Avatar display, profile cards, user representation, and identity design patterns.

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

---


# Avatar Profile Patterns

## Avatar Design
- Sizes: 24px (inline), 32px (list), 40px (comment), 64px (profile), 128px (settings).
- Fallback order: photo → initials (first + last) → generic icon.
- Circle shape (most common) or rounded square (Slack-style).
- Border: optional, use when avatar sits on varying backgrounds.
- Status indicator: small circle (green/yellow/red) at bottom-right.
- Group avatars: overlap with z-index stacking, show "+3" for overflow.

## Profile Cards
- Avatar + Name + Role/Title + Status.
- Hover card on avatar: quick profile preview without navigation.
- Action buttons: Message, Follow, View Profile.
- Keep cards compact. Full profile lives on its own page.