frontend-fullchain-optimization

A guide to finding and fixing slow or unstable web pages using Web Vitals, measurements that describe loading speed, interaction response and visual stability. It covers metrics such as LCP, FCP, INP, CLS, TTFB and TBT.

In plain words
What is it for?
Use it to investigate slow page loads, delayed interactions, layout shifts and browser tasks that block the page, across desktop and mobile experiences.
Why use it?
It provides reference ranges and diagnostic methods so performance work is based on measured user experience instead of guesswork.

Skill for Claude CodeCodex

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/condevtools/pr-agent/frontend-fullchain-optimization
Any agent
npx skills add condevtools/pr-agent --skill frontend-fullchain-optimization
Clone the repo
git clone --depth 1 https://github.com/condevtools/pr-agent

Made for: Claude Code, Codex.

Per session 80 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 8,450 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 1 finding. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00080 $0.08450
Opus 5 $0.00040 $0.04225
Sonnet 5 $0.00016 $0.01690
Haiku 4.5 $0.00008 $0.00845

Measured 2d ago against content hash 0847bef27821, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

frontend-fullchain-optimization scanned grade A with 1 finding against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Makes network callslowCapability

Not a fault in itself. Listed so you know the mod talks to something, and to what.

curl -X POST "https://your-cdn-provider.example.com/purge" \
.claude/skills/frontend-fullchain-optimization/SKILL.md · 566 lines

How it starts

The opening of the file, as written. The whole thing — 566 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Frontend Full-Chain Performance Optimization Guide / 前端全链路性能优化指南

A frontend performance diagnostic and optimization system based on Web Vitals core metrics. Core principle: User-centric — optimization is about doing less, not more.

基于 Web Vitals 核心指标的前端性能诊断与优化体系。核心原则:以用户为中心,优化就是做减法

Metric Threshold Quick Reference / 指标阈值速查

Metric / 指标 Good Needs Improvement Poor Unit / 单位 Focus / 关注点
LCP ≤ 2.5s 2.5s - 4s > 4s Time / 时间 Largest Contentful Paint / 最大内容渲染
FCP ≤ 1.8s 1.8s - 3s > 3s Time / 时间 First Contentful Paint / 首次内容绘制
INP ≤ 200ms 200ms - 500ms > 500ms Time / 时间 Interaction to Next Paint / 交互响应延迟
CLS ≤ 0.1 0.1 - 0.25 > 0.25 Score / 分数 Visual Stability / 视觉稳定性
TTFB ≤ 800ms 800ms - 1.8s > 1.8s Time / 时间 Time to First Byte / 首字节时间
FID ≤ 100ms 100ms - 300ms > 300ms Time / 时间 First Input Delay / 首次输入延迟
TBT Tasks > 50ms are long tasks Time / 时间 Total Blocking Time / 总阻塞时间

Measurement advice: Don't rely on a single P75. Combine P60/P75/P90/P99 percentiles with daily avg/max/min trend lines. Desktop: target P98+; Mobile core pages: target P95–P99.

衡量建议:不使用单一 P75,应综合 P60/P75/P90/P99 四个百分位 + 日均/最大/最小值折线图判断。PC 端建议 P98+,移动端核心页面建议 P95-P99。

Diagnostic Decision Tree / 诊断决策树

Page loads slowly? / 页面加载慢?
├── TTFB > 800ms → Network/server issue → See "TTFB Optimization"
│                → 网络/服务器问题 → 见「TTFB 优化」
├── FCP > 1.8s → Resource blocking/large files → See "FCP Optimization"
│              → 资源阻塞/文件过大 → 见「FCP 优化」
├── LCP > 2.5s
│   ├── TTFB & FCP normal → Slow viewport resource loading → See "LCP Optimization"
│   │                     → 视口资源加载慢 → 见「LCP 优化」
│   └── TTFB or FCP abnormal → Fix upstream metrics first
│                            → 先解决上游指标
├── INP > 200ms → Long tasks blocking main thread → See "INP Optimization"
│               → 长任务阻塞主线程 → 见「INP 优化」
├── CLS > 0.1 → Layout shifts → See "CLS Optimization"
│             → 布局偏移 → 见「CLS 优化」
└── Lighthouse Performance Score / Lighthouse 性能分数
    ├── > 80: Few issues / 问题较少
    ├── 60-80: Needs focused analysis, priority: FCP → LCP → CLS
    │        需重点分析,优先级 FCP → LCP → CLS
    └── < 60: Severe issues, full audit required
           严重问题,全面排查

Read the full file on GitHub · 566 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 2d ago First seen · 566 lines · 80 tokens per session scan A 0847bef27821

Subscribe to this mod's changes

frontend-fullchain-optimization is a skill published in the GitHub repository condevtools/pr-agent (37 stars, last pushed 5mo ago), licensed MIT. It adds 80 tokens to every session and 8,450 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it A with 1 finding (makes network calls). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.