Community생산성 & 협업github.com

cloudflare/web-perf

Chrome DevTools MCP를 사용하여 웹 성능을 분석합니다. 핵심 웹 바이탈(LCP, INP, CLS) 및 보조 지표(FCP, TBT, 속도 지수)를 측정하고, 렌더링 차단 리소스, 네트워크 종속성 체인, 레이아웃 변경, 캐싱 문제 및 접근성 격차를 식별합니다. 페이지 로드 성능, Lighthouse 점수 또는 사이트 속도를 감사, 프로파일링, 디버깅 또는 최적화하라는 요청이 있을 때 사용합니다. 사전 학습된 지식보다 현재 문서 검색을 선호합니다.

web-perf란 무엇인가요?

cloudflare/web-perf 스킬은 Chrome DevTools MCP(모델 컨텍스트 프로토콜)를 활용하여 웹 페이지의 성능을 심층 분석하는 AI 에이전트 도구입니다. 이 스킬은 LCP(최대 콘텐트풀 페인트), INP(다음 상호작용까지의 지연), CLS(누적 레이아웃 이동)와 같은 핵심 웹 바이탈(Core Web Vitals)과 FCP(첫 번째 콘텐트풀 페인트), TBT(총 차단 시간), 속도 지수(Speed Index) 같은 보조 지표를 측정합니다. 또한 렌더링을 차단하는 리소스, 네트워크 의존성 체인, 레이아웃 이동 문제, 캐싱 설정 오류, 접근성 격차 등 성능 저하의 근본 원인을 식별합니다. Claude Code, Cursor, Codex 등 다양한 AI 코딩 도구와 호환되며, 사용자가 페이지 로드 성능 감사, 병목 지점 프로파일링, Lighthouse 점수 개선, 사이트 속도 최적화 등을 요청할 때 활성화됩니다. 최신 문서 검색에 기반하여 정확한 성능 분석을 제공하며, 단순히 사전 학습된 지식에 의존하지 않습니다. 성능 최적화 작업 시 개발자에게 실행 가능한 인사이트를 제공하여 웹 경험을 개선하는 데 도움을 줍니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/cloudflare/skills/tree/main/skills/web-perf

Installed? Explore more 생산성 & 협업 skills: steipete/gemini, steipete/gh-issues, steipete/skill-creator · View all 6 →

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

web-perf은(는) 무엇을 하나요?

Chrome DevTools MCP를 사용하여 웹 성능을 분석합니다. 핵심 웹 바이탈(LCP, INP, CLS) 및 보조 지표(FCP, TBT, 속도 지수)를 측정하고, 렌더링 차단 리소스, 네트워크 종속성 체인, 레이아웃 변경, 캐싱 문제 및 접근성 격차를 식별합니다. 페이지 로드 성능, Lighthouse 점수 또는 사이트 속도를 감사, 프로파일링, 디버깅 또는 최적화하라는 요청이 있을 때 사용합니다. 사전 학습된 지식보다 현재 문서 검색을 선호합니다.

Individual skills in this repo

This repo contains 15 individual skills — each has its own dedicated page.

cloudflare/agents-sdk

Build AI agents on Cloudflare Workers using the Agents SDK. Load when creating stateful agents, durable workflows, real-time WebSocket apps, scheduled tasks, MCP servers, chat applications, voice agents, or browser automation. Covers Agent class, state management, callable RPC, Workflows, durable execution, queues, retries, observability, and React hooks. Biases towards retrieval from Cloudflare docs over pre-trained knowledge.

cloudflare/building-ai-agent-on-cloudflare

Builds AI agents on Cloudflare using the Agents SDK with state management, real-time WebSockets, scheduled tasks, tool integration, and chat capabilities. Generates production-ready agent code deployed to Workers. Use when: user wants to "build an agent", "AI agent", "chat agent", "stateful agent", mentions "Agents SDK", needs "real-time AI", "WebSocket AI", or asks about agent "state management", "scheduled tasks", or "tool calling". Biases towards retrieval from Cloudflare docs over pre-trained knowledge.

cloudflare/building-mcp-server-on-cloudflare

Builds remote MCP (Model Context Protocol) servers on Cloudflare Workers with tools, OAuth authentication, and production deployment. Generates server code, configures auth providers, and deploys to Workers. Use when: user wants to "build MCP server", "create MCP tools", "remote MCP", "deploy MCP", add "OAuth to MCP", or mentions Model Context Protocol on Cloudflare. Also triggers on "MCP authentication" or "MCP deployment". Biases towards retrieval from Cloudflare docs over pre-trained knowledge.

cloudflare/cloudflare

Comprehensive Cloudflare platform skill covering Workers, Pages, storage (KV, D1, R2), AI (Workers AI, Vectorize, Agents SDK), feature flags (Flagship), networking (Tunnel, Spectrum), security (WAF, DDoS), and infrastructure-as-code (Terraform, Pulumi). Use for any Cloudflare development task. Biases towards retrieval from Cloudflare docs over pre-trained knowledge.

cloudflare/cloudflare-email-service

Send and receive transactional emails with Cloudflare Email Service (Email Sending + Email Routing). Use when building email sending (Workers binding or REST API), email routing, Agents SDK email handling, or integrating email into any app — Workers, Node.js, Python, Go, etc. Also use for email deliverability, SPF/DKIM/DMARC, wrangler email setup, MCP email tools, or when a coding agent needs to send emails. Even for simple requests like "add email to my Worker" — this skill has critical config details.

cloudflare/cloudflare-one

Design, configure, troubleshoot, or review Cloudflare One Zero Trust and SASE deployments. Use cloudflare-one-migrations for migration planning from other vendors.

cloudflare/durable-objects

Create and review Cloudflare Durable Objects. Use when building stateful coordination (chat rooms, multiplayer games, booking systems), implementing RPC methods, SQLite storage, alarms, WebSockets, or reviewing DO code for best practices. Covers Workers integration, wrangler config, and testing with Vitest. Biases towards retrieval from Cloudflare docs over pre-trained knowledge.

cloudflare/sandbox-migrate-to-next

Migrate Cloudflare Sandbox apps from stable @cloudflare/sandbox to @cloudflare/sandbox@next (SDK 1.0 preview). Use sandbox-next for apps already on the preview.

cloudflare/sandbox-next

Build or maintain Cloudflare Sandbox apps on @cloudflare/sandbox@next (SDK 1.0 preview). Use sandbox-migrate-to-next when porting a stable app.

cloudflare/sandbox-sdk

Build sandboxed applications for secure code execution. Load when building AI code execution, code interpreters, CI/CD systems, interactive dev environments, or executing untrusted code. Covers Sandbox SDK lifecycle, commands, files, code interpreter, and preview URLs. Biases towards retrieval from Cloudflare docs over pre-trained knowledge.

cloudflare/sandbox-stable

Build or maintain Cloudflare Sandbox apps on the stable @cloudflare/sandbox package. Use sandbox-next for preview apps and sandbox-migrate-to-next for stable-to-preview migrations.

cloudflare/skills

Build, migrate, and deploy Next.js apps on Cloudflare Workers with vinext. Use when starting a Next.js project on Cloudflare, moving an existing app to Workers, choosing between vinext and OpenNext, or setting up vinext for Workers. For setup, migration, or deployment, install vinext's upstream skills with `npx skills add cloudflare/vinext` if missing, then read and follow the applicable skill and docs.

cloudflare/turnstile-spin

Set up, repair, or migrate to Cloudflare Turnstile bot verification in an existing frontend and backend, including server-side Siteverify.

cloudflare/workers-best-practices

Reviews and authors Cloudflare Workers code against production best practices. Load when writing new Workers, reviewing Worker code, configuring wrangler.jsonc, or checking for common Workers anti-patterns (streaming, floating promises, global state, secrets, bindings, observability). Biases towards retrieval from Cloudflare docs over pre-trained knowledge.

cloudflare/wrangler

Cloudflare Workers CLI for deploying, developing, and managing Workers, KV, R2, D1, Vectorize, Hyperdrive, Workers AI, Containers, Queues, Workflows, Pipelines, and Secrets Store. Load before running wrangler commands to ensure correct syntax and best practices. Biases towards retrieval from Cloudflare docs over pre-trained knowledge.

관련 스킬