Skip to content
Agentmart
Submit a tool

avatar-profile

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

Skill by Dragoon0x

IndexedMIT★ 13
Write a review

Install

Works with Claude Code, Claude apps, Codex, Cursor, Gemini CLI, GitHub Copilot, VS Code, OpenCode, Goose, Windsurf. Read the repository before you give any tool access to your data.

npx agentmarket install skill/dragoon0x-avatar-profile

Asks which of your tools to add it to (Claude Code, Codex, Cursor, VS Code, Windsurf, Gemini CLI, Claude Desktop) and shows the change first. See https://agentmart.dev/cli.

Get the weekly diff

The weekly diff: one email a week with new agent tools, notable updates and grade changes, plus security alerts for tools you follow. Double opt-in, one-click unsubscribe.

We use your email only for this newsletter. Privacy

About

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

Use cases: design

No reviews yet. Installed it? Reviews come from verified installers only. How reviews work

Permissions

What this skill can do and what it asks for, from its SKILL.md. Checked Oct 25, 2026.

Tools
No tools found
Secrets
None asked for
Install scripts
None found

Network hosts it talks to 1

  • codeload.github.com · found in install command

Files it touches

  • ~/.claude/skills/avatar-profile

What's inside

Skill name
avatar-profile
Description
Avatar design, profile displays, user representation, initials fallback, and presence indicators.
License
MIT
Instructions
37 lines in SKILL.md · view on GitHub

Files (1)

  • SKILL.md

SKILL.md (first lines)

# 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

From Dragoon0x/everything-design-taste, MIT.

More from Dragoon0x/everything-design-taste

Signals

Stars
13
Forks
1
Open issues
0
Last commit (this folder)
Apr 11, 2026 (6 months ago)

From GitHub (fetched Oct 24, 2026).

Details

License
MIT
First seen
Oct 24, 2026
Last checked
Oct 24, 2026

More from Dragoon0x

Cite this page

avatar-profile skill. Agent Mart. https://agentmart.dev/skills/dragoon0x-avatar-profile (last updated 2026-10-24)