AIKraft/AI/Войти
AIKraft/Skills/make-interfaces-feel-better

make-interfaces-feel-better

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

jakubkrehel official Разработка ★ 3.6k

Что делает навык

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

Когда применять

  • Когда интерфейс «выглядит не так» или требует визуальной шлифовки
  • При ревью UI-кода для выявления мелких недочетов в состояниях и анимациях
  • При добавлении новых элементов интерфейса для обеспечения визуальной целостности
  • При оптимизации переходов и эффектов взаимодействия (hover, focus, active)

Как работает

  1. Определить существующую систему стилизации проекта (Tailwind, plain CSS или CSS-in-JS) и использовать только её, не внедряя новые системы.
  2. Замедлить анимации до 10% скорости в панели Animations браузера для детального анализа.
  3. Пошагово проверить все состояния интерфейса: hover, focus, active, loading, empty.
  4. Применить принципы из категорий: Typography (обтекание, сглаживание шрифтов), Surfaces (радиусы, тени, оптическая выравнивание), Animations (прерываемость, переходы), Icons (вес штриха, currentColor, масштаб), Performance (специфичность transition).
  5. Скорректировать код, исправляя то, что кажется неправильным при замедленном воспроизведении.

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

«Проверь анимации и тени в этом компоненте, используя принципы из make-interfaces-feel-better»
«Отревьюй UI-код на соответствие принципам дизайн-инженерии: радиусы, иконки и переходы»
«Улучши визуальные детали интерфейса, замедлив анимации и проверив состояния hover и focus»

Описание составлено по SKILL.md навыка, сверено 05.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «jakubkrehel-make-interfaces-feel-better» из репозитория: # https://github.com/jakubkrehel/make-interfaces-feel-better
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r jakubkrehel-make-interfaces-feel-better/ ~/.claude/skills/jakubkrehel-make-interfaces-feel-better/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.