Menu
Core Web Vitals計測・診断スキル。Lighthouse CLI、Bundle Analyzer、パフォーマンス問題の特定と対策。
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Basé sur la classification professionnelle SOC
kimny × Claude（AI）のインタビュー形式でnote記事を作成するスキル。 品質ゲート（発見・外部アンカー・1文テスト）による公開判断、AIO最適化、対話フォーマットルールを定義。 使用タイミング: (1) note記事の作成・リライト (2) インタビュー形式の記事構成 (3) 過去会話からの記事化 (4) 記事の品質チェック。 トリガー例: 「記事にしたい」「noteに書きたい」「インタビュー形式で」 「これ記事にならない？」「記事のリライト」「品質ゲート通して」 「AIO最適化」「note記事」
note連載記事の有料/無料切り分け戦略を設計するスキル。 連載全体の無料回・有料回の配置、1記事内の有料ライン設計、価格設定、マガジン構成を扱う。 使用タイミング: (1) noteで有料記事を書きたい時 (2) 連載の課金設計 (3) 有料ラインの位置決め (4) マガジン構成の検討 (5) 価格設定の相談。 トリガー例: 「noteで有料にしたい」「連載の課金設計」「どこから有料にする？」 「noteで稼ぎたい」「マガジン構成どうする」「有料ライン」「価格設定」 ai-interview-articleスキルと併用可能。
経営部4課 (template/conductor/freee/cowork) → 5/18 cognitive load v3 rollout で全14課に展開された CLAUDE.md 共通block管理 skill (20 blocks)。 source of truth: blocks/*.md、各課CLAUDE.mdへ marker-bounded section置換でdistribute。 使用タイミング: (1) 共通block仕様変更時 (2) 14課横断 policy 同期時 (3) cognitive load v3 trial期間 (5/19-5/29) で各 peer marker 挿入 PR 完納時。
承認済みモックと UI 実装を「1ミリもずらさず同一」にするための忠実性照合の規律・手順。 native/plugin UI で反復した「承認 mock ≠ 実装（雰囲気移植で "近い" 止まり）」事故の再発防止機構。 使用タイミング: (1) 新規 UI 面・re-skin・視覚的再設計を実装する時 (2) 承認モックから実装する時 (3) 完了報告に render×mock の diff を添付する時 (4) conductor がモック忠実性を vet する時。 トリガー例: 「モック通りに実装」「UI をモックと同一に」「pixel-diff」「overlay で照合」 「mock に合わせて」「忠実性チェック」「これモックと違う」「1ミリもずらさず」 ※既存実装の微修正（コピー1行・padding・バグ修正）は対象外。
freee API を MCP 経由で操作するスキル。会計・人事労務・請求書・工数管理・販売の詳細APIリファレンスと使い方ガイドを提供。
セッションの区切りで durable 層（status.md・git・memory）を現在形に保つ 3 手順。発火点＝handoff / compaction 直前・idle 化の直前・長時間離席の前。
| name | core-web-vitals |
| description | Core Web Vitals計測・診断スキル。Lighthouse CLI、Bundle Analyzer、パフォーマンス問題の特定と対策。 |
パフォーマンス計測と問題診断に特化。最適化パターンは vercel-react-best-practices を参照。
| 指標 | Good | Needs Improvement | Poor |
|---|---|---|---|
| LCP (Largest Contentful Paint) | < 2.5s | 2.5s - 4.0s | > 4.0s |
| INP (Interaction to Next Paint) | < 200ms | 200ms - 500ms | > 500ms |
| CLS (Cumulative Layout Shift) | < 0.1 | 0.1 - 0.25 | > 0.25 |
| FCP (First Contentful Paint) | < 1.8s | 1.8s - 3.0s | > 3.0s |
| TTFB (Time to First Byte) | < 800ms | 800ms - 1800ms | > 1800ms |
# デスクトップ
npx lighthouse https://example.com --view --preset=desktop
# モバイル
npx lighthouse https://example.com --view --preset=perf --emulated-form-factor=mobile
# アクセシビリティのみ
npx lighthouse http://localhost:3000 --only-categories=accessibility --view
# JSON出力で詳細確認
npx lighthouse http://localhost:3000 --output=json | jq '.audits["largest-contentful-paint"]'
# Next.js
npm run build
npx @next/bundle-analyzer
# 汎用
npx source-map-explorer 'dist/**/*.js'
# Vercelダッシュボードで確認
# Analytics > Speed Insights
原因特定:
npx lighthouse URL --output=json | jq '.audits["largest-contentful-paint-element"]'
主な原因と対策:
| 原因 | 対策 |
|---|---|
| ヒーロー画像が重い | next/image + priority + WebP |
| Webフォント読み込み | next/font + display: swap |
| サーバー応答遅い | キャッシュ、CDN、DB最適化 |
| render-blocking JS | 動的インポート、defer |
原因特定:
主な原因と対策:
| 原因 | 対策 |
|---|---|
| 重いイベントハンドラ | useTransition、Web Worker |
| 過剰な再レンダリング | React DevTools Profiler確認 |
| 長いJSタスク | タスク分割、requestIdleCallback |
原因特定:
npx lighthouse URL --output=json | jq '.audits["layout-shift-elements"]'
主な原因と対策:
| 原因 | 対策 |
|---|---|
| 画像サイズ未指定 | width / height 必須 |
| 動的コンテンツ挿入 | スケルトンで領域確保 |
| Webフォント切り替え | font-display: swap + fallback |
| 広告/埋め込み | 固定サイズコンテナ |
主な原因と対策:
| 原因 | 対策 |
|---|---|
| 初期HTMLが大きい | Server Components、ストリーミング |
| render-blocking CSS | Critical CSS inline |
| TTFB が遅い | サーバー最適化 |