How do I install the Performance skill?

Run npx skillmds@latest add gabrielmoreira/performance-3 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. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: docs only. 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?

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

Performance by gabrielmoreira — Agent Skill

Name: Performance
Rating: 4.666666666666667 (3 reviews)
Author: gabrielmoreira

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.

gabrielmoreira Updated Sep 21, 2026 17 repo stars

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.

Frequently asked questions