Menu
Improve how images are being used in the website, you will check things like: Pre-load, Lazy-load, Format, Size.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Diagnose and fix headless login issues on VTEX storefronts — covering authorized domain setup and simulating an authenticated session by copying VtexIdclientAutCookie cookies.
Use when debugging what crawlers or bots see on a deco site, verifying if SSR is active for bots, or diagnosing firstByteThresholdMS behavior.
Use when a site's SEO metadata (title, og:tags, LD+JSON) is missing, incomplete, or handled by a weak custom component. Covers configuring the apps SEO sections for general pages, PDPs, and PLPs via the deco admin.
Configure deco.cx Variants — the mechanism that swaps the value of a section, page, image, message, or ANY custom-typed prop based on a matcher rule (device, cookie, date, A/B test, geo, path, query string, etc.). Use when the user asks to A/B test a section, personalize a page per audience/segment, show different banners per device or location, schedule a promotion by date/cron, add a new variant-able type (promotion, VTEX segment, product list, menu items), write a custom matcher, or generally wire up `website/flags/multivariate*` in `.deco/blocks/*.json`. Covers the JSON shape (`variants: [{ value, rule }]`), the resolution order (first match wins, catch-all last), every built-in matcher (`always`, `never`, `device`, `date`, `cron`, `random`, `cookie`, `host`, `pathname`, `queryString`, `userAgent`, `location`, `site`, `environment`, `multi`, `negate`), how to compose them with `multi` (and/or) and `negate`, the 8-line boilerplate to create your own `flags/multivariate/<type>.ts`, the shape of a custom `ma
Install and configure the Blog Manager on a deco-site storefront. Covers the blog app, page routes, sections, Blog Manager MCP connection in Studio, and first-run brand context initialization.
Use when inside a deco.cx ecommerce repository (deco.ts present, decobot in PR history) and the user wants automated QA for purchase-journey correctness — set up E2E coverage, test the add-to-cart / checkout flow, or scaffold a CI gate for the store with the @decocms/qa engine. NOT for load/cache performance testing (use deco-e2e-testing) or hand-written Playwright spec files.
| name | image-optimizer |
| description | Improve how images are being used in the website, you will check things like: Pre-load, Lazy-load, Format, Size. |
Use this to improve how images are used on storefront and e-commerce pages. Check: pre-load, lazy-load, format, and size.
<link rel="preload" as="image" href="…"> in <head> for that single critical image.Where to preload by Storefront page type:
Edge cases:
Checks TO-DO: Does it have more than one image as a preload? Wrong! Does it have any preload tags? Probably wrong.
loading="lazy" on <img> (or equivalent in your framework) for images below the fold.loading="lazy" over custom JS unless you need intersection-based behavior (e.g. fade-in).loading="eager" on <img> for the main image (same chosen for pre-loading).fetchpriority="high" on the one image that is your LCP candidate (same as the one you preload or the first visible hero/product image).fetchpriority="low" on images that are below the fold or clearly non-critical (e.g. thumbnails, logos in the footer) so they don’t compete with the LCP image.fetchpriority="auto" (or omit the attribute) for everything else; the browser decides. No need to set it explicitly unless you want high or low.high on multiple images; reserve it for the single above-the-fold image that matters most for LCP.<picture> with <source type="image/avif"> / type="image/webp" and <img> as fallback.<picture>.srcset and sizes so the browser picks a width that matches layout and DPR.width/height or aspect-ratio) to avoid layout shift (CLS).