---

name: format-ui-display description: UI表示用の日付、enum値をフォーマットします。日本語形式の日付、相対日付が必要な場合に使用します。

UI表示フォーマットスキル

データを適切な形式でUI表示するためのスキルです。日付フォーマットとenumラベル変換を提供します。

いつ使うか

このスキルは以下の場合に使用してください：

• テーブル・詳細画面で日付を表示する
• 相対的な日付表示（「5分前」「3日前」など）を実装する
• enum値（権限、ステータス、カテゴリ）を日本語ラベルに変換する
• Badge やその他のUIコンポーネントでラベル表示する

クイックスタート

日付フォーマット

Copyimport { formatDate } from '@repo/utils/format-date'

// 一覧画面
export function UsersTable({ users }: { users: User[] }) {
  return (
    <TableRow>
      <TableCell>{formatDate(user.createdAt, 'YYYY年M月D日')}</TableCell>
    </TableRow>
  )
}

// 詳細画面
export function UserDetail({ user }: { user: User }) {
  return (
    <div>
      <Label>作成日</Label>
      <p>{formatDate(user.createdAt, 'YYYY年M月D日 HH:mm')}</p>
    </div>
  )
}

詳細パターン

詳細な実装パターンについては references を参照してください：

• date-formatting.md - 日付フォーマットの詳細オプション、相対表示、カスタムフォーマット