UI Skills

Набор правил и ограничений для создания более качественных интерфейсов с использованием агентных систем.

Стек (Stack)

• ОБЯЗАТЕЛЬНО использовать стандартные значения Tailwind CSS (отступы, радиусы, тени) до введения кастомных значений
• ОБЯЗАТЕЛЬНО использовать motion/react (бывший framer-motion) для JavaScript-анимаций
• РЕКОМЕНДУЕТСЯ использовать tw-animate-css для входных и микро-анимаций в Tailwind CSS
• ОБЯЗАТЕЛЬНО применять утилиту cn (clsx + tailwind-merge) для управления классами

Компоненты (Components)

• ОБЯЗАТЕЛЬНО использовать доступные (accessible) примитивы компонентов для всего, что связано с клавиатурой или фокусом (Base UI, React Aria, Radix)
• ОБЯЗАТЕЛЬНО сначала использовать уже существующие примитивы проекта
• НИКОГДА не смешивать разные системы примитивов в рамках одного интерфейса
• РЕКОМЕНДУЕТСЯ отдавать предпочтение Base UI для новых примитивов, если это совместимо со стеком
• ОБЯЗАТЕЛЬНО добавлять aria-label для кнопок, состоящих только из иконок
• НИКОГДА не реализовывать вручную поведение клавиатуры или фокуса без явного запроса

Взаимодействие (Interaction)

• ОБЯЗАТЕЛЬНО использовать AlertDialog для разрушительных или необратимых действий
• РЕКОМЕНДУЕТСЯ использовать скелетоны (skeleton screens) для состояний загрузки
• НИКОГДА не использовать h-screen, вместо этого применять h-dvh
• ОБЯЗАТЕЛЬНО учитывать safe-area-inset для фиксированных элементов
• ОБЯЗАТЕЛЬНО отображать ошибки рядом с местом выполнения действия
• НИКОГДА не блокировать вставку текста в input или textarea

Анимация (Animation)

• НИКОГДА не добавлять анимацию без явного запроса
• ОБЯЗАТЕЛЬНО анимировать только свойства компоновщика (transform, opacity)
• НИКОГДА не анимировать свойства layout (width, height, top, left, margin, padding)
• РЕКОМЕНДУЕТСЯ избегать анимации свойств отрисовки (background, color), кроме мелких UI-элементов
• РЕКОМЕНДУЕТСЯ использовать ease-out для входных анимаций
• НИКОГДА не превышать 200ms для отклика интерфейса
• ОБЯЗАТЕЛЬНО приостанавливать зацикленные анимации вне экрана
• ОБЯЗАТЕЛЬНО учитывать prefers-reduced-motion

Типографика (Typography)

• ОБЯЗАТЕЛЬНО использовать text-balance для заголовков и text-pretty для основного текста
• ОБЯЗАТЕЛЬНО применять tabular-nums для числовых данных
• РЕКОМЕНДУЕТСЯ использовать truncate или line-clamp для плотных интерфейсов
• НИКОГДА не изменять межбуквенное расстояние (tracking) без явного запроса

Макет (Layout)

• ОБЯЗАТЕЛЬНО использовать фиксированную шкалу z-index (без произвольных значений)
• РЕКОМЕНДУЕТСЯ применять size-* для квадратных элементов вместо комбинации w-* + h-*

Производительность (Performance)

• НИКОГДА не анимировать большие поверхности с blur() или backdrop-filter
• НИКОГДА не использовать will-change вне активной анимации
• НИКОГДА не применять useEffect там, где можно обойтись рендер-логикой

Дизайн (Design)

• НИКОГДА не использовать градиенты без явного запроса
• НИКОГДА не использовать фиолетовые или многоцветные градиенты
• НИКОГДА не применять glow-эффекты как основной способ привлечения внимания
• РЕКОМЕНДУЕТСЯ использовать стандартную шкалу теней Tailwind CSS
• ОБЯЗАТЕЛЬНО давать пустым состояниям одно чёткое действие
• ОБЯЗАТЕЛЬНО ограничивать использование акцентного цвета одним на экран
• РЕКОМЕНДУЕТСЯ использовать существующую тему или токены цветов Tailwind перед созданием новых