AgentSkillsCN

ios-ux-audit

针对 iPhone 用户开展 UX 审查，并撰写问题分析与改进建议报告。“进行 UX 审查”、“检查 iOS UX”、“审核屏幕界面”等需求均可使用此标签。

SKILL.md
--- frontmatter
name: ios-ux-audit
description: iPhoneユーザー向けのUX監査を実行し、問題点と改善案をレポートする。「UX監査して」「iOS UXチェック」「画面を監査」などのリクエストで使用する。
allowed-tools: Read, Glob, Grep
argument-hint: [対象画面名 or 省略で全画面]

iOS UX 監査スキル

指定された画面（または全画面）を走査し、iPhoneユーザーのUX品質を監査する。

デザイン前提: Liquid Glass

本プロジェクトは Apple iOS 26 の Liquid Glass デザインを前提とする。 監査時は @callstack/liquid-glass (LiquidGlassView, LiquidGlassContainerView) の使用状況も確認する。

監査対象

対象ファイル:

  • •src/screens/**/*.tsx — 画面コンポーネント
  • •src/components/**/*.tsx — UIコンポーネント
  • •src/App.tsx — ナビゲーション構造

引数が指定された場合はその画面のみ、省略時は全画面を対象とする。

監査チェックリスト

以下の7カテゴリを順にチェックし、問題があれば具体的なファイル名・行番号と改善案を報告する。

1. Safe Area & デバイス対応

  • • SafeAreaView がルートで使用されているか
  • • ノッチ / Dynamic Island 領域に要素が被っていないか
  • • ホームインジケータ領域（画面下部）にボタン等が被っていないか
  • • useSafeAreaInsets() で動的にパディングを取得しているか
  • • ステータスバーのスタイル（light / dark）が背景色と適切か

2. キーボード処理

  • • TextInput を含む画面に KeyboardAvoidingView があるか（iOS: behavior="padding"）
  • • ScrollView に keyboardShouldPersistTaps="handled" が設定されているか
  • • returnKeyType が適切に設定されているか（done, next, search 等）
  • • キーボードを閉じる手段があるか（Keyboard.dismiss() 等）

3. ハプティクス

  • • ボタンのプレスに触覚フィードバックがあるか
  • • 破壊的アクション（削除等）に notificationAsync(Warning) があるか
  • • タブ切り替え・トグルに selectionAsync() があるか
  • • 成功・完了時に notificationAsync(Success) があるか

4. アクセシビリティ

  • • すべての Pressable / TouchableOpacity に accessibilityLabel があるか
  • • アイコンのみのボタンに accessibilityLabel があるか
  • • 画像に accessibilityLabel または accessible={false}（装飾的）があるか
  • • accessibilityRole が適切に設定されているか（button, link, header 等）
  • • 絵文字アイコンがアクセシビリティラベルで補完されているか

5. パフォーマンス

  • • リスト表示に FlatList / SectionList を使っているか（.map() ではなく）
  • • 画像に適切な resizeMode と遅延読み込みがあるか
  • • 不要な再レンダリングを防ぐ React.memo / useMemo / useCallback があるか
  • • key prop に配列のインデックスではなく一意のIDを使っているか

6. iOS HIG 準拠

  • • 絵文字ではなくアイコンライブラリ（@expo/vector-icons 等）を使っているか
  • • 戻るボタンがiOS標準のシェブロン（<）スタイルか
  • • モーダル/シート表示が適切か（設定画面等）
  • • タッチターゲットが最低44x44ptあるか
  • • フォントサイズがiOSの推奨範囲内か（本文: 17pt, キャプション: 12pt以上）

7. Liquid Glass デザイン準拠

  • • カード・ツールバー・モーダルに LiquidGlassView が適用されているか
  • • 近接するガラス要素が LiquidGlassContainerView でグループ化されているか
  • • effect プロパティが適切か（カード: regular, オーバーレイ: clear）
  • • ガラス背景上のテキストが十分なコントラストを持つか（WCAG AA以上）
  • • isLiquidGlassSupported で非対応デバイスにフォールバックがあるか
  • • フォールバック時に半透明背景色（例: rgba(255,255,255,0.8)）が設定されているか
  • • 全画面ガラス背景を避け、アクセント的に使用しているか
  • • ガラス要素に borderRadius が設定されているか
  • • 「透明度を下げる」設定 (AccessibilityInfo) を尊重しているか
  • • ガラス要素の高さが65px超の場合、テキストに PlatformColor('labelColor') を使用しているか

8. ジェスチャー & インタラクション

  • • スワイプバック（←方向）でナビゲーション戻りができるか
  • • リストにプルトゥリフレッシュ (RefreshControl) があるか
  • • ロングプレスでコンテキストメニューが出るか（必要な箇所）
  • • ボタンにプレス状態のフィードバック（opacity/scale）があるか

出力フォーマット

code
## iOS UX 監査レポート

### 対象: [画面名 or 全画面]

#### 🔴 Critical（即座に修正すべき）
- **[カテゴリ]** `ファイル名:行番号` — 問題の説明
  → 改善案: ...

#### 🟡 Warning（改善推奨）
- **[カテゴリ]** `ファイル名:行番号` — 問題の説明
  → 改善案: ...

#### 🟢 Good（問題なし）
- [カテゴリ]: ✓ 適切に実装済み

#### 📊 スコア: X / 8 カテゴリ合格

ルール

  • •コードの変更は行わない。監査とレポートのみ
  • •問題箇所は必ずファイルパスと行番号を含める
  • •改善案は具体的なコード例を含める
  • •プロジェクトの src/theme/tokens.ts のデザイントークンを考慮する
  • •既存の依存パッケージで対応可能な改善を優先する