菜单
Improve how images are being used in the website, you will check things like: Pre-load, Lazy-load, Format, Size.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
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).