decocms/storefront-skills

new-page

Create a new page on a deco.cx storefront — including route, metadata, sections, and dynamic route params (e.g. /category/:slug). Use when the user asks to add, create, or scaffold a new page or route in a deco site, or to pass a URL param into a…

원문 언어: 영어

images

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…

원문 언어: 영어

video

Understand and configure video in deco.cx storefronts — the Video component, autoplay, and especially audio/sound. Use when the user asks about video, video sound, audio, "video with no sound", "video is silent", "how to unmute", muted, autoplay, or how to…

원문 언어: 영어

html-size-optimizer

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.

원문 언어: 영어

vtex-login-headless

Diagnose and fix headless login issues on VTEX storefronts — covering authorized domain setup and simulating an authenticated session by copying VtexIdclientAutCookie cookies.

원문 언어: 영어

deco-bot-rendering

Use when debugging what crawlers or bots see on a deco site, verifying if SSR is active for bots, or diagnosing firstByteThresholdMS behavior.

원문 언어: 영어

seo-sections

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.

원문 언어: 영어

variants

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,…

원문 언어: 영어

setup-blog

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.

원문 언어: 영어

deco-ecommerce-qa

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…

원문 언어: 영어

troubleshooting

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.

원문 언어: 영어

cacheable-matchers

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

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…

원문 언어: 영어

bump-dependencies

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.

원문 언어: 영어

asset-hash-busting

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.

원문 언어: 영어

new-section

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.

원문 언어: 영어

figma-to-deco

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.

원문 언어: 영어

deduplicate-loaders

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

원문 언어: 영어

review

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

원문 언어: 영어

robots

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

원문 언어: 영어

fix-bug

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…

원문 언어: 영어

monitor-summary

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

원문 언어: 영어

image-optimizer

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

원문 언어: 영어

canonical

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

원문 언어: 영어