Claude
Skill
performance
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-
Virus-scanned
Reviewed automatically before listing.
Download
plugin87-ux-ui-agent-skills-.claude_skills_performance-278e9d9.zip · 1 KB
Install
skills CLI
npx skills add https://github.com/plugin87/ux-ui-agent-skills/tree/main/.claude/skills/performance
Claude Code
claude plugin marketplace add https://llmmart.ai/marketplace.json && claude plugin install plugin87-ux-ui-agent-skills@llmmart
Git
git clone https://github.com/plugin87/ux-ui-agent-skills.git
The skills CLI installs just this skill, for any of its supported agents. Claude Code installs the whole plugin87/ux-ui-agent-skills collection as a plugin from our marketplace. Git is the plain clone.
Skill manifest
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-changesparingly, 100–300ms (tokens/motion.json), honorprefers-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.
Files (ux-ui-agent-skills)
-
SKILL.md 1.6 KB
--- 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. invocation: model --- # Skill: Performance Make the UI fast and stable. Treat performance as an accessibility concern — slow/janky UIs fail low-end devices first. ## Steps 1. Read `workflows/performance.md` (Core Web Vitals targets, loading strategy, layout-shift, animation perf, design-system runtime cost). 2. Diagnose against budgets: **LCP ≤ 2.5s**, **INP ≤ 200ms**, **CLS ≤ 0.1**. Measure on a mid-tier mobile profile (throttle slow 4G + 4× CPU). 3. 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. 4. Kill layout shift: size skeletons to final dimensions, reserve media space via `aspect-ratio` (`tokens/sizing.json`), never inject content above existing. 5. 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.
Comments (0)
Sign in to join the conversation.
Reviews (0)
No reviews yet.
No comments yet.