displaying-timelines

# Displaying Timelines & Activity Components

## Purpose

This skill enables systematic creation of timeline and activity components, from simple vertical timelines to complex interactive Gantt charts. It provides clear decision frameworks based on use case and data characteristics, ensuring optimal performance, real-time updates, and accessible implementations.

## When to Use

Activate this skill when:
- Creating activity feeds (social, notifications, audit logs)
- Displaying timelines (vertical, horizontal, interactive)
- Building Gantt charts or project schedules
- Implementing calendar interfaces (month, week, day views)
- Showing chronological events or historical data
- Handling real-time activity updates
- Requiring timestamp formatting (relative, absolute)
- Ensuring timeline accessibility or responsive behavior

## Quick Decision Framework

Select component type based on use case:

```
Social Activity        → Activity Feed (infinite scroll, reactions)
System Events          → Audit Log (searchable, exportable, precise timestamps)
User Notifications     → Notification Feed (read/unread, grouped by date)
Historical Events      → Vertical Timeline (milestones, alternating sides)
Project Planning       → Gantt Chart (dependencies, drag-to-reschedule)
Scheduling             → Calendar Interface (month/week/day views)
Interactive Roadmap    → Horizontal Timeline (zoom, pan, filter)
```

For detailed selection criteria, reference `references/component-selection.md`.

## Core Implementation Patterns

### Activity Feeds

**Social Feed Pattern:**
- User avatar + name + action description
- Relative timestamps ("2 hours ago")
- Reactions and comments
- Infinite scroll with pagination
- Real-time updates via WebSocket
- Reference `references/activity-feeds.md`

**Notification Feed Pattern:**
- Grouped by date sections
- Read/unread states with indicators
- Mark all as read functionality
- Filter by notification type
- Action buttons (view, dismiss)
- Reference `refer