How do I install the Performance skill?

Run npx skillmds@latest add zereight/performance in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Performance safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Performance?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Performance free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Performance?

zereight (@zereight) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Performance by zereight — Agent Skill

Name: Performance
Author: zereight

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-end devices.

zereight 3ed3f0d 2.0 KB Updated Sep 17, 2026

File contents

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.

Kit location

This skill is part of ux-ui-agent-skills v2.4.0.

Resolve every relative path in the steps above against:

.agents/ux-ui-agent-skills/

(from repo root: /Users/tao.exe/Documents/skill/.agents/ux-ui-agent-skills)

Load .agents/ux-ui-agent-skills/CLAUDE.md when you need the full agent persona or Request Router.

---name: performancedescription: 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: PerformanceMake the UI fast and stable. Treat performance as an accessibility concern — slow/janky UIs fail low-end devices first.## Steps1. 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.---## Kit locationThis skill is part of **ux-ui-agent-skills v2.4.0**.Resolve every relative path in the steps above against:`.agents/ux-ui-agent-skills/`(from repo root: `/Users/tao.exe/Documents/skill/.agents/ux-ui-agent-skills`)Load `.agents/ux-ui-agent-skills/CLAUDE.md` when you need the full agent persona or Request Router.

Frequently asked questions