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

vtex-io-admin-react — Claude Code skill: what it does, how to install

Guides coding agents in building VTEX IO admin pages with React, enforcing official design systems, bounded tables, and predictable feedback states.

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

What vtex-io-admin-react does

This skill instructs AI assistants on creating operational interfaces under the VTEX IO admin builder. It enforces official design packages—specifically vtex.styleguide for customer-facing store apps and @vtex/shoreline for internal tools. Generic suites like Chakra or Material UI get replaced immediately.

Project structure follows standard VTEX conventions. Navigation entries declared in admin/navigation.json map directly to admin/routes.json and components inside the react/ directory. For heavy tables, the guidelines mandate pagination alongside server-side queries. Loading full datasets into browser memory is prohibited to prevent interface freezes.

Operational actions require clear UI feedback: buttons must display loading spinners, followed by toast alerts upon completion. Without semantic controls from official design systems, clickable div elements break accessibility audits.

What it helps with

  • map admin paths between navigation.json, routes.json, and React views
  • swap generic UI libraries for vtex.styleguide or Shoreline
  • implement loading spinners, empty layouts, and error alerts
  • apply pagination and server-side filtering on operational tables

Example prompts for the agent

  • Build an admin settings view using PageHeader and PageBlock from vtex.styleguide.
  • Add server-side pagination and alert banners to this operational table.
  • Refactor form buttons to show pending spinners and trigger toast feedback.

How to install vtex-io-admin-react

1Skills CLI (Vercel)

npx skills add vtex/skills --skill vtex-io-admin-react -a claude-code

2Manually: put the files in place

~/.claude/skills/vtex-io-admin-react/SKILL.md

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

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

Questions about vtex-io-admin-react

How to install vtex-io-admin-react in Claude Code?

Run npx skills add vtex/skills --skill vtex-io-admin-react -a claude-code. The rule file will be placed at ~/.claude/skills/vtex-io-admin-react/SKILL.md.

What does the vtex-io-admin-react skill do?

It guides coding models through developing administrative React views in VTEX IO. It enforces official design systems, clean route setups, and visible mutation states.

Which design systems are supported?

The default choice is vtex.styleguide, with @vtex/shoreline accepted for internal back-office tools. Generic options like Ant Design or Material UI are rejected.

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 set38

vtex-io-auth-tokens-and-context Decides which VTEX IO token should back a backend request: the app itself, a shopper, or an Admin user. CX Codex +1 1,100installs vtex-io-render-runtime-and-blocks Teaches the agent to expose React components as Store Framework blocks in VTEX IO: store/interfaces.json entries, composition and theme wiring. CX Codex +1 1,100installs vtex-io-client-integration Guides backend integrations in VTEX IO apps using @vtex/api and @vtex/clients. Helps select client classes, configure runtime options, and replace raw HTTP calls. CX Codex +1 1,100installs vtex-io-auth-and-policies This skill guides VTEX IO permission design for integrations, protected routes, and manifest policies. Use it when access boundaries need review or change. CX Codex +1 1,100installs vtex-io-http-routes Guides the design of HTTP endpoints in a VTEX IO backend service: route boundaries, middleware chains, request validation and response shape. CX Codex +1 1,100installs marketplace-fulfillment Helps an agent build the seller side of VTEX fulfillment: simulation, order reservations, dispatch, and invoice and tracking calls to OMS. CX Codex +1 1,000installs marketplace-order-hook Guides VTEX order integrations built with Feed v3 or Hook. Use it when a webhook must validate events, fetch order data, and avoid duplicate processing. CX Codex +1 1,000installs marketplace-catalog-sync Guides the agent while you build a seller connector that pushes SKUs into a VTEX marketplace and keeps price and stock in step. CX Codex +1 1,000installs

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