vtex-io-admin-react

Design and implement VTEX IO admin React interfaces with VTEX design systems.

39|9|Updated Mar 16, 2026
One-click install
npx skills add https://github.com/vtex/ai-skills --skill vtex-io-admin-react
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: vtex-io-admin-react
Source: https://github.com/vtex/ai-skills/tree/main/tracks/vtex-io/skills/vtex-io-admin-react
Command: npx skills add https://github.com/vtex/ai-skills --skill vtex-io-admin-react

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provide a structured approach to design and implement VTEX IO admin-facing React interfaces, ensuring consistency with VTEX design systems and alignment with admin conventions across settings pages, moderation tools, dashboards, and operational UIs.

Core Features & Use Cases

  • Establishes UI patterns and governance for admin pages using VTEX design systems (Styleguide and Shoreline).
  • Guides the composition of data-heavy admin screens with consistent layouts, components, and interactions.
  • Enables teams to align on design and implementation decisions to reduce drift between admin tools and VTEX Admin expectations.

Quick Start

Scaffold an admin React page using VTEX Styleguide components to implement a VTEX Admin feature.

Frequently Asked Questions about vtex-io-admin-react

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a VTEX IO admin page with React?

To build a VTEX IO admin page with React, scaffold the interface using VTEX Styleguide components to ensure alignment with VTEX Admin conventions. This provides a structured approach for composing consistent layouts, data-heavy screens, and operational UIs.

What's the best way to design VTEX Admin dashboards?

Designing VTEX Admin dashboards requires applying VTEX design systems like Styleguide and Shoreline. This approach establishes consistent UI patterns, governs component composition, and ensures explicit data-loading and mutation feedback for admin experiences.

Does VTEX IO support Styleguide and Shoreline for admin UIs?

Yes, VTEX IO supports both Styleguide and Shoreline design systems for building admin UIs. Adherence to these systems is required to maintain consistent layout patterns and visual governance across settings pages, moderation tools, and dashboards.

Why does my VTEX Admin React interface look inconsistent?

VTEX Admin React interfaces look inconsistent when they drift from established design systems. Applying VTEX Styleguide and Shoreline components enforces admin conventions, aligns layout patterns, and ensures proper data-loading and mutation feedback across operational tools.

Can I use React to create VTEX IO moderation tools?

Yes, you can use React to create VTEX IO moderation tools. The process involves composing data-heavy admin screens with consistent layouts and explicit mutation feedback, strictly adhering to VTEX design systems like Styleguide and Shoreline.

When do I need Shoreline instead of Styleguide for VTEX admin UIs?

You need Shoreline and Styleguide for VTEX admin UIs when building operational interfaces within VTEX Admin. Both design systems are required to establish UI patterns, govern component composition, and ensure consistent interactions across settings pages and dashboards.