skills.rest
masermediagroup-stack
masermediagroup-stackCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

displaying-timelines

Implements timeline, activity feed, Gantt chart, and calendar components with accessibility and performance patterns.

1|Updated Feb 24, 2026
Search Tags:#timeline#accessibility#react#real-time#calendar#gantt chart#activity feed
One-click install
npx skills add https://github.com/masermediagroup-stack/maser-media --skill displaying-timelines-masermediagroup-stack
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: displaying-timelines
Source: https://github.com/masermediagroup-stack/maser-media/tree/main/.cursor/skills/community/ai-design-components/skills/displaying-timelines
Command: npx skills add https://github.com/masermediagroup-stack/maser-media --skill displaying-timelines-masermediagroup-stack

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react-chrono, react-vertical-timeline-component, @svar/gantt, react-big-calendar, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve? Building chronological UI components like timelines, activity feeds, Gantt charts, and calendars involves repeated decisions about layout, timestamp formatting, real-time updates, accessibility, and performance. This Skill provides decision frameworks, implementation patterns, and working examples so you don't have to design these components from scratch. ## Core Features & Use Cases - Component Selection Framework: Maps use cases (social feeds, audit logs, project planning, scheduling) to the right component type with detailed selection criteria. - Implementation Patterns: Covers vertical/horizontal timelines, notification feeds, Gantt charts with dependencies, calendar views, real-time updates via WebSocket/SSE, and timestamp formatting. - Accessibility & Performance: Provides WCAG 2.1 AA patterns (ARIA roles, keyboard navigation) and optimization strategies (virtual scrolling, batched updates) for large datasets. - Use Case: When building a project management dashboard, use this Skill to implement a Gantt chart with drag-to-reschedule, dependency arrows, and a real-time activity feed showing team updates. ## Quick Start Ask the AI to create a vertical timeline component with milestone events, relative timestamps, and responsive mobile layout using the displaying-timelines skill.

Frequently Asked Questions about displaying-timelines

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a timeline component in React?▼

Use react-chrono for flexible timelines with horizontal, vertical, and alternating layouts, or react-vertical-timeline-component for simple lightweight vertical timelines. Both support TypeScript and custom item rendering out of the box.

What library should I use for a Gantt chart in React?▼

SVAR React Gantt (@svar/gantt) is recommended for most projects since it is dependency-free, supports drag-and-drop tasks, dependencies, and TypeScript. Bryntum Gantt is an alternative for enterprise needs but requires a commercial license.

How do I handle real-time updates in an activity feed?▼

Use WebSocket or Server-Sent Events to receive new events, apply optimistic updates so user actions appear immediately, and debounce incoming updates with 500ms batching to avoid overwhelming the UI.

When should I use virtual scrolling for a timeline?▼

Virtual scrolling is recommended once a timeline exceeds 100 events and becomes necessary beyond 1,000 events, combined with server pagination. Below 100 events, plain client-side rendering is sufficient.

How do I make a timeline accessible for screen readers?▼

Use semantic lists with time elements, apply role="feed" and role="article" ARIA patterns, add aria-label to timestamps, and support keyboard navigation with Tab, Arrow keys, and Enter/Space. Announce new items in live feeds via aria-live.

Should timestamps be relative or absolute in activity feeds?▼

Use relative timestamps like "2 hours ago" for recent events and absolute dates like "Jan 15, 2025" for older events. Convert server UTC times to the user's local timezone and refresh relative times every 60 seconds rather than continuously.

Related Skills

Explore More Software Engineering Skills→
dmccrearydmccreary
90

timeline-generator

Generate interactive timeline visualizations from chronological data with category filtering.

Community
Intermediate
gopforevergopforever

data-visualization

Connect data sources and render interactive visualizations in dashboards and reports.

Community
Intermediate
mahg-esmahg-es
3

theme-design

Design CSS theme systems with design tokens, color palettes, and typography scales.

Official
Intermediate
npownpow
4

chart

Render raw data as interactive Chart.js browser charts with screenshot verification.

Community
Intermediate