For AI agents: fetch the complete documentation index at /llms.txt, the full documentation corpus at /llms-full.txt, the agent skill at /skill.md, or this page as Markdown at /ru/docs/web/ui-kit.md (or send Accept: text/markdown).
UI-кит и блоки
Общие компоненты, дизайн-токены и каталог блоков.
Прежде чем начать
Откройте загруженный проект supastack в Visual Studio Code, используя «Файл» → «Открыть папку», затем выберите «Терминал» → «Новый терминал». Корень репозитория — это папка, содержащая package.json, приложения и пакеты. Запустите команду ниже и оставьте терминал открытым. Если команда не распознается, завершите руководство по установке инструмента, прежде чем продолжить.
Сначала прочтите руководство по платформе. Сервер — это процесс приложения, который отвечает на запросы браузера или телефона. Веб читает apps/web/.env.local, Expo читает apps/mobile/.env.local, а команды миграции базы данных читают корневой .env. Демонстрация без базы данных / панели мониторинга отделена от реальных учетных записей / аутентификации, для которых необходимо перенести Postgres. Для оформления заказа только на телефоне или компьютере требуется отдельно работающий веб-сервер.
- Установите инструменты и получите код
- Изучение команд, файлов и конфигурации
- Пройдите руководство по первому запуску в Интернете
corepack pnpm --filter @supastack/web devНастройка и конфигурация
packages/ui-web содержит общие продуктовые компоненты (кнопки, поля ввода, карточки, бейджи, диалоги, части оболочки), а packages/design-tokens — источник токенов, который app-theme.css отображает в CSS-переменные. Маршрут /kit-blocks монтирует каталог блоков — составные секции, которые можно перенести в свой продукт.
apps/mobile потребляет packages/ui-native для эквивалентных нативных примитивов, так что стилизация поверхностей остаётся платформенной, а контракты — общими.
# Preview shared blocks and gallery
corepack pnpm --filter @supastack/web dev
# Then open http://localhost:3000/kit-blocks in your browser
# Theme tokens used by components
var(--page) var(--section) var(--raised)
var(--text) var(--muted) var(--border)
var(--accent) var(--accent-ink) var(--radius-*)Рабочий процесс внедрения
Собирайте экраны сначала из общих компонентов; прибегайте к кастомному элементу только когда кит не может выразить паттерн. Новые общие части принадлежат ui-web со стилизацией на токенах, чтобы каждый пакет темы применялся автоматически.
Держите маркетинговые компоненты (src/marketing) вне продуктовых поверхностей и наоборот — две системы каркаса намеренно разделены.
Проверка и устранение неполадок
Проверяйте новый компонент на каждом пресете density/radius/font и как минимум на одном светлом и одном тёмном пакете. Проверьте фокус с клавиатуры, разметку на 320px и reduced motion; галерея кита на /settings/appearance — самый быстрый обход.