Stats
Actions
Tags
Timelineコンポーネント（smarthr-ui）の使い方を説明。操作履歴や更新履歴を時系列表示するための実装ガイド。
How this skill is triggered — by the user, by Claude, or both
Slash command
/smarthr-design-system:smarthr-ui-timelineThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
情報を時間の流れに沿って整理・表示するためのコンポーネントです。操作履歴や更新履歴を時系列で見せるときに使います。
情報を時間の流れに沿って整理・表示するためのコンポーネントです。操作履歴や更新履歴を時系列で見せるときに使います。
import { TimelineItem, Timeline } from 'smarthr-ui'
| Props 名 | 型 | デフォルト値 | 必須 | 説明 |
|---|---|---|---|---|
| datetime | string | Date | - | ✓ | - |
| dateLabel | string | - | - | 日付の代わりに表示するテキスト |
| timeFormat | "none" | "HH:mm:ss" | "HH:mm" | HH:mm | - | 時刻のフォーマット |
| dateSuffixArea | ReactNode | - | - | 日付のサフィックス領域 |
| sideActionArea | ReactNode | - | - | サイドアクション領域 |
| current | boolean | - | - | 現在のアイテムかどうか |
（固有 Props なし）
Timeline に直接関連する eslint-plugin-smarthr のルールは現時点ではありません。
使い方チェックリスト（Layer 3）は設定されていません。
npx claudepluginhub kufu/smarthr-design-system --plugin smarthr-design-system【非推奨】TimePickerコンポーネントの使用方法を説明します。代わりにInput[type="time"]を使用してください。
Compiles key events into a structured, scannable timeline (table or numbered list) for graphic production, digital interactives, sidebar fact boxes, and editorial planning.
Create HTML timelines and roadmaps with status pills, dependency arrows, and milestone markers — for quarterly planning, project retrospectives, release histories, incident timelines, sprint visualizations. Use whenever the user wants to visualize a sequence of events over time, a plan, a roadmap, a release schedule, or look back at how a project unfolded. Reach for this whenever the explanation has a clear time axis, even if the user doesn't say "timeline".