majiayu000 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
- Always show: name, avatar, cultural_background, story_count
- On card: badges, top specialties, location
- On hover: bio, all specialties, themes
- Profile only: contact, full stories, connections
Badge Priority
- Elder (gold crown)
- Featured (star)
- Knowledge Keeper (book)
- 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 tokenscultural-review- Cultural sensitivityempathy-ledger-codebase- Architecture