# Design Component

> Design components for Empathy Ledger - storyteller cards, story cards, and culturally sensitive UI patterns.

- Skill: `majiayu000/design-component` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/design-component`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/design-component/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/design-component

---


# 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
```tsx
// 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