cloudflare-web-perf について
Cloudflare のウェブパフォーマンススキルのカタログ用スタブです。完全版のインストール方法と、Core Web Vitals の監査および Cloudflare 固有の修正内容を説明します。
主な機能
- 01完全版スキルの導入状況確認
- 02グローバルまたはプロジェクト単位での導入
- 03Core Web Vitals の監査
- 04描画とレイアウトの問題特定
- 05Cloudflare 固有の修正適用
活用シーン
- 01ウェブパフォーマンススキル完全版の導入
- 02LCP、INP、CLS、TTFB の監査
- 03描画ブロックリソースや画像の問題調査
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ podo/ design-agent-skills --skill cloudflare-web-perfインストール後、Claude Code で/cloudflare-web-perfを入力して読み込まれたか確認します。
同梱ファイルstub.yaml
詳細
cloudflare-web-perf
カタログのスタブ — 完全版スキル:cloudflare/skills
判断ツリー
-
完全版スキルはすでにインストールされていますか? この場所にあるスキルに、まだ
das:ブロックがあるか確認します。- グローバル:
grep -q "^das:" ~/.agents/skills/cloudflare-web-perf/SKILL.md 2>/dev/null && echo "pointer" || echo "installed" - プロジェクト:
grep -q "^das:" .agents/skills/cloudflare-web-perf/SKILL.md 2>/dev/null && echo "pointer" || echo "installed" das:ブロックがない → 完全版スキルがインストール済みです。呼び出して続行してくださいdas:ブロックがある → ステップ 2 に進みます
- グローバル:
-
スコープを検出してからインストールします。
スコープを検出するには:
[ -e ~/.agents/skills/cloudflare-web-perf ] && echo "global" || echo "project"グローバル(
-gを付けてインストール):npx skills add cloudflare/skills --skill cloudflare-web-perf -g -yプロジェクト(
-gを付けずにインストール):npx skills add cloudflare/skills --skill cloudflare-web-perf -yClaude Code: 会話から離れずに実行するには、どちらかのコマンドを
!で始まるチャットメッセージとして送信します。
インストール後の呼び出し
- スキル名:
cloudflare-web-perf - トリガーフレーズ:「ウェブパフォーマンス」、「Core Web Vitals」、「LCP」、「CLS」、「レンダリングブロック」
機能
Core Web Vitals(LCP(Largest Contentful Paint)、INP(Interaction to Next Paint)、CLS(Cumulative Layout Shift))と TTFB を監査して修正する、Cloudflare 公式スキルです。レンダリングをブロックするリソース、最適化されていない画像、レイアウトが不安定になる原因を特定します。Workers、Cache Rules、Image Optimization を使用した、Cloudflare 固有の修正方法も含まれています。
コメント
Markdown 対応