design-component

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

Color	Meaning	Usage
Amber	Wisdom	Elder badges
Emerald	Growth	Story counts
Purple	Sacred	Knowledge keeper
Terracotta	Connection	Cultural affiliation

Reference Files

Topic	File
Storyteller card data model	refs/storyteller-card.md
AI enrichment patterns	refs/ai-enrichment.md
Component patterns	refs/component-patterns.md

Key Patterns

// 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