responsive-images
Implement performant responsive images with srcset, sizes, lazy loading, and modern formats (WebP, AVIF). Covers aspect-ratio for CLS prevention, picture element for art direction, and fetchpriority for LCP optimization. Use when: adding images to pages, optimizing Core Web Vitals, preventing layout shift, implementing art direction, or converting to modern formats.
Install with Tessl CLI
npx tessl i github:jezweb/claude-skills --skill responsive-images99
Does it follow best practices?
Validation for skill structure
Discovery
100%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 is an excellent skill description that clearly articulates specific capabilities (responsive image techniques, modern formats, performance optimizations) and provides explicit trigger guidance. It uses proper third-person voice, includes technical terms users would naturally mention, and carves out a distinct niche that minimizes conflict with other skills.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions and techniques: srcset, sizes, lazy loading, WebP/AVIF formats, aspect-ratio for CLS prevention, picture element for art direction, and fetchpriority for LCP optimization. | 3 / 3 |
Completeness | Clearly answers both what (implement responsive images with specific techniques) AND when (explicit 'Use when:' clause covering adding images, optimizing Core Web Vitals, preventing layout shift, art direction, format conversion). | 3 / 3 |
Trigger Term Quality | Excellent coverage of natural terms users would say: 'images', 'responsive images', 'Core Web Vitals', 'layout shift', 'art direction', 'modern formats', 'WebP', 'AVIF', 'lazy loading', 'srcset', 'sizes'. | 3 / 3 |
Distinctiveness Conflict Risk | Clear niche focused specifically on responsive image implementation with distinct technical triggers (srcset, sizes, WebP, AVIF, CLS, LCP) that wouldn't conflict with general web development or other image-related skills. | 3 / 3 |
Total | 12 / 12 Passed |
Implementation
100%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is an excellent skill document that provides comprehensive, actionable guidance for responsive images. It efficiently covers multiple use cases with copy-paste ready code, clear decision tables for configuration choices, and well-documented error prevention patterns. The structure allows quick reference while providing depth where needed.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is lean and efficient, providing concrete code examples without explaining basic concepts Claude already knows. Every section serves a purpose with no padding or unnecessary explanations about what responsive images are. | 3 / 3 |
Actionability | All examples are fully executable HTML code that can be copy-pasted directly. The skill provides specific patterns for different use cases (hero, grid cards, art direction) with complete, working code snippets. | 3 / 3 |
Workflow Clarity | For a reference-style skill about HTML patterns, the workflow is appropriately clear. The configuration tables provide decision frameworks, and the Error Prevention section shows clear before/after patterns with explicit reasoning for each choice. | 3 / 3 |
Progressive Disclosure | Content is well-organized with clear sections progressing from Quick Start to Common Patterns to Error Prevention to Quick Reference. External resources are appropriately linked at the end without nested references. | 3 / 3 |
Total | 12 / 12 Passed |
Validation
87%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 14 / 16 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
metadata_field | 'metadata' should map string keys to string values | Warning |
body_steps | No step-by-step structure detected (no ordered list); consider adding a simple workflow | Warning |
Total | 14 / 16 Passed | |
- 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.