Performance Profiler

What it does

When your agent uses it

• User asks to improve performance
• Run Lighthouse audit
• Profile a Node.js app
• Optimize Core Web Vitals

Example prompts

• “/performance-profiler”

Requirements

• Python 3
• Node.js
• PowerShell
• Docker
• Compatibility (from SKILL.md): opencode
• Pre-approved tools (allowed-tools): Read, Bash, Write, WebFetch

Workflow steps

6 steps, taken from the step headings in SKILL.md.

1. 1Run Lighthouse audit (exact command)
2. 2Fix Core Web Vitals
3. 3Profile backend
4. 4Bundle analysis
5. 5Caching strategy decision tree
6. 6Performance budgets in CI

What it can do on your machine

Read from SKILL.md and the folder at commit 4c68e5b. It shows what the files ask for, not the result of running them.

• Tool permissions

  Pre-approves these tools, so the agent can use them without asking each time:

  • Read
  • Bash
  • Write
  • WebFetch

  From allowed-tools in the SKILL.md frontmatter.

• Runs code

  Ships 2 files in scripts/ (PowerShell), which the agent can run.

  Shell commands in SKILL.md call:

  • npx
  • node
  • python

  From the folder's file list and the shell code blocks in SKILL.md.

• Network

  No URLs in SKILL.md. Its commands use npx, which can reach the network depending on how they are called.

  From URLs in SKILL.md, links to its own repository left out.

• Credentials

  Names no API keys, tokens, secrets or passwords.

  From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

• Compatibility

  opencode

  From compatibility in the SKILL.md frontmatter.

Context cost

Performance Profiler loads about 2.7k tokens when it runs, and up to ~6k if it reads all its reference files. Until then it costs about 141 tokens; SKILL.md has 840 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~141

When it runs · the whole SKILL.md, loaded when a task matches

~2.7k

With references · SKILL.md plus every file in references/, read only if the agent opens them

~6k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

• NotePre-approves every shell command (allowed-tools: Bash)SKILL.md

  allowed-tools: Read, Bash, Write, WebFetch

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from EliasOulkadi/shokunin at commit 4c68e5b, republished under its MIT licence (© EliasOulkadi). 840 words, ~2,723 tokens.

name

performance-profiler

description

Performance profiling and optimization for web apps — Core Web Vitals (LCP, INP, CLS), Lighthouse audits, bundle analysis, backend profiling (CPU, memory, DB queries), N+1 detection, caching strategies (Redis, CDN, HTTP), and performance budgets. Use when user asks to improve performance, run Lighthouse audit, profile a Node.js app, optimize Core Web Vitals, reduce bundle size, or investigate slow response times. Do NOT use for database schema optimization (use db-sculptor), Docker image optimization (use docker), or CDN configuration.

allowed-tools

Read, Bash, Write, WebFetch

compatibility

opencode

triggers

performance, optimize, slow, Lighthouse, Core Web Vitals, LCP, INP, CLS, bundle size, profiling, N+1 query, caching, response time

negatives

schema optimization, Docker image optimization, CDN configuration, database indexes

license

MIT

metadata.workflow

quality

metadata.audience

developers

metadata.version

4.0.0

metadata.author

shokunin

npx lighthouse https://example.com --preset=desktop --output=html --output-path=./lighthouse-report.html
npx lighthouse https://example.com --preset=desktop --output=json --output-path=./lighthouse.json

<!-- 1. Preload LCP image -->
<link rel="preload" as="image" href="hero.webp" fetchpriority="high">

<!-- 2. LCP image: no lazy loading -->
<img src="hero.webp" width="1200" height="600" fetchpriority="high" alt="">

<!-- 3. Inline critical CSS in <head> -->
<style>
  .hero { display: grid; min-height: 100dvh; }
  .hero img { width: 100%; height: auto; aspect-ratio: 2/1; }
</style>

<!-- 4. Defer non-critical CSS -->
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

<!-- 5. Self-host fonts with font-display: swap -->
@font-face {
  font-family: 'Geist';
  src: url('/fonts/geist.woff2') format('woff2');
  font-display: swap;
}

// Break up long tasks with scheduler.yield()
async function processLargeDataset(items: Item[]) {
  const CHUNK_SIZE = 50

  for (let i = 0; i < items.length; i += CHUNK_SIZE) {
    const chunk = items.slice(i, i + CHUNK_SIZE)
    processChunk(chunk)

    if (i + CHUNK_SIZE < items.length) {
      // Yield to main thread every 50ms
      await new Promise(resolve => setTimeout(resolve, 0))
    }
  }
}

// Or use scheduler.yield() (Chrome 115+)
for (let i = 0; i < items.length; i += CHUNK_SIZE) {
  processChunk(items.slice(i, i + CHUNK_SIZE))
  await scheduler.yield()
}

/* Reserve space for images */
img, video, iframe {
  width: 100%;
  height: auto;
  aspect-ratio: attr(width) / attr(height);
}

/* Reserve space for dynamic content */
.ad-container {
  min-height: 250px;
}

/* Prevent layout shift from web fonts */
body {
  font-display: swap;
}

/* Fixed size for injected elements */
.cookie-banner {
  min-height: 80px;
}

# Node.js CPU profile
node --cpu-prof --cpu-prof-interval=1 server.js
# Analyze: clinic doctor -- node server.js

# Node.js heap snapshot
node --heapsnapshot server.js
# Load in Chrome DevTools > Memory tab

# Python profiling
python -m cProfile -o output.prof server.py
# Analyze: snakeviz output.prof

# Next.js
ANALYZE=true next build

# Vite/Rollup
npx vite-bundle-visualizer

# Generic
npx source-map-explorer dist/**/*.js

{
  "ci": {
    "assert": {
      "assertions": {
        "categories:performance": ["error", { "minScore": 0.9 }],
        "largest-contentful-paint": ["error", { "maxNumericValue": 2500 }],
        "interactive": ["error", { "maxNumericValue": 3800 }],
        "total-blocking-time": ["error", { "maxNumericValue": 200 }],
        "cumulative-layout-shift": ["error", { "maxNumericValue": 0.1 }],
        "resource-summary:script:size": ["warn", { "maxNumericValue": 300000 }]
      }
    }
  }
}

npx lighthouse https://staging.example.com --output=json | \
  npx lighthouse-ci --collect --assert

© EliasOulkadi, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 4 other files (scripts, references) in .pack/skills/performance-profiler of EliasOulkadi/shokunin.

• SKILL.md
• references/backend-performance.md
• references/web-vitals.md
• scripts/audit-lighthouse.ps1
• scripts/profile-node.ps1

Open the folder on GitHubat commit 4c68e5b