apple-web-app について
apple-web-appは、iPhone、iPad、macOS Safari向けのウェブサイトやウェブアプリを実装、デバッグ、監査するスキルです。プラットフォームや問題に応じた資料と検証手順を示し、既存の設計や動作をできる限り維持します。
主な機能
- 01プラットフォーム別の実装ガイド
- 02対象を絞ったデバッグと監査
- 03症状に応じた参考資料の選択
- 04適合チェックリストによる検証
- 05実機での証拠確認ガイド
活用シーン
- 01iPhoneやiPad向けのウェブサイト調整
- 02インストール済みウェブアプリの問題調査
- 03macOS SafariのDockに追加した画面の監査
- 04特定のレイアウトや操作変更の検証
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/apple-web-appを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/conformance-checklist.mdhead-and-icons.mdinstall-ux.mdios-26-notes.mdios-devices.mdlayout-and-touch.mdmacos-add-to-dock.mdmaintenance.mdoverlays-and-keyboard.mdsources.mdsplash-screens.mdtailwind-css-v4.mdtheme-color-and-status-bar.md詳細
Apple デバイス向けのウェブサイトとウェブアプリ
対象範囲を決める
このスキルは、Safari 上で、またはホーム画面にインストールして使う iPhone と iPad のウェブサイトやウェブアプリ、および macOS Safari の Dock に追加した場合の UI を快適にするために使用します。サービスワーカー、オフラインキャッシュ、 バックグラウンド同期、プッシュ通知の実装は対象外です。
タスクとプロジェクトから、プラットフォーム、求められている結果、既存の アーキテクチャを推測します。不足している情報によって解決策が大きく変わる場合に 限り、質問してください。そのプラットフォームと症状に関連するガイダンスを適用します。 問題の原因になっていない限り、正常に動作しているレイアウト、認証、製品上の選択は 維持してください。ユーザーの指示は、このスキルの既定の方針より優先されます。
- 実装またはデバッグ： 該当するリファレンスを読み、対象を絞って変更し、 影響を受ける動作と、起こりそうなリグレッションを確認します。
- 監査： 該当するすべての推奨事項について、 適合性チェックリストを使用します。 ユーザーから修正も依頼されている場合を除き、サイトを変更する前に調査結果を 報告します。
- このスキルの保守： maintenance.mdに従います。 通常のサイト作業では、スキルの更新や上流への引き継ぎは必要ありません。
関連するリファレンスのみ読む
| プラットフォームまたは問題 | リファレンス |
|---|---|
| Mac の Dock アイコン、タイトルバー、表示モード、ナビゲーション、ストレージ | macos-add-to-dock.md |
| iOS の head タグ、マニフェストの統合、アイコン | head-and-icons.md |
| iOS のセーフエリア、スクロールルート、コールド起動、タッチスタイル | layout-and-touch.md |
| iOS のステータスバー、Safari バーの色付け、ライト／ダーク表示 | theme-color-and-status-bar.md |
| iOS のオーバーレイ、全画面の暗転、キーボード、スクロールロック | overlays-and-keyboard.md |
| iOS の起動画像 | splash-screens.md。サイズの生成や確認を行う場合は、ios-devices.mdも読んでください |
| インストール案内、インストール後のナビゲーション、ストレージの継続性 | install-ux.md |
| iOS のリリースで発生したと思われるリグレッション | ios-26-notes.md |
| 該当するレシピを既存の Tailwind v4 コードに置き換える場合 | tailwind-css-v4.md |
Mac のみを対象とするタスクでは、Mac のリファレンスから着手します。iOS の起動画像を 生成したり、iOS のセーフエリア対応を追加したりしないでください。出典：WebKit、および macos-add-to-dock.mdに記載された Joe Bell の情報。
必須の制約と根拠
- セーフエリアインセットがゼロでも有効です。正のトップインセットを前提とせずにコントロールを使用可能な状態に保ち、インセットが設定されるのを待ってアプリを非表示にしないでください。出典：Joe Bell、sources.md の WebKit 301994。
- ピンチズームとテキスト選択を維持してください。タッチ操作の抑制は、意図的な代替操作があるコントロールまたはメディアに限定してください。出典：Firtman、sources.md の React Spectrum。
- ブラウザーコントロールを非表示にするインストール済みアプリでは、戻るまたはアプリから移動するためのナビゲーションを使用可能にしてください。出典：Firtman、install-ux.md の Steiner。
文書化された動作、デバイスでの観察、コミュニティによる回避策、任意のデザイン上の好みを明確に区別してください。バージョン固有の回避策は、その症状と環境が一致する場合にのみ適用してください。報告された修正やバグのステータスは過去の根拠であり、その後のすべてのリリースで保証されるものではありません。変化する事実が修正方法を左右する場合は、引用元を読むか、対象のビルドで再確認してください。既存のテスト日付を維持し、引き継いだ調査結果を新たにテストしたものとして書き換えないでください。出典の詳細と保持された観察結果：sources.md。
要求された結果を検証する
関連する項目を適合性チェックリストから使用してください。該当する場合は、生成された HTML、CSS、画像の寸法、認証なしでのアセット配信を確認してください。デバイス固有の表示は、実機上の対象インストール済みアプリで観察する必要があります。シミュレーターやデスクトップでのエミュレーションだけでは、セーフエリアのタイミング、ステータスバーの色の判定、スプラッシュ画面の選択を確認できません。出典：sources.md の Joe Bell。
ハードウェアまたは認証済みランタイムへのアクセスを利用できない場合は、独立して実施できるチェックを完了し、残りの主張には 未検証 と記してください。確認した内容、失敗した内容、残っている具体的なデバイスチェックを明記してください。対象を絞った修正を、デバイス全体のテストマトリックスに広げないでください。失敗または新たな変更によって追加の検証が必要にならない限り、関連するチェックに合格した時点で終了してください。