hig-components-content

hig-components-content skill の概要

hig-components-content skill は、Apple HIG のコンテンツ表示コンポーネントを、迷い少なく選び、説明できるようにする skill です。チャート、コレクション、image view、image well、color well、web view、activity view、lockup のどれを Apple アプリで使うべきか、といった実務的な判断が必要な UI デザイナー、アプリエンジニア、AI エージェントに特に向いています。ここでの本質は「HIG を要約すること」ではなく、ざっくりしたコンテンツ目標を、Apple プラットフォーム、アクセシビリティ要件、インタラクションモデルに合うコンポーネント選択へ落とし込むことです。

この skill が得意なこと

hig-components-content skill は、構造を組む作業ではなく、コンテンツをどう見せるかを考える場面で使います。たとえば、image view と image well、collection と table のような近い選択肢を比較したり、カスタム UI を作るよりもシステム提供コンポーネントで十分かを見極めたりするのに特に役立ちます。

何が違うのか

この skill は、コンテンツ系コンポーネントに関する Apple Human Interface Guidelines を軸にしつつ、必要に応じて周辺のガイダンスへもつながります。コンポーネント選択は、アクセシビリティやタイポグラフィのような基盤、さらにパターンやレイアウトコンテナ、プラットフォーム固有の挙動に関する関連 skill に左右されることが多いため、ここが重要です。

向いているユーザーと作業

hig-components-content ガイドが最も力を発揮するのは、「どのコンポーネントを使うべきか」「どんな制約があるか」「実装前に何を確認すべきか」を、根拠を持って判断したいときです。メディア、チャート、共有、埋め込み Web コンテンツ、選択可能なコレクションを扱う UI を作るなら、この skill は Apple の考え方に沿った適切な方向へ、より速くたどり着く助けになります。

hig-components-content skill の使い方

インストールして、文脈に読み込む

npx skills add raintree-technology/apple-hig-skills --skill hig-components-content で hig-components-content skill をインストールします。その後は、まず skills/hig-components-content/SKILL.md を読み、続けて、扱うコンポーネントの質問に合う参照ファイルを確認してください。この repo はスクリプトに依存していないため、深い内容は主に参照ファイルにあります。

適切なプロンプトの形から始める

hig-components-content をうまく使うには、単なるラベルではなく、コンポーネントの決定と制約まで含めて尋ねるのがコツです。強いプロンプトには、コンテンツの種類、プラットフォーム、ユーザーの操作、編集・選択・共有・埋め込みブラウジングの有無が含まれます。

プロンプト例:
“Using the hig-components-content skill, recommend the best Apple HIG component for a read-only dashboard card showing weekly sales trends on iPad and macOS. Include why a chart fits, what accessibility needs to be added, and when a collection would be the wrong choice.”

まずは最も関連する参照ファイルを読む

参照ファイルは、判断を早めるショートカットとして使えます。

• references/charts.md は、データ可視化と axis / mark の選択用
• references/collections.md は、グリッド、項目選択、動的コンテンツ用
• references/image-views.md と references/image-wells.md は、表示用画像と編集可能な画像の使い分け用
• references/color-wells.md は、色選択と system color picker の適合性確認用
• references/activity-views.md は、共有とアクションのワークフロー用
• references/lockups.md は、カード、ポスター、モノグラム、まとまりのある表示用
• references/web-views.md は、埋め込み Web コンテンツ用

足りない入力を補う

この skill は、次の情報があるほど精度が上がります。

• platform: iOS, iPadOS, macOS, or cross-platform
• content type: text-heavy, visual, selectable, editable, or external web content
• interaction: view, choose, edit, share, reorder, or inspect
• constraints: accessibility, multitasking, offline use, or system consistency

こうした入力があると、hig-components-content skill は一般論を避け、実際の job-to-be-done に合うコンポーネントを選びやすくなります。

hig-components-content skill の FAQ

hig-components-content は Apple UI Design 専用ですか？

はい。基本的には Apple HIG に沿った UI Design の判断に向いています。hig-components-content の UI Design 寄りの用途では、ニュートラルな design-system の答えではなく、Apple のプラットフォーム期待に合うコンポーネント選択をしたいときに最も役立ちます。

どんなときにこの skill を使わないほうがいいですか？

問題の中心がナビゲーション、ページ構成、一般的なレイアウトなら、hig-components-content は使わないほうがいいです。コンテナ、余白、画面全体のアーキテクチャを選ぶ場面では、レイアウト系やパターン系の skill のほうが適しています。

skill がなくても、プロンプトだけで十分ですか？

場合によっては十分ですが、整合性を保ち、見落としを減らしたいなら hig-components-content skill のほうが有利です。一般的なプロンプトでも正しいコンポーネント名は出せますが、アクセシビリティ、標準的なインタラクション、システムコンポーネントをデフォルトにすべきかどうかといった Apple 固有の重要点が抜けやすくなります。

初心者でも使いやすいですか？

はい。具体的な質問をするなら使いやすいです。コンテンツとユーザー操作を 1 文で説明できると、最も扱いやすくなります。質問が曖昧だと出力の判断も弱くなるため、hig-components-content ガイドは具体的な UI シナリオと組み合わせるのが最適です。

hig-components-content skill を改善するには

テーマではなく、判断を依頼する

hig-components-content のインストール後に良い結果を得やすいのは、コンポーネント選択とその理由を求めるプロンプトです。「メディアをどう表示するか教えて」よりも、「macOS の選択可能な product card では image view、image well、lockup のどれにすべきか？」のほうが強い問いです。

気にするトレードオフを最初から入れる

プロジェクトに制約があるなら、最初に明示してください。たとえば、editable か read-only か、native content か embedded content か、dense data か sparse data か、interaction-heavy か passive viewing か、などです。そうすると hig-components-content skill は、当たり前のベストプラクティスを繰り返すのではなく、境界条件の判断に集中できます。

最初の提案を起点に絞り込む

最初の答えが近いけれど違うなら、比較対象を狭めるか、platform を分けて再質問してください。たとえば “iPadOS only” や “macOS only”、あるいは “text-dominant rows に対して collection view と table を比較して” のように聞くと、次の返答の実用性が上がりやすくなります。一般論を増やすより、絞った質問をするほうが効果的です。

よくある失敗パターンに注意する

よくあるミスは、システムコンポーネントがあるのにカスタムコンポーネントを選ぶこと、テキストに collection を使いすぎること、画像表示と画像編集を同じ問題として扱うことです。hig-components-content skill は、適合性を確認するために使い、その後で実装前にアクセシビリティとプラットフォームの確認を行うと最も力を発揮します。