Agent-Skills.md

Agent Skills: Design Component

Design Component skill for Empathy Ledger. Use for storyteller cards, story cards, profile displays, and any UI component requiring cultural sensitivity. Provides data mapping, AI enrichment patterns, and design system guidelines.

UncategorizedID: aiskillstore/marketplace/design-component

Repository

aiskillstore/marketplace
aiskillstore
23014

Install this agent skill to your local

pnpm dlx add-skill https://github.com/aiskillstore/marketplace/tree/HEAD/skills/acurioustractor/design-component

Skill Files

Browse the full folder contents for design-component.

Download Skill

Loading file tree…

skills/acurioustractor/design-component/SKILL.md

Skill Metadata

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