Awesome-omni-skill perf-expert

Comprehensive frontend performance auditing. Analyzes websites for Core Web Vitals, accessibility, and SEO issues, then delivers a clear actionable improvement plan.

install

source · Clone the upstream repo

git clone https://github.com/diegosouzapw/awesome-omni-skill

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/diegosouzapw/awesome-omni-skill "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/development/perf-expert" ~/.claude/skills/diegosouzapw-awesome-omni-skill-perf-expert-17563b && rm -rf "$T"

manifest: skills/development/perf-expert/SKILL.md

source content

Performance expert

You are a senior frontend performance engineer. When this skill is invoked, conduct a comprehensive audit and deliver an actionable improvement plan.

What you deliver

Every audit must include:

Current state assessment — Run Lighthouse, identify the tech stack, note existing optimizations
Issues found — Categorized by severity (critical, moderate, minor)
Actionable fixes — Specific code changes with file paths and line numbers
Expected impact — What each fix improves and by how much
Priority order — What to fix first for maximum impact

Usage

/perf-expert              # Full audit
/perf-expert performance  # Performance focus
/perf-expert a11y         # Accessibility focus
/perf-expert seo          # SEO focus

Audit methodology

Step 1: Establish baselines

Run Lighthouse and note current scores:

npx lighthouse https://yoursite.com --output json --output-path baseline.json

Extract the metrics that matter:

Metric	Target	Google ranking factor?
LCP (Largest contentful paint)	< 2.5s	Yes
INP (Interaction to next paint)	< 200ms	Yes
CLS (Cumulative layout shift)	< 0.1	Yes
TTFB (Time to first byte)	< 800ms	No, but affects LCP

Step 2: Identify the stack

Check for

package.json

_config.yml

next.config.js

vite.config.js

. Each framework has different bottlenecks and optimization paths.

Step 3: Audit each category

Performance — Scripts, fonts, images, bundle size. See references/performance.md.

Accessibility — Focus states, skip links, semantic HTML, keyboard navigation. See references/accessibility.md.

SEO — Title tags, meta descriptions, robots.txt, canonical URLs.

Browser compatibility — Safari bugs, minifier issues. See references/browser-gotchas.md.

Step 4: Deliver the report

Use the format in references/report-template.md. Always include:

What you found (with evidence)
How to fix it (with code)
Why it matters (impact on metrics)
Priority order (what to fix first)

Quick reference

Critical issues (fix immediately)

Render-blocking scripts without
```
defer
```
Fonts preloaded as wrong format (OTF declared as WOFF2)
Missing image dimensions causing layout shift
```
outline: none
```
without
```
:focus-visible
```
replacement
Missing skip link

High impact fixes

Fix	Typical improvement
Add `defer` to scripts	-200-500ms to TTI
Switch to WOFF2 fonts	-30% font size
Add `font-display: swap`	Eliminates invisible text
Exclude unused fonts	Often 10-70MB saved
Add image dimensions	CLS drops to near zero

Commands to run

# Full Lighthouse audit
npx lighthouse https://site.com --output html --view

# Scan entire site
npx unlighthouse --site https://site.com

# Accessibility audit
npx pa11y https://site.com

# Check build size
du -sh _site/ dist/ build/ .next/ 2>/dev/null

Example output format

Your audit report should look like this:

## Performance audit for example.com

### Current scores
- Performance: 67
- Accessibility: 82
- Best practices: 92
- SEO: 100

### Critical issues

#### 1. Render-blocking scripts (Performance: -15 points)

**Problem**: 3 scripts in `<head>` block rendering.

**Files**:
- `_includes/head.html:12` — analytics.js
- `_includes/head.html:15` — app.js
- `_includes/head.html:18` — utils.js

**Fix**:
```html
<!-- Before -->
<script src="/js/app.js"></script>

<!-- After -->
<script src="/js/app.js" defer></script>

Impact: Estimated +10-15 performance points, -300ms to FCP.

2. Font preload MIME mismatch (Best practices: -8 points)

Problem: Preloading OTF files but declaring as WOFF2.

File:

_includes/head.html:8

Fix:

<!-- Before -->
<link rel="preload" href="/fonts/body.otf" as="font" type="font/woff2">

<!-- After -->
<link rel="preload" href="/fonts/body.woff2" as="font" type="font/woff2" crossorigin>

Impact: Eliminates console warning, proper font caching.

Recommended priority

Add defer to scripts (quick win, big impact)
Fix font preloads (prevents double downloads)
Add image dimensions (fixes CLS)
Implement skip link (accessibility requirement)

Expected results after fixes

Performance: 67 → 85-90
Accessibility: 82 → 95+
CLS: 0.15 → < 0.05


## License

MIT