performance について
performanceは、UIの速度と安定性を診断・改善するデザインスキルです。遅さやぎくしゃくした動きがアクセシビリティに及ぼす影響を踏まえ、Core Web Vitalsの予算に沿って読み込み、レイアウトシフト、アニメーションの指針を示します。
主な機能
- 01LCP・INP・CLSの目標を測定
- 02読み込みの優先順位付けと分割
- 03領域を確保してレイアウトシフトを防止
- 04コンポジター向けアニメーションの使用
- 05視差効果の低減設定に対応
活用シーン
- 01モバイル環境でCore Web Vitalsを診断
- 02ページ読み込み時のレイアウトシフトを低減
- 03低性能デバイスでの操作応答性を改善
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/performanceを入力して読み込まれたか確認します。
詳細
スキル：パフォーマンス
ステップ 0：キットはありますか？ このスキルではキットのファイルを読み込みます。一度確認してください：
ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSINGKIT_MISSINGの場合、スキルフォルダーのみがインストールされています。これはnpx skills addを実行したときの状態です。その旨を明確に伝え、npx ux-ui-agent-skills initまたはプラグインのインストールを案内して、そこで終了してください。開けなかったファイルの内容を推測してはいけません。
UI を高速かつ安定させます。パフォーマンスはアクセシビリティの問題として扱ってください。遅く、動きのぎこちない UI は、まず低性能なデバイスで問題が発生します。
手順
${CLAUDE_SKILL_DIR}/../../../workflows/performance.mdを読みます（Core Web Vitals の目標値、読み込み戦略、レイアウトシフト、アニメーションのパフォーマンス、デザインシステムのランタイムコスト）。- 予算に照らして診断します：LCP ≤ 2.5s、INP ≤ 200ms、CLS ≤ 0.1。ミドルレンジのモバイル端末プロファイル（低速 4G ＋ CPU 4 倍のスロットリング）で測定します。
- 読み込み：ファーストビューのコンテンツを優先してレンダリングします（SSR／Server Components）。ルート単位および重量級ウィジェット単位でコード分割し、ファーストビューより下や操作が必要なコンテンツは遅延読み込みします（Astro islands／Qwik）。重要なフォントのウェイトを 1 つプリロードし、最新のレスポンシブ画像を使用します。
- レイアウトシフトをなくします：スケルトンのサイズを最終的な寸法に合わせ、
aspect-ratioでメディアの表示領域を確保します（${CLAUDE_SKILL_DIR}/../../../tokens/sizing.json）。既存コンテンツの上にコンテンツを挿入してはいけません。 - アニメーション：
transform／opacityのみを使用し、will-changeは控えめに、時間は 100～300ms とします（${CLAUDE_SKILL_DIR}/../../../tokens/motion.json）。prefers-reduced-motionを尊重します。INP を低く抑えるには、JS より CSS による状態のスタイリングを優先し、ツリーシェイキング／コンポーネント単位のインポートを行います。
検証（完了の定義）
- ミドルレンジのモバイル端末で、Lighthouse／フィールドデータが LCP ≤ 2.5s、INP ≤ 200ms、CLS ≤ 0.1 を満たしている。
- 低速 4G ＋ CPU 4 倍のスロットリング下でも、最初の操作に対する応答性が保たれている。
- スケルトンとメディアの表示領域が確保され、読み込み時の CLS がゼロである。ループ内でコンポジターを使用しないアニメーションがない。
コメント
Markdown 対応