| name | monitoring-design |
| description | Use this skill to generate well-branded interfaces and assets for NPS Monitoring (Личный кабинет мониторинга строительного транспорта — самосвалы, тягачи, КИП-техника, аналитика смен, карты с зонами объектов), either for production or throwaway prototypes/mocks. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping. |
| user-invocable | true |
Monitoring Design Skill
Read README.md within this skill first — it covers product context, content fundamentals, visual foundations and iconography. Then explore the other files:
colors_and_type.css — все CSS-переменные (brand, КИП-светофор, радиусы, тени, темы), семантические классы (.t-h1, .t-eyebrow, .t-metric-xl, …). Импортируйте в HTML-артефакт первым.assets/icons/ — кастомные иконки ТС (dump-truck, excavator, heavy-machinery, semi-truck). Используйте их или скопируйте из ui_kits/monitoring/components.jsx (там же есть встроенные SVG-пиктограммы).preview/ — превью-карточки токенов и атомов. Хороший справочник «как должен выглядеть N».ui_kits/monitoring/ — полная рекреация интерфейса:
index.html — кликабельный прототип (Таблица / Карточки / Карта).app.jsx, views.jsx, components.jsx — реакт-компоненты.data.js — мок объектов и ТС.styles.css — все стили продукта.
Если вы создаёте визуальный артефакт (mock, prototype, slide):
- Скопируйте
colors_and_type.css в новый файл и подключите <link rel="stylesheet">.
- Поставьте
data-theme="dark" на <html> или <body> (dark — основная тема).
- Для верстки экранов мониторинга начните с компонентов из
ui_kits/monitoring/components.jsx и views.jsx (TopNav, FiltersBar, KpiStrip, ShiftChip, KipBar, VehicleCard, TableView, CardsView, MapView).
- Применяйте КИП-светофор:
≥75% → #22C55E, 50–74% → #60A5FA, <50% → #EF4444.
- Никаких эмодзи. Заголовки рубрик UPPERCASE + tracking 0.4–0.6em. Все числовые поля
font-variant-numeric: tabular-nums.
- Карточки — glass-style:
background: var(--card) + backdrop-filter: blur(16px) + border: 1px solid var(--card-border).
- Анимации короткие (.15–.35s ease), без bounce/spring/parallax.
Если вы работаете над production-кодом:
- Источник правды —
src/features/samosvaly/samosvaly.css (переменные --sv-*); в нашем CSS они переименованы в семантические (--fg-1, --brand-primary, --kip-good и т.д.), но соответствуют 1:1.
- Используйте Tailwind v4 классы + shadcn/ui. Lucide React для иконок (Home, Settings, Map, Wrench, Terminal, Sparkles, FileSpreadsheet, BarChart3, Sun, Moon, ChevronRight/Down).
- Кастомные пиктограммы ТС (
DumpTruckIcon, SemiTruckIcon) — в src/components/dashboard/VehicleIcons.tsx.
- Группировка таблиц: объект → тип ТС → ТС → смены. Сохраняйте полный visual vocabulary: чипы смен, мини-бары КИП, иерархические заголовки.
Если вас вызвали без других указаний
Спросите пользователя:
- Что нужно собрать — слайд, мок, прототип, экран в продукте?
- Какой раздел — Аналитика, Самосвалы, КИП техники, Карта?
- Целевая ширина/устройство?
- Нужны ли вариации (карта vs таблица, dark vs light)?
Затем работайте как эксперт-дизайнер. Все HTML-артефакты — кликабельные, с реальной типографикой и КИП-светофором. Никакого generic-AI-вида.
