Реестр правил

Перед тем как написать разметку с компонентом, возьми его реальный API: через get_component_api, если подключён MCP-сервер, иначе из документации llms.txt. Пропсы, которых там нет, в библиотеке не существуют; не выдумывай их и не подбирай по памяти о других библиотеках.

Цвета, радиусы, тени и шрифты задавай только через CSS-токены var(--jx-*). Значения #hex, rgb(), hsl() и inline-стили с цветами запрещены: темы и режимы оформления переключаются токенами.

Обычный текст и плейсхолдеры держат контраст не ниже 4.5:1 к своему фону, крупный и жирный — 3:1. Приглушённый серый на светлом фоне — самая частая причина нечитаемого интерфейса: если сомневаешься, двигай цвет в сторону основного текста. Статусные цвета проверяй в обеих темах: палитра, подобранная на тёмном фоне, на светлом обычно проваливается.

Всё, что делается мышью, делается с клавиатуры: Tab проходит по порядку чтения, Escape закрывает слой, после закрытия фокус возвращается на триггер. Кольцо фокуса видно и не убирается через outline: none. Действие, доступное только по наведению, считается недоступным.

У интерактивного элемента есть hover, focus-visible, active, disabled; у экрана с данными — загрузка, пустота и ошибка. Пустое состояние объясняет, что делать дальше, а не пишет «ничего нет». Проверяй вёрстку на длинном и коротком тексте: перенос и обрезка входят в дизайн.

Все классы Jinx UI начинаются с jx-. Не добавляй компонентам собственные CSS-классы и утилиты других фреймворков. Раскладку между компонентами задавай обёрткой с flex или grid без цветов.

Анимируй только переход состояния: появление, уход, отклик на нажатие. Вход и выход идут на ease-out за 150–250 мс, ease-in не используй — он делает интерфейс вязким. Анимируй transform и opacity, а не width, height и отступы. Действие, которое пользователь повторяет десятки раз за день, не анимируй вовсе.

Состояние компонентов держи снаружи через пары value/onValueChange и open/onOpenChange. Неуправляемый режим включай только через defaultValue и defaultOpen; внутри библиотеки оба режима реализует хук useControllableState.

Каждый блок с анимацией сопровождай @media (prefers-reduced-motion: reduce): переход схлопывается в мгновенный или в смену прозрачности. Движение — это украшение поверх работающего интерфейса, а не условие, без которого он не показывается.

Не используй innerHTML и dangerouslySetInnerHTML. Текст и разметку передавай через children и пропсы типа ReactNode; пользовательский ввод считай недоверенным.

Не делай push, публикацию пакетов, деплой, отправку сообщений и любые другие внешние действия без явной просьбы пользователя. Коммиты и переключение веток — тоже только по просьбе: локальный коммит допустим, когда пользователь попросил сохранить работу.

Компоненты и пропсы с пометкой DEPRECATED в новом коде не используй. Бери замену, которая указана в пометке, а если замены нет, скажи об этом вместо обхода.

Если пользователь ссылается на прошлую работу, решение или «что мы делали раньше», сначала найди это в хранилище Obsidian через MCP: фильтруй по проекту и дате во frontmatter и читай только нужные заметки. Заметки о сессиях не пиши сам: их экспортирует планировщик.