ReddRadar
Agent skill
design-component
Design components for Empathy Ledger - storyteller cards, story cards, and culturally sensitive UI patterns.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/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 tokenscultural-review- Cultural sensitivityempathy-ledger-codebase- Architecture
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?