performance-optimization
Use when Core Web Vitals are degraded, bundle size is too large, or React/Next.js rendering is slow — covers profiling, bundle analysis, and optimization patterns
Best use case
performance-optimization is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Use when Core Web Vitals are degraded, bundle size is too large, or React/Next.js rendering is slow — covers profiling, bundle analysis, and optimization patterns
Teams using performance-optimization should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/performance-optimization/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How performance-optimization Compares
| Feature / Agent | performance-optimization | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Use when Core Web Vitals are degraded, bundle size is too large, or React/Next.js rendering is slow — covers profiling, bundle analysis, and optimization patterns
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Performance Optimization Skill
## Core Web Vitals
### LCP (Largest Contentful Paint) < 2.5s
- Preload hero images
- Use next/image with proper sizes
- Font optimization with next/font
- Server-side render above-the-fold content
### CLS (Cumulative Layout Shift) < 0.1
- Reserve space for images/videos
- Use CSS aspect-ratio
- Font display: swap
- Avoid dynamically injected content
### FID/INP (First Input Delay/Interaction to Next Paint) < 100ms
- Code splitting
- Defer non-critical JS
- Minimize main thread work
- Use web workers for heavy computation
## Bundle Optimization
### Dynamic Imports
```typescript
const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
loading: () => <Skeleton />,
ssr: false // Disable SSR if needed
})
```
### Bundle Analysis
```bash
npm run build && npm run analyze
```
## React Optimization
### useMemo & useCallback
```typescript
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b])
const memoizedCallback = useCallback(() => doSomething(a), [a])
```
### React.memo
```typescript
const MyComponent = React.memo(({ title }) => {
return <h1>{title}</h1>
})
```
## Image Optimization
### next/image
```typescript
import Image from 'next/image'
<Image
src="/hero.jpg"
alt="Hero"
width={1200}
height={600}
priority // Preload LCP image
sizes="(max-width: 768px) 100vw, 50vw"
/>
```
## Monitoring
### Real User Monitoring
- Vercel Analytics
- Google Core Web Vitals
- Custom performance marksRelated Skills
writing-plans
Use when you have a spec or requirements for a multi-step task, before touching code
webtricks-tier-pricing-ui
Build interactive tier-based pricing UI with lock/unlock states, progressive disclosure, and cross-slide consistency. Use when building pricing pages, tier selectors, or feature comparison grids. Tags: webtricks, pricing, tiers, SaaS.
webtricks-browser-qa-audit
Audit live websites using Playwright MCP for browser-based QA. Covers accessibility snapshots, screenshot verification, interactive element testing, and tier differentiation audits. Use after deploying web changes to verify they work. Tags: webtricks, QA, testing, playwright, audit.
webtricks-animated-pipeline
Build animated data flow pipelines with SVG circuits, traveling dots, and ambient animations using Framer Motion + SVG. Use when visualizing architecture, workflows, API pipelines, or any step-by-step data flow. Tags: webtricks, animation, pipeline, SVG, architecture.
web-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
verification-before-completion
Use when about to claim work is complete, fixed, or passing, before committing or creating PRs - requires running verification commands and confirming output before making any success claims; evidence before assertions always
vercel-react-native-skills
React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.
vercel-react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
vercel-composition-patterns
React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.
ui-ux-pro-max
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.
tool-definition-patterns
Standards for defining AI agent tools based on Cline's system prompt patterns. Covers parameter typing, documentation, edit formats, safety mechanisms, and operational best practices.
test-driven-development
Use when implementing any feature or bugfix, before writing implementation code