mcpField
H
hig-components-content

hig-components-content

github.com/raintree-technologyデザイン・UI148659 回インストール6 日前に更新
リポジトリ

hig-components-content について

hig-components-contentは、チャート、コレクション、画像、WebビューなどのコンテンツコンポーネントにApple HIGを適用するスキルです。アクセシビリティ、プラットフォームの慣習、パフォーマンスを考慮した選択と設定を支援します。

主な機能

  1. 01コンテンツコンポーネントの選択指針
  2. 02コンポーネント設定の提案
  3. 03アクセシビリティ要件
  4. 04プラットフォーム別の注意点
  5. 05大規模データの性能に関する指針

活用シーン

  1. 01数値データを表示するコンポーネントの選択
  2. 02アクセシブルな画像やコレクション表示の設計
  3. 03共有またはインラインWeb表示用コンポーネントの選択

インストール

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

$npx skills add https://github.com/raintree-technology/hig-doctor --skill hig-components-content

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

同梱ファイル

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

references/
activity-views.md
charts.md
collections.md
color-wells.md
image-views.md
image-wells.md
lockups.md
web-views.md

詳細

Apple HIG: コンテンツコンポーネント

質問する前に .claude/apple-design-context.md を確認してください。既存のコンテキストを使用し、まだカバーされていない情報についてのみ質問してください。

主要な原則

  1. さまざまなサイズとコンテキストに適応させます。 コンテンツコンポーネントは、画面サイズ、向き、マルチタスキング構成をまたいで機能する必要があります。Auto Layout とサイズクラスを使用してください。

  2. コンテンツをアクセシブルにします。 チャートにはオーディオグラフのサポートが必要です。画像には代替テキストが必要です。コレクションには適切な VoiceOver ナビゲーション順序が必要です。すべてのコンテンツコンポーネントにはラベルと説明が必要です。

  3. 視覚的な階層を維持します。 スペーシング、サイジング、グループ化を使用して、明確な情報階層を確立してください。主要なコンテンツは視覚的に目立つようにします。

  4. まずシステムコンポーネントを使用します。 カスタムで構築する前に、UICollectionView、SwiftUI Charts、WKWebView を評価してください。システムコンポーネントには、組み込みのアクセシビリティとプラットフォーム適応が備わっています。

  5. プラットフォームの慣例を尊重します。 tvOS のコレクションは、パララックス付きの大きなロックアップを使用します。iOS の同じコレクションは、タッチターゲット付きのコンパクトなセルを使用します。visionOS では、コンテンツに奥行きとホバーエフェクトが加わります。

  6. 空の状態を処理します。 空白の画面ではなく、どのように入力するかのガイダンスを含む意味のある空の状態を表示してください。

  7. パフォーマンスを最適化します。 大規模なデータセットには、遅延読み込み、セルの再利用、ページネーション、プリフェッチを使用してください。

リファレンスインデックス

リファレンストピック主な内容
charts.mdチャートSwift Charts、バー/ライン/エリア/ポイントマーク、チャートのアクセシビリティ、オーディオグラフ
collections.mdコレクショングリッド/リストレイアウト、コンポジショナルレイアウト、選択、並べ替え、差分可能データソース
image-views.mdイメージビューアスペクト比の処理、コンテンツモード、SF Symbol 画像、アクセシビリティ
image-wells.mdイメージウェルドラッグ&ドロップによる画像選択、macOS 固有、プレースホルダーコンテンツ
color-wells.mdカラーウェル色選択 UI、システムカラーピッカー、カスタム色空間
web-views.mdWeb ビューWKWebView、SFSafariViewController、ナビゲーションコントロール、コンテンツ制限
activity-views.mdアクティビティビュー共有シート、アクティビティ項目、カスタムアクティビティ、アクション拡張機能
lockups.mdロックアップ画像+テキストの要素、tvOS カードレイアウト、フォーカスエフェクト、シェルフレイアウト

コンポーネント選択ガイド

コンテンツのニーズ推奨コンポーネントプラットフォームに関する注意
定量データの可視化チャート (Swift Charts)iOS 16+、macOS 13+、watchOS 9+
項目のグリッドまたはリストの閲覧コレクションビュー複雑な配置にはコンポジショナルレイアウト
単一画像の表示イメージビューアスペクト比のフィッティングをサポート、アクセシビリティの説明を提供
ドラッグまたはブラウズによる画像の選択イメージウェル主に macOS、iOS ではイメージピッカーを使用
色の選択カラーウェルシステムカラーピッカーを起動、macOS、iOS 14+
Web コンテンツのインライン表示Web ビュー (WKWebView)外部ブラウジングには SFSafariViewController を使用
他のアプリへのコンテンツ共有アクティビティビュー設定可能なアクティビティタイプを備えたシステム共有シート
コンテンツカード (画像+テキスト)ロックアップ主に tvOS、他のプラットフォームにも適応可能

出力形式

  1. 根拠を伴うコンポーネントの推奨 -- 関連する HIG リファレンスファイルを参照してください。
  2. 構成のガイダンス -- 主要なプロパティとセットアップ。
  3. 推奨コンポーネントのアクセシビリティ要件。
  4. 対象プラットフォームに固有の注意事項。

尋ねるべき質問

  1. コンテンツの種類は何ですか? (定量データ、画像、Web コンテンツ、閲覧可能なコレクション、共有アクション?)
  2. どのプラットフォームですか?
  3. 静的コンテンツですか、動的コンテンツですか?
  4. コンテンツの量はどのくらいですか? (項目が少数か、数百/数千かで、コンポーネントの選択と最適化が変わります。)

関連スキル

  • hig-foundations -- 色、タイポグラフィ、アクセシビリティ、画像のガイドライン
  • hig-patterns -- データの可視化、共有、読み込みのパターン
  • hig-components-layout -- コンテンツを格納する構造コンテナー(スクロールビュー、リスト、分割ビュー)
  • hig-platforms -- プラットフォーム固有のコンポーネントの動作(tvOS のロックアップ、macOS の Web ビュー)

Raintree Technology が開発 · その他の開発者向けツール

コメント