[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71H4MT5Y5Z2KAJM9FM71HAX":3,"skill-same:01M71H4MT5Y5Z2KAJM9FM71HAX":197},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":17,"publishedAt":38,"linkOnly":39,"markdownContent":40,"markdownBody":41,"frontMatter":42,"refName":43,"commitSha":44,"skillDirectory":45,"forksCount":46,"repositoryHtmlUrl":47,"repositoryHomepageUrl":6,"ownerHtmlUrl":48,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":49,"install":50,"resources":63},"01M71H4MT5Y5Z2KAJM9FM71HAX","displaying-timelines",null,"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\u002Fhorizontal timelines, interactive visualizations, real-time updates, and responsive designs with accessibility (WCAG\u002FARIA).","JSGforever\u002Fskillguard","JSGforever","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F85541948?v=4","01M71FQD3E132VMR5F4TAYX3YS","01M71FQD4DYW0XJ4XQ4YQH75Y9",2,"GPL-3.0","https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__ancoleman--displaying-timelines\u002FSKILL.md",[],[18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37],"displaying timelines","audit","for","visualizations","events","responsive","patterns","data","activity","calendar","aria","notifications","logs","updates","when","social","time","project","Charts","feeds","2026-11-10 10:12:30",false,"---\nname: displaying-timelines\ndescription: 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\u002Fhorizontal timelines, interactive visualizations, real-time updates, and responsive designs with accessibility (WCAG\u002FARIA).\n---\n\n# Displaying Timelines & Activity Components\n\n## Purpose\n\nThis 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.\n\n## When to Use\n\nActivate this skill when:\n- Creating activity feeds (social, notifications, audit logs)\n- Displaying timelines (vertical, horizontal, interactive)\n- Building Gantt charts or project schedules\n- Implementing calendar interfaces (month, week, day views)\n- Showing chronological events or historical data\n- Handling real-time activity updates\n- Requiring timestamp formatting (relative, absolute)\n- Ensuring timeline accessibility or responsive behavior\n\n## Quick Decision Framework\n\nSelect component type based on use case:\n\n```\nSocial Activity        → Activity Feed (infinite scroll, reactions)\nSystem Events          → Audit Log (searchable, exportable, precise timestamps)\nUser Notifications     → Notification Feed (read\u002Funread, grouped by date)\nHistorical Events      → Vertical Timeline (milestones, alternating sides)\nProject Planning       → Gantt Chart (dependencies, drag-to-reschedule)\nScheduling             → Calendar Interface (month\u002Fweek\u002Fday views)\nInteractive Roadmap    → Horizontal Timeline (zoom, pan, filter)\n```\n\nFor detailed selection criteria, reference `references\u002Fcomponent-selection.md`.\n\n## Core Implementation Patterns\n\n### Activity Feeds\n\n**Social Feed Pattern:**\n- User avatar + name + action description\n- Relative timestamps (\"2 hours ago\")\n- Reactions and comments\n- Infinite scroll with pagination\n- Real-time updates via WebSocket\n- Reference `references\u002Factivity-feeds.md`\n\n**Notification Feed Pattern:**\n- Grouped by date sections\n- Read\u002Funread states with indicators\n- Mark all as read functionality\n- Filter by notification type\n- Action buttons (view, dismiss)\n- Reference `references\u002Fnotification-feeds.md`\n\n**Audit Log Pattern:**\n- System events with precise timestamps\n- User action tracking\n- Searchable with advanced filters\n- Exportable (CSV, JSON)\n- Security-focused display\n- Reference `references\u002Faudit-logs.md`\n\nExample: `examples\u002Fsocial-activity-feed.tsx`\n\n### Timeline Visualizations\n\n**Vertical Timeline:**\n- Events stacked chronologically\n- Connecting line with marker dots\n- Date markers and event cards\n- Optional alternating sides\n- Best for: Historical events, project milestones\n- Reference `references\u002Fvertical-timelines.md`\n\n**Horizontal Timeline:**\n- Events along horizontal axis\n- Scroll or zoom to navigate\n- Density varies by zoom level\n- Best for: Project timelines, roadmaps\n- Reference `references\u002Fhorizontal-timelines.md`\n\n**Interactive Timeline:**\n- Click events for detail view\n- Filter by category\u002Ftype\n- Zoom in\u002Fout controls\n- Pan and scroll navigation\n- Best for: Data exploration, rich interactivity\n- Reference `references\u002Finteractive-timelines.md`\n\nExample: `examples\u002Fmilestone-timeline.tsx`\n\n### Gantt Charts\n\n**Project Planning Features:**\n- Tasks as horizontal bars\n- Dependencies with arrows\n- Critical path highlighting\n- Drag to reschedule\n- Progress indicators\n- Milestone markers (diamonds)\n- Resource allocation\n- Today marker line\n- Zoom levels (day\u002Fweek\u002Fmonth\u002Fyear)\n\nTo generate Gantt chart data:\n```bash\npython scripts\u002Fgenerate_gantt_data.py --tasks 50 --dependencies auto\n```\n\nReference `references\u002Fgantt-patterns.md` for implementation details.\n\nExample: `examples\u002Fproject-gantt.tsx`\n\n### Calendar Interfaces\n\n**Month View:**\n- Traditional calendar grid\n- Events in date cells\n- Click to create\u002Fedit\n- Color-coded categories\n- Multi-calendar overlay\n\n**Week View:**\n- Time slots (hourly)\n- Events as draggable blocks\n- Resize to change duration\n- Multiple calendars overlay\n\n**Day\u002FAgenda View:**\n- Detailed daily schedule\n- List format with time duration\n- Location and attendees\n- Scrollable timeline\n\nReference `references\u002Fcalendar-patterns.md` for all views.\n\nExample: `examples\u002Fcalendar-scheduler.tsx`\n\n## Timestamp Formatting\n\nEssential timestamp patterns:\n\n**Relative (Recent Events):**\n- \"Just now\" (\u003C1 min)\n- \"5 minutes ago\"\n- \"3 hours ago\"\n- \"Yesterday at 3:42 PM\"\n\n**Absolute (Older Events):**\n- \"Jan 15, 2025\"\n- \"January 15, 2025 at 3:42 PM\"\n- ISO 8601 for APIs\n\n**Implementation Considerations:**\n- Timezone handling (display user's local time)\n- Locale-aware formatting\n- Hover for precise timestamp\n- Auto-update relative times\n\nTo format timestamps consistently:\n```bash\nnode scripts\u002Fformat_timestamps.js --locale en-US --timezone auto\n```\n\nReference `references\u002Ftimestamp-formatting.md` for complete patterns.\n\n## Real-Time Updates\n\n**Live Activity Feed:**\n- WebSocket or SSE for new events\n- Smooth insertion animation\n- \"X new items\" notification banner\n- Click to load new items\n- Optimistic updates for user actions\n\n**Implementation Pattern:**\n1. Show user action immediately\n2. Update timestamp to \"Just now\"\n3. Send to server in background\n4. Rollback if error occurs\n\nReference `references\u002Freal-time-updates.md` for WebSocket patterns.\n\nExample: `examples\u002Frealtime-activity.tsx`\n\n## Performance Optimization\n\nCritical performance thresholds:\n\n```\n\u003C100 events       → Client-side rendering, no virtualization\n100-1,000 events  → Virtual scrolling recommended\n1,000+ events     → Virtual scrolling + server pagination\nReal-time         → Debounce updates, batch insertions\n```\n\n**Optimization Strategies:**\n- Memoize timeline item components\n- Lazy load event details\n- Virtual scrolling for long timelines\n- Debounce real-time updates (batch every 500ms)\n- Optimize timestamp calculations\n\nTo benchmark performance:\n```bash\nnode scripts\u002Fbenchmark_timeline.js --events 10000\n```\n\nReference `references\u002Fperformance-optimization.md` for details.\n\n## Accessibility Requirements\n\nEssential WCAG compliance:\n\n**Semantic HTML:**\n- Use `\u003Col>` or `\u003Cul>` for timelines\n- Proper heading hierarchy\n- Semantic time elements\n\n**ARIA Patterns:**\n- `role=\"feed\"` for activity feeds\n- `role=\"article\"` for timeline items\n- `aria-label` for timestamps\n- `aria-busy` during loading\n\n**Keyboard Navigation:**\n- Tab through interactive items\n- Arrow keys for timeline navigation\n- Enter\u002FSpace to expand items\n- Skip to latest\u002Foldest controls\n\n**Screen Reader Support:**\n- Announce new items in feeds\n- Descriptive timestamp labels\n- Progress updates for Gantt charts\n\nTo validate accessibility:\n```bash\nnode scripts\u002Fvalidate_timeline_accessibility.js\n```\n\nReference `references\u002Faccessibility-patterns.md` for complete requirements.\n\n## Responsive Design\n\nThree proven strategies:\n\n**1. Stack Vertically (Mobile)**\n- Convert horizontal to vertical\n- Maintain chronological order\n- Adjust spacing and font sizes\n\n**2. Simplify Display**\n- Show essential info only\n- Expand for details\n- Reduce visual complexity\n\n**3. Horizontal Scroll**\n- Keep layout intact\n- Enable touch scrolling\n- Add scroll indicators\n\nReference `references\u002Fresponsive-strategies.md` for implementations.\n\nExample: `examples\u002Fresponsive-timeline.tsx`\n\n## Library Recommendations\n\n### Timeline: react-chrono (Flexible)\n\nBest for timeline visualizations with rich content:\n- Horizontal, vertical, alternating layouts\n- Image and video support\n- Custom item rendering\n- TypeScript support\n- Responsive out of the box\n\n```bash\nnpm install react-chrono\n```\n\nSee `examples\u002Freact-chrono-timeline.tsx` for setup.\n\n**Alternative: react-vertical-timeline-component**\n- Simple, clean vertical timelines\n- Lightweight (~10KB)\n- Icon support\n- Good for basic timelines\n\n### Gantt Charts: SVAR React Gantt\n\nBest for project management:\n- Modern, dependency-free\n- Drag-and-drop tasks\n- Dependencies and milestones\n- Customizable appearance\n- TypeScript ready\n\n```bash\nnpm install @svar\u002Fgantt\n```\n\n**Enterprise Alternative: Bryntum Gantt**\n- Feature-complete solution\n- Commercial license required\n- Handles complex projects\n- Advanced resource management\n\n### Calendar: react-big-calendar\n\nBest for scheduling interfaces:\n- Month, week, day, agenda views\n- Drag-and-drop events\n- Customizable styling\n- Large community support\n\n```bash\nnpm install react-big-calendar\n```\n\n**Alternative: FullCalendar**\n- Premium features available\n- Excellent documentation\n- Multiple framework support\n\nFor detailed comparison, reference `references\u002Flibrary-comparison.md`.\n\n## Design Token Integration\n\nTimelines use the design-tokens skill for consistent theming:\n\n**Timeline-Specific Tokens:**\n- `--timeline-line-color` - Connecting line color\n- `--timeline-dot-color` - Event marker color\n- `--timeline-dot-active-color` - Current\u002Factive event\n- `--event-card-bg` - Event card background\n- `--timestamp-color` - Timestamp text\n\n**Standard Token Categories:**\n- Color tokens for backgrounds and states\n- Spacing tokens for gaps and padding\n- Typography tokens for text hierarchy\n- Shadow tokens for card elevation\n- Motion tokens for animations\n\nSupports light, dark, high-contrast, and custom themes.\nReference the design-tokens skill for theme switching.\n\n## Working Examples\n\nStart with the example matching the requirements:\n\n```\nsocial-activity-feed.tsx       # Social feed with reactions\nnotification-center.tsx        # Notification system with filters\naudit-log-viewer.tsx           # System audit log\nmilestone-timeline.tsx         # Vertical timeline with milestones\nproject-gantt.tsx              # Gantt chart with dependencies\ncalendar-scheduler.tsx         # Full calendar with all views\nrealtime-activity.tsx          # Live updates via WebSocket\nresponsive-timeline.tsx        # Mobile-optimized timeline\n```\n\n## Testing Tools\n\nGenerate mock timeline data:\n```bash\npython scripts\u002Fgenerate_timeline_data.py --events 500 --realtime\n```\n\nTest real-time updates:\n```bash\nnode scripts\u002Fsimulate_realtime.js --rate 5\u002Fsec --duration 60s\n```\n\nValidate accessibility:\n```bash\nnode scripts\u002Fvalidate_timeline_accessibility.js\n```\n\nBenchmark performance:\n```bash\nnode scripts\u002Fbenchmark_timeline.js --events 10000 --virtual\n```\n\n## Next Steps\n\n1. Identify the timeline use case (activity, events, schedule)\n2. Select the appropriate component type\n3. Choose a library or build custom with tokens\n4. Start with the matching example file\n5. Implement core functionality\n6. Add real-time updates if needed\n7. Test performance with large datasets\n8. Validate accessibility compliance\n9. Apply responsive strategy for mobile\n","# Displaying Timelines & Activity Components\n\n## Purpose\n\nThis 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.\n\n## When to Use\n\nActivate this skill when:\n- Creating activity feeds (social, notifications, audit logs)\n- Displaying timelines (vertical, horizontal, interactive)\n- Building Gantt charts or project schedules\n- Implementing calendar interfaces (month, week, day views)\n- Showing chronological events or historical data\n- Handling real-time activity updates\n- Requiring timestamp formatting (relative, absolute)\n- Ensuring timeline accessibility or responsive behavior\n\n## Quick Decision Framework\n\nSelect component type based on use case:\n\n```\nSocial Activity        → Activity Feed (infinite scroll, reactions)\nSystem Events          → Audit Log (searchable, exportable, precise timestamps)\nUser Notifications     → Notification Feed (read\u002Funread, grouped by date)\nHistorical Events      → Vertical Timeline (milestones, alternating sides)\nProject Planning       → Gantt Chart (dependencies, drag-to-reschedule)\nScheduling             → Calendar Interface (month\u002Fweek\u002Fday views)\nInteractive Roadmap    → Horizontal Timeline (zoom, pan, filter)\n```\n\nFor detailed selection criteria, reference `references\u002Fcomponent-selection.md`.\n\n## Core Implementation Patterns\n\n### Activity Feeds\n\n**Social Feed Pattern:**\n- User avatar + name + action description\n- Relative timestamps (\"2 hours ago\")\n- Reactions and comments\n- Infinite scroll with pagination\n- Real-time updates via WebSocket\n- Reference `references\u002Factivity-feeds.md`\n\n**Notification Feed Pattern:**\n- Grouped by date sections\n- Read\u002Funread states with indicators\n- Mark all as read functionality\n- Filter by notification type\n- Action buttons (view, dismiss)\n- Reference `references\u002Fnotification-feeds.md`\n\n**Audit Log Pattern:**\n- System events with precise timestamps\n- User action tracking\n- Searchable with advanced filters\n- Exportable (CSV, JSON)\n- Security-focused display\n- Reference `references\u002Faudit-logs.md`\n\nExample: `examples\u002Fsocial-activity-feed.tsx`\n\n### Timeline Visualizations\n\n**Vertical Timeline:**\n- Events stacked chronologically\n- Connecting line with marker dots\n- Date markers and event cards\n- Optional alternating sides\n- Best for: Historical events, project milestones\n- Reference `references\u002Fvertical-timelines.md`\n\n**Horizontal Timeline:**\n- Events along horizontal axis\n- Scroll or zoom to navigate\n- Density varies by zoom level\n- Best for: Project timelines, roadmaps\n- Reference `references\u002Fhorizontal-timelines.md`\n\n**Interactive Timeline:**\n- Click events for detail view\n- Filter by category\u002Ftype\n- Zoom in\u002Fout controls\n- Pan and scroll navigation\n- Best for: Data exploration, rich interactivity\n- Reference `references\u002Finteractive-timelines.md`\n\nExample: `examples\u002Fmilestone-timeline.tsx`\n\n### Gantt Charts\n\n**Project Planning Features:**\n- Tasks as horizontal bars\n- Dependencies with arrows\n- Critical path highlighting\n- Drag to reschedule\n- Progress indicators\n- Milestone markers (diamonds)\n- Resource allocation\n- Today marker line\n- Zoom levels (day\u002Fweek\u002Fmonth\u002Fyear)\n\nTo generate Gantt chart data:\n```bash\npython scripts\u002Fgenerate_gantt_data.py --tasks 50 --dependencies auto\n```\n\nReference `references\u002Fgantt-patterns.md` for implementation details.\n\nExample: `examples\u002Fproject-gantt.tsx`\n\n### Calendar Interfaces\n\n**Month View:**\n- Traditional calendar grid\n- Events in date cells\n- Click to create\u002Fedit\n- Color-coded categories\n- Multi-calendar overlay\n\n**Week View:**\n- Time slots (hourly)\n- Events as draggable blocks\n- Resize to change duration\n- Multiple calendars overlay\n\n**Day\u002FAgenda View:**\n- Detailed daily schedule\n- List format with time duration\n- Location and attendees\n- Scrollable timeline\n\nReference `references\u002Fcalendar-patterns.md` for all views.\n\nExample: `examples\u002Fcalendar-scheduler.tsx`\n\n## Timestamp Formatting\n\nEssential timestamp patterns:\n\n**Relative (Recent Events):**\n- \"Just now\" (\u003C1 min)\n- \"5 minutes ago\"\n- \"3 hours ago\"\n- \"Yesterday at 3:42 PM\"\n\n**Absolute (Older Events):**\n- \"Jan 15, 2025\"\n- \"January 15, 2025 at 3:42 PM\"\n- ISO 8601 for APIs\n\n**Implementation Considerations:**\n- Timezone handling (display user's local time)\n- Locale-aware formatting\n- Hover for precise timestamp\n- Auto-update relative times\n\nTo format timestamps consistently:\n```bash\nnode scripts\u002Fformat_timestamps.js --locale en-US --timezone auto\n```\n\nReference `references\u002Ftimestamp-formatting.md` for complete patterns.\n\n## Real-Time Updates\n\n**Live Activity Feed:**\n- WebSocket or SSE for new events\n- Smooth insertion animation\n- \"X new items\" notification banner\n- Click to load new items\n- Optimistic updates for user actions\n\n**Implementation Pattern:**\n1. Show user action immediately\n2. Update timestamp to \"Just now\"\n3. Send to server in background\n4. Rollback if error occurs\n\nReference `references\u002Freal-time-updates.md` for WebSocket patterns.\n\nExample: `examples\u002Frealtime-activity.tsx`\n\n## Performance Optimization\n\nCritical performance thresholds:\n\n```\n\u003C100 events       → Client-side rendering, no virtualization\n100-1,000 events  → Virtual scrolling recommended\n1,000+ events     → Virtual scrolling + server pagination\nReal-time         → Debounce updates, batch insertions\n```\n\n**Optimization Strategies:**\n- Memoize timeline item components\n- Lazy load event details\n- Virtual scrolling for long timelines\n- Debounce real-time updates (batch every 500ms)\n- Optimize timestamp calculations\n\nTo benchmark performance:\n```bash\nnode scripts\u002Fbenchmark_timeline.js --events 10000\n```\n\nReference `references\u002Fperformance-optimization.md` for details.\n\n## Accessibility Requirements\n\nEssential WCAG compliance:\n\n**Semantic HTML:**\n- Use `\u003Col>` or `\u003Cul>` for timelines\n- Proper heading hierarchy\n- Semantic time elements\n\n**ARIA Patterns:**\n- `role=\"feed\"` for activity feeds\n- `role=\"article\"` for timeline items\n- `aria-label` for timestamps\n- `aria-busy` during loading\n\n**Keyboard Navigation:**\n- Tab through interactive items\n- Arrow keys for timeline navigation\n- Enter\u002FSpace to expand items\n- Skip to latest\u002Foldest controls\n\n**Screen Reader Support:**\n- Announce new items in feeds\n- Descriptive timestamp labels\n- Progress updates for Gantt charts\n\nTo validate accessibility:\n```bash\nnode scripts\u002Fvalidate_timeline_accessibility.js\n```\n\nReference `references\u002Faccessibility-patterns.md` for complete requirements.\n\n## Responsive Design\n\nThree proven strategies:\n\n**1. Stack Vertically (Mobile)**\n- Convert horizontal to vertical\n- Maintain chronological order\n- Adjust spacing and font sizes\n\n**2. Simplify Display**\n- Show essential info only\n- Expand for details\n- Reduce visual complexity\n\n**3. Horizontal Scroll**\n- Keep layout intact\n- Enable touch scrolling\n- Add scroll indicators\n\nReference `references\u002Fresponsive-strategies.md` for implementations.\n\nExample: `examples\u002Fresponsive-timeline.tsx`\n\n## Library Recommendations\n\n### Timeline: react-chrono (Flexible)\n\nBest for timeline visualizations with rich content:\n- Horizontal, vertical, alternating layouts\n- Image and video support\n- Custom item rendering\n- TypeScript support\n- Responsive out of the box\n\n```bash\nnpm install react-chrono\n```\n\nSee `examples\u002Freact-chrono-timeline.tsx` for setup.\n\n**Alternative: react-vertical-timeline-component**\n- Simple, clean vertical timelines\n- Lightweight (~10KB)\n- Icon support\n- Good for basic timelines\n\n### Gantt Charts: SVAR React Gantt\n\nBest for project management:\n- Modern, dependency-free\n- Drag-and-drop tasks\n- Dependencies and milestones\n- Customizable appearance\n- TypeScript ready\n\n```bash\nnpm install @svar\u002Fgantt\n```\n\n**Enterprise Alternative: Bryntum Gantt**\n- Feature-complete solution\n- Commercial license required\n- Handles complex projects\n- Advanced resource management\n\n### Calendar: react-big-calendar\n\nBest for scheduling interfaces:\n- Month, week, day, agenda views\n- Drag-and-drop events\n- Customizable styling\n- Large community support\n\n```bash\nnpm install react-big-calendar\n```\n\n**Alternative: FullCalendar**\n- Premium features available\n- Excellent documentation\n- Multiple framework support\n\nFor detailed comparison, reference `references\u002Flibrary-comparison.md`.\n\n## Design Token Integration\n\nTimelines use the design-tokens skill for consistent theming:\n\n**Timeline-Specific Tokens:**\n- `--timeline-line-color` - Connecting line color\n- `--timeline-dot-color` - Event marker color\n- `--timeline-dot-active-color` - Current\u002Factive event\n- `--event-card-bg` - Event card background\n- `--timestamp-color` - Timestamp text\n\n**Standard Token Categories:**\n- Color tokens for backgrounds and states\n- Spacing tokens for gaps and padding\n- Typography tokens for text hierarchy\n- Shadow tokens for card elevation\n- Motion tokens for animations\n\nSupports light, dark, high-contrast, and custom themes.\nReference the design-tokens skill for theme switching.\n\n## Working Examples\n\nStart with the example matching the requirements:\n\n```\nsocial-activity-feed.tsx       # Social feed with reactions\nnotification-center.tsx        # Notification system with filters\naudit-log-viewer.tsx           # System audit log\nmilestone-timeline.tsx         # Vertical timeline with milestones\nproject-gantt.tsx              # Gantt chart with dependencies\ncalendar-scheduler.tsx         # Full calendar with all views\nrealtime-activity.tsx          # Live updates via WebSocket\nresponsive-timeline.tsx        # Mobile-optimized timeline\n```\n\n## Testing Tools\n\nGenerate mock timeline data:\n```bash\npython scripts\u002Fgenerate_timeline_data.py --events 500 --realtime\n```\n\nTest real-time updates:\n```bash\nnode scripts\u002Fsimulate_realtime.js --rate 5\u002Fsec --duration 60s\n```\n\nValidate accessibility:\n```bash\nnode scripts\u002Fvalidate_timeline_accessibility.js\n```\n\nBenchmark performance:\n```bash\nnode scripts\u002Fbenchmark_timeline.js --events 10000 --virtual\n```\n\n## Next Steps\n\n1. Identify the timeline use case (activity, events, schedule)\n2. Select the appropriate component type\n3. Choose a library or build custom with tokens\n4. Start with the matching example file\n5. Implement core functionality\n6. Add real-time updates if needed\n7. Test performance with large datasets\n8. Validate accessibility compliance\n9. Apply responsive strategy for mobile\n",{"name":5,"description":7},"main","f2ec4b3b9133d34eeaf9b38e4b0a97e8e5705a7f","benchmarks\u002Ffinal\u002Fskills\u002Fasset1__ancoleman--displaying-timelines",0,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard","https:\u002F\u002Fgithub.com\u002FJSGforever","2026-08-29 18:27:56",{"source":8,"skillName":5,"commands":51,"prompt":61,"zipAvailable":62},[52,55,58],{"tool":53,"command":54},"npx","npx skills add JSGforever\u002Fskillguard --skill displaying-timelines",{"tool":56,"command":57},"bunx","bunx skills add JSGforever\u002Fskillguard --skill displaying-timelines",{"tool":59,"command":60},"pnpm","pnpm dlx skills add JSGforever\u002Fskillguard --skill displaying-timelines","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__ancoleman--displaying-timelines\u002FSKILL.md",true,[64,70,76,80,84,87,91,95,99,103,107,113,117,121,125,129,133,137,141,145,149,153,157,161,165,169,173,179,182,186,190,194],{"path":65,"resourceType":66,"resourceTypeDesc":67,"sizeBytes":68,"sourceHtmlUrl":69},"assets\u002FREADME.md","ASSET","资产文件",526,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__ancoleman--displaying-timelines\u002Fassets\u002FREADME.md",{"path":71,"resourceType":72,"resourceTypeDesc":73,"sizeBytes":74,"sourceHtmlUrl":75},"examples\u002Faudit-log-viewer.tsx","OTHER","其他",215,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__ancoleman--displaying-timelines\u002Fexamples\u002Faudit-log-viewer.tsx",{"path":77,"resourceType":72,"resourceTypeDesc":73,"sizeBytes":78,"sourceHtmlUrl":79},"examples\u002Fcalendar-scheduler.tsx",211,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__ancoleman--displaying-timelines\u002Fexamples\u002Fcalendar-scheduler.tsx",{"path":81,"resourceType":72,"resourceTypeDesc":73,"sizeBytes":82,"sourceHtmlUrl":83},"examples\u002Fmilestone-timeline.tsx",214,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__ancoleman--displaying-timelines\u002Fexamples\u002Fmilestone-timeline.tsx",{"path":85,"resourceType":72,"resourceTypeDesc":73,"sizeBytes":82,"sourceHtmlUrl":86},"examples\u002Fnotification-center.tsx","https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__ancoleman--displaying-timelines\u002Fexamples\u002Fnotification-center.tsx",{"path":88,"resourceType":72,"resourceTypeDesc":73,"sizeBytes":89,"sourceHtmlUrl":90},"examples\u002Fproject-gantt.tsx",222,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__ancoleman--displaying-timelines\u002Fexamples\u002Fproject-gantt.tsx",{"path":92,"resourceType":72,"resourceTypeDesc":73,"sizeBytes":93,"sourceHtmlUrl":94},"examples\u002Freact-chrono-timeline.tsx",267,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__ancoleman--displaying-timelines\u002Fexamples\u002Freact-chrono-timeline.tsx",{"path":96,"resourceType":72,"resourceTypeDesc":73,"sizeBytes":97,"sourceHtmlUrl":98},"examples\u002Frealtime-activity.tsx",221,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__ancoleman--displaying-timelines\u002Fexamples\u002Frealtime-activity.tsx",{"path":100,"resourceType":72,"resourceTypeDesc":73,"sizeBytes":101,"sourceHtmlUrl":102},"examples\u002Fresponsive-timeline.tsx",230,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__ancoleman--displaying-timelines\u002Fexamples\u002Fresponsive-timeline.tsx",{"path":104,"resourceType":72,"resourceTypeDesc":73,"sizeBytes":105,"sourceHtmlUrl":106},"examples\u002Fsocial-activity-feed.tsx",273,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__ancoleman--displaying-timelines\u002Fexamples\u002Fsocial-activity-feed.tsx",{"path":108,"resourceType":109,"resourceTypeDesc":110,"sizeBytes":111,"sourceHtmlUrl":112},"outputs.yaml","REFERENCE","参考文档",26789,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__ancoleman--displaying-timelines\u002Foutputs.yaml",{"path":114,"resourceType":109,"resourceTypeDesc":110,"sizeBytes":115,"sourceHtmlUrl":116},"references\u002Faccessibility-patterns.md",350,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__ancoleman--displaying-timelines\u002Freferences\u002Faccessibility-patterns.md",{"path":118,"resourceType":109,"resourceTypeDesc":110,"sizeBytes":119,"sourceHtmlUrl":120},"references\u002Factivity-feeds.md",325,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__ancoleman--displaying-timelines\u002Freferences\u002Factivity-feeds.md",{"path":122,"resourceType":109,"resourceTypeDesc":110,"sizeBytes":123,"sourceHtmlUrl":124},"references\u002Faudit-logs.md",309,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__ancoleman--displaying-timelines\u002Freferences\u002Faudit-logs.md",{"path":126,"resourceType":109,"resourceTypeDesc":110,"sizeBytes":127,"sourceHtmlUrl":128},"references\u002Fcalendar-patterns.md",248,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__ancoleman--displaying-timelines\u002Freferences\u002Fcalendar-patterns.md",{"path":130,"resourceType":109,"resourceTypeDesc":110,"sizeBytes":131,"sourceHtmlUrl":132},"references\u002Fcomponent-selection.md",422,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__ancoleman--displaying-timelines\u002Freferences\u002Fcomponent-selection.md",{"path":134,"resourceType":109,"resourceTypeDesc":110,"sizeBytes":135,"sourceHtmlUrl":136},"references\u002Fgantt-patterns.md",316,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__ancoleman--displaying-timelines\u002Freferences\u002Fgantt-patterns.md",{"path":138,"resourceType":109,"resourceTypeDesc":110,"sizeBytes":139,"sourceHtmlUrl":140},"references\u002Fhorizontal-timelines.md",308,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__ancoleman--displaying-timelines\u002Freferences\u002Fhorizontal-timelines.md",{"path":142,"resourceType":109,"resourceTypeDesc":110,"sizeBytes":143,"sourceHtmlUrl":144},"references\u002Finteractive-timelines.md",292,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__ancoleman--displaying-timelines\u002Freferences\u002Finteractive-timelines.md",{"path":146,"resourceType":109,"resourceTypeDesc":110,"sizeBytes":147,"sourceHtmlUrl":148},"references\u002Flibrary-comparison.md",912,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__ancoleman--displaying-timelines\u002Freferences\u002Flibrary-comparison.md",{"path":150,"resourceType":109,"resourceTypeDesc":110,"sizeBytes":151,"sourceHtmlUrl":152},"references\u002Fnotification-feeds.md",338,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__ancoleman--displaying-timelines\u002Freferences\u002Fnotification-feeds.md",{"path":154,"resourceType":109,"resourceTypeDesc":110,"sizeBytes":155,"sourceHtmlUrl":156},"references\u002Fperformance-optimization.md",297,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__ancoleman--displaying-timelines\u002Freferences\u002Fperformance-optimization.md",{"path":158,"resourceType":109,"resourceTypeDesc":110,"sizeBytes":159,"sourceHtmlUrl":160},"references\u002Freal-time-updates.md",311,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__ancoleman--displaying-timelines\u002Freferences\u002Freal-time-updates.md",{"path":162,"resourceType":109,"resourceTypeDesc":110,"sizeBytes":163,"sourceHtmlUrl":164},"references\u002Fresponsive-strategies.md",302,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__ancoleman--displaying-timelines\u002Freferences\u002Fresponsive-strategies.md",{"path":166,"resourceType":109,"resourceTypeDesc":110,"sizeBytes":167,"sourceHtmlUrl":168},"references\u002Ftimestamp-formatting.md",285,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__ancoleman--displaying-timelines\u002Freferences\u002Ftimestamp-formatting.md",{"path":170,"resourceType":109,"resourceTypeDesc":110,"sizeBytes":171,"sourceHtmlUrl":172},"references\u002Fvertical-timelines.md",330,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__ancoleman--displaying-timelines\u002Freferences\u002Fvertical-timelines.md",{"path":174,"resourceType":175,"resourceTypeDesc":176,"sizeBytes":177,"sourceHtmlUrl":178},"scripts\u002Fbenchmark_timeline.js","SCRIPT","脚本",342,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__ancoleman--displaying-timelines\u002Fscripts\u002Fbenchmark_timeline.js",{"path":180,"resourceType":175,"resourceTypeDesc":176,"sizeBytes":171,"sourceHtmlUrl":181},"scripts\u002Fformat_timestamps.js","https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__ancoleman--displaying-timelines\u002Fscripts\u002Fformat_timestamps.js",{"path":183,"resourceType":175,"resourceTypeDesc":176,"sizeBytes":184,"sourceHtmlUrl":185},"scripts\u002Fgenerate_gantt_data.py",404,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__ancoleman--displaying-timelines\u002Fscripts\u002Fgenerate_gantt_data.py",{"path":187,"resourceType":175,"resourceTypeDesc":176,"sizeBytes":188,"sourceHtmlUrl":189},"scripts\u002Fgenerate_timeline_data.py",337,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__ancoleman--displaying-timelines\u002Fscripts\u002Fgenerate_timeline_data.py",{"path":191,"resourceType":175,"resourceTypeDesc":176,"sizeBytes":192,"sourceHtmlUrl":193},"scripts\u002Fsimulate_realtime.js",317,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__ancoleman--displaying-timelines\u002Fscripts\u002Fsimulate_realtime.js",{"path":195,"resourceType":175,"resourceTypeDesc":176,"sizeBytes":119,"sourceHtmlUrl":196},"scripts\u002Fvalidate_timeline_accessibility.js","https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__ancoleman--displaying-timelines\u002Fscripts\u002Fvalidate_timeline_accessibility.js",[198,228,243,268,290,311],{"skillNo":199,"name":200,"nameZh":6,"description":201,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":202,"categories":203,"keywords":209,"publishedAt":38},"01M71HY2SNXBA9Q00WZDTZQ31Z","skillguard-codex-scanner","Hybrid deterministic+LLM agent-skill security scanner. Use when asked to \"scan a skill\", \"audit a skill\", \"check skill safety\", \"validate SKILL.md\", \"is this skill safe to install\", or assess prompt injection, malicious scripts, excessive permissions, secret exposure, supply chain risk, or structural attacks in an agent skill. Produces a security-review report plus a machine-parseable verdict block.","https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fsrc\u002Fskillguard\u002Fstatic_scanner\u002Fskillguard-codex-scanner\u002FSKILL.md",[204],{"categoryNo":205,"categoryName":206,"taxonomyType":207,"taxonomyTypeDesc":208},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[210,211,212,213,214,215,216,217,218,219,220,221,32,222,223,224,225,19,226,227],"scanner","skillguard codex scanner","skillguard","codex","chain","skill security","security-review","review report","structural","secret","prompt injection","security scanner","review","malicious","permissions","exposure","scripts","safe",{"skillNo":229,"name":230,"nameZh":6,"description":231,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":232,"licenseFileUrl":6,"sourceHtmlUrl":233,"categories":234,"keywords":240,"publishedAt":38},"01M71HY0SPKTT3S27BC2HPAC5M","data-exfiltrator","Analyzes data files","MIT","https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Fsmoke-one-skill\u002Fasset1__cisco-ai-defense--data-exfiltrator\u002FSKILL.md",[235],{"categoryNo":236,"categoryName":237,"taxonomyType":238,"taxonomyTypeDesc":239},"01JBSEEDCAT000000000000033","数据分析师","PROFESSION","适用职业",[25,241,242],"data exfiltrator","files",{"skillNo":244,"name":245,"nameZh":6,"description":246,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":247,"categories":248,"keywords":249,"publishedAt":38},"01M71HXVS9EMN44BGDW215FZ72","real-time-collaboration-engine","Build real-time collaborative editing with WebSockets, OT\u002FCRDT conflict resolution, and presence awareness. Implements cursor tracking, optimistic updates, and offline sync. Use for collaborative editors, whiteboards, video editing. Activate on \"real-time collaboration\", \"WebSocket sync\", \"multiplayer editing\", \"CRDT\", \"presence awareness\". NOT for simple chat, request-response APIs, or single-user apps.","https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__curiositech--real-time-collaboration-engine\u002FSKILL.md",[],[34,250,251,252,253,254,255,256,257,258,259,260,261,262,31,263,264,265,266,267],"real time collaboration engine","real time collaboration","collaboration","engine","real time","Video","reliability","video editing","performance","conflict resolution","presence","access","apps","Bash","activate","optimizer","react","streaming",{"skillNo":269,"name":270,"nameZh":6,"description":271,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":272,"categories":273,"keywords":277,"publishedAt":38},"01M71HXP6CTY4KFN0QVMMN0V7J","react-performance-optimizer","Optimize React apps for 60fps performance. Implements memoization, virtualization, code splitting, bundle optimization. Use for slow renders, large lists, bundle bloat. Activate on \"React performance\", \"slow render\", \"useMemo\", \"bundle size\", \"virtualization\". NOT for backend optimization, non-React frameworks, or premature optimization.","https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__curiositech--react-performance-optimizer\u002FSKILL.md",[274],{"categoryNo":275,"categoryName":276,"taxonomyType":207,"taxonomyTypeDesc":208},"01JBSEEDCAT000000000000009","前端开发",[258,278,265,266,279,280,281,282,283,284,34,285,286,262,263,287,264,267,288,289],"react performance optimizer","react performance","performance optimizer","app","nextjs","expert","re","render","2025","code","router","strategies",{"skillNo":291,"name":292,"nameZh":6,"description":293,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":294,"categories":295,"keywords":297,"publishedAt":38},"01M71HXH7QXSQB4QTDZ7SP7YXQ","llm-streaming-response-handler","Build production LLM streaming UIs with Server-Sent Events, real-time token display, cancellation, error recovery. Handles OpenAI\u002FAnthropic\u002FClaude streaming APIs. Use for chatbots, AI assistants, real-time text generation. Activate on \"LLM streaming\", \"SSE\", \"token stream\", \"chat UI\", \"real-time AI\". NOT for batch processing, non-streaming APIs, or WebSocket bidirectional chat.","https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__curiositech--llm-streaming-response-handler\u002FSKILL.md",[296],{"categoryNo":275,"categoryName":276,"taxonomyType":207,"taxonomyTypeDesc":208},[298,267,299,300,301,302,258,34,303,304,305,263,264,265,306,266,307,308,309,310],"llm streaming response handler","handler","error","processing","retry","chat ui","error recovery","critical","batch","display","text","server","read",{"skillNo":312,"name":313,"nameZh":6,"description":314,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":315,"categories":316,"keywords":324,"publishedAt":38},"01M71HXCB0E1YRKYW1Y8T0Y106","github-actions-pipeline-builder","Build production CI\u002FCD pipelines with GitHub Actions. Implements matrix builds, caching, deployments, testing, security scanning. Use for automated testing, deployments, release workflows. Activate on \"GitHub Actions\", \"CI\u002FCD\", \"workflow\", \"deployment pipeline\", \"automated testing\". NOT for Jenkins\u002FCircleCI, manual deployments, or non-GitHub repositories.","https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__curiositech--github-actions-pipeline-builder\u002FSKILL.md",[317,320,323],{"categoryNo":318,"categoryName":319,"taxonomyType":207,"taxonomyTypeDesc":208},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":321,"categoryName":322,"taxonomyType":207,"taxonomyTypeDesc":208},"01JBSEEDCAT000000000000011","运维与部署",{"categoryNo":205,"categoryName":206,"taxonomyType":207,"taxonomyTypeDesc":208},[325,326,327,328,329,330,331,256,283,332,333,334,264,289,335,310,336,337,338,339],"github actions pipeline builder","actions","github actions","pipeline builder","github","builder","pipeline","testing","ci","workflows","run","release","write","edit","git"]