mcpField
H
hig-components-status

hig-components-status

github.com/sickn33デザイン・UI48.7k48 回インストール今日更新
リポジトリ

hig-components-status について

hig-components-statusは、Apple HIGに基づくステータス・進捗UIの設計ガイダンスを提供するスキルです。デザイナーや開発者向けに、進捗インジケーター、ステータスバー、アクティビティリングと、プラットフォーム別の注意点を扱います。

主な機能

  1. 01確定・不確定の進捗表示を選択
  2. 02進捗表示の配置と見せ方を案内
  3. 03ステータスバーのスタイルとセーフエリアを説明
  4. 04アクティビティリングと色の規則を適用
  5. 05アクセシビリティとプラットフォーム動作を案内

活用シーン

  1. 01ダウンロードやアップロードの進捗UIを設計
  2. 02所要時間が不明な処理の状態を表示
  3. 03没入型画面でのステータスバーを確認
  4. 04アクティビティリングのHealthKitとプライバシー要件を検討

インストール

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

$npx skills add https://github.com/sickn33/agentic-awesome-skills --skill hig-components-status

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

同梱ファイル

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

references/
progress-indicators.md
status-bars.md
activity-rings.md

詳細

Apple HIG：ステータスコンポーネント

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

主な原則

進行状況インジケーター

  1. 1、2秒を超える操作では、進行状況を表示してください。

  2. 所要時間や割合がわかる場合は、確定的なインジケーターを使用してください。 塗りつぶされていくプログレスバーは、残りの作業量をユーザーにはっきり伝えます。ダウンロード、アップロードなど、測定可能な処理に使用してください。

  3. 所要時間がわからない場合は、不確定的なインジケーターを使用してください。 スピナーは、所要時間を約束せずに処理中であることを伝えます。予測が難しいネットワークリクエストに使用してください。

  4. 測定可能な場合に限り、確定的な進行状況を優先してください。 割合をでっち上げないでください。処理内容が不明な場合やバックグラウンドのステータスに制約がある場合は、プラットフォームのリファレンスに沿ってスピナーを使用してください。

  5. インジケーターは、コンテンツが表示される場所に配置してください。 モーダルや離れた場所ではなく、コンテンツ領域の近くにインラインで表示してください。

  6. 複数のインジケーターを重ねて表示しないでください。 同時進行する操作を1つの表示にまとめるか、最も関連性の高いものを表示してください。

ステータスバー

  1. 正当な理由がない限り、ステータスバーを非表示にしないでください。 非表示にするのは、全画面メディア、ゲーム、ARなど、没入感が求められる体験に限ってください。

  2. ステータスバーのスタイルをコンテンツに合わせてください。 十分なコントラストが得られる明色または暗色を選択してください。

  3. セーフエリアを守ってください。 ステータスバーの背後にインタラクティブなコンテンツを配置しないでください。

  4. 没入型のコンテキストを終了したら、速やかに元に戻してください。

アクティビティリング

  1. アクティビティリングは、「ムーブ」「エクササイズ」「スタンド」の目標に使用します。 無関係なデータにリングの表現を転用しないでください。

  2. リングの色の慣例を守ってください。 赤（ムーブ）、緑（エクササイズ）、青（スタンド）は、Apple Fitnessと強く結び付いています。

  3. アクティビティデータには、認可されたHealthKit APIを使用してください。 許可の拒否を尊重し、健康データを非公開にしてください。アクセスできないことを理由に、アクティビティがなかったと推測しないでください。

  4. 任意の完了フィードバックでは、モーションや触覚に関する設定を尊重してください。 アクティビティの完了を偽って表示したり、システム通知を重複させたりしないでください。

リファレンス一覧

リファレンストピック主な内容
progress-indicators.mdプログレスバーとスピナー確定的・不確定的なインジケーター、インライン配置、所要時間
status-bars.mdiOS/iPadOSのステータスバーシステム情報、表示、スタイル、セーフエリア
activity-rings.mdwatchOSのアクティビティリングムーブ／エクササイズ／スタンド、HealthKit、フィットネストラッキング、色

出力形式

  1. インジケーターの種類の推奨とその理由（確定的か不確定的か）。
  2. タイミングとアニメーションのガイダンス -- 所要時間のしきい値、アニメーションスタイル、遷移。
  3. アクセシビリティ -- VoiceOverによる進行状況の読み上げ、ライブリージョンの更新。
  4. 対象プラットフォームごとの動作。

質問する項目

  1. 所要時間は既知ですか、それとも不明ですか？
  2. 対象プラットフォームはどれですか？
  3. 操作には通常どのくらい時間がかかりますか？
  4. システムレベルのインジケーターですか、それともアプリ内のインジケーターですか？

関連スキル

  • hig-components-system -- 進行状況やステータスを表示するウィジェットとコンプリケーション
  • hig-inputs -- 進行状況を開始するジェスチャー（引っ張って更新）
  • hig-technologies -- アクティビティリングのデータにはHealthKit、進行状況の読み上げにはVoiceOver

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

使用する場面

このスキルは、概要で説明されているワークフローやアクションを実行する場合に適用できます。

例

ユーザーのリクエスト：

このタスクには @hig-components-status を使用してください。進行状況インジケーター、ステータスバー、アクティビティリングなど、ステータスと進行状況を示すUIコンポーネントに関するApple HIGのガイダンスです。

制限事項

  • このスキルは、タスクが上記の適用範囲に明確に一致する場合にのみ使用してください。
  • 出力を、環境固有の検証、テスト、専門家によるレビューの代わりとして扱わないでください。
  • 必要な入力、権限、安全上の境界、または成功基準が不足している場合は、作業を中断して確認してください。

コメント

Markdown 対応