---

name: design-component description: Design components for Empathy Ledger - storyteller cards, story cards, and culturally sensitive UI patterns.

Design Component

UI component patterns for Empathy Ledger with cultural sensitivity.

When to Use

• Building storyteller/story cards
• Implementing data displays
• Adding AI content enrichment
• Creating profile components

Quick Reference

Card Data Hierarchy

1. Always show: name, avatar, cultural_background, story_count
2. On card: badges, top specialties, location
3. On hover: bio, all specialties, themes
4. Profile only: contact, full stories, connections

Badge Priority

1. Elder (gold crown)
2. Featured (star)
3. Knowledge Keeper (book)
4. Verified (check)

Cultural Colors

Reference Files

Key Patterns

Copy// Avatar with fallback
<Avatar>
  <AvatarImage src={url} alt={name} />
  <AvatarFallback>{initials}</AvatarFallback>
</Avatar>

// Badge
<Badge variant="elder">Elder</Badge>

// Card structure
<Card>
  <CardHeader>Avatar + Badges</CardHeader>
  <CardContent>Info + Metrics</CardContent>
  <CardFooter>Actions</CardFooter>
</Card>

Anti-Patterns

❌ Auto-publish AI content ❌ Suggest connections without consent ❌ Skip cultural context display ❌ Use disrespectful terminology

Related Skills

• design-system-guardian - Design tokens
• cultural-review - Cultural sensitivity
• empathy-ledger-codebase - Architecture