Claude Code Plugins

Community-maintained marketplace

Feedback

design-component

@majiayu000/claude-skill-registry
27
0

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

Install Skill

Shared

Installs to .agents/skills, used by Codex, Amp, Warp, Cursor, OpenCode, and more.

CodexAmp
WarpCursorOpenCode
ClineGemini CLI
GitHub Copilot
Personal

Available across projects.

$npx skills-installer add @majiayu000/claude-skill-registry/design-component --client shared
Project

Writes to .agents/skills.

$npx skills-installer add @majiayu000/claude-skill-registry/design-component -p --client shared
Note: Review the skill instructions before using it.

SKILL.md

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

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

// 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