displaying-timelines
installsforks
How to install displaying-timelines?
ancoleman/ai-design-components/displaying-timelines
$npx -y skills add ancoleman/ai-design-components --skill displaying-timelinesDisplays 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/h
SKILL.md
| 1 | # Displaying Timelines & Activity Components |
| 2 | |
| 3 | ## Purpose |
| 4 | |
| 5 | 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. |
| 6 | |
| 7 | ## When to Use |
| 8 | |
| 9 | Activate this skill when: |
| 10 | - Creating activity feeds (social, notifications, audit logs) |
| 11 | - Displaying timelines (vertical, horizontal, interactive) |
| 12 | - Building Gantt charts or project schedules |
| 13 | - Implementing calendar interfaces (month, week, day views) |
| 14 | - Showing chronological events or historical data |
| 15 | - Handling real-time activity updates |
| 16 | - Requiring timestamp formatting (relative, absolute) |
| 17 | - Ensuring timeline accessibility or responsive behavior |
| 18 | |
| 19 | ## Quick Decision Framework |
| 20 | |
| 21 | Select component type based on use case: |
| 22 | |
| 23 | ``` |
| 24 | Social Activity → Activity Feed (infinite scroll, reactions) |
| 25 | System Events → Audit Log (searchable, exportable, precise timestamps) |
| 26 | User Notifications → Notification Feed (read/unread, grouped by date) |
| 27 | Historical Events → Vertical Timeline (milestones, alternating sides) |
| 28 | Project Planning → Gantt Chart (dependencies, drag-to-reschedule) |
| 29 | Scheduling → Calendar Interface (month/week/day views) |
| 30 | Interactive Roadmap → Horizontal Timeline (zoom, pan, filter) |
| 31 | ``` |
| 32 | |
| 33 | For detailed selection criteria, reference `references/component-selection.md`. |
| 34 | |
| 35 | ## Core Implementation Patterns |
| 36 | |
| 37 | ### Activity Feeds |
| 38 | |
| 39 | **Social Feed Pattern:** |
| 40 | - User avatar + name + action description |
| 41 | - Relative timestamps ("2 hours ago") |
| 42 | - Reactions and comments |
| 43 | - Infinite scroll with pagination |
| 44 | - Real-time updates via WebSocket |
| 45 | - Reference `references/activity-feeds.md` |
| 46 | |
| 47 | **Notification Feed Pattern:** |
| 48 | - Grouped by date sections |
| 49 | - Read/unread states with indicators |
| 50 | - Mark all as read functionality |
| 51 | - Filter by notification type |
| 52 | - Action buttons (view, dismiss) |
| 53 | - Reference `references/notification-feeds.md` |
| 54 | |
| 55 | **Audit Log Pattern:** |
| 56 | - System events with precise timestamps |
| 57 | - User action tracking |
| 58 | - Searchable with advanced filters |
| 59 | - Exportable (CSV, JSON) |
| 60 | - Security-focused display |
| 61 | - Reference `references/audit-logs.md` |
| 62 | |
| 63 | Example: `examples/social-activity-feed.tsx` |
| 64 | |
| 65 | ### Timeline Visualizations |
| 66 | |
| 67 | **Vertical Timeline:** |
| 68 | - Events stacked chronologically |
| 69 | - Connecting line with marker dots |
| 70 | - Date markers and event cards |
| 71 | - Optional alternating sides |
| 72 | - Best for: Historical events, project milestones |
| 73 | - Reference `references/vertical-timelines.md` |
| 74 | |
| 75 | **Horizontal Timeline:** |
| 76 | - Events along horizontal axis |
| 77 | - Scroll or zoom to navigate |
| 78 | - Density varies by zoom level |
| 79 | - Best for: Project timelines, roadmaps |
| 80 | - Reference `references/horizontal-timelines.md` |
| 81 | |
| 82 | **Interactive Timeline:** |
| 83 | - Click events for detail view |
| 84 | - Filter by category/type |
| 85 | - Zoom in/out controls |
| 86 | - Pan and scroll navigation |
| 87 | - Best for: Data exploration, rich interactivity |
| 88 | - Reference `references/interactive-timelines.md` |
| 89 | |
| 90 | Example: `examples/milestone-timeline.tsx` |
| 91 | |
| 92 | ### Gantt Charts |
| 93 | |
| 94 | **Project Planning Features:** |
| 95 | - Tasks as horizontal bars |
| 96 | - Dependencies with arrows |
| 97 | - Critical path highlighting |
| 98 | - Drag to reschedule |
| 99 | - Progress indicators |
| 100 | - Milestone markers (diamonds) |
| 101 | - Resource allocation |
| 102 | - Today marker line |
| 103 | - Zoom levels (day/week/month/year) |
| 104 | |
| 105 | To generate Gantt chart data: |
| 106 | ```bash |
| 107 | python scripts/generate_gantt_data.py --tasks 50 --dependencies auto |
| 108 | ``` |
| 109 | |
| 110 | Reference `references/gantt-patterns.md` for implementation details. |
| 111 | |
| 112 | Example: `examples/project-gantt.tsx` |
| 113 | |
| 114 | ### Calendar Interfaces |
| 115 | |
| 116 | **Month View:** |
| 117 | - Traditional calendar grid |
| 118 | - Events in date cells |
| 119 | - Click to create/edit |
| 120 | - Color-coded categories |
| 121 | - Multi-calendar overlay |
| 122 | |
| 123 | **Week View:** |
| 124 | - Time slots (hourly) |
| 125 | - Events as draggable blocks |
| 126 | - Resize to change duration |
| 127 | - Multiple calendars overlay |
| 128 | |
| 129 | **Day/Agenda View:** |
| 130 | - Detailed daily schedule |
| 131 | - List format with time duration |
| 132 | - Location and attendees |
| 133 | - Scrollable timeline |
| 134 | |
| 135 | Reference `references/calendar-patterns.md` for all views. |
| 136 | |
| 137 | Example: `examples/calendar-scheduler.tsx` |
| 138 | |
| 139 | ## Timestamp Formatting |
| 140 | |
| 141 | Essential timestamp patterns: |
| 142 | |
| 143 | **Relative (Recent Events):** |
| 144 | - "Just now" (<1 min) |
| 145 | - "5 minutes ago" |
| 146 | - "3 hours ago" |
| 147 | - "Yesterday at 3:42 PM" |
| 148 | |
| 149 | **Absolute (Older Events):** |
| 150 | - "Jan 15, 2025" |
| 151 | - "January 15, 2025 at 3:42 PM" |
| 152 | - ISO 8601 for APIs |
| 153 | |
| 154 | **Implementation Considerations:** |
| 155 | - Timezone handling (display user's local time) |
| 156 | - Locale-aware formatting |
| 157 | - Hover for precise timestamp |
| 158 | - Auto-update relative times |
| 159 | |
| 160 | To format timestamps consistently |
People who liked this also viewed
6 picksType
- find-skillsHelps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skSkillsJul 2026
- grill-meA relentless interview to sharpen a plan or design.SkillsJul 2026
- vercel-react-best-practicesVercel's official collection of agent skillsSkillsJul 2026
- improve-codebase-architectureScan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.SkillsJul 2026
- setup-matt-pocock-skillsConfigure this repo for the engineering skills — set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.SkillsJul 2026
- triageMove issues and external PRs through a state machine of triage roles — categorise, verify, grill if needed, and write agent-ready briefs.SkillsJul 2026
