Dec web performance
Skill jpoindexter/design-engineering-canon/skills/dec-web-performance
Web performance as a UX constraint — Core Web Vitals (LCP, INP, CLS) and the RAIL model with perception-keyed budgets. Use when setting performance budgets, diagnosing slow or janky pages, deciding what to optimize, or tying performance work to human-perception thresholds.From its SKILL.md
npx -y skills add jpoindexter/design-engineering-canon --skill dec-web-performanceAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
SKILL.md
1.4 KB, 290 tokens by cl100k_base, as published. Nobody here has run it
Performance
Performance is a UX problem with measurable, perception-keyed budgets.
- Core Web Vitals:
- LCP (Largest Contentful Paint) — loading; the main content should render fast. Budget: ≤2.5s.
- INP (Interaction to Next Paint) — interactivity; replaced FID in 2024. Budget: ≤200ms.
- CLS (Cumulative Layout Shift) — visual stability; no content jumping. Budget: ≤0.1.
- RAIL Model: Performance budgets keyed to human perception:
- Response — react to input in <100ms.
- Animation — 60fps, ~16ms per frame.
- Idle — chunk non-critical work into idle time.
- Load — become interactive fast; defer the rest.
How to apply
- Set explicit budgets (LCP/INP/CLS, frame time) and measure at the p75 of real users, not a fast laptop.
- CLS: reserve space for images/ads/embeds; never inject content above existing content.
- INP: break long tasks, defer non-critical JS, keep the main thread free for input.
- Animate only
transform/opacityto hold 60fps (see FLIP in dec-motion-animation).
What ships with it
Read from the repository
Just SKILL.md. No reference files, no scripts.