重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
core-web-vitals by kimny1143/claude-code-template
npx skills add https://github.com/kimny1143/claude-code-template --skill core-web-vitals专注于性能测量和问题诊断。优化模式请参考 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 |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 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、数据库优化 |
| 阻塞渲染的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 + 备用字体 |
| 广告/嵌入内容 | 固定尺寸容器 |
主要原因与对策:
| 原因 | 对策 |
|---|---|
| 初始HTML过大 | Server Components、流式传输 |
| 阻塞渲染的CSS | 内联关键CSS |
| TTFB 慢 | 服务器优化 |
Weekly Installs
63
Repository
First Seen
Feb 9, 2026
Security Audits
Installed on
claude-code58
gemini-cli30
opencode29
github-copilot29
codex29
amp28
パフォーマンス計測と問題診断に特化。最適化パターンは 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 が遅い | サーバー最適化 |
Weekly Installs
63
Repository
First Seen
Feb 9, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykWarn
Installed on
claude-code58
gemini-cli30
opencode29
github-copilot29
codex29
amp28
Convex性能审计指南 - 诊断修复Convex应用性能问题与优化方案
18,000 周安装
parallel-cli研究结果查询工具 - 获取parallel-agent-skills运行结果与数据分析
682 周安装
EnergyKit iOS 开发指南:Swift 6.2 电网电力预测与负载管理
692 周安装
HubSpot CRM 集成指南:使用 Membrane CLI 自动化销售、营销与客户服务
674 周安装
动效设计审查指南:Emil、Jakub、Jhey三大设计师视角与工作流程
694 周安装
专业转化文案撰写指南:提升营销效果与SEO优化的文案技巧
675 周安装
Obsidian Canvas 创建器:一键将文本转换为思维导图和视觉画布 | AI 驱动
690 周安装