decocms

@decocms source repo

79 skills
0 followers
19 hours ago last updated

▌
Decocms Apps Release Workflow · decocms
Choose the correct base branch (main vs next) when opening a PR against @decocms/apps, and operate the stable / prerelease release pipeline. Use BEFORE running `gh pr create` or pushing a branch, and when promoting a prerelease, publishing a hotfix, or explaining release channels to a user. Covers the PR base selection decision tree, semantic-release branching model, npm dist-tags (latest, next), customer-facing install commands, and gotchas (the canonical CI-skip token; package.json lagging the git tag).

0
installs
▌
Decoindex · decocms
Use when the user pastes a URL to a product page, category or storefront on a VTEX or Shopify e-commerce site (most Brazilian retail), or asks about a specific brand's catalog, prices or search. Put decoindex.com in front of the domain to get normalized product facts as Markdown instead of scraping a megabyte of client-rendered HTML.

0
installs
▌
Add Tool · decocms
Use when the user asks to add a new MCP tool, create a tool with UI, scaffold a tool, or add functionality to the MCP App server. Also use when adding API-only tools without a UI component.

0
installs
▌
Publish Store · decocms
Use when the user asks to publish to the store, publish to the registry, publish to studio, set up publishing, configure deco.json/app.json for publishing, troubleshoot publish errors, or understand how the deco store publish flow works.

0
installs
▌
Migrate Template · decocms
Use when the user asks to update their MCP App to the latest template version, sync with upstream template, pull in template changes, upgrade the template, or migrate to a newer version of the MCP App template.

0
installs
▌
Add Deploy Target · decocms
Use when the user asks to add support for a new deployment target or platform (e.g., Cloudflare Workers, Deno, Node.js, AWS Lambda), create a new entrypoint, or make the app deployable to a specific environment.

0
installs
▌
Decocms MCP Deploy · decocms
Understand and manage CI/CD for the decocms/mcps monorepo. Covers deploy.yml (Cloudflare Workers), publish-registry.yml (registry publish), checks.yml, and publish-jsr.yml. Explains the two deploy platforms and how detection works.

0
installs
▌
Decocms Home Widgets · decocms
Build responsive deco CMS home widgets (MCP-App tiles). Covers the resizable tile grid (Size picker up to 4×5), observed pixel sizes, the golden rules for filling + scrolling inside a tile, ResizeObserver-based breakpoints, and how to register a widget (tool _meta.ui.resourceUri → resource → constants → vite entry → html).

0
installs
▌
Decocms MCP Development · decocms
MCP Development — decocms/mcps

0
installs
▌
Generate Report · decocms bundle
Generate a structured Markdown report with YAML frontmatter for repository health monitoring. Use when the user asks to create a report, health check, audit, scan result, or status update for a repository.

0
installs
▌
Run Diagnostic · decocms
Run a comprehensive site diagnostic (performance, SEO, content, research) and generate a full report for a given URL.

0
installs
▌
Run Diagnostic Experimental · decocms
Run a site diagnostic using parallel subagents to keep context clean. Experimental version.

0
installs
▌
Commit · decocms
Prepare code for review by running quality checks, creating conventional commits, and opening pull requests. Use when the user wants to commit changes, create a PR, prepare for code review, or asks to commit their work.

0
installs
▌
Add MCP Tools · decocms
Guide for adding new MCP tools with consistent patterns for schemas, tool definitions, registry updates, and Better Auth integration

0
installs
▌
Decocms UI · decocms
Build or style React UI with the decocms product design system (@decocms/ui). Use when creating interfaces, pages, or components in a project that should look like decocms products, when the user mentions "design system", "@decocms/ui", "decocms style", or asks to make UI consistent with Studio. Covers installation, Tailwind v4 token setup, component inventory, and usage conventions.

0
installs
▌
Self Host Studio · decocms
Install and self-host deco Studio (the open-source control plane) on the user's own infrastructure. Use when the user wants to install, run, self-host, or deploy Studio locally (Docker, Rancher Desktop, kind, minikube) or on Kubernetes (managed or self-managed), or asks to "install Studio", "self-host decocms", configure the Studio Helm chart, or troubleshoot a Studio install. Detects the environment, picks the right tier, configures the charts correctly, validates end-to-end, and fixes the common failure modes.

0
installs
▌
PDF · decocms bundle
Read and extract text from .pdf files, page by page. Use when the user uploads or references a PDF to read or summarize.

0
installs
▌
DOCX · decocms bundle
Read and extract text, tables, and structure from .docx Word documents. Use when the user uploads or references a Word file to read or summarize.

0
installs
▌
PPTX · decocms bundle
Read and inspect existing .pptx PowerPoint files (text, speaker notes, slide images). Use only for reading uploaded PowerPoint files — to AUTHOR a deck use the slides skill instead.

0
installs
▌
XLSX · decocms bundle
Read and extract cell data from .xlsx Excel spreadsheets as TSV. Use when the user uploads or references an Excel file to read or summarize.

0
installs
▌
Brand · decocms bundle
brand — build an organization brand

0
installs
▌
Slides · decocms bundle
Create and edit presentation decks as single self-contained HTML files with a live, editable preview and print-to-PDF export. Use when the user wants slides, a deck, or a presentation.

0
installs
▌
Templating · decocms bundle
Render any text file (HTML, markdown, config, SQL, email) from a mustache template plus JSON data. Use when an output's shape is fixed ahead of time and only the values change.

0
installs
▌
File Reading · decocms
Route a file to the right reader by extension (pptx, docx, xlsx, pdf, and plain text). Use as the entry point when asked to read or summarize an uploaded file of unknown type.

0
installs
▌
Tool Scripting · decocms
Script against the org's MCP tools from inside the sandbox — discover schemas under .deco/tools/, call one tool from the shell with `typegen call`, or batch many calls in a script. Use whenever a task needs repeated or bulk tool calls (same tool many times, one call per file/row/item) instead of one-at-a-time agent tool calls.

0
installs
▌
Vtex Cart V2 · decocms
Cart v2 for VTEX storefronts — modular, granular, framework-agnostic. Explains the thesis (reduce cart API traffic, lazy cart creation, projection/sections fragmentation), the available hooks and loaders, and how to wire them in a Next.js or TanStack Start site.

0
installs
▌
Run Migration · decocms
Run the Fresh/Deno → TanStack Start migrator from this repo against a target site workspace. Resets the target to its Fresh/Deno state (origin/main), then runs the local migration script. Use for testing the migrator on real sites. For sites ALREADY on TanStack that just need the @decocms/start@6.x → split-7.x package upgrade, use the decocms-v6-to-v7-upgrade skill instead.

0
installs
▌
Template Skill · decocms
A template skill to use as a starting point for new skills. Copy this folder and customize.

0
installs
▌
Incident Report · decocms bundle
Create incident reports and post-mortems for platform issues. Supports both internal technical reports and client-facing communications. Use when documenting outages, security vulnerabilities, data leaks, performance degradation, or any production incident.

0
installs
▌
Deco E2e Testing · decocms bundle
Implement end-to-end performance tests for any Deco e-commerce site with lazy section tracking, cache analysis, and observability. Use this skill when asked to set up e2e tests, create performance testing infrastructure, or test user journeys on a Deco/VTEX site.

0
installs
▌
Deco Edge Caching · decocms
Configure edge caching for Deco storefronts on Cloudflare Workers using createDecoWorkerEntry (@decocms/tanstack), and cacheHeaders, detectCacheProfile, routeCacheDefaults (@decocms/blocks/sdk/cacheHeaders). Use when setting up worker-entry caching, tuning Cache-Control headers, adding cache profiles for commerce page types (PDP, PLP, search), configuring staleTime for TanStack Router routes, debugging cache HITs/MISSes, or implementing cache purge APIs.

0
installs
▌
Deco Full Analysis · decocms bundle
Run a full analysis of a Deco site - generates AGENTS.md with architecture, navigation flows, caching inventory, block health, and optimization findings. Includes 114 learnings from real sites as 9 checklists.

0
installs
▌
Deco Migrate Script · decocms
Automated migration script that converts Deco storefronts from Fresh/Preact/Deno to TanStack Start/React/Cloudflare Workers. Runs 8 phases (analyze, scaffold, transform, cleanup, report, verify, bootstrap, compile). Use when running the migration script, debugging its output, extending it with new transforms, or understanding what it does. Located at packages/blocks-cli/scripts/migrate.ts in @decocms/blocks-cli.

0
installs
▌
Deco API Call Dedup · decocms
Detect and fix N+1 / duplicate API call patterns in Deco storefront section loaders (VTEX Catalog, Intelligent Search, checkout simulation, Shopify). Covers detection (loops calling per-product APIs inside `.map()`/`await`, redundant fetches for data already on the Product object) and fixes (vtexCachedFetch SWR cache, slugCache/cross-selling dedup, usePriceSimulationBatch, PLP path filtering, pageType dedup, site loader registration, cachedLoader in-flight dedup in dev mode, HAR analysis). Use when investigating slow page loads (SSR > 3s), VTEX 429 rate limiting, server logs showing repeated calls to the same endpoint, PDP/PLP loads triggering 20+ API calls, simulation calls happening one-by-one, or "Unhandled resolver" warnings.

0
installs
▌
Deco Site Deployment · decocms
Manage Deco site configuration (env vars, scaling, resources) via the Kubernetes state secret and trigger redeployment. Handles multi-cloud deployment across AWS and GCP clusters.

0
installs
▌
Deco Apps Vtex Review · decocms
Audit and fix the VTEX integration in @decocms/apps-start (TanStack Start). Covers cookie propagation (vtexFetchWithCookies, buildAuthCookieHeader), expectedOrderFormSections, salesChannel injection, HttpOnly cookie handling, Intelligent Search cookie generation, useCart/useUser/useWishlist hooks, and TypeScript validation. Use when reviewing vtex/ code quality, fixing authentication issues, debugging missing cart sections, or ensuring full parity with deco-cx/apps.

0
installs
▌
Deco Cms Route Config · decocms
Configure CMS-driven routes in @decocms/tanstack using cmsRouteConfig, cmsHomeRouteConfig, and admin routes. Covers the catch-all route ($.tsx), homepage route (index.tsx), admin protocol routes (meta, render, invoke), ignoreSearchParams for variant selection, staleTime/gcTime configuration, cache headers, and head/SEO setup. Use when creating a new Deco site, migrating routes from Fresh, or debugging route-level caching issues.

0
installs
▌
Deco Vtex Fetch Cache · decocms
SWR in-memory fetch cache for VTEX API responses in @decocms/apps. Ported from deco-cx/deco runtime/fetch/fetchCache.ts. Provides in-flight deduplication + stale-while-revalidate for all VTEX GET requests. Covers fetchWithCache utility, vtexCachedFetch client function, LRU eviction, TTL by HTTP status, integration with intelligentSearch and cross-selling calls. Use when adding caching to VTEX API calls, debugging stale responses, or understanding how the fetch cache layer works.

0
installs
▌
Deco Apps Vtex Porting · decocms bundle
Port the VTEX commerce app from deco-cx/apps (Fresh/Deno) to @decocms/apps-start (TanStack Start/Node). The goal is to mirror the original production code that runs on thousands of stores, adapting only what is necessary for TanStack/Node. Covers full structural mapping (141 files → apps-start equivalent), adaptation patterns (Deno→Node, signals→react-query, manifest→exports, ctx.bag→configureVtex), schema.org compliance, and a file-by-file gap analysis. Use when porting VTEX code, fixing bugs in apps-start, or ensuring parity with the original.

0
installs
▌
Deco Core Architecture · decocms bundle
Architecture reference for deco-cx/deco — the core Deco framework for Fresh/Deno. Covers the resolution engine (Resolvable → Resolver pipeline), block system (sections, loaders, actions, flags, matchers, handlers, apps, workflows), runtime request flow (Hono + Fresh/HTMX), DecofileProvider (state management), manifest generation, plugin system, hooks (useSection, useScript, useDevice), client-side invoke proxy, and the relationship between deco-cx/deco (Fresh/Deno) and @decocms/start (TanStack/Node). Use when exploring the deco repo, understanding how the framework works, building new block types, debugging resolution issues, or porting deco internals to TanStack Start.

0
installs
▌
Deco Performance Audit · decocms bundle
Perform a deep dive analysis of CDN metrics, cache performance, error rates, and traffic patterns for a Deco site. Use this skill to identify performance bottlenecks, optimize cache hit rates, and reduce error rates.

0
installs
▌
Deco Reconcile Snapshot · decocms
Reconcile a migrated TanStack repo against upstream changes that landed on the Fresh/Deno source repo after the migration cut. Runs `deco-reconcile` to produce one diff per changed file, then ports each one by hand — a rebase, not a re-migration. Use when a migration has been running for weeks and the source repo kept moving, or when the user says "reconcile", "trazer as mudanças de origem", "o Deno mudou desde o corte", "snapshot diff", or "sincronizar com a origem".

0
installs
▌
Deco Cms Layout Caching · decocms
Cache layout sections (Header, Footer, Theme) across @decocms/blocks and @decocms/tanstack to avoid redundant CMS resolution and API calls on every navigation. Covers resolvedLayoutCache in resolve.ts, layoutInflight dedup in sectionLoaders.ts, pageInflight dedup in cmsRoute.ts, registerLayoutSections, staleTime in dev mode, and diagnosing repeated intelligent-search calls. Use when page loads trigger duplicate VTEX API calls for Header shelves, variant changes re-resolve the entire CMS page, or layout sections cause N+1 API patterns.

0
installs
▌
Deco Incident Debugging · decocms bundle
Fast incident response skill for Deco engineering team. Rapidly identifies known issues from past learnings, proposes solutions, and guides debugging for new incidents. Optimized for speed - get to root cause in minutes, not hours.

0
installs
▌
Decocms V6 To V7 Upgrade · decocms bundle
Upgrades an already-TanStack site from the monolithic @decocms/start@6.x + @decocms/apps@5.x to the split 7.x packages (@decocms/blocks, @decocms/tanstack, @decocms/blocks-admin, @decocms/blocks-cli, @decocms/apps-*). Use when a TanStack Start site's package.json pins @decocms/start to 6.x and/or @decocms/apps to 5.x. Not for Fresh/Deno sites (use the Fresh→TanStack migrator) and not for Next.js sites (use deco-next-package-migration).

0
installs
▌
Deco Site Scaling Tuning · decocms bundle
LEGACY. Discover optimal autoscaling parameters for a Deno/Fresh Deco site running on Knative/Kubernetes, by analyzing Prometheus metrics. Correlates CPU, concurrency, and latency to find the right scaling target and method. Does NOT apply to current @decocms/tanstack (Cloudflare Workers) or @decocms/nextjs (Node) sites.

0
installs
▌
Deco To Tanstack Migration · decocms bundle
Consolidated migration skill for Deco storefronts. Phase-based playbook for Fresh/Preact/Deno to TanStack Start/React/Cloudflare Workers. Covers all phases from scaffold to async rendering, plus post-migration patterns, hydration fixes, navigation, search, matchers, and islands elimination. Single entry point — all deep-dive content in references/.

0
installs
▌
Deco Site Memory Debugging · decocms bundle
Debug memory issues on current blocks sites. Cloudflare Workers (@decocms/tanstack) sites are diagnosed via the tail-worker exceededMemory/exceededCpu capture in ClickHouse plus wrangler tail/dev — there is no live production process to attach to. Node/RSC (@decocms/nextjs) sites use Node's own --inspect CDP flow (process.memoryUsage(), forced GC, heap snapshots).

0
installs
▌
Deco Next Package Migration · decocms bundle
Migrates a Next.js App Router site off the abandoned @decocms/start@5.x /next, /core, /node export tiers onto the current @decocms/blocks, @decocms/blocks-admin, and @decocms/nextjs packages. Use when a site's package.json pins @decocms/start to a 5.x-next prerelease, or imports from @decocms/start/next, @decocms/start/core, or @decocms/start/node.

0
installs
▌
Deco Variant Selection Perf · decocms
Optimize product variant selection in Deco TanStack storefronts. Eliminates server re-fetches when switching SKU variants of the same product using replaceState, adds loading states for cross-product variant navigation, and removes preload="intent" from variant links to prevent double-fetch. Use when variant changes are slow, HAR analysis shows duplicate loadCmsPage calls, or when implementing variant selectors in a PDP.

0
installs
▌
Deco Server Functions Invoke · decocms bundle
How server functions (invoke) work in Deco storefronts — the generate-invoke pipeline that bridges @decocms/apps pure functions to TanStack Start createServerFn with top-level declarations. Covers the root cause of CORS issues with VTEX API calls, why createServerFn must be top-level, the three-layer architecture (apps=pure functions, start=generator, site=generated invoke), the generate-invoke.ts script, and the comparison with deco-cx/deco's Proxy+HTTP invoke. Use when debugging CORS in cart/checkout, adding new server actions, understanding why invoke calls hit VTEX directly from the browser, or setting up invoke for a new site.

0
installs
▌
Deco Storefront Test Checklist · decocms
Generate a context-aware QA checklist for any Deco storefront by analyzing its sections, components, routes, and interactive patterns. Use when testing after migrations, upgrades, major refactors, or before deploying to production. Produces checklists scoped to the actual components in the site, not generic boilerplate.

0
installs
▌
Cache · decocms
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.

0
installs
▌
Video · decocms
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 enable sound on an uploaded video.

0
installs
▌
Robots · decocms
Manages robots.txt rules to control crawler access, preserve crawl budget, and ensure proper indexing of the storefront.

0
installs
▌
Images · decocms
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.

0
installs
▌
Review · decocms
Reviews staged changes before publish, checking for hardcoded content, CSS issues, unused files, and security concerns.

0
installs
▌
Fix Bug · decocms
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.

0
installs
▌
New Page · decocms
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 section/loader.

0
installs
▌
Variants · decocms
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

0
installs
▌
Canonical · decocms
Use this to manage URL authority and prevent duplicate content issues across the storefront

0
installs
▌
Setup Blog · decocms
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.

0
installs
▌
New Section · decocms
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.

0
installs
▌
SEO Sections · decocms
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.

0
installs
▌
Deco Ecommerce QA · decocms bundle
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.

0
installs
▌
Figma To Deco · decocms
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.

0
installs
▌
Monitor Summary · decocms
Summarize site performance metrics for a given period, including bandwidth, requests, cache hit ratio, top paths, top countries, and anomalies.

2
installs
▌
Troubleshooting · decocms
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.

0
installs
▌
Bump Dependencies · decocms
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.

0
installs
▌
Asset Hash Busting · decocms
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.

0
installs
▌
Cacheable Matchers · decocms
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.

0
installs
▌
Cms Friendly Props · decocms
Use when creating a section, adding or changing a field on an existing section's Props, shaping an editorial array (tabs, cards, links, banners, slides), picking a widget for a field (image, video, color, rich text, HTML, date, secret), or reviewing whether a section is editable enough for a non-technical merchant in the Studio. Covers the JSDoc annotations the schema generator recognises, the formats the Studio form actually renders, and the prop shapes that break the editor in ways code review cannot see. Not about how the component looks — about the shape of the data the editor fills in.

0
installs
▌
Deco Bot Rendering · decocms
Use when debugging what crawlers or bots see on a deco site, verifying if SSR is active for bots, or diagnosing firstByteThresholdMS behavior.

0
installs
▌
Deduplicate Loaders · decocms
Finds and consolidates duplicate loaders across page JSONs to reduce redundant API calls.

0
installs
▌
Vtex Login Headless · decocms
Diagnose and fix headless login issues on VTEX storefronts — covering authorized domain setup and simulating an authenticated session by copying VtexIdclientAutCookie cookies.

0
installs
▌
Image Optimizer · decocms
Images Skill

0
installs
▌
Client JS Budget · decocms
Use when a storefront scores badly on Total Blocking Time or INP, when an interaction (opening filters, adding to cart, switching a tab, opening the menu) feels slow, when deciding whether a component needs JavaScript at all, or when a third-party tag (GTM, pixels, chat, anti-fraud) is suspected of eating the main thread. Covers how to attribute blocking time before changing anything, the CSS-first ladder that removes JS instead of deferring it, and the gating patterns that move a script off the critical path without losing the data it collects.

0
installs
▌
HTML Size Optimizer · decocms
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.

0
installs
▌
Pagespeed Score Model · decocms
Use when acting on a PageSpeed Insights or Lighthouse score rather than on one metric — deciding which of LCP, TBT, CLS, FCP or Speed Index is actually worth the next change, building a byte budget for LCP, explaining why a fix that improved one metric lowered the score, judging whether a target score is reachable at all, or telling a real win apart from machine noise. Covers the mobile score weights, the Lantern simulation model that makes LCP predictable from bytes, the attribution procedure that separates first-party from third-party cost, and the dead ends that were measured and rejected.

0
installs

79 published skills