Is audit-performance safe to install?

SaferSkills independently audited audit-performance (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.

CategoryWeightCategory scoreContribution

Securityprompt, exec, net, exfil, eval

35%

100

35.0 pts

Supply chainhash, typosquat, maintainer, lockfile

20%

100

20.0 pts

Maintenancestaleness, pinning, CI

15%

100

15.0 pts

TransparencySKILL.md, perms, README

15%

100

15.0 pts

Communityinstalls, verify, response

15%

100

15.0 pts

Findings & checks · 0 flagged

Securityscore 100 · 0 findings

✓—All security checks passedNo findings in this category for the latest scan.pass

Supply chainscore 100 · 0 findings

✓—All supply chain checks passedNo findings in this category for the latest scan.pass

Maintenancescore 100 · 0 findings

✓—All maintenance checks passedNo findings in this category for the latest scan.pass

Transparencyscore 100 · 0 findings

✓—All transparency checks passedNo findings in this category for the latest scan.pass

Communityscore 100 · 0 findings

✓—All community checks passedNo findings in this category for the latest scan.pass

The primary manifest — the file an agent reads to learn what this artifact does.

audit-performance/SKILL.md · 1 file

audit-performance/SKILL.md12.7 KB · Markdown

name: audit-performance

description: >

Performance and loading audit for static websites hosted on cPanel.

Reviews Core Web Vitals, resource optimization, image strategy (formats, srcset,

fetchpriority, object-fit), loading strategy, server configuration, HTML document

structure, animation runtime performance, WebGL/Canvas, backdrop-filter, SVG inline,

will-change management, prefers-reduced-motion, page weight budgets, critical CSS

preloading, and third-party resources. Run as the first audit in the pre-production

protocol — technical foundation must be solid before functional or strategic layers.

metadata:

protocol: pre-production-cpanel

order: 1

total-audits: 10

Performance & Loading Audit

Static Websites on cPanel

Performance is not an optimization — it is a baseline requirement. Every second of load time costs conversions. Every render-blocking resource delays the user's first interaction. Every unoptimized image wastes bandwidth and damages Core Web Vitals scores that directly affect SEO ranking.

This audit covers everything that affects how fast the site loads and how smoothly it runs, verifiable by reading the code directly without external tools.

Severity Levels

Level	Description	Action
Critical	Blocks rendering or causes complete load failure	Fix before any other work
High	Fails Core Web Vitals, major bottleneck	Fix before launch
Medium	Performance opportunity with measurable impact	Fix within current sprint
Low	Minor optimization, marginal gain	Fix when convenient

Section 1 — Core Web Vitals

1.1 LCP — Largest Contentful Paint

Time to render the largest visible element. Measures perceived load speed.

Rating	Value
Good	< 2.5s
Needs improvement	2.5s – 4.0s
Poor	> 4.0s

What to check:

LCP image must NOT have loading="lazy" — critical mistake that delays the most important element
LCP image must have fetchpriority="high"
LCP image in WebP format
No render-blocking CSS or JS delaying first paint
Fonts use font-display: swap
LCP image preloaded with <link rel="preload">

1.2 CLS — Cumulative Layout Shift

Visual stability. Measures how much content moves unexpectedly during load.

Rating	Value
Good	< 0.1
Needs improvement	0.1 – 0.25
Poor	> 0.25

What to check:

All images and videos have explicit width and height attributes
font-display: swap strategy defined
No content injected above existing content after load
Animations use transform not top/left/margin/width/height

1.3 INP — Interaction to Next Paint

Responsiveness. Measures time from user interaction to next visual update.

Rating	Value
Good	< 200ms
Needs improvement	200ms – 500ms
Poor	> 500ms

What to check:

No JavaScript tasks longer than 50ms
Event delegation instead of many individual listeners
Scroll and resize handlers debounced
No synchronous fetch or DOM manipulation blocking the main thread

Section 2 — Page Weight Budget

Every page has a weight ceiling. Exceeding it degrades load times on mobile networks and low-end devices.

Rating	Total Page Weight
Excellent	< 500 KB
Good	500 KB – 1 MB
Acceptable	1 MB – 2 MB
Poor	2 MB – 5 MB
Critical	> 5 MB

What to check:

Calculate total weight of HTML + CSS + JS + images + fonts per page
Flag any single resource > 500 KB
Flag total JS payload > 300 KB (uncompressed)
Flag total CSS payload > 150 KB (uncompressed)
Flag pages with more than 50 HTTP requests
Inline SVGs count toward HTML weight — flag any SVG block > 20 KB

<!-- Weight audit summary format -->
HTML:     _____ KB
CSS:      _____ KB (files: ___)
JS:       _____ KB (files: ___)
Images:   _____ KB (files: ___)
Fonts:    _____ KB (files: ___)
Other:    _____ KB
TOTAL:    _____ KB
Requests: ___

Section 3 — Image Strategy

Images are typically 50–70% of total page weight. This section covers both performance and responsive delivery.

Full image strategy reference with code examples: see references/image-strategy.md

Summary of checks:

Format hierarchy: AVIF → WebP → JPEG/PNG via <picture> element
Width descriptors (w) over density descriptors (x) — exception: fixed-size logos/icons
Every <img> with srcset must have a sizes attribute matching actual layout widths
LCP image: loading="eager" + fetchpriority="high"
All below-fold images: loading="lazy"
No loading="lazy" on above-fold images — High severity
All images have explicit width and height attributes
Images in fixed containers use object-fit: cover or contain
Art direction (different crops per breakpoint) uses <picture> with media queries

Image Position	`loading`	`fetchpriority`	Reason
Hero / LCP element	`eager`	`high`	Optimize LCP score
Above fold, not LCP	`eager`	omit	Load normally
Below fold	`lazy`	omit	Defer until near viewport
Off-screen carousel	`lazy`	omit	Defer until interaction

Section 4 — CSS Optimization

What to check:

All stylesheets loaded in <head> before content
No @import rules — each creates a blocking chain
No unused CSS files or dead rules
Minified for production
Critical CSS inlined or preloaded if render-blocking
transition specifies properties explicitly, not all



  @import url('components.css');
  @import url('animations.css');

4.1 Critical CSS Preloading

Render-blocking stylesheets delay first paint. Non-critical CSS should be loaded asynchronously.

What to check:

Is the above-fold CSS inlined or preloaded?
Are animation/component styles blocking first render when they could be deferred?
Flag any stylesheet > 50 KB that is fully render-blocking

Section 5 — JavaScript Optimization

What to check:

All scripts use defer or placed at end of <body>
Minified for production
No unused JS files or functions
No synchronous DOM queries in loops
Event listeners cleaned up when elements are removed

Section 6 — Font Optimization

What to check:

Google Fonts loaded with &display=swap
<link rel="preconnect"> for font domains
Only font weights actually used in the design are loaded
LCP-critical font preloaded

Section 7 — Loading Strategy

7.1 Resource Hints

7.2 Lazy Loading

What to check:

All below-fold images use loading="lazy"
Iframes use loading="lazy"
No loading="lazy" on above-fold elements

Section 8 — cPanel Server Configuration

The .htaccess file at the project root controls compression and caching. Without it, every visit downloads uncompressed files with no browser caching.

What to check — verify `.htaccess` exists and contains:

# GZIP Compression
<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/css text/javascript
  AddOutputFilterByType DEFLATE application/javascript application/json
  AddOutputFilterByType DEFLATE image/svg+xml
</IfModule>

# Cache Expiration Headers
<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/avif "access plus 1 year"
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType font/woff2 "access plus 1 year"
</IfModule>

# HTTPS Enforcement
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTPS} off
  RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
</IfModule>

Flag if .htaccess is missing entirely — High severity. Flag if GZIP or cache headers are absent.

Section 9 — HTML Document Structure

What to check:




           
  

  
  
  

  
  
  

  Page Title — Brand

Flag if: <!DOCTYPE html> is missing, charset is not within first 1024 bytes, viewport meta is absent, <title> is empty, scripts lack defer.

Section 10 — Animation Runtime Performance

Full animation, WebGL/Canvas, and inline SVG reference: see references/animation-webgl-svg.md

10.1 CSS Animations — Summary

Animations must use only transform and opacity — GPU-accelerated
No animations on width, height, margin, padding, top, left — trigger layout recalculation
transition specifies properties explicitly, not all
JS animations use requestAnimationFrame

10.2 will-change — Summary

will-change must NOT be declared in static CSS rules — Medium severity
Apply via JS before animation starts and remove after
No more than 5 elements with active will-change at any time

10.3 backdrop-filter — Summary

Count on page	Impact
1–3	Acceptable
4–8	Medium — monitor on low-end devices
9+	High — likely causes jank on mobile

Flag pages with > 8 active backdrop-filter elements
Flag backdrop-filter on elements > 50% viewport — High severity
Flag backdrop-filter combined with CSS animations — High severity
Verify @supports not (backdrop-filter: blur()) fallback exists

Section 11 — WebGL & Canvas Performance (Conditional)

If the project does not use WebGL or Canvas, skip this section and note "Not applicable — no WebGL/Canvas detected" in the audit output.

Full WebGL/Canvas reference with code examples: see references/animation-webgl-svg.md

Summary of checks:

WebGL context: { antialias: false } on mobile
Canvas DPR capped at 2 via Math.min(window.devicePixelRatio || 1, 2)
Animation loop pauses when off-screen (IntersectionObserver) — High severity if missing
webglcontextlost event handled
Canvas 2D: context cached, Path2D for complex paths, offscreen canvas for static elements

Section 12 — Inline SVG Performance (Conditional)

If the project does not use inline SVGs, skip this section and note "Not applicable — no inline SVGs detected" in the audit output.

Full inline SVG reference: see references/animation-webgl-svg.md

Summary of checks:

SVG Block Size	Action
< 5 KB	Fine to inline
5–20 KB	Consider if it must be inline or can be `<img>`
20–50 KB	Should be external `<img>` with `loading="lazy"` unless animated
> 50 KB	Must be external — High severity if inline

Flag any single inline SVG > 20 KB
Flag pages with > 100 KB total inline SVG
Static illustrations should be external <img>, not inline
viewBox (case-sensitive) present on all SVGs
SVG animations respect prefers-reduced-motion

Section 13 — prefers-reduced-motion

Respecting motion preferences is both an accessibility requirement and a performance optimization.

What to check:

@media (prefers-reduced-motion: reduce) rule exists in CSS covering all animations
JS animations check window.matchMedia('(prefers-reduced-motion: reduce)') before starting
WebGL/Canvas animations reduce complexity or pause entirely
Scroll-driven animations fall back to static positioning
Flag any animation that ignores prefers-reduced-motion — Medium severity

Full code examples: see references/animation-webgl-svg.md

Section 14 — Third-Party Resources

What to check:

All external CDN links use HTTPS
External scripts use defer or async
No unused external libraries loaded
Single font provider — no mixing Google Fonts with Adobe Fonts
Analytics and tracking loaded after page is interactive

Audit Output Format

Performance Audit — [Project Name]
Date: [Date]

Summary
- Critical issues: X
- High priority: X
- Medium priority: X
- Low priority: X
- Total page weight: X KB (target: < 1 MB)
- backdrop-filter count: X
- Inline SVG weight: X KB
- WebGL/Canvas contexts: X
- Overall performance assessment: [Good / Needs work / Critical problems]

Critical Issues
[Issue title]
- File: [filename and line]
- Severity: Critical
- Issue: [What is wrong and why it matters]
- Fix: [Specific correction with code example]

High Priority
[Same format]

Medium Priority
[Same format]

Low Priority
[Same format]

Quick Wins
[Issues fixable in under 5 minutes with high impact]

Recommended Fix Order
1. [First because...]
2. [Then...]
3. [Finally...]

Full quick-reference checklist: see references/checklist.md

audit-performance— agent skill

Is audit-performance safe to install?

Performance & Loading Audit

Static Websites on cPanel

Severity Levels

Section 1 — Core Web Vitals

1.1 LCP — Largest Contentful Paint

1.2 CLS — Cumulative Layout Shift

1.3 INP — Interaction to Next Paint

Section 2 — Page Weight Budget

Section 3 — Image Strategy

Section 4 — CSS Optimization

4.1 Critical CSS Preloading

Section 5 — JavaScript Optimization

Section 6 — Font Optimization

Section 7 — Loading Strategy

7.1 Resource Hints

7.2 Lazy Loading

Section 8 — cPanel Server Configuration

Section 9 — HTML Document Structure

Section 10 — Animation Runtime Performance

10.1 CSS Animations — Summary

10.2 will-change — Summary

10.3 backdrop-filter — Summary

Section 11 — WebGL & Canvas Performance (Conditional)

Section 12 — Inline SVG Performance (Conditional)

Section 13 — prefers-reduced-motion

Section 14 — Third-Party Resources

Audit Output Format

Audit the pieces. Scan the whole. Decide.