المهارات Apple HIG: Content Components
📦

Apple HIG: Content Components

آمن

Apple UI コンポーネントを自信を持って設計する

Apple プラットフォームにネイティブに適合するチャート、コレクション、コンテンツ表示の実装に苦労していませんか？このスキルは、アクセシブルでプラットフォームに適応したコンポーネントを構築し、Apple の設計原則に従うための権威あるヒューマンインターフェースガイドラインを提供します。

يدعم: Claude Codex Code(CC)
🥉 73 برونزي
1

تنزيل ZIP المهارة

2

رفع في Claude

اذهب إلى Settings → Capabilities → Skills → Upload skill

3

فعّل وابدأ الاستخدام

اختبرها

استخدام "Apple HIG: Content Components". iOS アプリで株価データの推移を表示したいのですが、どのチャートタイプを使うべきですか？

النتيجة المتوقعة:

株価データの推移には、ラインマークを使用したラインチャートを使用してください。ラインマークは値が時間とともにどのように変化するかを示し、ユーザーが傾向を視覚化するのに役立ちます。データがプロット領域を埋めるように動的な Y 軸範囲でチャートを設定し、各データポイントにアクセシビリティラベルを提供してください。VoiceOver ユーザーが傾向を聴覚的に把握できるよう、オーディオグラフのサポートも検討してください。完全な実装詳細については charts.md を参照してください。

استخدام "Apple HIG: Content Components". tvOS 用コレクションビューを実装するにはどうすればよいですか？

النتيجة المتوقعة:

tvOS では、コレクションはパララックス効果とシェルフレイアウトを備えた大きなロックアップを使用します。フォーカス管理が重要です - アイテムはフォーカス時に拡大し深度を得ます。合成レイアウトで UICollectionView を使用し、フォーカスエンジンが期待されるナビゲーションパターンに従うようにしてください。ロックアップは通常、テキストオーバーレイ付きの画像で構成されます。tvOS 固有のパターンについては lockups.md を、レイアウト設定については collections.md を参照してください。

التدقيق الأمني

آمن
v1 • 2/25/2026

Documentation-only skill containing Apple Human Interface Guidelines in Markdown format. No executable code, no runtime behavior, and no security risks. All static analysis findings are false positives from Markdown content (inline code blocks, documentation URLs, and legitimate UI terminology).

8
الملفات التي تم فحصها
587
الأسطر التي تم تحليلها
0
النتائج
1
إجمالي عمليات التدقيق
لا توجد مشكلات أمنية
تم تدقيقه بواسطة: claude

درجة الجودة

45
الهندسة المعمارية
100
قابلية الصيانة
87
المحتوى
50
المجتمع
100
الأمان
65
الامتثال للمواصفات

ماذا يمكنك بناءه

データダッシュボードを構築する iOS 開発者

iOS 開発者がフィットネストラッキングデータをチャートで表示する必要があります。このスキルは、バーとラインのマークの選択、軸範囲の設定、オーディオグラフアクセシビリティの実装を支援します。

tvOS インターフェースを作成する UI/UX デザイナー

デザイナーが Apple TV 用メディアブラウザアプリを作成しています。このスキルは、ロックアップコンポーネント、フォーカス効果、tvOS 固有のシェルフレイアウトに関するガイダンスを提供します。

アクセシビリティを確保するクロスプラットフォーム開発者

開発者は、コレクションビューがすべての Apple プラットフォームで VoiceOver とスイッチコントロールと適切に動作することを確認する必要があります。このスキルはアクセシビリティ要件とテストガイダンスを提供します。

جرّب هذه الموجهات

コンポーネント選択 
[platform] アプリで [content type] を表示したいのですが、どのコンポーネントを使うべきでしょうか？またその理由は何ですか？
アクセシビリティ実装 
[component] を VoiceOver ユーザーがアクセスできるようにするにはどうすればよいですか？どのようなラベルと説明が必要ですか？
プラットフォーム固有の動作 
[component] は [other platform] と比較して [platform] でどのように動作が異なりますか？どのような適応が必要ですか？
設定とベストプラクティス 
[component] に設定すべき主要なプロパティは何ですか？パフォーマンスとアクセシビリティのベストプラクティスは何ですか？

أفضل الممارسات

  • 質問する前に `.claude/apple-design-context.md` に既存のデザインコンテキストがないか常に確認してください - このスキルは基本的なカラー、タイポグラフィ、アクセシビリティガイドラインの上に構築されます
  • 早い段階でプラットフォーム固有の動作を考慮してください - iOS で動作するコレクションは、tvOS（ロックアップ）や visionOS（深度とホバー効果）のために大幅な適応が必要になる場合があります
  • 最初からアクセシビリティを設計してください - チャートにはオーディオグラフサポートが必要で、画像には代替テキストが必要で、すべてのコンポーネントには適切な VoiceOver ラベルが必要です

تجنب

  • 外観のみを基準にコンポーネントを選択しないでください - アクセシビリティ要件、プラットフォームの慣習、データの特性を常に考慮してください
  • システムコンポーネント（Swift Charts、UICollectionView、WKWebView）が組み込みのアクセシビリティとプラットフォーム適応を提供しているのに、カスタムコンポーネントを最初から実装することは避けてください
  • 空の状態を省略しないでください - 空の画面はユーザーを混乱させます。空のコレクションやデータ表示をどのように満たすかについての意味のあるガイダンスを提供してください

الأسئلة المتكررة

コレクションビューとテーブルビューの違いは何ですか？
コレクションビューは合成レイアウトを使用して複雑なグリッドやカスタムレイアウトをサポートしますが、テーブルビューは単一カラムのリストに限定されます。コレクションはグリッド、グリッド内のグリッド、マルチカラムレイアウトに使用してください。テーブルは単純なリストに使用してください。両方ともパフォーマンスのために差分可能データソースと遅延ロードをサポートします。
WKWebView と SFSafariViewController のどちらを使うべきですか？
アプリのインターフェース内で Web コンテンツをインラインで表示し、ナビゲーションエクスペリエンスを制御する必要がある場合は WKWebView を使用してください。外部 Web ブラウジングには SFSafariViewController を使用してください - こちらは読み込みモード、自動入力、共有機能を備えた慣れ親しんだ Safari インターフェースを提供します。
チャートでバー、ライン、ポイントマークをどのように選択すればよいですか？
バーマークはカテゴリ間の値の比較や全体の部分を示す場合に使用してください。ラインマークは値が連続的な変化を表す場合に時間の経過による傾向を示すために使用してください。ポイントマークは個々の個別の値を示し、2 つのデータプロパティ間の関係を表示するために使用してください。
ロックアップとは何ですか？また、いつ使用するべきですか？
ロックアップは画像とテキストを組み合わせたコンテンツカードで、通常メディアブラウザに使用されます。ロックアップは主に tvOS で使用され、パララックス効果付きのカードとして表示されます。他のプラットフォームでは、同様のカードベースのレイアウトのためにロックアップパターンを適応できます。映画、テレビ番組、製品などの閲覧可能なメディアコンテンツを表示する場合はロックアップを使用してください。
言及されているすべての Apple プラットフォームをサポートする必要がありますか？
いいえ - アプリがターゲットとするプラットフォームのみをサポートしてください。ただし、後で他のプラットフォームに拡大する場合、コンポーネントの動作が大幅に異なる可能性があることに注意してください。例えば、iOS タッチインタラクション用に最適化されたコレクションは、tvOS フォーカスナビゲーションや visionOS 深度効果のために大幅な変更が必要になります。
チャートに実装する必要がある最低限のアクセシビリティは何ですか？
すべてのチャートには、その目的と構造を説明するアクセシビリティラベルが必要です。インタラクティブなマークまたは意味のあるマークのグループに個別のラベルを提供してください。VoiceOver ユーザーにデータ傾向の聴覚的表現を提供するためにオーディオグラフをサポートしてください。表示されている軸ラベルは VoiceOver がラベルを通じて値を報告するため、支援技術からは非表示にしてください。完全な要件については charts.md を参照してください。

تفاصيل المطور

المؤلف

sickn33

الترخيص

MIT

المستودع

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/hig-components-content

مرجع

main

بنية الملفات

📁 references/

📄 activity-views.md

📄 charts.md

📄 collections.md

📄 color-wells.md

📄 image-views.md

📄 image-wells.md

📄 lockups.md

📄 web-views.md

📄 SKILL.md