mcpField
H
hig-components-status

hig-components-status

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

hig-components-status について

hig-components-statusは、進捗インジケーター、ステータスバー、アクティビティリングにApple HIGを適用するスキルです。デザイナーや開発者向けに、タイミング、アクセシビリティ、プラットフォームの動作を考慮した選択を案内します。

主な機能

  1. 01進捗インジケーターの選択指針
  2. 02タイミングとアニメーションの提案
  3. 03アクセシビリティの指針
  4. 04ステータスバーとセーフエリアの指針
  5. 05アクティビティリングの使用指針

活用シーン

  1. 01所要時間が既知または不明な処理の進捗表示選択
  2. 02長時間処理におけるアクセシブルな状態更新の設計
  3. 03没入型コンテンツに合わせたステータスバー動作の設計

インストール

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

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

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

同梱ファイル

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

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

詳細

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

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

主な原則

  1. 処理に1〜2秒以上かかる場合は、進行状況を表示してください。

  2. 所要時間や進捗率がわかる場合は、確定型にしてください。 塗りつぶされていくプログレスバーは、残りの作業をユーザーに明確に伝えます。ダウンロード、アップロード、その他進捗を計測できる処理に使用してください。

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

  4. スピナーよりプログレスバーを優先してください。 確定型の進捗表示は、処理が速く、信頼できる印象を与えます。

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

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

  7. 正当な理由なくステータスバーを隠さないでください。 非表示にするのは、全画面メディア、ゲーム、ARなどの没入型の体験に限ってください。

  8. ステータスバーのスタイルをコンテンツに合わせてください。 十分なコントラストを確保できるライトまたはダークのスタイルを使用してください。

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

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

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

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

  13. アクティビティデータには、手動で記録するのではなく HealthKit API を使用してください。

  14. リングが閉じたときは、アニメーションと触覚フィードバックで達成を祝ってください。

リファレンス一覧

リファレンストピック主な内容
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 が作成 · その他の開発者ツール

コメント