AIKraft/AI/Войти
AIKraft/Skills/Улучшенный UI

Улучшенный UI

Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, micro-interactions, enter/exit animations, choosing or reviewing icons, or any visual detail work. Triggers on UI polish, design details,

jakubkrehel official Дизайн

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

Навык предоставляет справочник по мелким деталям дизайна для создания отполированных интерфейсов, где полировка достигается за счет точного соблюдения конкретных значений. Он фокусируется на визуальной точности, требуя использования строго заданных параметров вместо приблизительных диапазонов.

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

  • Создание UI-компонентов с учетом правил полировки
  • Ревью фронтенд-кода на предмет визуальных несоответствий
  • Реализация анимаций, состояний hover, теней и границ
  • Выбор и ревью иконок, а также микровзаимодействий

Как работает

  1. При ревью замедлить интерфейс до 10% скорости, чтобы выявить тонкие ошибки, незаметные на полной скорости
  2. Соблюдать библиотеку компонентов, токены, плотность и язык анимаций проекта, если иное не предписано правилами
  3. Использовать строго указанные значения для длительности, кривых (например, cubic-bezier(0.2, 0, 0, 1)), масштаба и размытия, не аппроксимируя их
  4. Применять правило концентрического border radius: внешний радиус равен внутреннему радиусу плюс padding
  5. Выполнять оптическую, а не геометрическую выравнивание для кнопок с иконками, треугольников воспроизведения и асимметричных иконок

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

Проверь анимации и переходы в моем коде на соответствие точным значениям из справочника UI polish
Исправь визуальное выравнивание кнопки с иконкой, используя оптическое центрирование
Настрой радиусы скругления для вложенных элементов так, чтобы внешний радиус был равен внутреннему плюс padding

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

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

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

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