Claude-skill-registry design-component

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

install

source · Clone the upstream repo

git clone https://github.com/majiayu000/claude-skill-registry

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/design-component" ~/.claude/skills/majiayu000-claude-skill-registry-design-component && rm -rf "$T"

manifest: skills/data/design-component/SKILL.md

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 tokens
```
cultural-review
```
- Cultural sensitivity
```
empathy-ledger-codebase
```
- Architecture