design-componentlisted
Install: claude install-skill aiskillstore/marketplace
# Design Component Skill
This skill provides comprehensive guidance for designing and implementing UI components in Empathy Ledger, with special focus on storyteller cards, data display patterns, and AI-powered content enrichment.
## Design System Foundation
### Color Palette (CSS Variables)
```css
/* Use semantic colors for dark mode support */
--background /* Page background */
--foreground /* Primary text */
--card /* Card surfaces */
--card-foreground/* Card text */
--muted /* Muted backgrounds */
--muted-foreground /* Secondary text */
--popover /* Dropdown/popover backgrounds */
--border /* Borders */
--primary /* Primary actions */
--accent /* Accent/highlight (sunshine yellow) */
--destructive /* Errors/warnings */
```
### Cultural Color Meanings
| Color | Meaning | Usage |
|-------|---------|-------|
| Amber/Gold | Elder wisdom, featured | Elder badges, featured indicators |
| Emerald | Growth, community | Story counts, active status |
| Purple | Sacred, knowledge | Knowledge keeper badges |
| Terracotta | Earth, connection | Cultural affiliations |
| Sage | Calm, respectful | General UI elements |
## Storyteller Card Data Model
### Core Display Fields
```typescript
interface StorytellerCardData {
// Identity (Always Show)
id: string
display_name: string
avatar_url?: string
pronouns?: string
// Cultural Context (Show When Available)
cultural_background?: string
cultural_affiliations?: