ライブラリを選ぶ
いかなる判断の前に、product-ui §1（テイストジャーナルと優先順位）と§5（どのスキルが何を担当するか）を適用すること。ライブラリ名を指定するジャーナルルールが最優先です。
タスクなしで呼び出された場合は、1行でタスクを尋ねて停止します。
判断順序
上から下に進みます。タスクを完全に解決した最初のステップで停止します。
- 既にインストールされているものは？
package.jsonを読む。リストアップされたライブラリやその競合がすでに仕事を果たしている場合は、それを使用する。より良い選択肢がある場合は1行でフラグを立て、決して無断で依存関係を入れ替えない。理由: 同じ仕事に2つ目のライブラリを入れると、バンドルとコンベンションが2倍になる。 - プラットフォームが完全に解決できるか？ 下の表を確認する。理由: プラットフォームはバンドルコストがなく、アップグレードパスも放棄リスクもない。
- リストにエントリがあるか？ references/catalogue.md を開き、カテゴリを見つけ、Default とマークされたエントリを取得する。メニューではなく、1つのライブラリを推奨する。
- そのエントリはメンテナンスされているか？ ステータス列を確認する。Unmaintained と書かれている場合は決して推奨せず、エントリに記載されている代替品を使用する。
- 何も当てはまらない？ 「このタスクはリストにありません」と伝え、自身の知識から選び、以下の検証をそれに対して実行する。理由: チェックされていないパッケージは、通常、放棄されたコードが混入する経路である。
「完全に解決する」とは、キーボード、フォーカス、スクリーンリーダーの動作を含む、タスクのすべての要件が満たされていることを意味します。1つの要件が満たされない場合は、ステップ3に進みます。
プラットフォーム優先
| タスク | プラットフォームの回答 | ライブラリに移行するタイミング |
|---|---|---|
| モーダル | showModal() 付き <dialog> | 対応ブラウザ全体でアニメーション出口付きのスタックダイアログ、または非モーダルフォーカス管理が必要な場合 |
| ポップオーバー、ドロップダウンパネル、ツールチップ風カード | popover 属性、加えてサポート環境でのCSSアンカー配置 | どこでも衝突反転、またはロービングフォーカスメニューが必要な場合 |
| アコーディオン、ディスクロージャー | <details name> | 制御された状態、または interpolate-size を超えるアニメーション高さが必要な場合 |
| トグルなしのダークモード | prefers-color-scheme, color-scheme, light-dark() | ユーザーが手動でテーマを選択し、それが永続化する必要がある場合 |
| 日付、時刻、月の入力 | <input type="date"> とその仲間 | 範囲、カスタムカレンダー、または一貫した外観が必要な場合 |
| 数値フォーマット、相対時間、複数形、リスト | Intl.NumberFormat, RelativeTimeFormat, PluralRules, ListFormat | 絶対にない。常に Intl を使用する |
| ワンタイムコード、単一フィールド | <input autocomplete="one-time-code" inputmode="numeric"> | 1桁ごとに1つのボックスが必要な場合 |
| 入退場とレイアウトモーション | CSSトランジション、@starting-style、WAAPI、View Transitions | スプリング、ジェスチャー、または中断可能なレイアウトアニメーションが必要な場合 |
| フォームバリデーション | 制約検証 (required, pattern, setCustomValidity) | クロスフィールドまたは非同期ルール、または型付きスキーマが必要な場合 |
| 少数オプションのセレクト | <select> | 検索、マルチセレクト、またはリッチ行が必要な場合 |
| スティッキーヘッダー、スクロールスナップ、遅延リスト | CSS position: sticky, scroll-snap, content-visibility: auto | リストが1,000行以上を保持する場合 |
ペア
| 壊れた状態 | 修正された状態 | 理由 |
|---|---|---|
手書きフォーカストラップ付きの <div> モーダル | <dialog> と showModal() | フォーカストラップ、Esc、不活性背景が無料で付属 |
npm i react-beautiful-dnd | @dnd-kit/react | 前者は非推奨でメンテナンスされていない |
ドロワーに npm i vaul | Base UI Drawer、またはシートとしてスタイルされた <dialog> | vaul自身のREADMEがメンテナンスされていないと述べている |
| モーダルライブラリから構築されたトースト | Base UI Toast | スタッキング、ホバー時の一時停止、スワイプがすでに解決されている |
数字をカウントアップする setInterval | NumberFlow | 桁が正しいレイアウトと動きの縮減で回転する |
5,000行の <tr> を一度にレンダリング | TanStack Table 下の TanStack Virtual、またはリスト用 Virtuoso | レンダリングコストは行数ではなくビューポートに比例する |
new Intl.NumberFormat を通過パッケージに置き換え | Intl.NumberFormat | ロケールルールはブラウザに組み込まれている |
推奨前に検証する
リストに載っているか否かに関わらず、すべてのパッケージに対してこれを実行します。カタログのステータスはセッションより古い可能性があります。
npm view <pkg> time.modified license version
- Maintained: 最終公開から12ヶ月以内、またはリリース公開済みで6ヶ月以内にリポジトリへのプッシュがある。
- Slow: 機能完成済み、12〜24ヶ月間公開なし、リポジトリはまだイシューに対応している。使用可能。Slowと伝える。
- Unmaintained: アーカイブ済み、それを示すREADME、または24ヶ月以上公開がなく、未解決の破損がある。決して推奨しない。
- ライセンスを読む。MIT、ISC、BSD、Apache-2.0以外のもの（MPL-2.0とAGPLは注釈が必要）は報告する。
- プロジェクトのReactバージョンに対するピア依存関係を確認する。
回答フォーマット
1つのブロックで、メニューはなし:
Base UI Toast トースト用。スタッキング、ホバー時の一時停止、スワイプアウェイ。アクションが必要なものには非対応。MITライセンス、メンテナンス済み。
npm i @base-ui/react。
常に以下を提供する: 何のためのものか、使用すべきでない場合、ライセンス、確認した日付のステータス。
終了前に
package.jsonを読み、選択がインストール済みライブラリと重複していないこと。- プラットフォームの回答を確認し、スキップした場合はその理由が1つの節であること。
- 選択に対して
npm viewを実行し、回答のステータスがカタログのものではなく今日のものであること。 - Unmaintained とマークされたものは推奨されていないこと。