mcpField
E
expo-design-system

expo-design-system

github.com/pproencaデザイン・UI220144 回インストール11 週間前に更新
リポジトリ

expo-design-system について

Unistyles v3 を使う Expo／React Native アプリ向けのデザインシステム設計スキルです。clinic アプリの構成に沿って、Web と iOS の共通コンポーネントを整備するチームを支援します。

主な機能

  1. 01Unistyles テーマでトークンを管理
  2. 02バリアントとスロットを軸に API を設計
  3. 03Web と iOS の動作を統一
  4. 04UI スレッドでのアニメーションとジェスチャーを指針化
  5. 05共有コンポーネントと再利用を管理

活用シーン

  1. 01Expo アプリのデザインシステムを構築
  2. 02場当たり的なスタイルをトークンへ移行
  3. 03スタイルと API の一貫性をレビュー
  4. 04Web と iOS の共通コンポーネントを構築

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/pproenca/dot-skills --skill expo-design-system

インストール後、Claude Code で/expo-design-systemを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

AGENTS.md
metadata.json
assets/templates/
_template.md
references/
_sections.md
api-accessibility-in-contract.md
api-aschild-polymorphism.md
api-compound-variants.md
api-controlled-uncontrolled.md
api-forward-ref.md
api-no-style-escape-hatch.md
api-slots-for-composition.md
api-variants-over-style-prop.md
domain-bodychart-gesture-paths.md
domain-bodychart-skia-canvas.md
domain-calendar-virtualization.md
domain-compose-from-primitives.md
domain-note-editor-autosave.md
domain-optimistic-writes.md
govern-design-system-package.md
govern-incremental-migration.md
govern-lint-no-raw-values.md
govern-naming-conventions.md
govern-prevent-local-tokens.md
govern-storybook-catalog.md
perf-defer-offscreen-work.md
perf-expo-image.md
perf-flashlist-for-lists.md
perf-gesture-handler.md
perf-haptics-key-actions.md
perf-memoize-list-items.md

詳細

Airbnb DLS Expo React Native デザインシステムのベストプラクティス

Expo／React Native アプリ向けの、意見を明確にした厳格なデザインシステムエンジニアリングです。New Architecture 上で、Web とネイティブ iOS の両方を対象としています。影響度に応じて優先順位付けされた、11 カテゴリにわたる 63 のルールを含みます。Airbnb の Design Language System（DLS）、Unistyles v3 のドキュメント、React Native エコシステム（Reanimated、Gesture Handler、Skia、FlashList、Expo SDK）を基にしています。スタイリングエンジンには Unistyles v3 を使用し、コンポーネント API では、スタイルの回避手段よりもバリアント props を優先する Airbnb DLS のパターンに従います。

必須のアーキテクチャ整合性

このスキルはインフラストラクチャ層です。デザインシステム自体の構築方法を説明するもので、ios-design-system の React Native 版に相当します。すべてのコード例は、次の変更不可の制約に従います。

  • 機能モジュールがインポートするのは @clinic/design-system と domain のみです。他の機能の内部実装はインポートしません
  • デザインシステムが Unistyles のテーマ（トークン、ブレークポイント）を管理し、厳選された公開 API をエクスポートします
  • 実装する前に再利用を検討します。インデックスを読み、バリアントを拡張し、2 回目の使用時に昇格させます。ローカルに並行コンポーネントを作ることはありません
  • コンポーネントはバリアントとスロットの props を公開します（Airbnb DLS）。生の style による回避手段はありません
  • アニメーションとジェスチャーは UI スレッドで実行します（Reanimated の worklet と Gesture Handler）
  • リストには FlashList を使用し、ボディチャートの描画面には React Native Skia を使用します
  • 1 つのソースで Web と iOS の両方にネイティブな操作感を実現します。Unistyles の _web 疑似状態と Platform による分岐を使用し、Web 用スタイルシートを分岐して作りません
  • New Architecture（Fabric／JSI）、Expo SDK 53 以降／React Native 0.81 以降を対象とします

対象範囲と関連する兄弟スキル

兄弟スキルそのスキルの対象このスキルの対象
ios-design-system同じクリニックアプリ向けの SwiftUI デザインシステムExpo／React Native 版
expo-react-native-coder機能開発（画面、ナビゲーション、データ取得）デザインシステムのインフラストラクチャ（トークン、コンポーネント、テーマ設定）
expo-react-native-performanceアプリ全体のパフォーマンス最適化デザインシステム内でネイティブな操作感を実現するためのパフォーマンス
react一般的な React パターンExpo／React Native のデザインシステム固有の内容
expo-ios-higiOS ネイティブの操作感に関する判断（ナビゲーション、システムコントロール、Liquid Glass）クロスプラットフォームのトークン／コンポーネントアーキテクチャと Web／iOS の一貫性

クリニックのアーキテクチャ契約（Expo／React Native）

このスキルのすべてのガイダンスは、クリニックのモジュール型アーキテクチャを前提としています。

  • 機能モジュールが依存するのは @clinic/design-system と domain のみです。アプリのターゲットがナビゲーション（Expo Router）と依存性注入を組み立てます
  • デザインシステムは公開エントリが 1 つだけのローカルパッケージです。生のトークンレイヤーは非公開のままにします
  • トークンの信頼できる情報源は Unistyles のテーマです。機能がローカルトークンを定義することはありません
  • サーバー状態には TanStack Query を使用します。読み取りはデフォルトで stale-while-revalidate とし、書き込みは楽観的に処理してオフライン同期用にキューイングします
  • Unistyles v3、Reanimated の worklet、Skia、FlashList v2 を使用するには、New Architecture が必須です

適用する場面

以下の場合に、これらのガイドラインを参照してください。

  • 新しい Expo／React Native アプリのデザインシステムを設定するとき
  • Unistyles のテーマでトークンアーキテクチャ（色、タイポグラフィ、スペーシング、角丸、エレベーション）を構築するとき
  • コンポーネント API（バリアント、スロット、制御状態／非制御状態、ref、アクセシビリティ）を設計するとき
  • Unistyles StyleSheet、バリアント、動的関数を使ってコンポーネントのスタイルを定義するとき
  • カレンダー、施術記録エディター、または Skia のボディチャート描画サーフェスを構築するとき
  • 場当たり的なスタイルを、管理されたトークンシステムに移行するとき
  • 生の色、インラインスタイル、漏れ出した style プロパティ、または機能内限定のトークンについて PR をレビューするとき
  • リストの仮想化、UI スレッド上のアニメーション、ジェスチャー、触覚フィードバック、セーフエリアなど、ネイティブらしい操作感を調整するとき
  • Web と iOS の両方でコンポーネントをネイティブにレンダリングし、自然に操作できるようにするとき — ホバー／フォーカス／カーソル、Platform による分岐、セーフエリア／触覚フィードバックの差異を含みます
  • 新規構築と再利用のどちらが適切か判断するとき — デザインシステムのインデックスを確認し、拡張するかフォークするかを検討し、ネイティブまたは @expo/ui のコントロールを再実装する代わりに使用するときを含みます

優先度別のルールカテゴリー

優先度カテゴリー影響度プレフィックスルール数
1トークンアーキテクチャCRITICALtoken-6
2テーマ設定と適応性CRITICALtheme-5
3コンポーネント API の契約CRITICALapi-8
4クロスプラットフォームの同等性CRITICALplatform-5
5再利用とシステムへの適合性HIGHreuse-4
6スタイリングエンジン（Unistyles）HIGHstyle-6
7タイポグラフィとアイコノグラフィHIGHtype-5
8スペーシング、レイアウト、セーフエリアHIGHspace-5
9ネイティブらしい操作感とパフォーマンスHIGHperf-7
10複雑なドメインコンポーネントMEDIUM-HIGHdomain-6
11ガバナンスと一貫性MEDIUMgovern-6

クイックリファレンス

1. トークンアーキテクチャ（CRITICAL）
2. テーマ設定と適応性（CRITICAL）
3. コンポーネント API コントラクト（CRITICAL）
4. クロスプラットフォームの同等性（CRITICAL）
  • platform-web-pseudo-states - インタラクティブなコンポーネントに、Web の hover、focus、cursor を追加します
  • platform-guard-native-only - ネイティブ専用 API を Platform チェックでガードし、Web 用のフォールバックを用意します
  • platform-divergence-split - プラットフォーム間の違いを単一のコンポーネント API の背後に分離します
  • platform-input-model - ポインターとタッチを前提に設計し、hover のみに依存しないようにします
  • platform-shared-theme-parity - Web とネイティブで単一のテーマを使用し、既知の差異をマップにまとめます
5. 再利用とシステムとの整合性（HIGH）
  • reuse-inventory-first - スタイルを書く前に、デザインシステムのインデックスを確認します
  • reuse-extend-not-fork - ローカル用にコンポーネントをフォークするのではなく、バリアントを追加して共有コンポーネントを拡張します
  • reuse-promote-on-second-use - パターンが2回目に使われたら、システムに取り込みます
  • reuse-platform-component-first - 再実装する前に、ネイティブコントロールの利用を検討します
6. スタイリングエンジン（Unistyles）（HIGH）
7. タイポグラフィとアイコン（HIGH）
8. 間隔、レイアウト、安全領域（高）
9. ネイティブな操作感とパフォーマンス（高）
10. 複雑なドメインコンポーネント（中〜高）
11. ガバナンスと一貫性（中）

使用方法

詳しい説明とコード例については、各リファレンスファイルをお読みください。

リファレンスファイル

ファイル説明
references/_sections.mdカテゴリーの定義と順序
assets/templates/_template.md新しいルール用のテンプレート
metadata.jsonバージョンとリファレンス情報

コメント

Markdown 対応