Skill: timeline

Component HTML/CSS/JS thuần (không framework) — danh sách mốc dọc, mỗi mốc có ngày + tiêu đề + nguồn, cuộn tới đâu hiện tới đó.

WHAT

Purpose và context

• Purpose: đưa vào trang đích một timeline dọc MỘT trục thời gian (mốc ngày + tiêu đề + nguồn), cuộn-hiện dần, responsive mobile→desktop ở 768px, dữ liệu thật.
• Trigger (when to use):
  • Trang cần liệt kê MỐC THEO THỜI GIAN: changelog, lịch sử dự án, roadmap, writing archive, timeline sự kiện.
  • User nói "làm timeline", "dòng thời gian", "lịch sử dạng timeline".
• Non-goals: KHÔNG dùng cho sơ đồ quan hệ/luồng (đó là /diagram) hay biểu đồ dữ liệu số (đó là dataviz) — đây chỉ là MỘT trục thời gian tuyến tính.

Mental model

dữ liệu mốc thật (API/markdown/CMS) → <li class="timeline__item"> (time + a + small) → IntersectionObserver gắn timeline__item--in → CSS transition hiện dần. Asset mẫu là điểm xuất phát để ADAPT, không phải bản copy.