teeeen.lab/ component-lab
Component Lab · v0.5

作って終わりにせず、
次の開発で使える形にしておく実験場。

UI コンポーネント・プロダクト構成要素・AI Agent 向け UI・設計パターンを、 実際の開発で使える形でまとめています。 各コンポーネントは Preview / Code / Props / Notes の 4 面で構成しています。

Button
role 名でバリアント命名、isLoading 中もラベルを残す。aria-busy 連携。
UI
runningqueuedokfailed
Status Badge
success / warning / error / info / primary / neutral / outline の 7 variant、size 2 種、icon スロット。
UI
preview content
Tabs
ArrowLeft/Right/Home/End キーナビ、role="tablist" + aria-selected + aria-controls 完備。
UI
Saved to draft⌘Z
Toast
success / error / info / warning の 4 type、aria-live="polite"、スタッキング対応。
UI
削除しますか?
この操作は取り消せません
Modal
Focus trap (Tab/Shift+Tab 循環)、Escape 閉じ、background scroll lock、trigger への focus 復帰。
UI
you@example.com
↳ format invalid
Form Field
error 時に自動で aria-invalid + aria-describedby を error メッセージ ID に配線。
UI
結果がありません
条件を変えてもう一度お試しください
Empty State
title 必須、description / icon / action は任意。「何もない」を中立に伝える。
UI
商品名で検索…⌘K
Command Palette
⌘K / Ctrl+K でグローバル起動、↑↓ + Enter のキーボード操作、role="listbox" + aria-selected。
Product
MRR
¥1,240k
↑ +12.4%
Active
382
↑ +24
Projects Summary (KPI)
1 枚カードに 4 セクション (今月の削減工数・完了セッション・確定決定事項・14日推移グラフ) を 1px 罫線で分割。
Product
たまご 10個
オオゼキ¥198
業務スーパー¥218
ライフ¥248
Price Comparison
同一商品 × 複数店舗の価格 + 距離 + 鮮度を 1 リストに集約。マイストアフィルタ + 価格/距離ソート切替。
Product
plandiffverify
Phase Stepper
収束 → 確認 → 生成 → 検証 の 4 フェーズ、完了 / 現在 / 未到達の 3 状態、戻り操作の制約付き。
Product
ABCD
Agent Pipeline View
Agent 間のフローと現在のステップを可視化（パターンのみ・本実装は未）。
AI
claude-sonnet-4 · 1.2s● done
議事録から14件の未決事項を抽出しました。
Prompt Result Card
LLM 呼び出しのモデル名・実行時間・出力を 1 カードに集約（パターン）。
AI
承認が必要です
schedule.swap(slot_3, slot_5)
Decision Card (HITL)
確定 / 仮置きのトグル、編集 textarea、依存表示、質問への戻し。Agent 出力を人間が「触れる」UI。
AI
- spec.coverage = 0.74
+ spec.coverage = 0.86
Diff Viewer
Agent の変更提案を before/after で表示（パターン）。
AI
schema valid
constraints
spec coverage > 80%
security review
Verification Card
Agent 出力が条件を満たすかを一覧でチェック（パターン）。
AI
00.12mainplan
00.34sub.adiff
00.51verifyok
Trace Log Viewer
trace_id で Agent 横断のログを時系列に並べる（パターン）。
AI
Next.jsHono APIClaudePostgresCloud Run
Architecture Diagram
スタックの関係性を React + SVG で diff 可能に書く（パターン）。
Arch
Theme Toggle
ライト / ダーク / 自動 の 3 値ラジオ。useTheme フックで永続化、aria-pressed 連携。
Arch