Agent skill · design visual · aiskillstore
design-component
Design components for Empathy Ledger - storyteller cards, story cards, and culturally sensitive UI patterns.
Why this skill is useful
Provides specific design patterns and cultural guidelines for UI components that the AI wouldn't reliably generate on its own.
What it needs
About 1k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
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, culturalbackground, storycount 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 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
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/design-component