Mise UI
自己説明型UI。すべてのコンポーネントは、その形状の背後にある原則と、使用すべきでない場合のルールを備えています。コンポーネントをインストールまたは適応する際は、両方を保持してください。
使用するタイミング
- プロジェクトがReact + Tailwind CSS v4で、shadcnスタイルの
components.jsonを使用している場合 - 画面にAIのステップ（モデルの待機、ストリームテキスト、ツール呼び出し、思考、音声入力）がある場合
- デザインレビューで根拠を引用できるベースキット（ボタン、ダイアログ、セレクトなど）が必要な場合
インストール
- テーマ（プロジェクトごとに一度）:
npx shadcn@latest add https://miseui.junsu4621.workers.dev/r/theme.json - 各コンポーネント:
npx shadcn@latest add https://miseui.junsu4621.workers.dev/r/<name>.json（依存関係は自動的にインストールされます） - コンポーネントを初めて使用する前に
references/<name>.mdを読んでください
ルール
prefers-reduced-motionを尊重してください。すべてのMiseコンポーネントはすでに対応しています。編集時もそれを維持してください。- 画面ごとに1つの
miseアクセントのみ使用します。これは主要なアクションまたはアクティブなAIアクティビティを示し、装飾には使用しません。 - 待機に名前を付けます。約1秒を超えるモデル呼び出しには、何が起こっているかを示すラベルを持つ
thinking-indicatorを使用します。 - ダークパターン禁止: 偽のカウントダウン、隠れたキャンセル、事前チェックされた同意は使用しません。各リファレンスの Don't 行は拘束力があります。
data-slot属性を保持してください。テストとスタイリングフックがこれに依存しています。
症状 → コンポーネント
| このような状況で | 使用するコンポーネント |
|---|---|
| ユーザーが約1秒を超えるモデル呼び出しを待つ | thinking-indicator |
| トークンが1つずつ到着し、凍結したブロックではなくタイピングとして読まれるべき場合 | streaming-text |
| エージェントがツールを実行し、ユーザーが結果を信頼できるようにする必要がある場合 | tool-call-card |
| ユーザーが確認したいかもしれないが、読むことを強制されるべきではないマルチステップ計画 | reasoning-steps |
| マイクがオンラインで、ユーザーがそれを認識する必要がある場合 | voice-wave |
| コンテンツが読み込み中で、最終的なレイアウトがわかっている場合 | skeleton |
| 1つのアクションが画面の他の部分よりも重要な場合 | button |
| 1か所にオプションが多すぎる場合 | select |
| 1つのトリガーの背後にある短いアクションリスト | dropdown-menu |
| ユーザーが他のことをする前に決定する必要がある場合 | dialog |
| 一部のユーザーだけが必要とする追加の詳細 | tooltip |
| 関連するコントロールが一緒に属する場合 | card |
AI状態
- Reasoning Steps (
reasoning-steps): モデルのステップの折りたたまれたタイムライン。ヘッダーが現在のステップを、本文がすべてのステップを表示します。 — プログレッシブディスクロージャー · リファレンス - Streaming Text (
streaming-text): 到着するテキストを読む速度で1文字ずつ表示し、次の単語が着地する場所を示すキャレットがあります。 — 知覚されるレイテンシ · リファレンス - Thinking Indicator (
thinking-indicator): 3つの呼吸するドットと、モデルが何に取り組んでいるかをユーザーに伝えるライブラベル。 — システム状態の可視性 · 労働錯覚 · リファレンス - Tool Call Card (
tool-call-card): 1つのツール呼び出しの折りたたみ可能な記録: 名前、ステータス、期間、必要に応じて正確な入力と出力。 — 透明性が信頼を築く · リファレンス - Voice Wave (
voice-wave): マイクのレベルに応じて上昇するバー。ユーザーは自分が聞かれていること、そして聞かれていないことを確認できます。 — システム状態の可視性 · リファレンス
コアコンポーネント
- Badge (
badge): 5つのバリアントを持つ小さなステータスチップ。暖色系のmiseバリアントは、目立たせる必要がある1つのアイテムのために予約されています。 — フォン・レストルフ効果 · リファレンス - Button (
button): 150ミリ秒の沈み込みと2%のプレスダウン効果を持つ押下ターゲット。クリックが認識されたように感じられます。 — ドハティ閾値 · リファレンス - Card (
card): ヘッダー、コンテンツ、フッターのスロットを持つ枠線付きの面。誰かがテキストを読む前に、1つの領域として認識されます。 — 共通領域の法則 · リファレンス - Checkbox (
checkbox): 押下から150ミリ秒以内に塗りつぶされチェックマークを描画し、aria-checkedを通じて変更を通知する正方形のトグル。 — 即時フィードバック · リファレンス - Dialog (
dialog): 他のすべてを暗くし、ユーザーが1つの質問に答えるまでフォーカスを保持するモーダル面。 — 注意の漏斗 · リファレンス - Dropdown Menu (
dropdown-menu): ボタンから開き、選択時に閉じるアクションのコンパクトメニュー。矢印キーナビゲーションと破壊的バリアントを備えています。 — ヒックの法則 · リファレンス - Input (
input): ボタンに合わせて高さ36pxの単一行テキストフィールド。無効状態を境界線とリングに移動します。 — フィッツの法則 · リファレンス - Label (
label): コントロールにバインドされたキャプション。クリックするとフィールドにフォーカスし、フィールドが無効のときは薄暗くなります。 — 近接の法則 · リファレンス - Popover (
popover): 開いたコントロールに固定された小さなフローティングパネル。フルダイアログを必要としないフォームや詳細に使用します。 — 空間記憶 · リファレンス - Select (
select): リストから1つを選択するためのドロップダウン。プレースホルダー、グループ、選択行のチェック、完全なキーボードサポートを備えています。 — デフォルト効果 · リファレンス - Skeleton (
skeleton): 読み込み中のコンテンツの形をしたパルス発光プレースホルダー。スピナーよりも待ち時間が短く感じられます。 — 知覚されるパフォーマンス · リファレンス - Switch (
switch): サムトラベルが16px、150ミリ秒でスライドするオン/オフコントロール。模倣する物理的なトグルを反映しています。 — アフォーダンス · リファレンス - Tabs (
tabs): 1つのパネルを別のパネルにその場で切り替えるセグメント化コントロール。関連するビューが画面上の1つのスポットを共有します。 — チャンキング · リファレンス - Textarea (
textarea): 高さ64pxから始まり、コンテンツに応じて成長する複数行テキストフィールド。回答がスクロールバーの後ろに隠れることはありません。 — チャンキング · リファレンス - Tooltip (
tooltip): ホバーまたはフォーカス時に遅延なく表示され、ポインターと共に消える1行のヒント。画面スペースを必要としない詳細に使用します。 — プログレッシブディスクロージャー · リファレンス