make-interfaces-feel-betterавтор Jakub Krehel

Make Interfaces Feel Better Skill.

Навык для Claude Code и Codex в области UX-исследований: принципы дизайна и разработки для полировки эффектов наведения, теней, границ, иконок, типографики и микровзаимодействий.

UX и исследования

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

jakubkrehel/make-interfaces-feel-better · skills/make-interfaces-feel-better/SKILL.mdSKILL.md

--- name: make-interfaces-feel-better description: - Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, icons, micro-interactions, enter/exit animations, or any visual detail work. Supports quick and full review modes. Triggers on UI polish, design details, "make it feel better", "feels off", stagger animations, border … --- ## Core Principles ## Common Mistakes ## Review Output Format

Преамбула и заголовки разделов прочитаны из исходного файла 2026-09-14 · 11 798 символов полностью

01 Что делает

Что делает skill make-interfaces-feel-better в Claude Code и Codex

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

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

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

Принципы дизайн-инжиниринга для создания отполированных интерфейсов, написанные для всех, кто создаёт UI-компоненты или проверяет frontend-код: состояния hover, тени, границы, типографика, иконки, микровзаимодействия и анимации входа/выхода.

Содержит девятнадцать пронумерованных базовых принципов с жёсткими значениями по умолчанию — концентрический border radius, оптическое выравнивание, многослойные box-shadow вместо фальшивых границ-«возвышений», прерываемые CSS-переходы, разброс (stagger) около 100 мс, антиалиасинг текста, табличные цифры, чисто чёрные или белые контуры изображений, scale(0.96) при нажатии, зоны нажатия 44×44px и толщина штриха иконок, соответствующая тексту. Два режима проверки, быстрый и полный, формируют таблицу Severity/Location/Before/After/Why, сгруппированную по принципам, с ограничением в 5 или 15 находок, завершающуюся вердиктом Block, Needs changes или Approve.

Что он выдаёт

Отчёт о проверке, который заранее указывает, что было проверено, и никогда не подразумевает, что непроверенная область была охвачена.
Находки, сгруппированные по принципам внутри таблицы Severity, Location, Before, After, Why, которая перечисляет каждое сделанное или предложенное изменение, а не их подмножество.
Таблица Considered but Rejected с 1–3 реальными вариантами в быстром режиме и 2–5 в полном, каждый с указанием причины отказа.
Раздел проверки, перечисляющий точные команды или взаимодействия, которые были выполнены, и их наблюдаемые результаты, после чего следует вердикт.

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

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

01
Выражайте исправления в собственной стилистической системе проекта
Перед тем как предлагать или писать любое исправление, определите, как проект уже оформляет стили, и сформулируйте изменение в этой же системе — Tailwind в проекте на Tailwind, обычный CSS в проекте на CSS или принятый подход CSS-in-JS.
02
Замедлите интерфейс
При проверке воспроизводите анимацию на скорости 10% в панели Animations браузера, потому что то, что выглядит странно на 10% скорости, будет едва заметно неправильным на полной скорости.
03
По умолчанию — полный режим
Полный режим используется, если режим проверки не указан явно; быстрый режим нужно запрашивать отдельно.
04
Записывайте находки в фиксированном табличном формате
Группируйте находки по принципу в таблице markdown со столбцами Severity, Location, Before, After и Why; в location указывается path/to/file:line.
05
Учитывайте все пять категорий
Таблица охвата должна содержать все пять категорий из Quick Reference, и непроверенная поверхность никогда не должна выдаваться за проверенную.
06
Завершайте проверкой и вердиктом
Вердикт Block выносится, если остаётся находка HIGH; Needs changes — если остались только находки MEDIUM или LOW; Approve — только если не осталось ничего значимого.

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

Когда использовать навык make-interfaces-feel-better

Используйте навык make-interfaces-feel-better в Claude Code или Codex, когда задача — UX-исследование такого рода. Применимость и ограничения ниже взяты из собственного файла навыка.

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

Создание или проверка UI-компонентов, где важна визуальная детализация: анимации, состояния при наведении, тени, границы, типографика, иконки, микровзаимодействия и переходы появления/скрытия.
Быстрый проход по основному пользовательскому пути и самым востребованным состояниям с отчётом только по проблемам HIGH и MEDIUM.
Тщательный аудит всего запрошенного охвата по типографике, поверхностям, анимациям, иконкам и производительности.
Проекты, где уже есть соглашение по стилям, чтобы исправления полировки применялись в Tailwind, обычном CSS или CSS-in-JS соответствующим образом.

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

Он не добавит вторую систему стилей в проект только для того, чтобы внести исправление полировки.
Он отказывается от кастомной анимации на часто повторяющихся взаимодействиях, поскольку затраты внимания повторяются при каждом срабатывании.
Он не делает поочерёдное появление для рутинных взаимодействий, только для редких многоэтапных появлений.
Границы, оставленные только для имитации возвышения, следует заменить слоёными прозрачными значениями box-shadow; структурные границы и границы состояний остаются.

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

package.jsonНужен для решения о пути анимации иконок: проверьте, установлен ли motion или framer-motion, и следуйте установленному пути импорта.
Исходные файлы или точные экраныНаходки ссылаются на path/to/file:line; когда у артефакта нет исходных файлов, вместо этого указываются точный экран и компонент.
Режим, охват и контекст фреймворкаУкажите режим, точный охват, фреймворк, соглашения по стилям и любые границы проверки, чтобы отчёт показывал, что действительно было проверено.

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

Правила, которые skill make-interfaces-feel-better даёт Claude Code и Codex

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

Вычисление концентрических радиусов
Вложенные углы должны быть концентричными: внешний радиус равен внутреннему радиусу плюс отступ.
Нажатие всегда с масштабом 0.96
Масштаб при клике зафиксирован на scale(0.96) и никогда не опускается ниже 0.95; всё меньшее выглядит преувеличенным. Статичный проп отключает его, когда движение будет отвлекать.
Контуры изображений остаются нейтрально чистыми
1px-контур изображения с низкой прозрачностью должен быть чисто чёрным в светлой теме и чисто белым в тёмной — никогда оттенённым нейтральным, например slate или zinc, который перенимает цвет поверхности и выглядит как грязь.
Никогда не переходите всё сразу
Перечисляйте точные свойства, например transition-property: scale, opacity. Tailwind-класс transition-transform охватывает transform, translate, scale и rotate.
Толщина обводки иконки должна соответствовать весу текста
Обводка 1.5px соседствует с обычным текстом 400, 2px — с полужирным 600. Держите одну толщину обводки на набор иконок и никогда не смешивайте библиотеки иконок на одной поверхности.
Используйте точные значения анимации иконок
Контекстные замены иконок анимируются по scale, opacity и blur — а не по visibility — и эти значения зафиксированы, а не подобраны на глаз.
Разбивайте по времени только нечастые появления
Разделите поэтапное появление на смысловые блоки и разнесите их по времени примерно на 100 мс, вместо анимации одного контейнера. Рутинные, частые взаимодействия не должны разбиваться по времени.
Задавайте размер зон нажатия осознанно
Предпочитайте зону нажатия 44×44px для касания или мобильных устройств, минимум 40×40px в плотных десктопных интерфейсах, расширяя меньшие видимые элементы псевдоэлементом.

04 Применение

Установите make-interfaces-feel-better в Claude Code или Codex

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

Добавьте make-interfaces-feel-better в Claude Code, Codex или ваш агент

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

Terminal

npx skills add https://github.com/jakubkrehel/make-interfaces-feel-better --skill make-interfaces-feel-better

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

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

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

Starter prompt

Review [src/components/] in full mode. The card and its inner button both use rounded-xl, the counter shifts when the value changes, and the outline-to-fill icon swap exits with a jarring fade. Express every fix in [our existing styling system] and give me a Severity/Location/Before/After/Why table.

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

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

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

Пройдите по всем состояниям интерфейса — hover, focus, active, loading и пустое — как часть проверки.
Перечислите каждую невыполненную проверку рядом с вердиктом как «Не проверено», указав, что осталось.
Если применён initial={false}, убедитесь, что это не нарушает намеренные анимации появления.
Не расширяйте отчёт искусственно, чтобы достичь лимита находок, и опускайте принципы без находок.

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

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

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

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

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

Author: Jakub Krehel
Repository: github.com/jakubkrehel/make-interfaces-feel-better Ветка main
Файл skill: skills/make-interfaces-feel-better/SKILL.md Контрольная сумма содержимого записана при проверке; коммит 35545ea
License: MIT Из LICENSE.
Звёзды репозитория: 3,433 Снимок GitHub сделан 2026-09-14 для всего репозитория jakubkrehel/make-interfaces-feel-better. Не является рейтингом или счётчиком использования для make-interfaces-feel-better.
Проверено OpenDesign: 2026-09-14 Исходный файл, путь, текст лицензии и количество звезд были проверены. Не входит в основной комплект OpenDesign (проверено 2026-08-28); живой запуск не был записан на этой странице.

Внутри SKILL.md

Краткий справочникПять категорий — типографика, поверхности, анимации, иконки, производительность — каждая с указанием, когда её применять.
Основные принципыДевятнадцать пронумерованных правил, от концентричного радиуса границ до сдержанности анимации, с точными значениями по умолчанию.
Частые ошибкиТаблица, сопоставляющая каждую частую ошибку с её исправлением, например transition: all и слишком маленькие зоны нажатия.
Формат вывода ревьюРежимы, охват, ограничения по числу находок, определения серьёзности и обязательная структура отчёта.
Область и охватУкажите режим, область, фреймворк и конвенции; перечислите все пять категорий с проверенными доказательствами и результатом.
НаходкиГруппировка по принципам в таблице с колонками Severity, Location, Before, After, Why, охватывающая каждое изменение.
ПримерРазобранные таблицы для концентрического border radius, табличных цифр и масштабирования при нажатии.
Рассмотрено, но отклоненоТаблица реальных граничных кандидатов, которые были отклонены, с указанием причины.
Проверка и вердиктПеречислите выполненные команды или взаимодействия, отметьте непроверенные пункты, затем вынесите вердикт: Block, Needs changes или Approve.

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

«Принципы дизайн-инжиниринга для придания интерфейсам отточенности. Используйте при создании UI-компонентов, проверке фронтенд-кода, реализации анимаций, состояний при наведении, теней, границ, типографики, иконок, микровзаимодействий, анимаций появления/исчезновения или любой работы с визуальными деталями. Поддерживает быстрый и полный режимы проверки. Активируется на: UI-полировка, детали дизайна, «сделать лучше», «что-то не то», ступенчатые анимации, радиус границ, оптическое выравнивание, сглаживание шрифтов, табличные цифры, обводка изображений, тени блоков, иконки, толщина линий иконок, состояния иконок, сдержанность анимации.»

Описание из заголовка SKILL.md. Полный файл содержит около 11,798 символов. Читайте полный файл на GitHub.

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

Вопросы о skill make-interfaces-feel-better

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

Нужна ли библиотека анимации для контекстных анимаций иконок?

Нет. Если библиотека анимации не установлена, файл держит обе иконки в DOM, одну с абсолютным позиционированием, и делает кросс-фейд через CSS-переходы, что даёт анимации входа и выхода без каких-либо зависимостей.

Анимация появления запускается при загрузке страницы — как это обрабатывается?

Файл предотвращает это с помощью initial={false} на AnimatePresence, что отключает анимации входа при первом рендере, и затем просит подтвердить, что это не нарушает намеренные анимации появления.

Охватывает ли ревью также производительность, а не только визуал?

Да, производительность — одна из пяти категорий Quick Reference, с фокусом на специфичность переходов и использование will-change. will-change ограничивается transform, opacity и filter — свойствами, которые GPU может композитить — а will-change: all никогда не используется.

Make Interfaces Feel Better

Запустите make-interfaces-feel-better на реальной задаче UX-исследования.

Скачайте OpenDesign, импортируйте make-interfaces-feel-better по ссылке на SKILL.md, вставьте приведённый выше промпт и ознакомьтесь с планом перед результатом.

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

Терминал

npx skills add https://github.com/jakubkrehel/make-interfaces-feel-better --skill make-interfaces-feel-better

Что делает skill make-interfaces-feel-better в Claude Code и Codex

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

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

Когда использовать навык make-interfaces-feel-better

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

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

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

Правила, которые skill make-interfaces-feel-better даёт Claude Code и Codex

Вычисление концентрических радиусов

Нажатие всегда с масштабом 0.96

Контуры изображений остаются нейтрально чистыми

Никогда не переходите всё сразу

Толщина обводки иконки должна соответствовать весу текста

Используйте точные значения анимации иконок

Разбивайте по времени только нечастые появления

Задавайте размер зон нажатия осознанно