storefront-skills

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.

Quick fixes for common, isolated issues in deco.cx storefronts. Use when the user reports a specific symptom that doesn't warrant a full skill. This is a growing knowledge base — add new entries as they're discovered.

Make deco storefront pages with matchers (A/B tests, date windows, segment targeting) cacheable at the CDN edge. Use when a page uses matcher blocks or MultivariateFlag and returns Cache-Control: no-store. Covers the framework's cache-decision gates, the cache: 'no-store' default on site loaders, the missing cacheable=true on custom matchers, the inline-cookie script (1.201.2+), the cold-visitor bias trade-off, and a diagnostic checklist.

Audit and improve deco store caching across all three layers: loader cache, stale edge cache (async render), and HTML page cache. Use when the user asks to improve cache, reduce latency, optimize loaders, configure TTL/cache keys, enable HTML cache, or debug cache-control headers on a deco storefront.

Update deco and apps dependencies in a deco.cx storefront. Use when the user asks to bump, update, or upgrade deco, apps, or storefront dependencies.

Understand and configure image optimization in deco.cx storefronts — components, quality settings, bypass rules, platform-specific handling, CDN proxy, and format negotiation. Use when the user asks about images, image quality, image optimization, or image components.

Use when Icon or SVG sprite components fetch sprites.svg repeatedly causing excessive bandwidth, or when asset() is called inside a component render function for a constant URL.

Create a new page on a deco.cx storefront — including route, metadata, and sections. Use when the user asks to add, create, or scaffold a new page or route in a deco site.

Create a new deco.cx Section — a visual Preact + Tailwind component with typed props, optional inline/external loaders, and Islands for client-side behavior. Use when the user asks to build, add, or scaffold a new section on a deco storefront.

Implement a complete Figma design into a Deco storefront — from reading pages and sections, downloading assets, configuring loaders, to QA with Playwright and performance auditing. Use when the user provides a Figma link and wants it built as a Deco site.

Finds and consolidates duplicate loaders across page JSONs to reduce redundant API calls.

Reviews staged changes before publish, checking for hardcoded content, CSS issues, unused files, and security concerns.

Manages robots.txt rules to control crawler access, preserve crawl budget, and ensure proper indexing of the storefront.

Quickly identify, reproduce, and patch bugs in deco.cx storefronts by editing components, loaders, sections, or configuration as needed. Always confirm the bug, then provide a minimal code fix. Reference official deco.cx docs and request any extra details needed to reproduce the issue.

Summarize site performance metrics for a given period, including bandwidth, requests, cache hit ratio, top paths, top countries, and anomalies.

Shrink first-byte HTML and embedded payloads: trim framework state scripts (Fresh/Next), event data attributes, JSON-LD bloat, and duplicate responsive markup so the client receives less markup and JSON.

Improve how images are being used in the website, you will check things like: Pre-load, Lazy-load, Format, Size.

Use this to manage URL authority and prevent duplicate content issues across the storefront