Displays chronological events and activity through timelines, activity feeds, Gantt charts, and calendar interfaces. Use when showing historical events, project schedules, social feeds, notifications, audit logs, or time-based data. Provides implementation patterns for vertical/horizontal timelines, interactive visualizations, real-time updates, and responsive designs with accessibility (WCAG/ARIA).
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.
Activate this skill when:
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.
Social Feed Pattern:
references/activity-feeds.mdNotification Feed Pattern:
references/notification-feeds.mdAudit Log Pattern:
references/audit-logs.mdExample: examples/social-activity-feed.tsx
Vertical Timeline:
references/vertical-timelines.mdHorizontal Timeline:
references/horizontal-timelines.mdInteractive Timeline:
references/interactive-timelines.mdExample: examples/milestone-timeline.tsx
Project Planning Features:
To generate Gantt chart data:
python scripts/generate_gantt_data.py --tasks 50 --dependencies auto
Reference references/gantt-patterns.md for implementation details.
Example: examples/project-gantt.tsx
Month View:
Week View:
Day/Agenda View:
Reference references/calendar-patterns.md for all views.
Example: examples/calendar-scheduler.tsx
Essential timestamp patterns:
Relative (Recent Events):
Absolute (Older Events):
Implementation Considerations:
To format timestamps consistently:
node scripts/format_timestamps.js --locale en-US --timezone auto
Reference references/timestamp-formatting.md for complete patterns.
Live Activity Feed:
Implementation Pattern:
Reference references/real-time-updates.md for WebSocket patterns.
Example: examples/realtime-activity.tsx
Critical performance thresholds:
<100 events → Client-side rendering, no virtualization
100-1,000 events → Virtual scrolling recommended
1,000+ events → Virtual scrolling + server pagination
Real-time → Debounce updates, batch insertions
Optimization Strategies:
To benchmark performance:
node scripts/benchmark_timeline.js --events 10000
Reference references/performance-optimization.md for details.
Essential WCAG compliance:
Semantic HTML:
<ol> or <ul> for timelinesARIA Patterns:
role="feed" for activity feedsrole="article" for timeline itemsaria-label for timestampsaria-busy during loadingKeyboard Navigation:
Screen Reader Support:
To validate accessibility:
node scripts/validate_timeline_accessibility.js
Reference references/accessibility-patterns.md for complete requirements.
Three proven strategies:
1. Stack Vertically (Mobile)
2. Simplify Display
3. Horizontal Scroll
Reference references/responsive-strategies.md for implementations.
Example: examples/responsive-timeline.tsx
Best for timeline visualizations with rich content:
npm install react-chrono
See examples/react-chrono-timeline.tsx for setup.
Alternative: react-vertical-timeline-component
Best for project management:
npm install @svar/gantt
Enterprise Alternative: Bryntum Gantt
Best for scheduling interfaces:
npm install react-big-calendar
Alternative: FullCalendar
For detailed comparison, reference references/library-comparison.md.
Timelines use the design-tokens skill for consistent theming:
Timeline-Specific Tokens:
--timeline-line-color - Connecting line color--timeline-dot-color - Event marker color--timeline-dot-active-color - Current/active event--event-card-bg - Event card background--timestamp-color - Timestamp textStandard Token Categories:
Supports light, dark, high-contrast, and custom themes. Reference the design-tokens skill for theme switching.
Start with the example matching the requirements:
social-activity-feed.tsx # Social feed with reactions
notification-center.tsx # Notification system with filters
audit-log-viewer.tsx # System audit log
milestone-timeline.tsx # Vertical timeline with milestones
project-gantt.tsx # Gantt chart with dependencies
calendar-scheduler.tsx # Full calendar with all views
realtime-activity.tsx # Live updates via WebSocket
responsive-timeline.tsx # Mobile-optimized timeline
Generate mock timeline data:
python scripts/generate_timeline_data.py --events 500 --realtime
Test real-time updates:
node scripts/simulate_realtime.js --rate 5/sec --duration 60s
Validate accessibility:
node scripts/validate_timeline_accessibility.js
Benchmark performance:
node scripts/benchmark_timeline.js --events 10000 --virtual