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