UI Skills
Скиллы для дизайн-инженеров: быстрая чистка интерфейса, доступность, метаданные и производительность анимаций
- 10 322 ★ репозитория
- Последний коммит
- MIT
Минимальный доступ
Почему такой уровень
- Скиллы состоят из правил и инструкций для агента
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/ui-skillsОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемМинимальный доступИнструмент ничего не запускает и не ходит в сеть.
- Скиллы состоят из правил и инструкций для агента
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Репозиторий содержит набор скиллов для работы над интерфейсом и реестр с сайтом ui-skills.com. baseline-ui задает жесткие правила по стеку, компонентам, взаимодействию, анимации и типографике и проверяет файл, указывая нарушение, причину и исправление. Отдельные скиллы чинят доступность, метаданные страниц и производительность анимаций, улучшают интерфейс и собирают DESIGN.md. Скиллы можно получать через CLI ui-skills или подключить реестр к агенту по MCP.
Для кого. Для фронтендеров и дизайн-инженеров, которые хотят убрать шаблонные огрехи из интерфейсов, собранных агентом.
Подходит, если
- Нужно быстро причесать отступы, иерархию и типографику после генерации
- Нужно проверить компонент на доступность и поведение фокуса
- Нужно убрать тормозящие анимации
Не подходит, если
- Проект не на Tailwind и React: правила baseline-ui заточены под этот стек
- Нужна разработка дизайна с нуля, а не правка
Пример запроса к агенту
/baseline-ui src/components/PricingCard.tsxОграничения
README очень короткий, подробности о скиллах только на сайте и в самих SKILL.md. Правила baseline-ui навязывают конкретные библиотеки: Tailwind, motion/react, Base UI. Для MCP нужен доступ к ui-skills.com.
Как отключить. Удалите папки скиллов из каталога скиллов агента или уберите MCP-сервер ui-skills из конфигурации.
Частые вопросы
Что умеет MCP-сервер?
У него два инструмента: list_skills для списка скиллов реестра и get_skill для получения конкретного.
Какие скиллы есть в репозитории?
baseline-ui, create-design-md, fixing-accessibility, fixing-metadata, fixing-motion-performance и improve-ui.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыДетали, от которых интерфейс приятнее
make-interfaces-feel-better
Скилл о мелких деталях интерфейса: анимации, типографика, иконки, тени, скругления, оптическое выравнивание и области нажатия
Скиллы против шаблонных интерфейсов: сетка, типографика, анимация и отступы, плюс генерация референсов для веба и мобильных
Скиллы для интерфейсов Якуба Крехела
Interfaces skills
Скиллы для полировки интерфейса: типографика, цвет, сетка, доступность, продуктовые тексты и ревью по всем разделам
Скилл с базой стилей, палитр, шрифтовых пар и UX-правил, который генерирует дизайн-систему под тип продукта
Скилл дизайна интерфейсов для агента: диагностика, четыре направления на выбор, реализация и приемка без вида шаблона от ИИ
Реестр устанавливаемых дизайн-скиллов: готовые файлы SKILL.md и DESIGN.md с токенами, правилами компонентов и доступностью под разные стили
Коротко о README
README коротко отсылает на сайт и показывает три способа работы: CLI для просмотра категорий и получения скиллов, удаленный MCP-сервер реестра и подборку уроков по интерфейсам на странице playbook. Лицензия MIT.
Бейдж для README
Исходный SKILL.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. --- # Baseline UI Enforces an opinionated UI baseline to prevent AI-generated interface slop. ## How to use - `/baseline-ui` Apply these constraints to any UI work in this conversation. - `/baseline-ui <file>` Review the file against all constraints below and output: - violations (quote the exact line/snippet) - why it matters (1 short sentence) - a concrete fix (code-level suggestion) ## Stack - MUST use Tailwind CSS defaults unless custom values already exist or are explicitly requested - MUST use `motion/react` (formerly `framer-motion`) when JavaScript animation is required - SHOULD use `tw-animate-css` for entrance and micro-animations in Tailwind CSS - MUST use `cn` utility (`clsx` + `tailwind-merge`) for class logic ## Components - MUST use accessible component primitives for anything with keyboard or focus behavior (`Base UI`, `React Aria`, `Radix`) - MUST use the project’s existing component primitives first - NEVER mix primitive systems within the same interaction surface - SHOULD prefer [`Base UI`](https://base-ui.com/react/components) for new primitives if compatible with the stack - MUST add an `aria-label` to icon-only buttons - NEVER rebuild keyboard or focus behavior by hand unless explicitly requested