Agent Skills › plugin87/ux-ui-agent-skills › performance

performance

GitHub

针对 Core Web Vitals (LCP/INP/CLS) 优化 UI 性能。涵盖加载策略、布局偏移预防及动画规则，确保在低端设备上快速稳定，解决卡顿与布局跳动问题。

.claude/skills/performance/SKILL.md plugin87/ux-ui-agent-skills

Trigger Scenarios

用户希望提升页面加载速度或响应性需要修复界面卡顿（jank）或布局偏移（layout shift）目标是满足 Web Vitals 性能预算指标

Install

npx skills add plugin87/ux-ui-agent-skills --skill performance -g -y

More Options

Non-standard path

npx skills add https://github.com/plugin87/ux-ui-agent-skills/tree/main/.claude/skills/performance -g -y

Use without installing

npx skills use plugin87/ux-ui-agent-skills@performance

指定 Agent (Claude Code)

npx skills add plugin87/ux-ui-agent-skills --skill performance -a claude-code -g -y

安装 repo 全部 skill

npx skills add plugin87/ux-ui-agent-skills --all -g -y

预览 repo 内 skill

npx skills add plugin87/ux-ui-agent-skills --list

SKILL.md

Frontmatter

{
    "name": "performance",
    "description": "Optimize UI performance against Core Web Vitals — LCP, INP, CLS — with loading\/code-split strategy, layout-shift prevention, and animation performance rules. Use when the user wants to improve speed, fix jank or layout shift, hit Web Vitals budgets, or make a UI feel fast on low-end devices."
}

Skill: Performance

Make the UI fast and stable. Treat performance as an accessibility concern — slow/janky UIs fail low-end devices first.

Steps

Read workflows/performance.md (Core Web Vitals targets, loading strategy, layout-shift, animation perf, design-system runtime cost).
Diagnose against budgets: LCP ≤ 2.5s, INP ≤ 200ms, CLS ≤ 0.1. Measure on a mid-tier mobile profile (throttle slow 4G + 4× CPU).
Loading: render above-fold first (SSR/Server Components), code-split by route + heavy widget, lazy-load below-fold/behind-interaction (Astro islands / Qwik), preload one critical font weight, modern responsive images.
Kill layout shift: size skeletons to final dimensions, reserve media space via aspect-ratio (tokens/sizing.json), never inject content above existing.
Animation: only transform/opacity, will-change sparingly, 100–300ms (tokens/motion.json), honor prefers-reduced-motion. Prefer CSS state styling over JS for low INP; tree-shake/per-component imports.

Verification (definition of done)

Lighthouse / field data meets LCP ≤ 2.5s, INP ≤ 200ms, CLS ≤ 0.1 on mid-tier mobile.
First interaction stays responsive under slow-4G + 4× CPU throttle.
Skeletons + media reserve space (zero CLS on load); no non-compositor animation in loops.