displaying-timelines
✓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).
Installation
SKILL.md
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.
For detailed selection criteria, reference references/component-selection.md.
Reference references/accessibility-patterns.md for complete requirements.
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). Source: ancoleman/ai-design-components.
Facts (cite-ready)
Stable fields and commands for AI/search citations.
- Install command
npx skills add https://github.com/ancoleman/ai-design-components --skill displaying-timelines- Category
- {}Data Analysis
- Verified
- ✓
- First Seen
- 2026-02-01
- Updated
- 2026-02-18
Quick answers
What is displaying-timelines?
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). Source: ancoleman/ai-design-components.
How do I install displaying-timelines?
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/ancoleman/ai-design-components --skill displaying-timelines Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code or Cursor
Where is the source repository?
https://github.com/ancoleman/ai-design-components
Details
- Category
- {}Data Analysis
- Source
- skills.sh
- First Seen
- 2026-02-01