CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

netlify-image-cdn

Transforms images on demand via Netlify Image CDN's /.netlify/images endpoint with query parameters for resizing/cropping/format/quality. Use when adding image optimization or responsive images, converting formats (WebP/AVIF/PNG), generating thumbnails or blur placeholders, serving remote/third-party images through the CDN, allowlisting remote domains in netlify.toml, setting up image redirects or cache headers, building user-uploaded image pipelines, or debugging a 404 on /.netlify/images. Also covers framework image handling for Angular/Astro/Gatsby/Next.js/Nuxt.

75

Quality

94%

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

86%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 tight, highly executable reference skill: exact commands, parameter tables, and precise constraint callouts (double-backslash TOML escaping, blurhash-as-text) with one cleanly signaled reference file. The main weakness is a redundant appended 'house rules' section duplicating body content, plus the absence of an explicit verification step after config changes.

Suggestions

Remove or merge the trailing 'Netlify house rules' section (SKILL.md:155-180): all four of its numbered rules already appear verbatim in the body's 'Remote source images', 'Blur placeholders', 'Local development', and 'remote_images regex escaping' sections.

Add a one-line verification step after the remote allowlist and redirect examples, e.g. re-run the curl command and expect 200 with the transformed content-type (the Response codes section already defines the expected outcomes, so link to them).

Consider moving the framework image-handling table and setup-guide links into a reference file (e.g. references/frameworks.md) to keep SKILL.md focused on the endpoint itself, mirroring the user-uploads split.

DimensionReasoningScore

Conciseness

The body is dense and table-driven with no beginner-concept padding ("cover: fills exactly, cropping excess. Requires BOTH w and h"), but the trailing 'Netlify house rules' section (SKILL.md:155-180) restates four points already covered earlier — percent-encoding, blurhash text output, the local 404 cause, and remote_images escaping — which is unnecessary duplication that could be trimmed. Not level 5 because of this redundant block; not level 3 since the duplication is confined to one append-only section while everything else earns its tokens.

4 / 5

Actionability

Fully executable guidance throughout: copy-paste curl commands with real parameter values ("curl -vs 'https://mysitename.netlify.app/.netlify/images?url=/owl.jpeg&fit=cover&w=50&h=50&position=left'"), exact netlify.toml and _redirects snippets, a working encodeURIComponent example, and a parameter table enumerating valid values and defaults. This matches 'copy-paste ready code or commands; specific examples cover the common cases'.

5 / 5

Workflow Clarity

Task areas are clearly sequenced (endpoint → parameters → remote sources with allowlisting steps → redirects → caching → debugging), and the Response codes section (404 on invalid params, 304 on cached) plus the local-dev 404 diagnosis provide error-recovery feedback. It falls short of level 5 because multi-step tasks like remote allowlisting lack an explicit verify step (e.g., curl the transform after adding the pattern), though these aren't destructive/batch operations so no cap applies.

4 / 5

Progressive Disclosure

The bundle structure is exemplary: a dedicated 'User-uploaded image pipelines' section clearly signals the single reference ("see references/user-uploads.md"), which exists and is one level deep with no nested references. The framework table is compact and inline-appropriate, and the body stays an overview of the endpoint. Matches 'clear overview with well-signaled one-level-deep references; content appropriately split'.

5 / 5

Total

18

/

20

Passed

Description

100%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 model description: third-person, specific, comprehensive, with an explicit 'Use when' clause rich in natural trigger terms and synonyms. Both what and when are answered concretely with no vague padding.

DimensionReasoningScore

Specificity

The description lists many concrete actions — "resizing/cropping/format/quality", "converting formats (WebP/AVIF/PNG)", "generating thumbnails or blur placeholders", "allowlisting remote domains in netlify.toml", "setting up image redirects or cache headers", "building user-uploaded image pipelines", "debugging a 404 on /.netlify/images" — comprehensively covering the skill's surface. It matches the 'multiple specific concrete actions; comprehensive coverage' anchor exactly, not the level 4 anchor which expects minor coverage gaps.

5 / 5

Completeness

It explicitly answers both: what ("Transforms images on demand via Netlify Image CDN's /.netlify/images endpoint with query parameters for resizing/cropping/format/quality") and when ("Use when adding image optimization or responsive images, converting formats... or debugging a 404"). The explicit 'Use when' clause with concrete trigger phrases matches the level 5 anchor precisely; level 4 would require the 'when' to be less explicit.

5 / 5

Trigger Term Quality

Natural phrases users would say are covered with synonyms and extensions: "image optimization", "responsive images", "thumbnails", "blur placeholders", "WebP/AVIF/PNG", "third-party images", "cache headers", and framework names (Angular/Astro/Gatsby/Next.js/Nuxt). This matches the comprehensive-synonyms anchor; the level 4 anchor requires 'a few natural terms missing', which isn't the case here.

5 / 5

Distinctiveness Conflict Risk

The Netlify Image CDN niche is distinct with trigger phrases unlikely to fire for other skills; even the framework-coverage tail is bounded to Netlify image handling, so it won't collide with general framework-setup skills. Matches 'clear niche with distinct triggers; minimal conflict risk' rather than the level 4 anchor's 'minor overlap risk with closely related skills'.

5 / 5

Total

20

/

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

netlify/context-and-tools

Path

codex/skills/netlify-image-cdn/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.