UI Skills

Установка

npx ui-skills get baseline-ui

Это чужой код. Посмотрите файлы в репозитории перед установкой.

Что делает

Репозиторий содержит набор скиллов для работы над интерфейсом и реестр с сайтом ui-skills.com. baseline-ui задает жесткие правила по стеку, компонентам, взаимодействию, анимации и типографике и проверяет файл, указывая нарушение, причину и исправление. Отдельные скиллы чинят доступность, метаданные страниц и производительность анимаций, улучшают интерфейс и собирают DESIGN.md. Скиллы можно получать через CLI ui-skills или подключить реестр к агенту по MCP.

Для кого. Для фронтендеров и дизайн-инженеров, которые хотят убрать шаблонные огрехи из интерфейсов, собранных агентом.

Пример запроса к агенту

/baseline-ui src/components/PricingCard.tsx

Ограничения

README очень короткий, подробности о скиллах только на сайте и в самих SKILL.md. Правила baseline-ui навязывают конкретные библиотеки: Tailwind, motion/react, Base UI. Для MCP нужен доступ к ui-skills.com.

Как отключить. Удалите папки скиллов из каталога скиллов агента или уберите MCP-сервер ui-skills из конфигурации.

Проверка безопасности

• Скиллы состоят из правил и инструкций для агента

Коротко о README

README коротко отсылает на сайт и показывает три способа работы: CLI для просмотра категорий и получения скиллов, удаленный MCP-сервер реестра и подборку уроков по интерфейсам на странице playbook. Лицензия MIT.

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

Похожие