AIKraft/AI/Войти
AIKraft/Skills/Импорт при взаимодействии

Импорт при взаимодействии

Teaches interaction-based lazy loading for non-critical resources. Use when you have heavy components or libraries that are only needed after user interaction like clicks, hovers, or form input.

patternsdev official Другое

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

Реализует ленивую загрузку тяжелых компонентов или библиотек, которые не нужны пользователю сразу при загрузке страницы. Это позволяет отложить выполнение критичного кода до момента взаимодействия пользователя, улучшая показатели First Input Delay (FID) и Time to Interactive (TTI).

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

  • Загрузка сторонних виджетов (видеоплееры, чаты), которые требуют клика для отображения основного интерфейса
  • Отложенная загрузка тяжелых компонентов пользовательского интерфейса, скрытых до скролла или клика
  • Оптимизация производительности страницы за счет исключения немедленной загрузки некритичных ресурсов
  • Улучшение показателей FID и TTI для страниц с большим количеством тяжелых скриптов

Как работает

  1. Определить ресурсы или компоненты, которые не являются критичными для первоначального рендеринга страницы
  2. Исключить немедленную загрузку этих ресурсов из основного потока выполнения
  3. Настроить триггеры взаимодействия пользователя (клики, наведение, ввод в форму) как условия загрузки
  4. Обеспечить загрузку и инициализацию кода только после того, как пользователь выполнил необходимое действие
  5. Проверить, что производительность страницы (FID, TTI) улучшилась за счет отложенной загрузки

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

Загрузи видео-плеер только после того, как пользователь нажмет кнопку воспроизведения
Инициализируй чат-виджет при клике на иконку чата, а не при загрузке страницы
Загрузи тяжелую библиотеку аналитики только после того, как пользователь начнет вводить данные в форму

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

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

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

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