# Pick UI Library

> Выбрать подходящую библиотеку для конкретной frontend-задачи из проверенного списка: UI-примитивы, OTP, графики, командные меню, виртуализация, drag-and-drop, уведомления, состояние и стили. Использовать, когда пользователь явно просит подобрать библиотеку или решить задачу готовым поддерживаемым инструментом.

- Skill: `aleksandr-litvinenko/pick-ui-library` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add aleksandr-litvinenko/pick-ui-library`
- Raw SKILL.md: https://api.skillmd.com/api/skills/aleksandr-litvinenko/pick-ui-library/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: Aleksandr-Litvinenko (https://skillmd.com/u/aleksandr-litvinenko)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/aleksandr-litvinenko/pick-ui-library

---


# Выбор UI-библиотеки

Подбирать одну библиотеку под задачу, а не перечислять десяток похожих вариантов. Сначала проверить текущий стек и ограничения проекта, затем предложить минимальное совместимое решение. Не добавлять зависимость, если задача надёжно решается несколькими строками нативного HTML/CSS/JavaScript.

## Порядок работы

1. **Определить реальную задачу.** Запрос «нужен выпадающий список» относится к доступным UI-примитивам, даже если пользователь назвал случайный пакет.
2. **Проверить проект.** Прочитать `package.json`, lock-файл и соседний код. Если подходящая библиотека уже установлена, использовать её.
3. **Оценить совместимость.** Проверить framework, SSR, размер клиентского бандла, доступность, лицензию, активность релизов и поддержку нужной версии React/Vue/Svelte.
4. **Рекомендовать один вариант.** Одним предложением объяснить, для чего он подходит. Установить и подключить его только если это входит в запрос.
5. **Не создавать миграцию без запроса.** Если проект уже использует конкурирующий пакет, отметить рекомендацию, но не заменять зависимость самовольно.
6. Если задача не покрыта списком, сказать об этом прямо и выбрать инструмент по актуальной официальной документации.

## Проверенный список

### Компоненты и примитивы

| Задача | Библиотека |
| --- | --- |
| Нестилизованные доступные диалоги, popover, меню и select | [Base UI](https://base-ui.com) |
| Командная палитра (`⌘K` / `Ctrl+K`) | [cmdk](https://cmdk.paco.me) |
| Toast-уведомления | [Sonner](https://sonner.emilkowal.ski) |
| Ввод одноразового кода | [input-otp](https://input-otp.rodz.dev) |
| Панель управления параметрами прототипа | [Leva](https://github.com/pmndrs/leva); для специализированной настройки — [DialKit](https://joshpuckett.me/dialkit) |

Предпочитать Base UI самодельному `div`-диалогу: библиотека берёт на себя фокус, клавиатуру и закрытие. Но сначала проверить, нет ли в проекте уже принятой системы примитивов.

### Движение и визуализация

| Задача | Библиотека |
| --- | --- |
| Пружины, layout-анимации, enter/exit и жесты | [Motion](https://motion.dev) |
| Плавное изменение чисел, цен и метрик | [NumberFlow](https://number-flow.barvian.me) |
| Анимированный текст | [Torph](https://torph.lochie.me/) |
| Интерактивный 3D-глобус | [Cobe](https://cobe.vercel.app) |
| Динамические OG-изображения из HTML/CSS | [Satori](https://github.com/vercel/satori) |
| Подсветка синтаксиса | [Shiki](https://shiki.style) |

Motion нужен для пружин, жестов и layout-переходов. Для простого hover или короткого fade достаточно CSS transition — не увеличивать бандл без пользы.

### Графики

| Задача | Библиотека |
| --- | --- |
| Потоковые графики в реальном времени | [Liveline](https://github.com/benjitaylor/liveline) |
| Обычные графики и дашборды | [Recharts](https://recharts.org) |

Если новые точки приходят постоянно, а временная шкала движется, использовать Liveline. Для статических и обычных интерактивных отчётов — Recharts. Для тяжёлых 1С-отчётов сначала агрегировать данные на сервере, а не перекладывать всю работу на браузер.

### Взаимодействие и производительность

| Задача | Библиотека |
| --- | --- |
| Drag-and-drop | [dnd kit](https://dndkit.com) |
| Виртуализация длинных списков и таблиц | [Virtuoso](https://virtuoso.dev) |

При drag-and-drop всегда сохранять клавиатурный путь. Для больших таблиц из 1С проверить, нужна ли виртуализация обеих осей и не нарушит ли она работу экранного диктора.

### Состояние и стили

| Задача | Библиотека |
| --- | --- |
| Клиентское состояние | [Zustand](https://zustand.docs.pmnd.rs) |
| Условная сборка строки `className` | [clsx](https://github.com/lukeed/clsx) |
| Типобезопасные варианты компонентов в Tailwind | [CVA](https://cva.style) |
| Светлая/тёмная тема без вспышки при загрузке | [next-themes](https://github.com/pacocoursey/next-themes) |

Использовать `clsx` для локальных условий. Выбирать CVA, когда у компонента есть оформленный набор вариантов (`size`, `intent`, `state`) и нужен типизированный API. Они могут работать вместе.

## Типичные несоответствия

- Toast-уведомления, сделанные вручную или через библиотеку модальных окон → рассмотреть Sonner.
- Dropdown или диалог на `div` с ручным управлением фокусом → использовать существующие примитивы проекта или Base UI.
- Число анимируется заменой текстовых узлов → NumberFlow корректнее обрабатывает разряды.
- Более тысячи строк рендерятся одновременно → проверить Virtuoso до добавления сложной пагинации.
- Общее состояние передаётся через длинную цепочку props → проверить, оправдан ли Zustand.
- В `className` вложены многоуровневые тернарные выражения → `clsx`, а для системных вариантов — CVA.

## Проверка перед ответом

- Открыть официальную документацию и подтвердить, что пакет поддерживается на момент рекомендации.
- Проверить лицензию и ограничения коммерческого использования.
- Не утверждать, что библиотека доступна для 1С-клиента: эти рекомендации относятся к веб-интерфейсам и внешним приложениям вокруг 1С.
- Назвать компромисс: размер, SSR, доступность или цена миграции — тот, который действительно важен для задачи.