# performance

Audits web performance in Claude Code: optimizes Core Web Vitals, enforces resource budgets, and tunes asset delivery.

- skill · `type=skill` · Claude Code · 438 installs
- Author: web-quality-skills
- License: MIT · policy=link-only · description only; the file stays with the author
- Source: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/development/performance
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/skills/performance

## What it does

This skill guides Claude Code through web optimization workflows based on Lighthouse audits. It establishes explicit budgets: under 1.5 MB for the whole page, 300 KB for compressed JavaScript, and 100 KB for CSS. The agent pinpoints bottlenecks across the critical rendering path.

Included patterns cover code splitting via lazy imports, tree shaking heavy packages like Lodash, and eliminating layout thrashing. It also details markup recipes: `<picture>` tags with AVIF and WebP variants, high-priority preloads for LCP images, variable font setups, and `Cache-Control` header structures.

The performance thresholds assume slow 3G connections and a target TTFB below 800ms. Meeting these numbers demands restructuring your build output and CDN caching headers.

## Install

### Claude Code (native platform)

1. **claude-code-templates**
```bash
npx claude-code-templates@latest --skill development/performance
```

2. **Skills CLI (Vercel)**
```bash
npx skills add davila7/claude-code-templates --skill performance -a claude-code
```

3. **Manually: put the files in place**
- File: `~/.claude/skills/performance/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/performance/

### Codex

**Manually: put the files in place**
- File: `.agents/skills/performance/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

**Manually: put the files in place**
- File: `.cursor/skills/performance/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install davila7/claude-code-templates performance
```

2. **Manually: put the files in place**
- File: `.github/skills/performance/SKILL.md`

### Gemini CLI

**Platform CLI**
```bash
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/development/performance
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/performance/SKILL.md` — The legacy .windsurf/skills/ path still works

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/development/performance

## When to use it
- enforce resource weight budgets for slow mobile networks
- prevent render-blocking CSS and JavaScript execution
- set up responsive images with modern AVIF and WebP fallbacks
- batch DOM reads and writes to eliminate layout thrashing

## Example prompts
- Audit this page for Core Web Vitals bottlenecks and suggest fixes
- Optimize my above-the-fold hero image and font loading strategy
- Split this bundle using dynamic imports to cut initial JavaScript size

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [hyperframes](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes.md) — skill · 1200000 installs
- [hyperframes-cli](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes-cli.md) — skill · 1300000 installs
- [webapp-testing](https://affpapa.org/en/nevibecode/skills/webapp-testing.md) — skill · 186758 installs

## Other versions with the same name
- [performance · cognitedata](https://affpapa.org/en/nevibecode/skills/cognitedata-performance.md) — 1900 installs

From the same set: [davila7/claude-code-templates](https://affpapa.org/en/nevibecode/by/davila7/claude-code-templates.md) — 804 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md