User Interface Wiki — скилл
Скилл со 152 правилами по анимации, типографике, звуку и законам UX: ревью CSS и компонентов с находками в формате файл и строка
- 933 ★ репозитория
- Последний коммит
- MIT
Минимальный доступ
Почему такой уровень
- Скилл состоит из markdown-файлов с правилами и не содержит скриптов
- Установка добавляет файлы в каталог скиллов агента через npx skills
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/user-interface-wikiОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемМинимальный доступИнструмент ничего не запускает и не ходит в сеть.
- Скилл состоит из markdown-файлов с правилами и не содержит скриптов
- Установка добавляет файлы в каталог скиллов агента через npx skills
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
User Interface Wiki упаковывает материалы сайта userinterface.wiki в скилл со 152 правилами по 12 категориям. Среди них принципы анимации, пружины и кривые, выходные анимации и `AnimatePresence`, псевдоэлементы CSS и View Transitions, звуковая обратная связь и синтез звука, морфинг иконок, анимация контейнеров, законы UX (Фиттс, Хик, Миллер), предиктивная предзагрузка, типографика и визуальный дизайн. Категории отсортированы по влиянию. Агент подключает скилл при ревью анимаций, CSS, звука, типографики и иконок и выдает находки в формате файл:строка. Каждое правило в папке skills/rules разбирает пару «неверно и верно» с кодом.
Для кого. Для фронтенд-разработчиков и дизайн-инженеров, которые проверяют интерфейс на плавность, типографику и поведение анимаций.
Подходит, если
- Вы ревьюите анимации на `Motion` или `Framer` `Motion` и проверяете длительность (до 300 мс), задержки `stagger` (до 50 мс на элемент) и выбор между пружиной и кривой
- Контекстное меню или модальное окно анимируется неверно: по правилам у меню только выход без входа, а фон диалога затемняется
- Нужно проверить числа в таблицах и OpenType-настройки текста по правилам категории типографики
- Вы строите предзагрузку по движению курсора и хотите опереться на шесть правил категории `prefetch`
- Вы добавляете звук к событиям интерфейса и хотите проверить настройку отключения, регулятор громкости и уважение к `reduced` `motion`
Не подходит, если
- Нужен аудит доступности по WCAG целиком: правила a11y в скилле относятся к звуковому отклику
- Нужен проект на стеке без CSS и `Motion`: примеры написаны под веб, а часть правил говорит об `AnimatePresence`
- Нужно читать статьи с демо: они остались на сайте userinterface.wiki, а скилл хранит сжатые правила
Пример запроса к агенту
Проверь компоненты в src/components по userinterface-wiki: длительности анимаций, пружины и выходные анимации. Выдай находки с файлом и строкойОграничения
Правила отражают позицию автора, и часть из них жесткая: анимации до 300 мс, `stagger` до 50 мс, линейная кривая только для индикаторов прогресса. Применяйте их с учетом продукта. Метаданные скилла датированы мартом 2026 года. Интерактивные демо и озвучка статей остаются на сайте. Описание скилла в заголовке называет 11 категорий, а в тексте перечислены 12, поэтому ориентируйтесь на список префиксов в SKILL.md.
Как отключить. Удалите папку userinterface-wiki из каталога скиллов агента. Сам репозиторий и сайт на вашу систему не влияют.
Частые вопросы
Как поставить User Interface Wiki в Claude Code?
Выполните npx skills add raphaelsalaja/userinterface-wiki. Команду из документации сайта автор называет подходящей для Claude Code, Codex, Cursor и других кодовых агентов.
Сколько в скилле правил и как они устроены?
152 правила в 12 категориях. У каждой категории свой префикс имени: `timing-`, `spring-`, `exit-`, `pseudo-`, `a11y-`, `morphing-`, `container-`, `ux-`, `prefetch-`, `type-`, `visual-`. Категории разложены по приоритету от критичных к низким.
Что скилл говорит о длительности анимаций?
Правило timing-under-300ms требует укладывать пользовательские анимации в 300 мс. Для `stagger` действует лимит 50 мс на элемент, а похожие элементы должны использовать одинаковые значения.
Подходит ли скилл для звука в интерфейсе?
Да, в нем есть категории про звуковую обратную связь и синтез звука. Правила a11y требуют настройку отключения звука, регулятор громкости, визуальный аналог и проверку `reduced` `motion`.
Что скилл проверяет в типографике?
В категории `type-` 16 правил про настройку шрифтов, OpenType-возможности и числовое форматирование. Агент применяет их при ревью CSS и компонентов с текстом.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкиллы для дизайн-инженеров: быстрая чистка интерфейса, доступность, метаданные и производительность анимаций
Детали, от которых интерфейс приятнее
make-interfaces-feel-better
Скилл о мелких деталях интерфейса: анимации, типографика, иконки, тени, скругления, оптическое выравнивание и области нажатия
Скилл для дизайна интерфейсов: три разных направления рядом, выбор одного и доводка по настоящим скриншотам в Claude Code, Codex и других агентах
Скилл с базой стилей, палитр, шрифтовых пар и UX-правил, который генерирует дизайн-систему под тип продукта
Скиллы с правилами Apple HIG, Material Design 3 и WCAG 2.2 для проверки интерфейсов на iOS, macOS, Android, вебе и других платформах
AI Design Skills
landing-page-design
Скилл сборки лендинга с нуля: вопросы на входе, структура страницы, конверсионные тексты и строгая визуальная система
Сравнение с похожими
Записи с тем же главным запросом: чем они отличаются.
| Запись | Официальный | Звезды репозитория | Главное отличие |
|---|---|---|---|
| User Interface Wiki (эта запись) | нет | 933 | |
| Детали, от которых интерфейс приятнее | нет | 3 867 | скилл о мелких деталях интерфейса: тени, скругления, оптическое выравнивание, области нажатия |
| Design Motion Principles | нет | 1 449 | сфокусирован на движении и собирает анимированные компоненты, без звука, UX-законов и типографики |
Коротко о README
README репозитория описывает сайт userinterface.wiki: коллекцию статей и паттернов по проектированию интерфейсов, собранную на Fumadocs и Base UI, с озвучкой статей через Eleven Labs. Статьи лежат в content/ как MDX, читатели могут предлагать правки через pull request. Сам скилл описан в SKILL.md внутри папки skills и на странице skill сайта: правила, префиксы категорий и команда установки.
Бейдж для README
Исходный SKILL.md
--- name: userinterface-wiki description: UI/UX best practices for web interfaces. Use when reviewing animations, CSS, audio, typography, UX patterns, prefetching, or icon implementations. Covers 11 categories from animation principles to typography. Outputs file:line findings. license: MIT metadata: author: raphael-salaja version: "3.0.0" --- # User Interface Wiki Comprehensive UI/UX best practices guide for web interfaces. Contains 152 rules across 12 categories, prioritized by impact to guide automated code review and generation. ## When to Apply Reference these guidelines when: - Implementing or reviewing animations (CSS transitions, Motion/Framer Motion) - Choosing between sprin