hig-components-search について
hig-components-searchは、検索フィールド、ページコントロール、パスコントロールにApple HIGの指針を適用するスキルです。デザイナーや開発者がコンポーネントを選び、Appleプラットフォームごとの動作を定める際に役立ちます。
主な機能
- 01検索・ページ・パスコントロールの推奨
- 02検索スコープと即時検索の指針
- 03空状態とキーボード検索への対応
- 04フラットなナビゲーションと階層型の区別
- 05プラットフォームごとの差異
活用シーン
- 01Appleアプリのナビゲーション部品の選定
- 02入力中に検索する動作の設計
- 03ギャラリーやオンボーディングのページ表示
- 04ディレクトリの上位階層への移動設計
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ sickn33/ agentic-awesome-skills --skill hig-components-searchインストール後、Claude Code で/hig-components-searchを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/path-controls.mdpage-controls.mdsearch-fields.md詳細
Apple HIG:ナビゲーションコンポーネント
質問する前に .claude/apple-design-context.md を確認してください。既存のコンテキストを活用し、すでに記載されていない情報についてのみ質問してください。
主な原則
-
検索:見つけやすく、すぐに反応すること。 iOS の下部検索/タブの操作要素も含め、プラットフォームや状況に応じて配置を選びます。可能な場合は入力に合わせて結果を表示し、リモート検索ではデバウンスやキャンセルを行います。
-
ページコントロール:フラットなページ順序内で位置を示すこと。 ページの重みが等しい連続したページ(オンボーディング、写真ギャラリーなど)に使用します。現在のページと総数を表示します。
-
パスコントロール:ファイル階層を移動すること。 macOS のパスコントロールはディレクトリ構造内の場所を表示し、任意の祖先へ移動できるようにします。
-
検索スコープ:大量の検索結果を絞り込むこと。 カテゴリが明確な場合はスコープコントロールを検討します。広いスコープをデフォルトにし、不要なコントロールは避けます。
-
検索結果がない場合は明確に案内すること。 何も表示しないのではなく、修正方法や別の方法を提案する役立つメッセージを表示します。
-
ページコントロールを階層ナビゲーションに使わないこと。 フラットで線形な順序にのみ使用します。階層にはナビゲーションスタック、サイドバー、または分割ビューを使用します。タブバーも同等の目的地を表します。
-
パスコントロールを簡潔に保つこと。 意味のあるセグメントのみを表示します。ユーザーは任意のセグメントをクリックして直接移動できます。
-
検索でキーボード操作をサポートすること。 Command-F やシステムの検索ショートカットで検索を開始できるようにします。
リファレンス一覧
| リファレンス | トピック | 主な内容 |
|---|---|---|
| search-fields.md | 検索フィールド | スコープ、トークン、即時結果、配置 |
| page-controls.md | ページコントロール | ドットインジケーター、フラットなページ順序 |
| path-controls.md | パスコントロール | パンくずリスト、祖先への移動 |
出力形式
- コンポーネントの推奨 -- 検索フィールド、ページコントロール、パスコントロールのいずれを使うか、その理由。
- 動作仕様 -- 操作モデル(入力に合わせた検索、ページ間のスワイプ、クリックによるパス移動)。
- iOS、iPadOS、macOS、visionOS 間のプラットフォームごとの差異。
質問する内容
- どのような種類のコンテンツを検索またはナビゲートしますか?
- 対象となるプラットフォームはどれですか?
- データセットの規模はどのくらいですか?
- 検索が主な操作ですか?
関連スキル
- hig-components-menus -- 検索やナビゲーションコントロールを配置するツールバーとメニューバー
- hig-components-controls -- 検索インターフェースで使うテキストフィールド、ピッカー、セグメントコントロール
- hig-components-dialogs -- 検索や絞り込みを拡張するポップオーバーとシート
- hig-patterns -- ナビゲーションパターンと情報アーキテクチャ
- hig-foundations -- ナビゲーションコンポーネントのタイポグラフィとレイアウト
Raintree Technology が制作 · その他の開発者向けツール
使用する場面
このスキルは、概要で説明されているワークフローまたはアクションを実行する場合に適用できます。
例
ユーザーのリクエスト:
このタスクでは @hig-components-search を使用してください。検索フィールド、ページコントロール、パスコントロールなど、ナビゲーション関連コンポーネントに関する Apple HIG のガイダンスを確認してください。
制限事項
- このスキルは、タスクが上記の説明の範囲に明確に該当する場合にのみ使用してください。
- 出力を、環境固有の検証、テスト、または専門家によるレビューの代わりとして扱わないでください。
- 必要な入力、権限、安全上の境界、または成功基準が不足している場合は、作業を中断して明確化を求めてください。