Agent Skills by ALSEL
Anthropic Claudeソフトウェア開発⭐ リポ 0品質スコア 50/100

ux-audit

実際のユーザーとして動作するWebアプリのUX監査を実施します。静的レビューでは発見できないユーザビリティ上の問題や動作バグを、クリック・入力・送信などの実際のインタラクションを通じて検出します(インタラクションなしの監査は「Incomplete」として終了)。全UI要素の操作、マルチペインストレス検証、視覚品質チェック、アクセシビリティ自動検査(axe-core)、パフォーマンス計測(LCP/CLS/INP)、11シナリオのテストバッテリーを網羅し、コンソールエラー・5xxエラー・レイアウト崩壊・axe Critical/Seriousの件数ゼロを必須条件とします。各指摘事項には再現手順・証跡・コード箇所の推定が含まれます。「ux audit」「walkthrough」「qa sweep」「audit the app」「dogfood this」「check all pages」「find what's broken」「stress the UI」などのキーワードで起動します。

description の原文を見る

Walk through a live web app AS a real user to find usability + behavioural bugs that static reviews miss. REQUIRES proof of interaction (typing, clicking, sending, observing) before any verdict — a sweep that didn't interact terminates with verdict 'Incomplete'. Walks threads, exercises every element, runs the multi-pane stress matrix, visual polish sweep, component perfection checklist, automated a11y (axe-core), pragmatic performance budget (LCP/CLS/INP), scenario battery (11 scenarios), and stress recipes including the real-flavour data battery. Hard gates: console errors/warnings = 0, network 5xx = 0, layout collapse = 0, axe Critical/Serious = 0, perf budget green. Audit-the-audit meta-check rejects rushed reports. Each finding has reproduction steps, evidence path, and suspected code location. Trigger with 'ux audit', 'walkthrough', 'qa sweep', 'audit the app', 'dogfood this', 'check all pages', 'find what's broken', 'stress the UI'.

SKILL.md 本文

UX 監査

ライブ Web アプリを実ユーザーとして操作します。この監査はインタラクション優先です。入力、クリック、送信、観察、スクリーンショット。静的な DOM スイープでは何の判定もできません。

判定状態

監査は必ず以下のいずれか一つで終了します:

  • 合格 (Pass) — Critical = 0、High = 0、すべてのハード ゲート緑、Interaction Manifest 完全。
  • 条件付き合格 (Conditional Pass) — Critical = 0、High = 0、すべてのハード ゲート緑、ただし Medium/Low あり。
  • 不合格 (Fail) — Critical または High の検出が 1 件以上、または何らかのハード ゲートが赤。
  • 未完了 (Incomplete) — Interaction Manifest に必須エントリがない、フェーズが実行されていない、または監査-監査メタチェックで引っかかった (マニフェスト タイムスタンプが 0.5 秒以内に集中、ルート数の 2 倍未満のスクリーンショット、ルート数未満のコンソール読み取り、フェーズ 3 が包括的な監査の場合 1 分未満)。観察したものすべてが問題なさそうでも、合格にアップグレードすることはできません。

Interaction Manifest が完全でない場合、唯一の合法的な判定は未完了です。「見た感じ問題ない」は合格ではありません。信じ難いタイミングでのクリーンな合格は却下されます。エージェントは実際のインタラクションで監査をやり直す必要があります。

ハード ゲート

これらは自動的に監査を不合格にします。ダウングレードできません。

ゲート閾値違反時の重大度
ウォークスルー中のコンソール エラー> 0Critical
ウォークスルー中のコンソール警告> 0High
ネットワーク 5xx> 0Critical
認証済みページでのネットワーク 403 / 404> 0High
テストされたビューポート / ペイン組み合わせでのレイアウト崩壊> 0High
監査済みページでの axe-core Critical 違反> 0Critical
監査済みページでの axe-core Serious 違反> 0High
代表的なルートでの LCP (プラグマティック予算)> 4.0sHigh
代表的なルートでの CLS> 0.25High
代表的なルートでの INP> 500msHigh
必須 Interaction Manifest エントリがないn/aIncomplete
マニフェスト エントリ間の中央値ギャップ < 0.5sn/aIncomplete (実際にインタラクションしていない)

コンソール警告は最低でも High です。5xx は自動的に Critical です。「Medium コンソール エラー」というカテゴリは存在しません。このスキルではそのカテゴリはありません。

axe-core 閾値はページごとに実行されます (いずれかのページで 1 つ以上の違反があると失敗)。パフォーマンス閾値は代表的なルートで 1 回実行されます (ページごとはやり過ぎ)。プラグマティック予算は故障水準よりはるかに上で、CWV 厳密版よりはるかに下です。完全な閾値と理由は references/performance-budget.md にあります。完全なアクセシビリティ配線と重大度マッピングは references/a11y-automation.md にあります。

既知のノイズのホワイトリスト

一部のアプリには既知のノイズが出るコンソール / ネットワーク カテゴリがあります。これはバグではありません (Sentry 情報ログ、ブラウザ拡張機能チャター、auth-check プローブでの予期される 401)。フェーズ 3 の前に監査設定ファイルを読み込み、ホワイトリストを適用してください。パス フォールバック: .jez/audit-config.ymlaudit-config.yml.audit/config.yml。ホワイトリストエントリは Interaction Manifest に残りますが、検出結果から除外されます。判定ブロックは生と許可の両方を表示します: Console warnings: 3 (1 allowlisted, 2 reportable)

デフォルト (設定なし): すべてのコンソール エラー / 警告は検出です。形式、セマンティクス、サーフェスのオーバーライドは references/audit-config.md にあります。

フェーズ (順序)

  1. プリフライト — ペルソナ ロック、ブラウザ ツール、URL、ビューポート、機能テスト
  2. 発見 — サイトマップ、スレッド インベントリ、エレメント インベントリ
  3. ウォークスルー — Interaction Manifest、スレッド、エレメント網羅、マルチペイン ストレス、初回ユーザー レンズ、ライブ インタラクション スモーク
  4. ポリッシュ — ビジュアル ポリッシュ スイープ、コンポーネント完璧性チェックリスト
  5. ストレス — シナリオ バッテリ (11 シナリオ) + 拡張ストレス レシピ
  6. 判定 — 判定状態、ハード ゲート スコアカード、完璧性ロードマップ、再現手順付き検出結果
  7. 修正と確認 — 検出結果にパッチを当て、影響を受けたスライスを再操作、レポートを更新

30 秒のプリデプロイ チェックの場合、このファイルの下部にある dogfood ドリルを使用してください。これはスキル呼び出しではなく、プロジェクトレベルのルールです。

フェーズ 1 — プリフライト

5 つのゲート。いずれかが失敗した場合は停止してください。

1. ペルソナ ロック

監査には、他のどんなことよりも前にペルソナが必要です。ペルソナをロックしないと、検出結果は汎用的な「見た感じ問題ない」へ流れます。

ペルソナを以下の順で取得してください:

  1. 引数 — ユーザーが指定した場合 (「忙しい保険ブローカーとして ux 監査」)
  2. プロジェクト ペルソナ — 既存のペルソナ ファイルを読み込みます (フォールバック チェーン: .jez/audit-personas/<slug>.mddocs/personas/<slug>.mdpersonas/<slug>.md.audit/personas/<slug>.md)。最初にマッチしたものが勝ちます。
  3. 1 回だけ聞く「このアプリを誰が使っていて、何をしようとしていますか?」

取得内容: 役割、技術的な快適さ、時間的プレッシャー、感情状態、デバイス コンテキスト。良いペルソナは、彼らが何を見落とすか予測します (「電話の合間に動く受付係はスクロール フォールド下に行きません」)。

監査レポートの上部に選択したペルソナを記述して、ペルソナをロックします。すべての検出結果は、このペルソナの視点から防御可能である必要があります。「開発者なら知ってるだろう...」と思っていることに気付いたら、止めてください。あなたのペルソナはそれを知りません。

初回ユーザー レンズ (必須、フェーズ 3 を参照) も常に実行してください マルチページ機能すべてで、明示的なペルソナが他のものであっても。これは AI / 内部ツール用の単一最大の盲点です。

ペルソナ ライブラリと作成プロトコルについては references/persona-lock.md を参照してください。

2. ブラウザ ツール

ターゲットツール理由
認証済みアプリChrome MCP実際のログイン済み Chrome セッションを使用 — OAuth、cookie、RBAC が機能します
パブリック サイトPlaywright MCPログイン不要
どちらも利用できない停止ユーザーに Chrome MCP を接続するか Playwright をインストールするよう依頼してください

認証済みアプリ用に新規 Playwright セッションにサイレント フォールバックしないでください。ログインできないと監査は無価値です。Chrome MCP が接続されていない場合は停止して、「Chrome を開いて Claude 拡張機能の [接続] をクリックしてから再実行してください」と言ってください。

コマンドについては references/browser-tools.md を参照してください。

3. URL

デプロイ済み / ライブ バージョンを優先します — 実際の認証、実際のレイテンシ、実際の CDN と CORS。発見: プロジェクト CLAUDE.md / README の「URL」を読む → スタック設定を確認 (wrangler.jsoncvite.config.tsnext.config.jsconfig/database.ymlmanage.py.env APP_URLwp-config.php) → lsof -i :PORT (一般的: 5173 Vite、3000 Next/Rails、8000 Django/Laravel、8787 Wrangler、4321 Astro) → 聞く。スタック固有のガイドは references/project-adaptation.md にあります。ユーザーが求めるか、機能がデプロイされていない場合のみローカルを使用してください。

4. ビューポート

ウィンドウを 1440×900 にピン留めして開始します。フェーズ 3 マルチペイン ストレスでは 375 / 768 / 1024 / 1280 / 1440 / 1920 をテストします。2000px を超えないでください — ハーネスが壊れます。

5. 機能テスト

ウォークスルー前に、ツールが機能することを証明します。各 1 回の呼び出し:

  • 1 つのスクリーンショット
  • 1 つのコンソール読み取り
  • 1 つのネットワーク リクエスト インベントリ
  • 1 つのエレメント セレクタ クエリ

いずれかが失敗した場合は停止して、監査を開始する前に接続を修正してください。コンソール出力が見えない監査は無価値です。

フェーズ 2 — 発見

サイトマップ クロール

ページを監査する前に、完全なページ インベントリを構築します。

  1. ルータ設定 — アプリのルート定義を読む (React Router、TanStack Router、Next.js app dir)
  2. ナビ クロール — サイドバー / メニューのすべてのセクションとサブセクションをクリックして操作
  3. ディープ リンク — CLAUDE.md、ドキュメント、または前の監査レポート内の URL

目的を示す 1 行ごとに 1 ルート: /app/clients — クライアント一覧、検索、新規追加

スレッド インベントリ

ユーザーの 1 日を構成する 3 〜 5 つの実際のタスクを特定します。これらは監査の背骨です。

見つけ方: ユーザーに聞く、CLAUDE.md / README を読む、トップレベル ナビから推測。例: 保険ブローカー → ポリシーの更新、クライアント作成、今日のキューを処理。プロジェクト管理 → 朝のトリアージ、タスク更新、クライアント向けサマリ送信。スペース / チャット アプリ → スペース作成、メッセージ送信、スレッド を開く。

エレメント インベントリ

各ルートに到達したら、すべてのインタラクティブ エレメントをリスト化します。遅延でインベントリを構築してください。事前にすべてではなく、操作時にページごとに。これにより、カバレッジ メトリクスが可能になります: 「/app/clients で 31 個中 29 個のエレメントをテスト」。

フェーズ 3 — ウォークスルー (監査そのもの)

Interaction Manifest (必須)

すべてのウォークスルーは マニフェストを生成します。これなしでは、判定 = 未完了。

INTERACTION MANIFEST — /dashboard/spaces/marketing-pod
  ペルソナ: SME 所有者、時間に追われている、技術リテラシー低
  [✓] 14:32:01 メッセージ入力に「@assistant test」をタイプ (textarea[placeholder*="message"])
  [✓] 14:32:03 オートコンプリートから @assistant を選択 (li[data-mention-id="assistant"])
  [✓] 14:32:05 送信をクリック (button[aria-label="Send"])
  [✓] 14:32:06 1000ms 以内に入力がクリアされたことを確認 (textarea.value === "")
  [✓] 14:32:08 メッセージがトランスクリプトに表示されたことを確認 ([data-message-id] 数 +1)
  [✓] 14:32:12 メッセージでスレッドを開く ([data-thread-trigger])
  [✓] 14:32:13 メイン列の幅がスレッド開く後 ≥ 200px であることを確認 (getBoundingClientRect().width)
  [✓] 各ステップ後のコンソール読み取り (0 警告、0 エラー)
  [✓] 各ステップ前後のスクリーンショット
  [✓] ネットワーク リクエストをインベントリ化 (0 5xx、認証ページで 0 403/404)

すべてのチェックボックスにはツール呼び出し (クリック、スクリーンショット、コンソール読み取り) が必要で、タイムスタンプとセレクタがログされます。エージェントは完全なマニフェストなしで「合格」レポートを作成できません。

監査済みページごとの必須エントリ:

  • テキストを入力した入力 ≥ 1 個 (単にクリックではなく実際のテキスト)
  • プライマリ アクション ≥ 1 個をトリガー (送信 / 保存 / 送信 / 作成 / 発行 — 合致するものは何でも)
  • モーダルまたは詳細ペイン ≥ 1 個を開く
  • プライマリ アクション後のコンソール読み取り ≥ 1 個
  • プライマリ アクション前後のスクリーンショット ≥ 1 個ずつ
  • 予期される操作後の状態の確認 (入力がクリア、成功トースト、ルート変更、リスト更新)

完全なテンプレートと再生プロトコルは references/interaction-manifest.md にあります。

スレッド トラバーサル

各スレッドについて:

  1. アプリ エントリ ポイントから開始 — スレッド途中ではなく。実際のユーザーは / または /dashboard に着地します。
  2. ペルソナとして操作 — 流し読みするなら流し読みします。ラベルを誤解するなら誤解します。躊躇をメモします。
  3. すべての状態変更をスクリーンショット — デフォルト → ホバー / フォーカス → アクティブ → クリック後 → ロード後 → 確認。フィルムストリップが証拠です。
  4. コストを追跡 — クリック数、決定ポイント、デッドエンド、中断復旧 (ステップ 3 でタブを閉じて、ステップ 4 で戻る — 状態は保持されましたか?)
  5. 各スレッド終了時に sub-agent にスクリーンショットをレビュー依頼

各スレッド終了時に (ペルソナとして) 答える: 「明確に終わりましたか? 戻ってきますか? これを 2 倍簡単にする 1 つのこと?」

references/walkthrough-checklist.mdreferences/workflow-comprehension.md を参照してください。

エレメント網羅

各ルートについて、インベントリを処理します。スレッド トラバーサルで既に実行したエレメントはスキップします。詳細は references/walkthrough-checklist.md にあります。

すべてのリスト / テーブル について、データが許せば 0 / 1 / 100 / 1000+ のボリュームでテストします。

マルチペイン ストレス (折りたたみ可能な UI を持つアプリでは必須)

ペイン組み合わせは最悪のレイアウト バグを隠します — 2026-04-29 の spaces での vertical-text バグはすべてのペイン 3 つが開いている 1024-1280px でのみ発生しました。サイドバー / メンバー / スレッド / ドロワー / シートを持つアプリの場合、マトリックスを実行: 1920 / 1440 / 1280 (high-bug) / 1024 (catastrophic-bug) / 768 / 375 × すべて開く、2 ペイン、1 ペイン、デフォルト。各組み合わせについて: 最長コンテンツをスクロール、スクリーンショットをキャプチャ、オーバーフロー / クリッピング / vertical-text-stacks 用の layout-detection JS を実行。完全なマトリックス + JS スニペット + 自動化は references/multi-pane-stress.md にあります。

初回ユーザー レンズ (必須)

ロック済みペルソナ以外に、すべてのマルチページ機能は初回ユーザー チェックに合格する必要があります。これは内部 / AI ツール用の単一最大の UX 失敗モード、つまり設計者がそのアプリ内で機能を構築した場合に当たります。それ自体の機能は 彼ら のために機能しますが、同じ画面に初めて着地した新規ユーザーは何のコントロールの意味もわかりません。

以前のコンテキストなし、ソース アクセスなし、内部ドキュメントなしでこのアプリに初めてサインアップする誰か というペルソナを採用します。各画面について聞きます:

質問何をキャッチするか
コードまたはドキュメントを読まずに タスクを完了できますか?UI に焼き込まれた隠された技術知識
フィールド ラベルは平易な言語で、内部用語ではありませんか?agentClassslugwebhook_id が UI に流出
ドロップダウン / ピッカーは単なる ID ではなく、各オプションが何をするかを表示 しますか?Snake_case 列挙、生のクラス名、不透明なスラッグ
デフォルトは合理的で、それを保持して先に進められるほどでしょうか?デフォルト値がない必須フィールド、必須 ID 入力
何かを入力する必要がある場合、有効な値の発見可能なリストがありますか?コンボボックスであるべき場所でのテキスト入力フリー
設定を理解できないので「スキップ」と言ってしまったら、それは UX バグです。オプションだが混乱させる設定が主要入力として公開

レンズが反応したら、画面が技術的に機能していても検出結果をログしてください。一般的な修正: テキスト入力をピッカーで置き換える、メタデータを表示する、値を自動取得する、内部 ID を「詳細設定」に隠す、インライン ガイダンスを追加。

新規ペルソナがバックチャネル ヘルプなしにタスクを完了できるとき、画面はレンズに合格します。

ライブ インタラクション スモーク

コード リーディングは、ボタンが存在し、onClick を持つことを確認します。実際にクリックしたときに何か観察可能なことが起こることは確認しません。すべてのページ上のすべてのインタラクティブ コントロールについて:

  1. クリックします。 ポインタが移動、エレメントがハイライト、クリックが着地。
  2. Network タブを見ます。 リクエストが発火しましたか? 正しい URL に? 正しいメソッド + 本文?
  3. DOM を見ます。 何か明らかに変わりましたか — 新しいエレメント、削除されたエレメント、状態遷移?
  4. (2) または (3) で何も変わらなかった場合、それはバグです。

既知のサイレント失敗コントロール (tool-call カード上の承認 / 却下、OAuth-in-dialog がポップアップ ブロック、非同期検証フォーム、楽観的 UI 削除、off-by-one ページネーション、古い TanStack Query 付きフィルタ チップ、Message-ID なしで返信 / 転送): references/live-interaction-smoke.md で完全なサイレント失敗カタログと SDK コントラクト チェック (@ai-sdk/react、better-auth、TanStack Query、React Router v7、Radix Dialog、zodResolver) を参照してください。

ラウンド トリップ ワークフロー完全性 (必須)

バッテリの Scenario 10 でカバーされています (フェーズ 5)。フェーズ 3 ウォークスルーの一部としても実行してください。スレッド トラバーサル中に遭遇した A→B→A フロー はすべて、先に進む前にラウンド トリップ チェックを取得します。完全なプロトコルは references/round-trip-workflows.md にあります。

レスポンシブ スイープ

すべての幅でのレイアウト検出 JS (オーバーフロー、クリッピング、不可視テキスト)。遷移ポイントをキャプチャ。上記のマルチペイン ストレスと組み合わせてフル カバレッジをします。

監査中の認証失効

ナビゲーションまたは API 呼び出しが以前に認証されたルートで 401/403 を返す場合、セッションは削除されました。サイレント再認証しないでください — その後のすべての観察は破損しています。停止して、失敗ステップをキャプチャ (サイレント失効自体が検出結果です)、判定 未完了 で終了、再認証 + 再開始を推奨。完全なプロトコルと検出結果基準は references/auth-expired-handling.md にあります。

フェーズ 4 — ポリッシュ

ビジュアル ポリッシュ スイープ

10 の AI-tell カテゴリをカバーするページごとのマイクロ ポリッシュ パス: 光学中央揃え、nested border-radius ルール、スケール外スペーシング、vibe グレー、border-weight ドリフト、drop-shadow 方向、標準的なアニメーション タイミング、ホバー デルタ キャリブレーション、underline / uppercase letter-spacing、対称性 vs 編集スペーシング。

プラス、ボタン、バッジ、入力、ドロップダウン、カード、タブ、アバター、トースト用のコンポーネント ごとの光学パス。

完全なプロトコル (DevTools ワークフロー、重大度ガイド、キャリブレーション用の参照アプリ) は references/visual-polish.md にあります。

コンポーネント完璧性チェックリスト

ページレベルの監査が見落とすコンポーネントレベルの粒度。6 つのカテゴリ、各カテゴリに証拠アーティファクトが必要な具体的な yes/no チェック:

  1. ボタンとトリガー — 状態明確さ、意図マッチング、マイクロ コピー、ロード状態、階層
  2. 入力とフォーム — 永続的なラベル、マスク、インライン検証、エラー明確さ、デフォルト設定
  3. ナビゲーションと階層 — ここはどこですか?、クリック深度、検索ロジック、スティッキー ヘッダー
  4. ビジュアル コヒーレンス — アイコン一貫性、空状態、border-radius、コントラスト比
  5. モバイルとタッチ — タップ可能サーフェス (≥ 48×48)、キーボード最適化、スワイプ ジェスチャー
  6. パフォーマンスとフィードバック — スケルトン スクリーン、成功トースト、確認モーダルは高リスク時のみ

プラス、主要コンポーネントごと 6 つのビジュアル状態 (デフォルト、スケルトン、空、部分、エラー、無効) — blank 上のスケルトンはスケルトンではありません。

レポート内のすべてのチェックボックスは証拠アーティファクト (スクリーンショット、コンソール行、DOM セレクタ、コード参照) を引用しています。証拠がない = カウントされません。

完全なチェックリストは references/perfection-checklist.md にあります。

自動アクセシビリティ (axe-core、必須)

キーボードのみのマニュアル ウォーク (Scenario 5) はフォーカス トラップとタブ順序をキャッチします。構造的 a11y バグの ~80% を見落とします (見出しのスキップ、ホバー / フォーカス コントラスト失敗、aria-label 欠落、役割不一致)。axe-core はそれを 1 秒未満 / ページでカバーしています。

監査済みのすべてのページについて:

  1. CDN 経由で axe-core をインジェクト (1 つのスクリプト タグ)。
  2. ページが定着した後、axe.run() を実行。
  3. 違反をマップ → 監査検出結果 (axe critical → 監査 Critical、axe serious → 監査 High など)。
  4. ハード ゲート: いずれかのページで > 0 axe Critical または > 0 axe Serious = 監査は失敗。

16 ルート監査の総実行時間は約 16 秒です。プロジェクトの監査設定 (references/audit-config.md 内のパス フォールバック チェーン) 経由でホワイトリスト化します (ビルダー モード参照ページ (コンポーネント、スタイル ガイド) 用)。完全なスニペット、重大度マッピング、検出結果形式は references/a11y-automation.md にあります。

パフォーマンス予算 (プラグマティック、必須)

代表的なルート (実際のユーザーが最も多く訪れるページ — 通常はダッシュボードまたはメイン ワーク サーフェス) で 1 回、Performance API キャプチャを実行します。プラグマティック閾値 (LCP < 4.0s、CLS < 0.25、INP < 500ms) は故障水準よりはるかに上で、Google の CWV「良好」ティアよりはるかに下です。CWV-strict はランディング ページとマーケティング チーム向けです。実際のユーザーが内部に座っているアプリ インテリアについては、プラグマティックが正しいバーです。

判定ブロックに追加します。任意のしきい値違反をハード ゲートします。Chrome DevTools Performance トレース (大きなヒーロー、遅いフォント、重いクリック ハンドラー、ハイドレーション コスト) で診断します。完全な測定スニペット、スロットリング仕様、一般的なオフェンダーは references/performance-budget.md にあります。

フェーズ 5 — ストレス

シナリオ バッテリ (11 シナリオ)

すべて 11 個、常に。これはスクリーン バイ スクリーン テストが見落とすものをキャッチします。完全なプロトコルは references/scenario-tests.md にあります。

  1. 初回接触 — 事前の知識ゼロでアプリを理解、各スレッドの 2 分間の平易な英語ガイドを記述。
  2. 中断ワークフロー — タスクを開始、タブを閉じ、更新、フォーム途中でナビゲート離脱。状態は保持されますか?
  3. 誤った方向への復旧 — 意図的に間違えてクリック。復旧するまでのクリック数は?
  4. リターン ユーザー — スレッドを繰り返します。高速化? ショートカット? 最後の訪問以来何が変わったか見分けられますか?
  5. キーボード のみ — すべてのスレッド キーボード のみ。フォーカス可視、タブ順序論理的、Escape で閉じる。
  6. 大量データ — 500+ レコードをシード。リストは仮想化、検索は正しい結果を返す、フィルタは絞り込み。
  7. 破壊的確信 — すべての削除 / 送信 / 発行 / 支払い / 共有: 同意は明確、コピーは具体的、元に戻す利用可能。
  8. 二番目のユーザー (役割) — 制限付き役割 (編集者ではなくビューア、スタッフではなくクライアント)。読み取り専用ビュー、権限エラー。
  9. ライフサイクル ポジション — 同じロールでユーザー #1 (創業者)、#2 (初めての招待者、部分状態)、#N (後からの参加者、入力済みワークスペース)。各自に異なる現実が見えます。
  10. ラウンド トリップ ワークフロー完全性 — A→B→A フロー: B 上での完全ミューテーション、リロードなしで戻り時に A が新しい状態を反映することを確認。発見可能な戻る親切。ヘッダー バッジ更新。最大「プロジェクトは戻ると空」のソース。
  11. データ シーズニング — Day 0 / 1 / 7 / 30 シード ホライズン。時間形状データは量のみのシードが見落とすものをキャッチします: 時間ディバイダー、最近性ソート、cron 発火の副作用、通知バッジ オーバーフロー、履歴付き検索パフォーマンス、チャート バケッティング。時間分布データが存在しない場合のみスキップします。

拡張ストレス レシピ

シナリオ以外に、references/stress-test-recipes.md で関連するすべてのレシピを実行します:

ストレスキャッチするもの
空 / 飽和 / 長いコンテンツAI 開発中にはほぼ見ないエッジ レイアウト
レース条件 (ダブル クリック、タイプしてからブラー、遅いネットワーク)楽観的 UI バグ、debounce 失敗
遅いネットワーク (3G スロットル)ロード状態、スケルトン リズム、タイムアウト UX
モーション削減 (prefers-reduced-motion: reduce)選好を無視するアニメーション
i18n (長いドイツ語、RTL アラビア語、CJK 幅)テキスト長に関する レイアウト想定
オフライン モード再試行 / キュー / ダーティ状態 UX
印刷スタイルシート忘れたメディア クエリ
高コントラスト モードForced-colors メディア クエリ処理
リアル フレーバー データ バッテリ (フォーム受け入れアプリでは必須)サイレント削除する検証 (アポストロフィ、アクセント、RTL); 警告なしの長さ切り詰め; エスケープされていない SQL/XSS カナリア; 合わないファイル アップロード (.heic、8000×8000 PNG、50MB PDF)。AI 構築 UI は開発データはほぼ清潔です。

フェーズ 6 — 判定

判定ブロック (レポート上部での必須)

═══════════════════════════════════════════════════════════
判定: [合格 / 条件付き合格 / 不合格 / 未完了]

ペルソナ: [ロック済みペルソナ スラッグ]
監査済みサーフェス: N / M ルート
Interaction Manifest: 完全 / 不完全 (Y 個必須エントリ中 X 個)

ハード ゲート: コンソール エラー [N]、警告 [N]、ネットワーク 5xx [N]、403/404 認証 [N]、レイアウト崩壊 [N]、axe Critical [N]、axe Serious [N]   (すべて 0 である必要があります; ホワイトリスト数は括弧内に表示)
パフォーマンス (/[ルート]): LCP [N]s / CLS [N] / INP [N]ms — しきい値 4.0s / 0.25 / 500ms

検出結果:
  Critical: [数]    High: [数]    Medium: [数]    Low: [数]

自己批判パス (sub-agent): ドラフト: [N]  保持: [N]  汎用: [N]  重複: [N]

フェーズごとの時間: フェーズ 3 [N]m / 合計 [N]m   (包括的な場合はフェーズ 3 ≥ 5m)
マニフェスト妥当性: [N] エントリ (≥ 6/ルート)、中央値ギャップ [N]s (< 0.5s = 未完了)、[N] スクリーンショット (≥ 2/ルート)

TOP 5 (影響度 × 容易さでランク付け、シニア デザイナー ピック):
  1-5. [F-id] タイトル — この 1 文が他より優れている理由
═══════════════════════════════════════════════════════════

Top 5、自己批判パス、および Hold-this-in-your-hands 終了段落 (フェーズ 7 後) は必須です。これらなしでは判定は 未完了。完全なディシプリン + 形式 + アンチパターンは references/audit-output-discipline.md にあります。

自己批判パス (発行前は必須)

検出結果ドラフト後、新しい sub-agent をドラフト リストでディスパッチし、このプロンプト:

「これらの監査検出結果を読んでください。各について、KEEP / GENERIC / DUPLICATE をマーク。KEEP = このアプリ、このペルソナ、このサーフェスに固有。GENERIC = 任意の web アプリに適用されるであろう。DUPLICATE = 別の検出結果と同じ根本原因。発行前に GENERIC と DUPLICATE をドロップ。」

新しい sub-agent は元のドラフト作成者が自分の出力に投資しているため機能します。コンテキスト内で行われた自己批判は防御傾向があります。パスをログ: ドラフト: 23 保持: 14 汎用: 5 重複: 4

監査-監査トリガー (交渉不可、自動的に未完了にフリップ)

シグナル意味するもの
フェーズ 3 が < 1m / マニフェスト最初から最後のスパン が包括的な場合 < 5mウォークスルー スキップまたは急いだ
マニフェスト エントリ間の中央値ギャップ < 0.5sエントリ バッチ エミット、実際のインタラクションなし
スクリーンショット ルート数の 2 倍未満 / コンソール読み取り ルート数未満ページは実際にチェックされていない
Top 5 欠落またはフィラー スロットでパディングディシプリン破損 (audit-output-discipline.md 参照)
自己批判パス ログなしフィラーはプルーニングなし
検出結果は「提案された修正」/ 「X を検討」/ 「Y を改善」を使用フィラー形状パッチ、コミット不可
[✓] PASS 行に 1 文証拠 + アーティファクト がないVibe PASS
Hold-this-in-your-hands 段落が欠落ホリスティック判断なし

検出結果形式 (検出結果ごとに必須)

すべての検出結果には含まれている必要があります: ID (重大度文字 + 番号)、レイヤー (アーキテクチャ / インタラクション / ビジュアル / フィードバック / 喜び)、重大度サーフェス (ルート + ビューポート + ペイン)、ペルソナ再現 (番号付きステップ)、観察予期証拠 (スクリーンショット パス + コンソール / ネットワーク キャプチャ)、疑わしい場所 (file:line)、最小パッチ (具体的 + コミット可能 — 「提案された修正」/ 「X を検討」ではない)。再現 + 証拠 + 疑わしい場所がない検出結果は却下されます。フィラー パッチ (「X を改善」、「Y を検討」、「Z をより良くする」) は自己批判パスで未完了にフリップされます。実行例と Five-Layer Hierarchy は references/report-template.mdreferences/perfection-checklist.md にあります。ディシプリン ルール は references/audit-output-discipline.md にあります。

これを手に持つ (必須の終了段落)

すべての監査は 1 段落で終わります。テンプレートなし。答える: このアプリが物理的なオブジェクトだった場合、それを持ちたいですか? これはビブが ポイント である唯一の場所です — チェックリストが表示しないホリスティック判断。形式 + 実行例 は references/audit-output-discipline.md にあります。

完璧性ロードマップ (必須)

検出結果を グループ化:

  • クイック ウィン (24-48h) — マイクロ コピー、ホバー状態、コントラスト修正、単一行 CSS 調整
  • 構造的 (1-2 週間) — プリミティブ置き換え、ルート再構築、マルチペイン リファクタリング
  • 高度なポリッシュ (ローンチ後) — マイクロ アニメーション、スケルトン バリエーション、個人化された空状態

完全なレポート構造は references/report-template.md にあります。

フェーズ 7 — 修正と確認

レポート後、ループを提案:

「N 件の Critical と M 件の High の問題が見つかりました。今すぐ修正して再確認しますか?」

はい の場合:

  1. 検出結果をファイル / 領域でグループ化
  2. 各パッチ
  3. 影響を受けたスライスのみを再操作 (アプリ全体ではなく) — バグを表面化させた元のインタラクションを含み、新しいスクリーンショットで
  4. レポートを更新: ✓ 修正✗ まだ存在、または ⚠ 新しい問題が見つかった をマーク
  5. 「このセッションで修正」サマリーで終了

明日の監査を待つのではなく、1 つのセッションでループを閉じます。

ux-extract と brains-trust との相互参照

パターン ライブラリが存在する場合 (フォールバック: .jez/artifacts/ux-extracts/<ref>.mddocs/ux-extracts/<ref>.mdaudits/extracts/<ref>.md)、開始前に読んで、検出結果のバーとして使用します。

判定後、オプションで dev-tools:brains-trust を実行して 2 番目の意見レビュー (4-6 週ごと)。検出結果をマージしながら、(reproduction-steps, suspected-location) でデデュプ — 2 番目のモデルからの同じバグは 2 つの検出結果ではなく、2 つの確認を持つ 1 つの検出結果です。Confirmed by: 行を追加。2 番目のレポートを逐語的にアペンドしないでください; ノイズを生成 + 重大度を膨張。

30 秒の Dogfood ドリル (プロジェクトレベルのルール)

監査は負荷が大きいです。変更ごとのプリデプロイ チェックの場合、CLAUDE.md でプロジェクト ルールを推奨します:

UI 変更が「完了」と宣言する前に、30 秒の dogfood ドリルを実行してください:

  1. 影響を受けたページを開く
  2. 入力にタイプ
  3. プライマリ アクション をクリック
  4. 次の状態を 2 秒間見る
  5. 関連ビュー を開く (スレッド、モーダル、詳細)
  6. コンソール を読む いずれかのステップが予期しない動作を示す場合、変更は完了していません。

6 ステップ、約 30 秒。すぐに表示される動作上のバグをキャッチ。毎週の完全な ux-audit と組み合わせます。

Playwright killer-flow テスト

監査は現在何が壊れているかを見つけます。テストは回帰を防ぎます。killer flow 用の 10-15 個の Playwright テストを記述することをお勧めします — references/playwright-killer-flows.md でスターター例を参照してください (送信後入力クリア、マウント時コンソール警告なし、スレッド開いた後メッセージ列幅 ≥ 200px、@-mention は正確に 1 つのピル、など)。すべてのデプロイで CI 経由で実行します。

自律性

  • 実行してください: ナビゲート、スクリーンショット、ページを読む、layout-detection JS をインジェクト、テスト データでフォーム送信、レポート ファイルを記述、sub-agent でスクリーンショット レビューをディスパッチ。
  • 最初に聞いてください: 破壊的アクション (削除、送信、発行、支払い)。破壊的確信テストの場合、そのシナリオを実行する前に 1 回聞く。
  • 停止と確認: 外部ユーザーにメール / 通知するすべて。

実行ディシプリン

  1. メイン セッションから監査を駆動し、sub-agent ではなく。 クロス インタラクション状態は観察していたセッションに存在。新しい sub-agent はコールドで開始し、2 次検出結果を見落とします。
  2. ブラウザ ツールを直接使用。 メイン セッションから Chrome MCP または Playwright MCP。スクリーンショットを新しいエージェントに渡して意見をもらわないでください。
  3. バリエーションで網羅まで循環。 各パス後、新しい角度を生成 (異なるペルソナ、異なるワークフロー、異なる入力ボリューム、異なる開始点)。完全なパスで新しい検出結果が出ないまでのみ停止。

30 分以上実行されると予想される監査では、メイン セッションと並行して 15 分の /loop チェックインを設定します — 検出結果をジャーナル化、セッションをグラウンド、自然な終了シグナルを提供。references/long-running-check-in-pattern.md を参照。

参照ファイル

読む
クロス スキル出力ディシプリン (Top 5、自己批判、最小パッチ、proof-PASS、hold-this)references/audit-output-discipline.md
プロジェクト適応 — 非デフォルト スタック (NextAuth/Lucia/Devise/Django auth、Prisma/TypeORM/ActiveRecord シード、WordPress/Rails/Django URL 発見、アプリ タイプ別ペルソナ ライブラリ)references/project-adaptation.md
ペルソナ ライブラリ + 作成プロトコル + ペルソナ オーバーロード パターンreferences/persona-lock.md
監査中の認証失効 — プロトコル + ヘッドレス test-auth 再開references/auth-expired-handling.md
データ シーズニング ホライズン (Day 0 / 1 / 7 / 30) + プロジェクト シード スクリプト アーキテクチャreferences/data-seasoning.md
監査設定 ホワイトリスト形式 + セマンティクス + サーフェス オーバーライドreferences/audit-config.md
Interaction Manifest テンプレート + 再生プロトコルreferences/interaction-manifest.md
マルチペイン ストレス マトリックス + 自動化スニペットreferences/multi-pane-stress.md
スクリーン ごとの評価質問、layout-detection JSreferences/walkthrough-checklist.md
ウェイファインディング、メンタル モデル、ページ-ページ 連続性references/workflow-comprehension.md
11 シナリオ各の完全なプロトコルreferences/scenario-tests.md
拡張ストレス レシピ (レース、遅いネットワーク、モーション削減、i18n)references/stress-test-recipes.md
コンポーネントレベル完璧性チェックリスト (6 カテゴリ + 6 状態)references/perfection-checklist.md
AI-tell カタログ、光学中央揃え、デザイン トークン ディシプリンreferences/visual-polish.md
サイレント失敗コントロール + SDK コントラクト チェックreferences/live-interaction-smoke.md
Playwright killer-flow テスト スターターreferences/playwright-killer-flows.md
レポート形式、判定ブロック、重大度ルーブリック、再現ステップ形式references/report-template.md
ブラウザ ツール コマンド とビューポート ノートreferences/browser-tools.md
ラウンド トリップ ワークフロー完全性 (A→B→A パターン)references/round-trip-workflows.md
自動アクセシビリティ (axe-core インジェクション + 重大度マッピング)references/a11y-automation.md
プラグマティック パフォーマンス予算 (Performance API 経由の LCP/CLS/INP)references/performance-budget.md
15 分の /loop 経由の長時間実行監査スーパーバイションreferences/long-running-check-in-pattern.md

ヒント

  • すべての躊躇は検出結果です。 クリックするものを理解するために一時停止したら、それは報告する価値がある摩擦です。
  • eyedropper を自由に使用。 Vibe グレーと off-token 色を見つけるための最速の単一方法。
  • カバレッジは算術。 インベントリ化 ÷ テスト済み。レポート内の比率を公開します。
  • sub-agents でスクリーンショット レビュー と検出結果の段階的な記述。 ブラウザを駆動して 1 つのループで 200 スクリーンショットを分析しないでください。レポート ファイ

ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ

詳細情報

作者
jezweb
リポジトリ
jezweb/claude-skills
ライセンス
MIT
最終更新
不明

Source: https://github.com/jezweb/claude-skills / ライセンス: MIT

関連スキル

汎用ソフトウェア開発⭐ リポ 39,967

doubt-driven-development

重要な判断はすべて、本番環境への展開前に新しい視点から対抗的レビューを実施します。速度より正確性が重要な場合、不慣れなコードを扱う場合、本番環境・セキュリティに関わるロジック・取り消し不可の操作など影響度が高い場合、または後でバグを修正するよりも今検証する方が効率的な場合に活用してください。

by addyosmani
汎用ソフトウェア開発⭐ リポ 1,175

apprun-skills

TypeScriptを使用したAppRunアプリケーションのMVU設計に関する総合的なガイダンスが得られます。コンポーネントパターン、イベントハンドリング、状態管理(非同期ジェネレータを含む)、パラメータと保護機能を備えたルーティング・ナビゲーション、vistestを使用したテストに対応しています。AppRunコンポーネントの設計・レビュー、ルートの配線、状態フローの管理、AppRunテストの作成時に活用してください。

by yysun
OpenAIソフトウェア開発⭐ リポ 797

desloppify

コードベースのヘルスチェックと技術負債の追跡ツールです。コード品質、技術負債、デッドコード、大規模ファイル、ゴッドクラス、重複関数、コードスメル、命名規則の問題、インポートサイクル、結合度の問題についてユーザーが質問した場合に使用してください。また、ヘルススコアの確認、次の改善項目の提案、クリーンアップ計画の作成をリクエストされた際にも対応します。29言語に対応しています。

by Git-on-my-level
汎用ソフトウェア開発⭐ リポ 39,967

debugging-and-error-recovery

テストが失敗したり、ビルドが壊れたり、動作が期待と異なったり、予期しないエラーが発生したりした場合に、体系的な根本原因デバッグをガイドします。推測ではなく、根本原因を見つけて修正するための体系的なアプローチが必要な場合に使用してください。

by addyosmani
汎用ソフトウェア開発⭐ リポ 39,967

test-driven-development

テスト駆動開発により実装を進めます。ロジックの実装、バグの修正、動作の変更など、あらゆる場面で活用できます。コードが正常に動作することを証明する必要がある場合、バグ報告を受けた場合、既存機能を修正する予定がある場合に使用してください。

by addyosmani
汎用ソフトウェア開発⭐ リポ 39,967

incremental-implementation

変更を段階的に実施します。複数のファイルに影響する機能や変更を実装する場合に使用してください。大量のコードを一度に書こうとしている場合や、タスクが一度では完結できないほど大きい場合に活用します。

by addyosmani
本サイトは GitHub 上で公開されているオープンソースの SKILL.md ファイルをクロール・インデックス化したものです。 各スキルの著作権は原作者に帰属します。掲載に問題がある場合は info@alsel.co.jp または /takedown フォームよりご連絡ください。
原作者: jezweb · jezweb/claude-skills · ライセンス: MIT