design-component

Standardize UI component patterns for storyteller and story cards.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/Acurioustractor/empathy-ledger-v2 --skill design-component
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-component
Source: https://github.com/Acurioustractor/empathy-ledger-v2/tree/main/.claude/skills/local/design-component
Command: npx skills add https://github.com/Acurioustractor/empathy-ledger-v2 --skill design-component

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Empathy Ledger teams need consistent, culturally sensitive UI components for storyteller and story cards to ensure accessible and respectful presentation across platforms.

Core Features & Use Cases

  • Standardized component patterns for storyteller cards and story cards, including hover and profile states.
  • Reference guidance for accessibility, dark mode, and cultural safety, drawn from the included refs files.
  • Practical use cases across directory listings, profiles, and content galleries; include design tokens and patterns.

Quick Start

Review the design-component documentation and the refs to start implementing the primary card patterns in your UI.

Frequently Asked Questions about design-component

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What are culturally sensitive UI patterns for storyteller and story cards?

Culturally sensitive UI patterns for storyteller and story cards are standardized component layouts that ensure accessible and respectful presentation across directory listings, profiles, and content galleries. They enforce cultural safety and ARIA accessibility guidelines.

How do I standardize UI component patterns for accessible frontend design?

To standardize UI component patterns for accessible frontend design, apply the provided reference files like refs/card-variants.md and refs/component-patterns.md. This enforces consistency across listing pages, profiles, and content galleries while adhering to dark-mode and ARIA guidelines.

Does this UI pattern approach support dark-mode and ARIA accessibility guidelines?

Yes, this UI pattern approach supports dark-mode and ARIA accessibility guidelines by enforcing their use through reference files. It ensures standardized component patterns for storyteller and story cards meet accessibility requirements across frontend design tasks.

What's the best way to design culturally safe content galleries for storytelling platforms?

The best way to design culturally safe content galleries for storytelling platforms is to use standardized component patterns for story cards. This approach applies reference guidance for accessibility, dark mode, and cultural safety across directory listings and profile pages.

When do I need standardized component patterns for storyteller cards?

You need standardized component patterns for storyteller cards when building frontend interfaces for Empathy Ledger platforms that require consistent, culturally sensitive UI components. This ensures accessible and respectful presentation across listing pages, profiles, and content galleries.

Why does my frontend design need reference files for UI component patterns?

Your frontend design needs reference files for UI component patterns to enforce the use of standardized variants and patterns. This ensures accessibility, dark-mode support, and cultural safety are consistently applied across storyteller and story card implementations.