baseline-uiавтор Julien Thibeaut

Baseline UI Skill.

Навык для Claude Code и Codex для ревью дизайна: быстро устраняет проблемы в коде UI, исправляя отступы, иерархию, типографику и мелкие ошибки вёрстки.

Дизайн-ревью и доступность
UI-код

Скачать OpenDesign Инструкция по использованию

ibelick/ui-skills · skills/baseline-ui/SKILL.mdSKILL.md

--- name: baseline-ui description: Quickly deslop UI code by fixing spacing, hierarchy, typography, and small layout issues. Use when the interface needs a fast cleanup or polish pass. --- ## How to use ## Stack ## Components ## Interaction ## Animation ## Typography

Метаданные и заголовки разделов прочитаны из исходного файла 2026-09-14 · 3 417 символов полностью

01 Что делает

Что делает skill baseline-ui в Claude Code и Codex

Сводка, рабочий процесс и результаты — всё прочитано из SKILL.md этого skill.

Из SKILL.mdПрочитано 14.09.2026 · не запись выполнения

Словами самого skill

Baseline UI — это skill для ревью, который навязывает продуманный базовый уровень UI, чтобы остановить сгенерированный AI интерфейсный «слоп» в кодовой базе. Он рассчитан на проекты Tailwind CSS с использованием примитивов React и устанавливается либо как постоянный набор ограничений для любой работы с UI в разговоре, либо как проход ревью на уровне файла.

Особенность в его словаре: он называет конкретные утилиты и props, которые следует использовать или избегать — от h-dvh вместо h-screen и text-balance для заголовков до анимации только на compositor с ограничением 200ms и запрета произвольных значений z-index. Используйте его, когда интерфейсу нужна быстрая чистка или проход полировки.

Что он выдаёт

Однострочное объяснение, почему важно каждое нарушение.
Конкретное исправление на уровне кода для каждого замечания.

Смотрите пример запроса ↗

Как это работает

01
Вызовите его как набор ограничений для всего диалога
Запуск команды без аргументов применяет все ограничения из этого файла к любой работе с UI в рамках диалога, а не только к одному файлу.
02
Или укажите один файл
Передача файла в качестве цели переключает skill в режим ревью, проверяя этот файл на соответствие всем ограничениям, перечисленным ниже.
03
Возвращает отчёт о нарушениях из трёх частей
Каждое замечание содержит цитату проблемного фрагмента, одно короткое предложение о том, почему это важно, и предлагает исправление на уровне кода.
04
Проходит группы ограничений по порядку
Файл организует правила по группам: Stack, Components, Interaction, Animation, Typography, Layout, Performance и Design, каждая содержит пункты MUST, SHOULD и NEVER.

02 Определите своё применение

Когда использовать skill baseline-ui

Используйте навык baseline-ui в Claude Code или Codex, когда задача — это проверка дизайна такого типа. Область применения и ограничения ниже взяты из собственного файла навыка.

Хорошо подходит

Быстрая уборка или доводка интерфейса, который отошёл от единого базового стиля.
Проверка одного конкретного файла на предмет отступов, иерархии, типографики и мелких проблем с макетом.

Знайте границы

Дизайн-работа, зависящая от градиентов, кастомных кривых плавности или кастомного межбуквенного интервала — всё это доступно только по явному запросу.
Ручная реализация поведения клавиатуры или фокуса, что не допускается без явного запроса.

Что предоставить

Файл для ревьюНеобязательно. Указание файла превращает skill в проверочный проход, который сообщает о нарушениях только для этого файла.

03 Внутри скилла

Правила, которые skill baseline-ui задаёт Claude Code и Codex

8 конкретных инструкций, значений по умолчанию и ограничений, которые SKILL.md задаёт для агента — та часть файла, которая влияет на результат.

Придерживайтесь дефолтных значений Tailwind CSS
Кастомные значения допустимы только тогда, когда они уже существуют в проекте или были явно запрошены; в остальных случаях агент должен использовать дефолтные значения Tailwind.
Анимация — только по запросу
Анимация по умолчанию отключена. Когда она явно запрошена, анимировать можно только композиторные свойства — никогда width, height, top, left, margin или padding.
Ограничивайте обратную связь при взаимодействии 200 мс
Появление элементов должно использовать ease-out, циклические анимации должны останавливаться за пределами экрана, а prefers-reduced-motion должен соблюдаться.
Никогда не смешивайте примитивные системы
Всё, что связано с поведением клавиатуры или фокуса, требует доступного примитива из Base UI, React Aria или Radix; существующие примитивы проекта имеют приоритет, а ручное воссоздание поведения клавиатуры или фокуса запрещено без явного запроса.
Используйте h-dvh, никогда h-screen
Раздел взаимодействия также требует, чтобы фиксированные элементы учитывали safe-area-inset, а ошибки отображались рядом с местом, где происходит действие.
Используйте фиксированную шкалу z-index
Произвольные значения z- не допускаются, а квадратные элементы должны использовать size- вместо парных утилит w- и h-.
Используйте утилиты типографики буквально
text-balance для заголовков, text-pretty для основного текста, tabular-nums для данных, а letter-spacing нельзя изменять без явного запроса.
Без градиентов и свечения по умолчанию
Градиенты требуют явного запроса, фиолетовые и многоцветные градиенты полностью исключены, а эффекты свечения не могут служить основными указателями действий.

04 Применение

Установите baseline-ui в Claude Code или Codex

Одна команда npx skills add, затем первая задача в вашем агенте и чек-лист для результата.

Добавьте baseline-ui в Claude Code, Codex или ваш агент

Запустите в своём проекте; установщик спросит, какому агенту его добавить.

Terminal

npx skills add https://github.com/ibelick/ui-skills --skill baseline-ui

Общая форма CLI skills для skills/baseline-ui/SKILL.md; репозиторий может документировать собственный путь.

Дайте скиллу первую задачу по проверке дизайна

Написано в терминах самого skill; замените части в квадратных скобках своим материалом.

Starter prompt

Review [src/components/SettingsDialog.tsx] against the baseline UI constraints. We generated this dialog quickly and the spacing, hierarchy and layout feel off, so report the violations with the exact lines, why they matter, and the code-level fix for each.

Источник: составлено по SKILL.md в терминах самого skill.

Проверьте первый результат

Что сам SKILL.md считает правильным результатом:

Убедитесь, что вне transform и opacity не анимируется никакое свойство.
Убедитесь, что кнопки только с иконкой имеют aria-label, а деструктивные действия скрыты за AlertDialog.

В OpenDesign импортируйте baseline-ui по ссылке на его SKILL.md: Plugins → Add → Skill → Import from link, затем выберите его в верхней панели.

Скачать OpenDesign Читать quickstart

05 Открытый исходный код, проверяемость

Источник, лицензия и проверка

Откуда взяты факты на этой странице и когда они были последний раз проверены.

Author: Julien Thibeaut
Repository: github.com/ibelick/ui-skills Ветка main
Файл skill: skills/baseline-ui/SKILL.md Контрольная сумма содержимого зафиксирована при проверке; коммит 79081ab
License: MIT Из LICENSE.
Звёзды репозитория: 8 402 Снимок GitHub сделан 14.09.2026 для всего репозитория ibelick/ui-skills, который содержит 5 навыков в этом каталоге. Не является рейтингом или счётчиком использования для baseline-ui.
Проверено OpenDesign: 2026-09-14 Исходный файл, путь, текст лицензии и количество звезд были проверены. Не входит в основной комплект OpenDesign (проверено 2026-08-28); живой запуск не был записан на этой странице.

Внутри SKILL.md

Как использоватьДва режима вызова: команда без аргументов применяет ограничения, аргумент с файлом запускает отчёт о нарушениях.
СтекСтандартные настройки Tailwind CSS, motion/react для JS-анимации, tw-animate-css и утилита cn.
КомпонентыТолько доступные примитивы, сначала существующие примитивы проекта, aria-label на кнопках только с иконкой.
ВзаимодействиеAlertDialog для деструктивных действий, скелетоны для загрузки, h-dvh, safe-area-inset, без блокировки вставки.
АнимацияБез анимации, если не запрошено; только свойства композитора, ease-out, ограничение 200мс, учёт reduced-motion.
Типографикаtext-balance для заголовков, text-pretty для основного текста, tabular-nums для данных, без изменений tracking.
МакетФиксированная шкала z-index вместо произвольных значений, size-* для квадратных элементов.
ПроизводительностьИзбегайте анимации крупного blur или backdrop-filter, ограничивайте область will-change, предпочитайте логику рендера вместо useEffect.
ДизайнБез градиентов и эффектов свечения, стандартная шкала теней, один акцентный цвет, повторное использование существующих токенов.

Собственное описание skill

«Быстро очистить код UI, исправив отступы, иерархию, типографику и мелкие проблемы с разметкой. Используйте, когда интерфейсу нужна быстрая чистка или полировка.»

Описание из метаданных SKILL.md. Полный файл содержит около 3 417 символов. Прочитайте полный файл на GitHub.

06 Перед установкой

Вопросы о skill baseline-ui

Ответы взяты из SKILL.md в редакции от 2026-09-14, а не из записанного запуска.

Какой стек он предполагает?

Стандартные настройки Tailwind CSS, motion/react (ранее framer-motion), когда требуется JavaScript-анимация, tw-animate-css для входных и микроанимаций, а также утилита cn, построенная на clsx и tailwind-merge.

Будет ли он добавлять анимации или градиенты, чтобы всё выглядело лучше?

Нет. Анимация никогда не добавляется без явного запроса, а градиенты не используются без явного запроса. Фиолетовые и многоцветные градиенты полностью исключены.

Какие библиотеки компонентов допускаются?

Base UI, React Aria или Radix для всего, что связано с поведением клавиатуры или фокуса, с предпочтением существующих примитивов проекта. Base UI — рекомендуемый выбор для новых примитивов, если он совместим со стеком, а смешивание систем примитивов на одной интерактивной поверхности не допускается.

Baseline UI

Запустите baseline-ui на реальной задаче по ревью дизайна.

Скачайте OpenDesign, импортируйте baseline-ui по ссылке на его SKILL.md, вставьте запрос выше и прочитайте план перед результатом.

Загрузить OpenDesign Все навыки

Терминал

npx skills add https://github.com/ibelick/ui-skills --skill baseline-ui

Что делает skill baseline-ui в Claude Code и Codex

Словами самого skill

Как это работает

Когда использовать skill baseline-ui

Хорошо подходит

Знайте границы

Что предоставить

Правила, которые skill baseline-ui задаёт Claude Code и Codex

Придерживайтесь дефолтных значений Tailwind CSS

Анимация — только по запросу

Ограничивайте обратную связь при взаимодействии 200 мс

Никогда не смешивайте примитивные системы

Используйте h-dvh, никогда h-screen

Используйте фиксированную шкалу z-index

Используйте утилиты типографики буквально

Без градиентов и свечения по умолчанию