Communitygithub.com

フロントエンド準備態勢チェック

作業中の差分、PR URL、リリース対象、または全リポジトリ監査からフロントエンドの準備態勢を確認します。アプリ、UI、アクセシビリティ、パフォーマンス、フロントエンドPRレビューに使用します。

フロントエンド準備態勢チェック とは?

このスキルは、フロントエンドコードベースの準備態勢を評価するための包括的なチェックリストを提供します。開発者は、差分、PR URL、リリース対象、またはリポジトリ全体に対してスキルを呼び出すことができます。チェックリストは、正確性、フレームワーク規約、インターフェースとアクセシビリティ、回復力・プライバシー・セキュリティ、パフォーマンスとアセット、検索と共有、エンジニアリングとデプロイメントの各領域をカバーしています。各領域には詳細なチェック項目があり、ブロッキングとなる問題(例:クリティカルフローの破損、認証UIの欠陥、シークレットの漏洩)とアドバイザリの問題を区別します。このスキルは、Claude Code、Cursor、CodexなどのAIエージェントと統合され、一貫性のある客観的なフロントエンドレビューを可能にします。また、`check-readiness`スキルから呼び出すこともでき、その場合は選択されたターゲットを維持します。各チェックは、該当しない場合は明確な理由とともに「N/A」とマークすることができ、冗長性を排除しつつ包括性を維持します。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/yagyaraj234/skills/tree/HEAD/skills/frontend-readiness

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

フロントエンド準備態勢

$frontend-readiness diff、$frontend-readiness pr <URL>、$frontend-readiness release、または $frontend-readiness full として呼び出します。

check-readiness のモード、証拠、判定、編集ルールを使用します。直接呼び出された場合は、そこでモードを選択します。check-readiness によって呼び出された場合は、選択されたターゲットを維持します。フロントエンドの表面のみを評価します。

選択されたターゲットに適用されるチェックを評価します。スコープ内の例外は N/A と理由を記入します。該当しないセクション(検索と共有に該当しない非公開アプリ、フレームワーク規約に該当しないフレームワーク)は、チェックごとではなく、1行の N/A とします。

ブロッキング領域:クリティカルフローまたはルートの破損、認証と権限のUI、ユーザーコンテンツの安全でないレンダリング、漏洩したシークレット、クリティカルフローでのアクセシビリティ障害、データ駆動型サーフェスでのエラー状態または空状態の欠落、ビルドまたはテストの失敗。その他の障害はアドバイザリです。

正確性

  • スコープ内のすべてのルートが、直接ナビゲーション、リフレッシュ、アプリ内ナビゲーション、戻る、進むを通じてレンダリングされる。
  • すべてのクリティカルフローがハッピーパスを完了し、回復可能な障害時に有用な入力を保持する。
  • フォームは入力を検証し、重複送信を防止し、実行可能なエラーを表示し、支援技術にエラーを公開する。
  • クライアント、サーバー、URL、および永続化された状態が、リフレッシュ、キャンセル、古いレスポンス、および繰り返しのアクション全体で一貫性を保つ。
  • コンソールに新しいエラーや警告がない。失敗したネットワークリクエストは説明される。
  • 認証と権限の境界は、正しいUIを表示し、意図された戻りルートを保持し、期限切れのセッション、禁止されたレスポンス、およびロール変更を処理する。

すべてのデータ駆動型サーフェスは、明示的な状態マトリックスを持ちます。状態が発生し得ないか、ユーザーにとって価値がない場合のみ、N/A とマークします。

  • 空: 成功したゼロデータの結果は、何が起こったかを説明し、有用な次のアクションを提供する。
  • ローディング: 進行状況が明確であり、有用な既存コンテンツは安定しており、繰り返しのアクションは制御されたままである。
  • スケルトン: 最終レイアウトが予測可能で遅延が知覚できる場合、プレースホルダーはそれに一致し、レイアウトシフトを回避する。それ以外の場合は N/A と記録する。
  • 部分: 独立したセクションのロードまたは失敗中も、利用可能なコンテンツは使用可能なままである。
  • エラー: メッセージは実行可能であり、有用な入力は保持され、リトライまたはリカバリが機能する。

フレームワーク規約

プロジェクトが使用していないフレームワークの項目はスキップします。検出されたフレームワークとバージョンを記録します。

  • フレームワーク、ルーター、およびデータローディングAPIが、インストールされたバージョンおよび既存のプロジェクト規約と一致していることを確認します。バージョンと情報源を記録します。
  • 内部ナビゲーションは、検出されたフレームワークのリンクコンポーネント(例:next/link の Link や @tanstack/react-router の Link)を使用します。ネイティブの <a> は外部リンク、ダウンロード、メール、電話リンクを処理します。
  • ルートパラメータ、検索パラメータ、リダイレクト、およびナビゲーションは、フレームワークのルーターAPIとフックを使用します。
  • 静的スタイルと動的スタイルは、既存のフレームワークがサポートするスタイリングシステムに従います。動的な値は、ライブラリが必要とするポジショニングのためにインラインスタイルが必要な場合を除き、CSSカスタムプロパティを使用します。

インターフェースとアクセシビリティ

  • レイアウトは、記録された各ビューポートで意図しないオーバーフローなく動作します。長いテキスト、欠落したメディア、遅いデータ、および大規模なコレクションは使用可能なままです。
  • 階層、間隔、タイポグラフィ、色、およびインタラクティブなフィードバックは一貫しています。コントロールは、ホバー、フォーカス、アクティブ、無効、ローディング、エラーの各状態をカバーしています。
  • 破壊的なアクションには明確な意図が必要であり、可能な場合はリカバリを提供します。
  • セマンティックランドマーク、見出し、コントロール、ラベル、およびアクセシブルな名前が目的と一致しています。
  • キーボードのみでの使用で、すべてのインタラクティブ要素に論理的な順序で到達し操作できます。フォーカスは可視であり、ダイアログ、メニュー、エラー、ルート変更を通じて正しく移動します。
  • テキストおよび必須のUIは、記録されたアクセシビリティターゲット(より厳しい要件がない限りWCAG 2.2 AA)を満たしています。意味は色のみに依存しません。
  • 画像には適切な代替テキストがあります。装飾的なメディアは読み上げられません。ズーム、テキストサイズ変更、モーションの削減、および必要なスクリーンリーダー告知はフローを維持します。

回復力、プライバシー、セキュリティ

  • ユーザー制御のコンテンツは安全にレンダリングされます。シークレットと特権的な決定はサーバーサイドに留まります。
  • 外部リンク、リダイレクト、アップロード、ストレージ、およびブラウザAPIは、信頼できない入力を検証します。外部タブは、該当する場合に安全なオープナー動作を使用します。
  • オフラインおよびタイムアウト動作はデータ損失を回避します。
  • エラーUIは機密性の高い内部情報を省略しますが、ログは十分な診断コンテキストを保持します。
  • 認証または個人データ製品は、認証および永続的ナビゲーションから公開された利用規約とプライバシーページを公開します。コンテンツは実際の動作と一致しています。
  • アプリケーションがそれらを制御する場合、Cookie、CSRF防御、レスポンスセキュリティヘッダー、リダイレクト、およびキャッシュポリシーが検証されます。
  • 分析、エラートラッキング、および同意はプライバシー要件を尊重し、個人データやシークレットデータを公開しません。
  • 機能フラグは、検証済みのターゲット環境値を持ち、リスクの高い変更については、文書化されたロールバックまたは無効化パスを持ちます。

パフォーマンスとアセット

  • 代表的なルートが、記録された環境でプロダクションビルドから、TTFB、LCP、INP、CLS、最初の有用なコンテンツ、およびプライマリインタラクションのタイミングを使用して測定されます。
  • スコープ内のすべてのルートは、有用なコンテンツまたは実行可能なフォールバックを表示し、記録された予算内でプライマリインタラクションを受け入れます。より厳しい製品予算がない場合のデフォルトは5秒のみです。
  • プロダクションビルド出力、ルートチャンク、およびネットワークウォーターフォールに、説明不能な大きなコストは含まれません。
  • 変更されたパフォーマンス最適化は、測定可能なメリットがあり、該当する場合、キーボード、フォーカス、スクリーンリーダー、およびオフライン動作を維持します。
  • エフェクトは、依存関係が変更されたりコンポーネントがアンマウントされたりしたときに、リスナー、サブスクリプション、オブザーバー、保留中のリクエスト、ワーカー、タイマー、アニメーションフレーム、およびデバウンスまたはスロットルされた処理を解放します。
  • 画像は、利用可能なフレームワーク最適化、レスポンシブな寸法とsizes、最新のフォーマット、圧縮、安定したアスペクト比、および正しいeager/lazy優先度を使用します。動画とフォントは、意図的な配信、フォールバック、およびプリロード動作を持ちます。
  • サードパーティ、インライン、およびブロッキングスクリプトは、明示的な目的と読み込み優先度を持ちます。

検索と共有

公開または共有可能なルートにのみ適用されます。認証のみのアプリは、インデックス除外チェックのみが必要です。

  • すべてのルートは、適切なタイトルと説明メタデータを定義します。公開インデックス可能なルートは、フレームワークAPIを通じて正規URLとロボット意図を設定します。非本番環境および保護された環境は誤ってインデックスされません。
  • 共有可能なルートは、Open Graphおよびソーシャルメタデータを絶対的なクロール可能な値に解決します。OG画像は正しいコンテンツタイプ、寸法、および代替テキストを返します。レンダリングされたタグと実際の共有プレビューが検証されます。
  • リリースゲートの場合、Lighthouseは記録されたモバイルおよびデスクトッププロファイルでデプロイされた本番ルートに対して実行されます。パフォーマンス、アクセシビリティ、ベストプラクティス、およびSEOの結果と後退が記録されます。

エンジニアリングとデプロイメント

  • フォーマッター、リンター、型チェック、テスト、およびプロダクションビルドが合格するか、明示的なベースラインの失敗がある。
  • 変更されたロジックには、最小限の有用な自動回帰チェックがある。
  • 環境変数、機能フラグ、API URL、ブラウザサポート、およびテストアカウントがターゲット環境と一致している。
  • エラートラッキング、ファビコン、およびインストールアイコンが、製品で必要な場合に機能する。
  • リリースゲートまたはデプロイメントに影響を与える変更の場合、デプロイされたアセット、ルート、API、認証、ヘッダー、リダイレクト、およびキャッシュ動作がターゲット環境で検証される。

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

関連スキル