update-ui-inventory

UI インベントリ更新スキル

有効化するタイミング

次の場合にこのスキルを有効化してください。

• エンジンに新しい UI コンポーネントを追加するとき
• コンポーネントを削除または非推奨にするとき
• component-inventory CI チェックが失敗したとき
• ドキュメントが実際のコンポーネント数と一致しているか確認するとき
• コンポーネントを追加／削除する PR をマージした後

関連ファイル

ファイル	目的
.github/component-inventory.json	コンポーネント数の正式な情報源
docs/design-system/COMPONENT-REFERENCE.md	ユーザー向けコンポーネントドキュメント
libs/engine/src/lib/ui/components/	実際のコンポーネントソースファイル

インベントリの構造

インベントリでは、13 のコンポーネントカテゴリを追跡します。

{
	"components": {
		"total": 186,
		"breakdown": {
			"primitives": 45,
			"nature": 64,
			"ui": 29,
			"typography": 11,
			"chrome": 6,
			"terrarium": 7,
			"gallery": 4,
			"charts": 4,
			"content": 4,
			"states": 4,
			"forms": 3,
			"indicators": 3,
			"icons": 2
		}
	}
}

手順

1. 各カテゴリのコンポーネント数を数える

実際の数を確認するには、次のコマンドを実行します。

# Count .svelte files in each category
for dir in primitives nature ui typography chrome terrarium gallery charts content states forms indicators icons; do
  count=$(find libs/engine/src/lib/ui/components/$dir -name "*.svelte" 2>/dev/null | wc -l | tr -d ' ')
  echo "$dir: $count"
done

2. インベントリと比較する

現在のインベントリを読み込み、比較します。

cat .github/component-inventory.json

3. 相違点を特定する

次の点を確認します。

• 新しいコンポーネント：ファイルは存在するものの、数に含まれていない
• 削除されたコンポーネント：すでに存在しないファイルが数に含まれている
• 移動されたコンポーネント：コンポーネントが別のカテゴリに移動している

4. インベントリ JSON を更新する

.github/component-inventory.json を編集します。

{
  "lastUpdated": "YYYY-MM-DD",
  "lastAuditedBy": "claude/<context>",
  "components": {
    "total": <sum of all categories>,
    "breakdown": {
      "<category>": <new count>,
      ...
    }
  }
}

5. コンポーネントリファレンスを更新する

docs/design-system/COMPONENT-REFERENCE.md を編集します。

1. 概要行を更新する：

   > 186 components organized by category...
   

2. クイックリンクを更新する（アンカーリンクには数が含まれます）：

   - [ui/ - Core UI Components](#ui---core-ui-components-29)
   

3. セクション見出しを更新する：

   ## ui/ - Core UI Components (29)
   

4. 該当するテーブルに新しいコンポーネントを追加する（重要な場合）： Glass コンポーネントの場合は、「Other Glass Components」テーブルに追加します。

   | `GlassNewComponent` | Description of what it does |
   

5. 下部の最終更新日を更新する：

   _Last updated: YYYY-MM-DD_
   

6. 変更をコミットする

git add .github/component-inventory.json docs/design-system/COMPONENT-REFERENCE.md
git commit -m "docs: update component inventory

- Update <category> count: X -> Y
- Add <ComponentName> to COMPONENT-REFERENCE.md
- Bump total: A -> B"

クイックリファレンス：コンポーネント数を数えるコマンド

# Single category count
find libs/engine/src/lib/ui/components/ui -name "*.svelte" | wc -l

# List all files in a category (to identify new ones)
ls libs/engine/src/lib/ui/components/ui/*.svelte

# Find Glass components specifically
ls libs/engine/src/lib/ui/components/ui/ | grep -i glass

# Total across all categories
find libs/engine/src/lib/ui/components -name "*.svelte" | wc -l

ドキュメント作成ガイドライン

COMPONENT-REFERENCE.md にコンポーネントを追加するときは、次のガイドラインに従ってください。

Glass コンポーネント（必ず記載）

Glass コンポーネントは Grove のビジュアル言語を定義します。「Other Glass Components」テーブルに、明確な説明を添えて必ず追加してください。

標準コンポーネント

汎用的なラッパーの場合は、「Standard Components」テーブルに追加してください。

特化型コンポーネント

カテゴリ固有のコンポーネント（nature、charts など）は、重要である場合、またはドキュメントに記載する価値のある独自の props がある場合に、該当するセクションに追加してください。

例：新しい Glass コンポーネントの追加

GlassStatusWidget.svelte を追加した後：

1. 数を確認すると、ui が 28 から 29 になっている

2. インベントリを更新する：

   "ui": 29,
   "total": 186,
   "lastUpdated": "2026-01-21"
   

3. COMPONENT-REFERENCE.md を更新する：

   • 3 行目：> 186 components...
   • 13 行目：- [ui/ - Core UI Components](#ui---core-ui-components-29)
   • 74 行目：## ui/ - Core UI Components (29)
   • 209 行目の後に、次の行をテーブルに追加する：

     | `GlassStatusWidget` | 自動更新機能付きのリアルタイムステータスウィジェット |
     

   • 最終行：*Last updated: 2026-01-21*

CI との連携

.github/workflows/component-inventory.yml ワークフローは、次の処理を行います。

• libs/engine/src/lib/ui/components/** に変更を加える PR で実行される
• 実際のコンポーネント数とインベントリを照合する
• 不一致がある場合は失敗する
• 相違点を示す分かりやすい出力を提供する

CI が失敗した場合は、このスキルを実行して不一致を修正してください。

チェックリスト

完了する前に、次の項目を確認してください。

• すべてのカテゴリの数が実際のファイル数と一致している
• 合計がすべてのカテゴリの合計と一致している
• lastUpdated の日付が今日になっている
• COMPONENT-REFERENCE.md の数がインベントリと一致している
• 重要な新しいコンポーネントが適切なドキュメントのテーブルに追加されている
• セクション見出しを変更した場合、クイックリンクのアンカーが更新されている
• 変更が内容の分かるメッセージとともにコミットされている