Design component

Skill aiskillstore/marketplace/skills/acurioustractor/design-component

Security-audited skills for Claude, Codex & Claude Code. One-click install, quality verified.

Install

npx -y skills add aiskillstore/marketplace --skill design-component

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

One thing 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.

What its author says it does

Copied from the file, not written here

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

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