Image Optimization Helper - Auto-activating skill for Frontend Development. Triggers on: image optimization helper, image optimization helper Part of the Frontend Development skill category.
32
0%
Does it follow best practices?
Impact
92%
1.01xAverage score across 3 eval scenarios
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./planned-skills/generated/05-frontend-dev/image-optimization-helper/SKILL.mdQuality
Discovery
0%Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.
This description is essentially a placeholder with no substantive content. It repeats the skill name as its own trigger term, provides zero concrete actions or capabilities, and lacks any explicit guidance on when Claude should select it. It would be nearly impossible for Claude to correctly choose this skill from a pool of available skills.
Suggestions
Add specific concrete actions the skill performs, e.g., 'Compresses images, converts formats (WebP, AVIF), generates responsive image markup with srcset, implements lazy loading, and optimizes image delivery for web performance.'
Add an explicit 'Use when...' clause with natural trigger terms, e.g., 'Use when the user asks about compressing images, reducing image file size, converting to WebP/AVIF, implementing lazy loading, responsive images, srcset, or improving page load performance related to images.'
Remove the redundant 'Triggers on' line that just repeats the skill name, and replace it with meaningful trigger keywords users would naturally use such as 'image compression', 'reduce image size', 'WebP conversion', 'lazy load images', 'optimize assets'.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | The description contains no concrete actions whatsoever. It only names itself ('Image Optimization Helper') and its category ('Frontend Development') without describing what it actually does—no mention of compressing images, converting formats, lazy loading, responsive images, or any other specific capability. | 1 / 3 |
Completeness | The description fails to answer both 'what does this do' and 'when should Claude use it'. There is no explanation of capabilities and no explicit 'Use when...' clause or equivalent trigger guidance. The 'Triggers on' line just repeats the skill name. | 1 / 3 |
Trigger Term Quality | The only trigger terms listed are the skill's own name repeated twice ('image optimization helper'). There are no natural user keywords like 'compress images', 'reduce image size', 'WebP', 'lazy loading', 'responsive images', 'srcset', or file format terms users would actually say. | 1 / 3 |
Distinctiveness Conflict Risk | The description is extremely generic—'image optimization' in a 'Frontend Development' category could overlap with performance optimization skills, asset pipeline skills, build tool skills, or general frontend skills. Nothing distinguishes this skill's specific niche or boundaries. | 1 / 3 |
Total | 4 / 12 Passed |
Implementation
0%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This skill is an empty shell with no actual content. It is entirely composed of auto-generated boilerplate that describes what a skill would do without providing any actual image optimization guidance, code examples, tool recommendations, or workflows. It fails on every dimension of the rubric.
Suggestions
Add concrete, executable code examples for common image optimization tasks (e.g., using sharp/imagemin in Node.js, responsive image markup with srcset, next/image configuration)
Include a clear workflow for optimizing images in a frontend project: audit existing images → choose format (WebP/AVIF) → resize/compress → implement lazy loading → validate with Lighthouse
Remove all meta-description sections ('Purpose', 'When to Use', 'Example Triggers', 'Capabilities') and replace with actionable technical content covering specific formats, tools, and techniques
Add concrete examples of HTML patterns (picture element, srcset), build tool configurations (webpack image loaders, Vite plugins), and performance budgets for images
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The content is entirely filler and boilerplate. It repeats 'image optimization helper' 9 times without providing any actual technical content, code, or actionable information. Every token is wasted on meta-description rather than substance. | 1 / 3 |
Actionability | There is zero concrete guidance—no code, no commands, no specific techniques for image optimization. Phrases like 'Provides step-by-step guidance' and 'Generates production-ready code' describe what the skill claims to do rather than actually doing it. | 1 / 3 |
Workflow Clarity | No workflow, steps, or process is defined. The content contains no sequence of actions, no validation checkpoints, and no actual instructions for performing image optimization. | 1 / 3 |
Progressive Disclosure | The content is a flat, repetitive block with no meaningful structure. Section headers exist but contain no substantive content. There are no references to detailed materials, examples, or related documentation. | 1 / 3 |
Total | 4 / 12 Passed |
Validation
81%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 9 / 11 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
allowed_tools_field | 'allowed-tools' contains unusual tool name(s) | Warning |
frontmatter_unknown_keys | Unknown frontmatter key(s) found; consider removing or moving to metadata | Warning |
Total | 9 / 11 Passed | |
c8a915c
Table of Contents
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.