Performance

Skill dgkngk/super-kit/skills/meta/performance

Performance profiling, optimization techniques, and caching strategies. Use when diagnosing slow applications, improving Core Web Vitals, or optimizing database queries and bundle size.From its SKILL.md

Install

npx -y skills add dgkngk/super-kit --skill performance

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

2.8 KB, as published. Nobody here has run it

Performance Optimization Skill

Overview

Performance profiling, optimization techniques, and caching strategies.

Core Web Vitals

LCP (Largest Contentful Paint) < 2.5s

// Optimize images
<Image
  src="/hero.jpg"
  alt="Hero"
  priority  // Preload
  sizes="100vw"
  placeholder="blur"
/>

// Preload critical resources
<link rel="preload" href="/fonts/inter.woff2" as="font" crossOrigin="" />

CLS (Cumulative Layout Shift) < 0.1

/* Reserve space for images */
img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

/* Skeleton loaders */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  animation: shimmer 1.5s infinite;
}

INP (Interaction to Next Paint) < 200ms

// Defer non-critical work
import { startTransition } from 'react';

startTransition(() => {
  setExpensiveState(newValue);
});

// Use web workers for heavy computation
const worker = new Worker('/heavy-task.js');
worker.postMessage(data);

JavaScript Optimization

Code Splitting

// Dynamic imports
const HeavyComponent = lazy(() => import('./HeavyComponent'));

// Route-based splitting (Next.js does this automatically)
import dynamic from 'next/dynamic';
const Chart = dynamic(() => import('./Chart'), { ssr: false });

Bundle Analysis

# Next.js
npx @next/bundle-analyzer

# Webpack
npx webpack-bundle-analyzer stats.json

Tree Shaking

// ❌ Import entire library
import _ from 'lodash';
_.debounce(fn, 300);

// ✅ Import specific function
import debounce from 'lodash/debounce';
debounce(fn, 300);

Caching Strategies

HTTP Caching

// Static assets (1 year)
Cache-Control: public, max-age=31536000, immutable

// API responses (5 minutes with revalidation)
Cache-Control: public, max-age=300, stale-while-revalidate=60

React Query / SWR

const { data } = useQuery({
  queryKey: ['users'],
  queryFn: fetchUsers,
  staleTime: 5 * 60 * 1000, // 5 minutes
  cacheTime: 30 * 60 * 1000, // 30 minutes
});

Service Worker

// Cache-first strategy for static assets
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((cached) => {
      return cached || fetch(event.request);
    })
  );
});

Database Query Optimization

-- Add indexes
CREATE INDEX idx_posts_user_date ON posts(user_id, created_at DESC);

-- Avoid N+1
SELECT posts.*, users.name 
FROM posts 
JOIN users ON posts.user_id = users.id;

-- Use EXPLAIN ANALYZE
EXPLAIN ANALYZE SELECT * FROM posts WHERE user_id = 123;