Lighthouse改善スキル

PSI APIを使用して自動でLighthouseスコアを取得し、基準未達時にガードレールを遵守しながらコード修正を行うスキル。

When to Use

• /lighthouse で明示的に呼び出された時
• オペレータからLighthouseスコアの改善依頼があった時
• 機能追加後のパフォーマンス品質確認時

コアミッション

• 基準値の維持: docs/paths.md のパス別基準値を全ページで達成・維持する
• 最小限の修正: スコア改善に必要最小限の変更のみ実施する
• ガードレール遵守: CSSアーキテクチャとVite設定のガードレールを厳守する
• 自動測定の優先: PSI APIによる自動測定を優先し、オペレータの負担を軽減する
• アンチパターン回避: 過去に失敗が実証済みのアプローチを再試行しない

実行フロー

┌──────────────────┐    全合格    ┌──────────┐
│ Phase 1           │───────────→│  完了     │
│ スコア確認        │             │  レポート  │
│ (API自動取得)     │             └──────────┘
└──────┬───────────┘                  ↑
       │ 基準未達                     │
       ▼                            │
┌─────────────┐                     │
│ Phase 2     │                     │
│ 分析・方針  │                     │
└──────┬──────┘                     │
       │                            │
       ▼                            │
┌─────────────┐                     │
│ Phase 3     │                     │
│ 修正実施    │                     │
└──────┬──────┘                     │
       │                            │
       ▼                            │
┌──────────────────┐                │
│ Phase 4           │               │
│ commit & push     │               │
│ + 再測定          │               │
└──────┬───────────┘                │
       │ 基準未達                   │
       └────────────────────────────┘

フェーズ概要

Phase	名前	役割	成果物	プロンプト
1	スコア確認	Automated Score Receiver	スコアレポート（合否判定）	prompts/01-measure.md
2	分析・方針	Performance Analyst	修正方針書	prompts/02-analyze.md
3	修正実施	Performance Optimizer	修正済みファイル	prompts/03-fix.md
4	commit & push & 再測定	Deployer	push完了 + 再測定結果	prompts/04-verify.md

測定スクリプト

scripts/psi-measure.mjs - PSI API を使用した自動測定ツール。

# 全ページ測定（gitブランチから自動判定）
node scripts/psi-measure.mjs

# ベースURL指定
node scripts/psi-measure.mjs --base-url https://stg0210.claudemix.pages.dev

# 特定ページのみ測定
node scripts/psi-measure.mjs --path /login

# 複数回測定して中央値を採用（PSIブレ対策）
node scripts/psi-measure.mjs --retry 3

# 組み合わせ
node scripts/psi-measure.mjs --path /login --retry 3

オプション	説明	デフォルト
--base-url <url>	デプロイURL（省略時はgitブランチから自動判定）	自動判定
--path <path>	特定パスのみ測定（例: /login）	全ページ
--retry <N>	N回測定して中央値を採用（1-5）	1

スコアに前回測定との差分（Δ）が自動表示される。

ガードレール

修正時に遵守すべき制約。詳細は docs/guardrails.md を参照。

• CSS: インラインCSS禁止、CSS5層アーキテクチャの構造変更禁止
• Vite: vite.config.ts のビルド設定変更はユーザー承認必須
• アンチパターン: 過去に失敗が実証済みのアプローチは再試行禁止

承認フロー

ガードレール非抵触の修正案がある → 承認不要、自動実行
ガードレール抵触する修正案のみ  → AskUserQuestion で承認必須
アンチパターンに該当            → 修正候補から除外

参照ドキュメント

ファイル	役割
prompts/01-measure.md	Phase 1: スコア確認プロンプト
prompts/02-analyze.md	Phase 2: 分析・修正方針プロンプト
prompts/03-fix.md	Phase 3: 修正実施プロンプト
prompts/04-verify.md	Phase 4: 品質チェック+pushプロンプト
docs/thresholds.md	基準値・合格ライン・PSIブレ定義
docs/guardrails.md	修正ガードレール（CSS/Vite/アンチパターン）
docs/paths.md	測定対象パスリスト（パス別基準値）

注意事項

1. APIによる自動測定: scripts/psi-measure.mjs を使用してPSI APIから自動でスコアを取得する。失敗した場合はオペレータに手動測定を依頼する。
2. APIキーの確認: .dev.vars または環境変数に PAGESPEED_API_KEY が設定されているか確認する。未設定でも動作するが、レート制限により待機時間が長くなる。
3. デプロイ版が基準: 本番/プレビュー環境のスコアが正式な判定対象
4. ループ上限: 改善ループは最大3回まで。3回で基準未達の場合はレポートして終了
5. 修正範囲: Lighthouseスコア改善に直接関係する修正のみ実施。無関係なリファクタリングは行わない
6. レポート必須: 各Phaseの結果は必ずオペレータに報告する
7. PSI測定ブレ: 同一コードでも±1-3ptのブレが発生する。1pt差は実質限界として扱い、--retry 3 で中央値を確認する