# Displaying Timelines

Displays chronological events and activity through timelines, activity feeds, Gantt...

- Repository: https://github.com/ancoleman/ai-design-components (526 stars)
- Category: Design
- License: MIT
- Last updated: 2025-12-11
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add ancoleman/ai-design-components --skill displaying-timelines -g -a claude-code -y`
Codex: `npx skills add ancoleman/ai-design-components --skill displaying-timelines -g -a codex -y`
Cursor: `npx skills add ancoleman/ai-design-components --skill displaying-timelines -g -a cursor -y`
Gemini CLI: `npx skills add ancoleman/ai-design-components --skill displaying-timelines -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add ancoleman/ai-design-components`

## Description

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).

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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`

The rest: https://github.com/ancoleman/ai-design-components/blob/HEAD/skills/displaying-timelines/SKILL.md