Design component

Skill bg-szy/TOP-SKILLS/skills/marketplace/design-component

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

Install

npx -y skills add bg-szy/TOP-SKILLS --skill design-component

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
4 stars4 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

1.8 KB, 422 tokens by cl100k_base, as published. Nobody here has run it

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

What ships with it: 4 files

55.9 KB alongside SKILL.md