CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

perf-web-optimization

Optimize web performance: bundle size, images, caching, lazy loading, and overall page speed. Use when site is slow, reducing bundle size, fixing layout shifts, improving Time to Interactive, or optimizing for Lighthouse scores. Triggers on: web performance, bundle size, page speed, slow site, lazy loading. Do NOT use for Core Web Vitals-specific fixes (use core-web-vitals), running Lighthouse audits (use perf-lighthouse), or Astro-specific optimization (use perf-astro).

Quality

88%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

76%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A lean, highly actionable overview with real one-level-deep references, but the Measure→Verify workflow is name-only with no validation checkpoints, a few snippets contain placeholder bodies, and several inline sections duplicate what the reference files cover. Workflow clarity and the inline/reference split are the main improvement areas.

Suggestions

Expand the 'Systematic approach: Measure → Identify → Prioritize → Implement → Verify' line into short sequenced steps with an explicit verification checkpoint (e.g., re-run the Lighthouse audit after each change and confirm the targeted metric moved before moving on) instead of delegating Verify entirely to perf-lighthouse.

Replace placeholder snippet bodies with runnable ones: give the loadThirdParty function a concrete dynamic script-injection example, show a minimal real critical-CSS pattern, and include imports for the React lazy/Next.js dynamic examples.

Trim the inline 'Bundle Analysis' and 'Code Splitting Patterns' sections to one representative example each and point to references/bundle-optimization.md (and references/image-optimization.md for the image snippet) to reduce duplication between SKILL.md and the bundle files.

DimensionReasoningScore

Conciseness

The body is dense with concrete artifacts — a metrics threshold table, copy-ready HTML/JS/bash snippets, package-size facts, and checklists — with essentially no prose explaining concepts Claude already knows. This matches 'lean and efficient; assumes Claude's competence; every token earns its place' rather than the anchor 4, which requires minor instances of over-explanation to trim, and none are present.

5 / 5

Actionability

Most guidance is executable (image tags with width/height/loading/fetchpriority, preconnect + print-media font loading, defer-until-interaction listeners, bundle analyzer commands, Cache-Control headers), but a few snippets are placeholders rather than runnable: the third-party script has an empty 'function loadThirdParty() { // Load analytics... }' body, critical CSS is '<style> /* critical styles */ </style>', and the React lazy/dynamic snippet omits imports. That is 'mostly executable guidance... with minor gaps', not fully copy-paste ready.

4 / 5

Workflow Clarity

The workflow 'Measure → Identify → Prioritize → Implement → Verify' is stated as a single line, but the body is organized by topic (Quick Wins, Bundle Analysis, Caching) rather than by workflow step, 'Verify' is fully delegated to the perf-lighthouse skill, and no validation checkpoints or feedback loops are described. This matches 'sequence present but checkpoints missing or implicit' — below anchor 4, which requires most checkpoints present. Not a destructive/batch skill, so the cap at 3 is not the binding reason; the implicit checkpoints are.

3 / 5

Progressive Disclosure

The three referenced files (references/core-web-vitals.md, references/bundle-optimization.md, references/image-optimization.md) all exist, are one level deep, and are clearly signaled with one-line descriptions under 'Detailed Examples'. However, the body inlines substantial material that the references expand — Bundle Analysis and Code Splitting Patterns duplicate references/bundle-optimization.md's Analysis Tools and Code Splitting sections, and the image Quick Win duplicates references/image-optimization.md — so placement is good but not fully split, matching 'most content is appropriately placed; minor organization gaps' rather than the fully split anchor-5 structure.

4 / 5

Total

16

/

20

Passed

Description

96%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong description: explicit what/when with concrete trigger phrases, synonym-rich natural terms, and explicit routing away from three sibling skills. Its only weakness is that 'fixing layout shifts' sits in the Use-when list while Core Web Vitals fixes are excluded, leaving minor overlap risk with the core-web-vitals skill.

DimensionReasoningScore

Specificity

Lists multiple concrete capability areas — 'bundle size, images, caching, lazy loading, and overall page speed' — giving comprehensive coverage of the web performance domain. This matches the anchor for multiple specific concrete actions with comprehensive coverage, not the anchor below it ('several specific actions; minor gaps').

5 / 5

Completeness

Explicitly answers both what ('Optimize web performance: bundle size, images, caching, lazy loading, and overall page speed') and when ('Use when site is slow, reducing bundle size, fixing layout shifts...') with concrete trigger phrases — mirroring the anchor-5 example structure. The 'Use when...' clause is explicit, so the completeness cap of 3 does not apply.

5 / 5

Trigger Term Quality

Natural user phrasing is comprehensive and includes synonyms: 'site is slow' / 'slow site', 'bundle size', 'page speed', 'lazy loading', 'layout shifts', 'improving Time to Interactive', 'Lighthouse scores', plus a dedicated 'Triggers on:' line. Not a 4 because synonym coverage ('site is slow' and 'slow site') and breadth exceed 'a few natural terms missing'.

5 / 5

Distinctiveness Conflict Risk

Explicit negative boundaries ('Do NOT use for Core Web Vitals-specific fixes (use core-web-vitals), running Lighthouse audits (use perf-lighthouse), or Astro-specific optimization (use perf-astro)') give it a clear niche, but 'Use when... fixing layout shifts' overlaps with the excluded core-web-vitals skill (CLS is a Core Web Vital), creating minor conflict risk with a closely related skill — the anchor-4 condition.

4 / 5

Total

19

/

20

Passed

Validation

100%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository

tech-leads-club/agent-skills

Path

packages/skills-catalog/skills/(performance)/perf-web-optimization/SKILL.md

Reviewed

Table of Contents

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.