スキル: パフォーマンス
UIを高速かつ安定させます。パフォーマンスをアクセシビリティの問題として扱ってください — 低速/カクつくUIは低性能デバイスで最初に失敗します。
手順
workflows/performance.mdを読む（Core Web Vitalsの目標値、ローディング戦略、レイアウトシフト、アニメーションパフォーマンス、デザインシステムのランタイムコスト）。- 目標に対して診断する: LCP ≤ 2.5s、INP ≤ 200ms、CLS ≤ 0.1。中程度のモバイルプロファイル（低速4G + 4倍CPUスロットル）で測定する。
- ローディング: ファーストビューを先にレンダリングする（SSR/Server Components）、ルート + 重量ウィジェットでコード分割する、ファーストビュー以下/インタラクションの後ろを遅延ロードする（Astro islands / Qwik）、重要なフォントウェイトを1つプリロードする、モダンなレスポンシブ画像を使用する。
- レイアウトシフトを抑制する: スケルトンを最終的な寸法にサイズ設定する、
aspect-ratio（tokens/sizing.json）でメディアスペースを予約する、既存のコンテンツの上にコンテンツを注入しない。 - アニメーション:
transform/opacityのみ使用、will-changeは控えめに、100～300ms（tokens/motion.json）、prefers-reduced-motionを尊重する。低INPのためにはJSよりもCSS状態スタイリングを優先する；ツリーシェイク/コンポーネント単位のインポートを行う。
検証（完了条件）
- Lighthouse / フィールドデータが、中程度のモバイルでLCP ≤ 2.5s、INP ≤ 200ms、CLS ≤ 0.1を満たす。
- 最初のインタラクションが低速4G + 4倍CPUスロットル下でも応答性を保つ。
- スケルトン + メディアがスペースを予約する（ロード時にCLSゼロ）；ループ内に非コンポジターアニメーションが存在しない。