Imported from jpoindexter/dec-skills (skills/dec-web-performance/SKILL.md). Install upstream with npx skills add jpoindexter/dec-skills --skill dec-web-performance. Copyright stays with the author.

Performance

Name: dec-web-performance
Author: jpoindexter

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/opacity to hold 60fps (see FLIP in dec-motion-animation).

{ "ocm": "1", "id": "jpoindexter-dec-skills-dec-web-performance", "kind": "skill", "name": "dec-web-performance", "description": "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.", "publisher": "jpoindexter", "version": "1.0.0", "capabilities": { "domains": [ "general" ], "tags": [ "skill-md", "performance", "core-web-vitals", "rail", "ux", "always-on", "github" ], "languages": [ "en" ] }, "quality_prior": 0.6, "examples": [ "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." ], "primary": false, "metadata": { "source": { "provider": "github", "repository": "https://github.com/jpoindexter/dec-skills", "path": "skills/dec-web-performance/SKILL.md", "ref": "d03f34b61269f6388c85fdededce9137619e5c79", "url": "https://github.com/jpoindexter/dec-skills/blob/d03f34b61269f6388c85fdededce9137619e5c79/skills/dec-web-performance/SKILL.md", "key": "jpoindexter/dec-skills/skills/dec-web-performance/SKILL.md" } }, "instructions": "# Performance\n\nPerformance is a UX problem with measurable, perception-keyed budgets.\n\n- **Core Web Vitals:**\n - **LCP** (Largest Contentful Paint) — loading; the main content should render fast. Budget: ≤2.5s.\n - **INP** (Interaction to Next Paint) — interactivity; replaced FID in 2024. Budget: ≤200ms.\n - **CLS** (Cumulative Layout Shift) — visual stability; no content jumping. Budget: ≤0.1.\n- **RAIL Model:** Performance budgets keyed to human perception:\n - **Response** — react to input in <100ms.\n - **Animation** — 60fps, ~16ms per frame.\n - **Idle** — chunk non-critical work into idl", "cost": { "context_tokens": 265 } }

dec-web-performance

About

Performance

How to apply

Use it

Manifest

Reviews