Skip to main content
affpapa.org
RU EN
skill CX Codex

vtex-io-rootpath — Claude Code skill for VTEX IO rootPath

A skill for VTEX IO apps in multi-binding stores: shows how to build URLs with the binding's path prefix. Useful when links 404 or point to the wrong locale.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add vtex/skills --skill vtex-io-rootpath -a claude-code
Open on GitHub

What vtex-io-rootpath does

This skill covers rootPath handling in VTEX IO stores where several bindings share one domain behind path prefixes (store.com/us/, store.com/br/). It walks through pulling rootPath out of the x-vtex-root-path header, the useRuntime().rootPath hook in React, URL building on the backend, link generation and asset paths.

Inside are decision rules and hard constraints. A Node backend needs an early middleware, usually named prepare, that reads the header, normalizes the value and stores it on ctx.state.rootPath; the same middleware sets Vary: x-vtex-root-path so CDN caching stays per binding. React components read the prefix through the hook from vtex.render-runtime. One more requirement: sanitize rootPath, since a value of "/" concatenated with a path yields a double slash (//product/shoes) — that breaks canonical URLs and can trigger redirect loops.

The skill is not meant for stores with a separate domain per locale, nor for general IO backend patterns. Hardcoding a prefix such as /us/ breaks every other binding, and that is the failure this skill is built around.

What it helps with

  • build canonical URLs that carry the binding prefix
  • fix 404s and wrong links in a multi-binding store
  • wire a prepare middleware that reads x-vtex-root-path
  • strip double slashes when rootPath === "/"
  • generate sitemap entries per binding

Example prompts for the agent

  • Show me how the prepare middleware should read x-vtex-root-path into ctx.state.rootPath.
  • Build a product canonical URL with rootPath on a VTEX IO backend.
  • How do I read rootPath in a React component with useRuntime()?

How to install vtex-io-rootpath

1Skills CLI (Vercel)

npx skills add vtex/skills --skill vtex-io-rootpath -a claude-code

2Manually: put the files in place

~/.claude/skills/vtex-io-rootpath/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/vtex-io-rootpath/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about vtex-io-rootpath

How do I install vtex-io-rootpath in Claude Code?

Run npx skills add vtex/skills --skill vtex-io-rootpath -a claude-code. The skill lands at ~/.claude/skills/vtex-io-rootpath/SKILL.md.

What does vtex-io-rootpath do?

It explains how to build URLs, links, redirects and asset paths with the binding prefix in multi-binding VTEX IO stores. Both Node backends and React frontends are covered.

When should I skip this skill?

When each locale has its own domain and no path prefix is involved. It also does not replace general IO backend patterns or CDN configuration.

Similar skills

Everything for Frontend and UI →
frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. CX Codex +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. CX Codex +1 1,300,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. 186,758installs

From the same set43

marketplace-rate-limiting Teaches your agent to handle VTEX API 429s: exponential backoff with jitter, rate limit headers, circuit breaker and request queuing. CX Codex +1 1,000installs payment-async-flow Rules for VTEX payment connector code: Boleto, Pix, bank redirects, callbackUrl handling and signature validation. CX Codex +1 1,000installs payment-pci-security Enforces PCI DSS requirements and Secure Proxy routing when building payment connectors that handle card authorization, token exchange, and post-auth requests. CX Codex +1 1,000installs payment-provider-framework This skill guides VTEX IO payment connector work, from PPF wiring to Secure Proxy and build checks. Use it when implementing or maintaining a connector app. CX Codex +1 979installs sales-app-extensibility Guides the creation, styling, and deployment of VTEX Sales App extensions. Works through a seven-stage sequence from project checks to final delivery. CX Codex +1 856installs vtex-io-storefront-theme-versioning Guides coding agents through publishing, updating, or rolling back VTEX IO storefront themes without losing merchant Site Editor data across major versions. CX Codex +1 777installs vtex-io-rbac Walks you through locking down VTEX IO app routes and resources: role policies, resource policies, VRN principals and @auth directives. CX Codex +1 737installs masterdata-storage-strategy Guides data architecture decisions in VTEX, helping configure Master Data JSON schemas with indexing, security, and caching rules before creating entities. CX Codex +1 719installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor