デザインシステム外部リンクインデックス
各企業 / コミュニティが公開するデザインシステムの外部リンクナビゲーションインデックス。既存の DS のデザイントークン、コンポーネント、仕様を参照するために使用します。
⚠️ 本スキルはリソースインデックス層です：リンクと簡単な説明のみを収録し、方法論には踏み込みません。トークンアーキテクチャ、命名階層、クロスプラットフォーム実装の方法論については、ローカルの
design-systemスキルを参照してください。2 つのスキルは役割を分担しており、ここでは重複しません。
使い方（プログレッシブディスクロージャ）
この SKILL.md はスケジューリングインデックス層です：5 つのカテゴリそれぞれに 2〜3 の最も古典的なエントリと、「何か / いつ読むか」を記載しています。より長いリストが必要な場合は、対応する references/<category>.md を読み込んでください（1 階層のみ、ネストはしません）。
まず下のカテゴリ分類から必要なものを判断し、必要に応じて対応する reference を読んでください。一度にすべてを読み込まないようにします。
データソース：klaufel/awesome-design-systems + jbranchaud/awesome-react-design-systems。
トリガー例：「各社のデザインシステムを参照して」「React コンポーネントライブラリの選定を」「design tokens のツールと仕様を」「pattern library ツールを選んで」。
カテゴリクイックリファレンス（まずは位置を特定してから掘り下げる）
判断が不明瞭な場合は、まずこの表を確認し、対応するファイルに掘り下げてください。5 つすべてを読む必要はありません：
| あなたの要件 | 読むファイル |
|---|---|
| ある大手企業の成熟した DS を参照したい | references/major-company-systems.md |
| design tokens のツールチェーン / W3C 仕様への準拠を選びたい | references/design-tokens.md |
| コンポーネント開発環境、ドキュメントサイト、pattern library を構築したい | references/pattern-libraries.md |
| React Web プロジェクトに採用可能なコンポーネントライブラリを選びたい | references/react-ds-libraries.md |
| React Native プロジェクト向けの UI ツールキットを選びたい | references/react-native-ds-libraries.md |
境界のヒント：「トークンアーキテクチャをどう設計するか」はこのインデックスでは扱いません。ローカルの
design-systemスキルを参照してください。「React でコンポーネントを書く方法」はreact-best-practicesを参照してください。このインデックスは「どのような既存の DS / ライブラリを参照・採用できるか」にのみ答えます。
ルーティング例（プログレッシブディスクロージャの進め方）
ユーザー：「社内向け管理画面に React コンポーネントライブラリを選んで」
- カテゴリを特定 → これは「React デザインシステムライブラリ」カテゴリ。tokens や pattern library ではない。
- まずそのカテゴリの厳選エントリ（Ant Design / MUI / Blueprint）を確認。多くの場合これで十分。
- もっと候補が必要 →
references/react-ds-libraries.mdを読む。それでも足りない → awesome の元ディレクトリにジャンプ。- 選択後、実装の詳細は
react-best-practices/frontend-designに委ね、このインデックスでは展開しない。
主要企業デザインシステム
何か：各社が公開する完全なデザインシステム（トークン + コンポーネント + 仕様 + ドキュメント）。 いつ読むか：ある企業の DS を参照したい、参考になる成熟した体系を選びたい、デザイン言語の競合調査をするとき。
厳選（最も古典的）：
- Google Material Design - Google のデザインシステム。直感的で美しい製品のため。
- Microsoft Fluent UI - Microsoft のオープンソースクロスプラットフォームデザインシステム（web/Apple/Android）。
- IBM Carbon - IBM のオープンソースデザインシステム。製品と体験のため。
→ 完全なリストは references/major-company-systems.md を参照（Polaris、Atlassian、Lightning、Primer、Pajamas、Photon、Atlaskit + 汎用 DS リソース）。
デザイントークンリソース
何か：design tokens の仕様、生成、変換、クロスプラットフォーム同期ツール。 いつ読むか：トークンツールチェーンを選びたい、W3C 仕様に準拠したい、Figma からトークンを抽出したい、マルチエンドでトークンを配布したいとき。
厳選：
- Design Tokens W3C Community Group - デザイントークン形式仕様を定義する W3C コミュニティグループ。
- Style Dictionary - Amazon のビルドシステム。スタイルを一度定義し、どのプラットフォームでも使用可能。
- Theo - Salesforce によるデザイントークンの変換・フォーマットのための抽象化。
→ 完全なリストは references/design-tokens.md を参照（DesignTokens.dev、Diez、Figmagic、Superposition、Validator、Awesome Design Tokens、Abstract Connect、Zeplin export など）。
pattern library リソース
何か：コンポーネントの分離開発環境とパターンライブラリ編成ツール（Storybook 類）。 いつ読むか：コンポーネント開発環境 / ドキュメントサイト / アトミックデザインワークフローを構築したい、ドキュメントコラボレーションプラットフォームを選びたいとき。
厳選：
- Storybook - React、Vue、Angular など向けに UI コンポーネントを分離して構築。
- Pattern Lab - アトミックデザイン原則を使用してパターンドリブンな UI を構築。
- React Styleguidist - リビングスタイルガイド付きの分離 React コンポーネント開発環境。
→ 完全なリストは references/pattern-libraries.md を参照（Styled System、Stencil、Zeroheight、Backlight、Storybook DS、addons リストなど）。
React デザインシステムライブラリ
何か：そのまま採用可能な React コンポーネントライブラリ / エンタープライズ向けデザインシステム。すぐに使える。 いつ読むか：SaaS / 管理画面 / dashboard 向けに React コンポーネントライブラリを選びたい、エンタープライズ DS の採用を評価したいとき。
厳選：
- Ant Design - Ant Financial - エンタープライズアプリケーション向けデザインシステム（Nature & Determinacy）。
- Material UI - Google の Material Design を実装した React コンポーネント。
- Blueprint - Palantir - Web 向け React ベース UI ツールキット。
→ 完全なリストは references/react-ds-libraries.md を参照（Grommet、Garden、Backpack、Ring UI、Canvas、Atlaskit、cf-ui、Mineral UI、Spark、Swarm、Uniform、Lightning React など 20 以上）。
React Native デザインシステムライブラリ
何か：React Native クロスプラットフォームでそのまま使える UI ツールキット。 いつ読むか：RN アプリ向けに既成のコンポーネントライブラリを選びたい、ゼロから UI を構築するのを避けたいとき。
厳選：
- React Native Elements - クロスプラットフォーム React Native UI ツールキット。
- React Native Paper - Material Design に準拠した React Native コンポーネント。
- NativeBase - GeekyAnts - React Native と Vue Native 向けの必須クロスプラットフォーム UI コンポーネント。
→ 完全なリストは references/react-native-ds-libraries.md を参照（Shoutem UI、Teaset など）。
awesome 総合ディレクトリポインタ
より包括的な awesome デザイン関連の総合ディレクトリは sindresorhus/awesome を参照してください。本スキルは主に以下の 2 つから精選しています：
- klaufel/awesome-design-systems — 主要企業 DS / tokens / pattern library の親ディレクトリ。
- jbranchaud/awesome-react-design-systems — React / RN DS ライブラリの親ディレクトリ。
関連ローカルスキル
このインデックスは「どのような既存の DS を参照 / 採用できるか」のみを担当します。方法論と実装の詳細は以下のローカルスキルに委ねられます：
design-system— トークンアーキテクチャ、命名階層、クロスプラットフォーム実装方法論（このインデックスの方法論バックエンド）。react-native-skills— React Native コンポーネントとスタイルパターン。react-best-practices/frontend-design— React とフロントエンド実装、デザイン実装の詳細。design-assets-index— デザインリソース（アイコン、フォント、イラストなど）のインデックス。