AIKraft/AI/Войти
AIKraft/Skills/VTEX IO: админ-панель на React

VTEX IO: админ-панель на React

Apply when building VTEX IO admin-facing React interfaces under the admin builder. Covers VTEX Styleguide and Shoreline usage, admin page composition, data-heavy admin interactions, and keeping administrative interfaces consistent with the VTEX Admin environment. Use for settings pages, moderation tools, dashboards, or operational UIs inside VTEX Admin.

vtex official Данные

Что делает навык

Навык применяется при создании административных интерфейсов на React для VTEX IO в рамках Admin builder. Он обеспечивает использование официальных дизайн-систем VTEX Styleguide и Shoreline для компоновки страниц, управления данными и поддержания консистентности с VTEX Admin.

Когда применять

  • Создание страниц настроек (Settings pages)
  • Разработка инструментов модерации (Moderation tools)
  • Построение внутренних дашбордов (Internal dashboards)
  • Формирование операционных форм и таблиц (Operational forms and tables)

Как работает

  1. Использовать официальные дизайн-системы VTEX (vtex.styleguide или @vtex/shoreline) вместо сторонних библиотек.
  2. Применять паттерны компоновки Layout, PageHeader и PageBlock для структуры страниц.
  3. Явно отображать состояния загрузки (Spinner), пустые данные (EmptyState) и ошибки (Alert).
  4. Обеспечивать обратную связь для действий пользователя через состояния кнопок (isLoading) и уведомления (showToast).
  5. Использовать пагинацию и серверную фильтрацию для больших списков и таблиц.
  6. Использовать доступные семантические элементы управления вместо кастомных кликабельных div/span.

Примеры запросов агенту

Создай страницу настроек приложения на React для VTEX IO с использованием VTEX Styleguide.
Реализуй таблицу с пагинацией и явными состояниями загрузки и ошибок для админ-панели.
Настрой навигацию и маршруты в admin/navigation.json и admin/routes.json для новой страницы администрирования.

Описание составлено по SKILL.md навыка, сверено 06.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «vtex-io-admin-react» из репозитория: # https://github.com/vtex/skills
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r vtex-io-admin-react/ ~/.claude/skills/vtex-io-admin-react/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.