skill

performance · davila7 — Claude Code skill: what it does, how to install

Q: How to install performance in Claude Code?

Run `npx claude-code-templates@latest --skill development/performance` or install it with `npx skills add davila7/claude-code-templates --skill performance -a claude-code`. Alternatively, copy the file to `~/.claude/skills/performance/SKILL.md`.

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

Install into Claude Code · claude-code-templates All methods and platforms ↓

npx claude-code-templates@latest --skill development/performance

Open on GitHub

What performance 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.

What it helps with

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 for the agent

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

How to install performance

1claude-code-templates

npx claude-code-templates@latest --skill development/performance

2Skills CLI (Vercel)

npx skills add davila7/claude-code-templates --skill performance -a claude-code

3Manually: put the files in place

~/.claude/skills/performance/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/performance/

Manually: put the files in place

.agents/skills/performance/SKILL.md

For all projects use ~/.agents/skills/

Manually: put the files in place

.cursor/skills/performance/SKILL.md

Cursor also reads .agents/skills/ and .claude/skills/

1GitHub CLI

gh skill install davila7/claude-code-templates performance

2Manually: put the files in place

.github/skills/performance/SKILL.md

Platform CLI

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

Manually: put the files in place

.devin/skills/performance/SKILL.md

The legacy .windsurf/skills/ path still works

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about performance

How to install performance in Claude Code?

Run npx claude-code-templates@latest --skill development/performance or install it with npx skills add davila7/claude-code-templates --skill performance -a claude-code. Alternatively, copy the file to ~/.claude/skills/performance/SKILL.md.

What does the performance skill do?

It provides guidelines for optimizing page load speed, runtime behavior, and asset delivery. The assistant applies Lighthouse principles to reduce Core Web Vitals latencies.

What resource budgets does this skill enforce?

It caps overall page weight at 1.5 MB, compressed JavaScript at 300 KB, and compressed CSS at 100 KB.

Similar skills

All skills for Frontend and UI →

performance by other authors comes first.

performance cognitedata This skill measures Flows performance, tracks down unnecessary renders and costly data requests, then checks the changes against a baseline. Use it when the UI feels slow or handles large query results. CX Codex +1 1,900installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. CX Codex +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. CX Codex +1 1,300,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. 186,758installs

From the same set804

The whole set →

flutter-go-reviewer A Claude subagent that reviews pull request diffs and fresh code across Go, Protobuf, PostgreSQL, Flutter, Riverpod and GetX. 452installs laravel-expert A skill that makes Claude answer as a senior Laravel engineer: thin controllers, FormRequest validation, API Resources, queues and caching. Useful when you build or refactor a Laravel 10/11+ backend. 449installs architecture Guides architectural choices and helps document decisions through ADRs in Claude Code. Useful when structuring new systems. 449installs optimize Analyzes active and past task orchestrations in Claude Code to detect bottlenecks, balance agent workloads, and surface parallel execution paths. 440installs deslop Cleans AI-generated clutter from a branch before merging code. It inspects diffs against main to strip needless comments, type workarounds, and unneeded guards. 437installs flutter-expert Sets up Claude Code for cross-platform app engineering with Flutter 3.x and Dart 3. Helps handle state management, platform channels, and Impeller tuning. 437installs agent-tool-builder Guides developers in designing tools, JSON Schema definitions, and error handling for AI agents. Useful when setting up function calling or MCP servers. 437installs memory-search Searches conversation history and semantic memory across sessions. Helps agents recall earlier decisions before tackling new code. 434installs