react-vite-dashboardавтор Google Labs

React Vite Dashboard Skill.

Навык для Claude Code и Codex в области UI-дизайна: преобразует проекты Stitch в дашборды на React + Vite с TanStack Query.

Web и UI
UI-код

Скачать OpenDesign Инструкция по использованию

google-labs-code/stitch-skills · plugins/stitch-build/skills/react-vite-dashboard/SKILL.mdSKILL.md

--- name: react-vite-dashboard description: Convert Stitch designs into production React + Vite dashboards with TanStack Query, accessible tokens from DESIGN.md, and Web3-ready patterns (ethers/viem). --- ## Prerequisites ## Workflow ## HTML → React mapping ## DESIGN.md integration ## Web3 dashboard conventions ## File structure

Метаданные и заголовки разделов прочитаны из исходного файла 14 сентября 2026 г. · 3 656 символов полностью

01 Что делает

Что делает skill react-vite-dashboard в Claude Code и Codex

Сводка, рабочий процесс и результаты — всё прочитано из SKILL.md этого skill.

Из SKILL.mdПрочитано 14.09.2026 · не запись выполнения

Словами самого skill

Build-skill для фронтенд-инженеров, преобразующий экраны Stitch в насыщенные данными дашборды на React 18, Vite, TypeScript, TanStack Query и React Router, с опциональной поддержкой ethers v6 или viem для чтения ончейн-данных.

Его workflow состоит из шести шагов: определить префикс Stitch MCP, получить экран, сохранить HTML и скриншот в .stitch/designs/, прочитать DESIGN.md и сопоставить цвета, типографику и отступы с CSS-переменными в src/index.css, сгенерировать компоненты и страницы, затем подключить данные через TanStack Query, сохраняя презентационные компоненты чистыми. Таблица соответствий задаёт поведение для таблиц, кнопок, форм, загрузки и подключения кошелька, а файл завершается чек-листом качества WCAG 2.2 AA.

Что он выдаёт

Продакшн-дашборд на React + Vite, собранный из экрана Stitch, с использованием TanStack Query в качестве слоя данных.
Локальные копии исходного дизайна, хранящиеся в репозитории как .stitch/designs/{screen}.html и соответствующий скриншот .png.
Дерево исходников, разделённое по зонам ответственности, где hooks содержит обёртки useQuery и хуки для кошелька, а lib — помощники для ABI и форматтеры.

Смотрите пример запроса ↗

Как это работает

01
Определение префикса MCP
Сначала запустите list_tools и зафиксируйте префикс Stitch, под которым представлены инструменты, поскольку каждый последующий вызов строится на его основе.
02
Получение экрана
Вызовите инструмент get_screen с обнаруженным префиксом, передав как ID проекта Stitch, так и ID экрана.
03
Связывание токенов DESIGN.md
Прочитайте DESIGN.md проекта и переведите его записи о цвете, типографике и отступах в CSS-переменные внутри src/index.css.
04
Разделение сгенерированного UI по ролям
Сгенерированный код попадает в src/components, src/pages и src/hooks, а не в один плоский файл.
05
Прокладывайте данные через TanStack Query
Асинхронные запросы идут через TanStack Query, чтобы презентационные компоненты, построенные из экрана Stitch, оставались чистыми.

02 Определите своё применение

Когда использовать react-vite-dashboard

Используйте скилл react-vite-dashboard в Claude Code или Codex, когда задача — UI-дизайн такого типа. Возможности и ограничения ниже взяты из собственного файла скилла.

Хорошо подходит

Превращение экранов Stitch в насыщенные данными дашборд-интерфейсы, а не маркетинговые страницы, с множеством компонентов на экран.
Web3-фронтенды, которым нужны on-chain-запросы на чтение через ethers v6 или viem наряду с остальным слоем данных дашборда.
Команды, у которых дизайн-система уже описана в DESIGN.md и которым нужно, чтобы сгенерированный UI оставался верным этим токенам.

Знайте границы

Предполагается, что Stitch MCP уже настроен; файл указывает на внешнее руководство по настройке только если это не так.
Работа с блокчейном ограничена вызовами контрактов только для чтения, поэтому подпись или write-потоки не описаны в этом skill.

Что предоставить

ТребуетсяGoogle Stitch — указан в SKILL.md как обязательный.
ТребуетсяНастроенный Stitch MCP (руководство по настройке)
ТребуетсяФайл DESIGN.md проекта (см. skill design-md) для точности токенов
ТребуетсяScaffold Vite + React + TypeScript (npm create vite@latest)

03 Внутри скилла

Правила, которые skill react-vite-dashboard задаёт Claude Code и Codex

7 конкретных инструкций, значений по умолчанию и ограничений, которые SKILL.md задаёт агенту, — та часть файла, которая меняет результат.

Таблицы остаются семантическими
Табличные данные должны использовать настоящий элемент table или TanStack Table; сетки на одних div явно исключены для него.
Код кошелька изолирован и не содержит ключей
Подключение кошелька живёт внутри WalletProvider, и сгенерированный код никогда не должен содержать приватные ключи.
Подписывайте каждое поле и привязывайте к нему ошибки
В формах label привязан к input через htmlFor и id, а ошибки валидации связываются через aria-describedby, а не показываются отдельно.
Сохраняйте стандартное кольцо фокуса на кнопках
Кнопки имеют type="button" с видимым кольцом фокуса, и браузерное значение по умолчанию сохраняется, если DESIGN.md не определяет токены фокуса.
Сигнализируйте о состоянии загрузки программно
На экранах с загрузкой данных используются скелетон-компоненты, а на контейнерах устанавливается aria-busy, пока запрос выполняется.
Группируйте чтения в потоках, чувствительных к газу
Чтения должны быть сгруппированы, а избыточные запросы eth_call не должны отправляться из цикла рендера.
Никаких секретов в репозитории
URL-адреса RPC берутся из переменных окружения, а префикс VITE_ используется только для публичных эндпоинтов.

04 Применение

Установить react-vite-dashboard в Claude Code или Codex

Одна команда npx skills add, затем первая задача в вашем агенте и чек-лист для результата.

Добавьте react-vite-dashboard в Claude Code, Codex или ваш агент

Запустите в своём проекте; установщик спросит, какому агенту его добавить.

Terminal

npx skills add https://github.com/google-labs-code/stitch-skills --skill react-vite-dashboard

Обычная форма CLI skills для plugins/stitch-build/skills/react-vite-dashboard/SKILL.md; репозиторий может документировать собственный путь.

Дайте skill первую задачу по дизайну интерфейса

Написано в терминах самого skill; замените части в квадратных скобках своим материалом.

Starter prompt

Turn the Stitch screen [screen ID] in project [project ID] into a React + Vite dashboard page. Pull the numbers through the TanStack Query hooks in src/hooks instead of fetching in the component, and bridge the tokens from DESIGN.md into src/index.css so the colors and spacing match. Add a read-only balance card for [token contract] that shows the network name and chain ID in the settings footer.

Источник: составлено по SKILL.md в терминах самого skill.

Проверьте первый результат

Что сам SKILL.md считает правильным результатом:

Прогоняйте линтер design.md на DESIGN.md локально перед публикацией любого UI.
Контраст должен соответствовать WCAG 2.2 AA для пар компонентов, определённых в DESIGN.md, что проверяется прохождением линтера.
Навигация с клавиатуры должна работать, при этом порядок фокуса должен соответствовать визуальному порядку дашборда.
Проверьте макет при ширине 375px и 1280px.
TypeScript должен работать в строгом режиме, а ABI контрактов не должны иметь тип any.

В OpenDesign импортируйте react-vite-dashboard по ссылке из его SKILL.md: Plugins → Add → Skill → Import from link, затем выберите его на верхней панели.

Скачать OpenDesign Читать quickstart

05 Открытый исходный код, проверяемость

Источник, лицензия и проверка

Откуда взяты факты на этой странице и когда они были последний раз проверены.

Author: Google Labs
Repository: github.com/google-labs-code/stitch-skills Ветка main
Файл skill: plugins/stitch-build/skills/react-vite-dashboard/SKILL.md Контрольная сумма содержимого записана при верификации; коммит 0337446
License: Apache-2.0 Из LICENSE.
Звёзды репозитория: 8 304 Снимок GitHub сделан 2026-09-14 для всего репозитория google-labs-code/stitch-skills, который содержит 12 навыков в этом каталоге. Не является рейтингом или счётчиком использования для react-vite-dashboard.
Проверено OpenDesign: 2026-09-14 Исходный файл, путь, текст лицензии и количество звезд были проверены. Не входит в основной комплект OpenDesign (проверено 2026-08-28); живой запуск не был записан на этой странице.

Внутри SKILL.md

Предварительные требованияStitch MCP, файл DESIGN.md и заготовка Vite React TypeScript
Рабочий процессШесть шагов от определения MCP-префикса до генерации компонентов и подключения данных
Соответствие HTML → ReactТаблица преобразования макета, карточек, таблиц, кнопок, форм, индикаторов загрузки и подключения кошелька в разметку
Интеграция с DESIGN.mdМост CSS-переменных из токенов DESIGN.md и команда линтера design.md
Конвенции Web3-дашбордаВызовы контрактов только для чтения, суммы через formatUnits, ошибки транзакций на понятном языке, пакетные чтения
Структура файловПять исходных папок для компонентов, страниц, хуков, библиотек и стилей
Чек-лист качестваПять проверок: WCAG 2.2 AA, порядок фокуса при навигации с клавиатуры, брейкпоинты, секреты и строгая типизация
Примечание к документации StitchИспользуйте абсолютные URL stitch.withgoogle.com в случаях, когда относительные ссылки на документацию перенаправляют неправильно

Собственное описание skill

«Преобразует дизайны Stitch в продакшен-дашборды React + Vite с TanStack Query, доступными токенами из DESIGN.md и паттернами Web3 (ethers/viem).»

Описание из front-matter файла SKILL.md. Полный файл — около 3 656 символов. Читать полный файл на GitHub.

06 Перед установкой

Вопросы о skill react-vite-dashboard

Ответы взяты из SKILL.md в редакции от 2026-09-14, а не из записанного запуска.

Обязательно ли использовать Tailwind для макета?

Нет. Таблица соответствия допускает как утилиты Tailwind, так и CSS-модули, при условии что отступы соответствуют токенам из DESIGN.md.

Обрабатывает ли этот skill запись в контракт?

Изложенные в нём конвенции касаются чтения данных и представления результатов: ошибки транзакций должны объясняться понятным языком и содержать ссылку на блок-эксплорер, если существует txHash. Процесс подписи или записи не описан.

Есть ли что-то особенное в ссылках на документацию Stitch?

При переходе по ссылкам на stitch.withgoogle.com/docs используйте полный URL вида https://stitch.withgoogle.com/docs/..., так как относительная навигация может перенаправлять неправильно.

React Vite Dashboard

Запустите react-vite-dashboard на реальной задаче по UI-дизайну.

Скачайте OpenDesign, импортируйте react-vite-dashboard по ссылке на SKILL.md, вставьте промпт выше и прочитайте план перед результатом.

Загрузить OpenDesign Все навыки

Терминал

npx skills add https://github.com/google-labs-code/stitch-skills --skill react-vite-dashboard