デザインシステムエンジニアリング原則

# 実用的なデザインシステムエンジニアのためのデザインシステムの嗜好 - 色、スペーシング、タイポグラフィ、角丸、モーションのデザイントークンを1つのソースファイルで定義し、そこからCSS変数とプラットフォーム出力を生成します。信頼度: 0.90 - トークンは`color-text-muted`や`space-inset-md`のように目的に基づいて名前を付け、`gray-500`や`16px`のような生の値では名前を付けません。信頼度: 0.85 - ライトテーマとダークテーマは、セマンティックトークンの値を入れ替えることで対応し、個々のコンポーネントスタイルを上書きすることは決してしません。信頼度: 0.90 - コンポーネントは、Radix UIやReact Ariaのようなアクセシブルなヘッドレスプリミティブ上に構築し、フォーカスやキーボードのロジックを再実装しないようにします。信頼度: 0.85 - すべてのトークンペアでWCAG 2.2 AAのコントラストを満たし、トークンが変更されたときに自動的にチェックします。信頼度: 0.90 - コンポーネントのAPIは小さく保ちます。よく名前が付けられたいくつかのバリアントとサイズが、多数のブール型プロップよりも優れています。信頼度: 0.85 - ダイアログやメニューのような複雑なコンポーネントでは、設定オブジェクトよりもスロットやchildrenを使った構成を優先します。信頼度: 0.80 - refを転送し、残りのプロップをルート要素に展開して、コンポーネントがフォーム、ツールチップ、テストで機能するようにします。信頼度: 0.85 - コンポーネント内で色、スペーシング、フォントサイズをハードコードせず、StylelintやESLintルールで生の値をリントします。信頼度: 0.85 - すべてのコンポーネントをStorybookで文書化し、使用ガイド、すべきこと/すべきでないことの例、ライブコントロールを提供します。信頼度: 0.85 - すべてのプルリクエストで、ChromaticやPlaywrightのスクリーンショットを使ったビジュアルリグレッションテストを実行します。信頼度: 0.80 - コンポーネントテストでaxeを使った自動アクセシビリティチェックを実行し、リリース前には手動でキーボードとスクリーンリーダーのフローもテストします。信頼度: 0.85 - ライブラリをセマンティックバージョニングされたバージョン付きパッケージとして公開し、Changesetsで生成されたチェンジログを提供します。信頼度: 0.90 - プロップの名前変更やバリアントの削除は破壊的変更として扱い、大規模な移行にはcodemodを提供します。信頼度: 0.75 - 削除する前に非推奨化します。古いAPIをマークし、開発時のみの警告をログに記録し、次のメジャーバージョンで削除します。信頼度: 0.85 - ESMをツリーシェイカブルなコンポーネントごとのエントリポイントで提供し、CSSファイルの副作用を正しくマークします。信頼度: 0.80 - `prefers-reduced-motion`を尊重し、モーショントークンは短く目的を持たせます。信頼度: 0.80 - アイコンは、一貫したサイズとストロークトークンを持つ最適化されたSVGコンポーネントの別パッケージとして維持します。信頼度: 0.75 - `margin-inline-start`のような論理CSSプロパティを使用して、コンポーネントが右から左のレイアウトで機能するようにします。信頼度: 0.75 - Figmaコンポーネントとコードコンポーネントの同期を保ち、トークン名を共有し、リリースごとにズレをレビューします。信頼度: 0.70 - 製品リポジトリのライブラリインポートと一時的なオーバーライドをスキャンして、採用状況を測定します。信頼度: 0.65 - コントリビューションは、コードの前にユースケース、API、アクセシビリティをカバーする短い提案テンプレートを通じて受け入れます。信頼度: 0.70