AIKraft/AI/Войти
AIKraft/Skills/Архитектура островов

Архитектура островов

Teaches the islands architecture pattern for partial hydration. Use when building content-heavy sites where most of the page is static and only small regions need interactivity.

patternsdev official Дизайн

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

Навык обучает паттерну Islands Architecture для частичной гидратации, позволяя создавать контентно-насыщенные сайты, где большая часть страницы статична, а интерактивность нужна только в небольших областях. Это снижает объем передаваемого клиенту JavaScript, обеспечивая быструю начальную загрузку и оптимизацию SEO.

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

  • Создание блогов, новостных сайтов и страниц организаций, где основной контент статичен, а интерактивность ограничена (например, социальные виджеты или чаты).
  • Разработка страниц товаров в электронной коммерции с статичными описаниями и интерактивными элементами, такими как карусели изображений или поиск.
  • Создание страниц с детализацией данных (например, история транзакций в банке), где список статичен, а фильтрация требует интерактивности.
  • Проекты, где критически важны SEO и скорость начальной загрузки, а интерактивность нужна выборочно.

Как работает

  1. Идентифицировать статические и динамические (интерактивные) области каждой страницы отдельно.
  2. Использовать фреймворки, поддерживающие архитектуру островов, такие как Astro, Marko или Eleventy.
  3. Выполнять гидратацию интерактивных компонентов независимо, используя директивы вроде client:visible.
  4. Оставлять большую часть страницы в виде статичного HTML с нулевой стоимостью JavaScript.
  5. Обеспечить изоляцию динамических компонентов, чтобы их скрипты гидратации выполнялись асинхронно и не влияли друг на друга.

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

Создай страницу блога с использованием Astro, где текст статьи статичен, а кнопки социальных сетей гидратируются при появлении в видимой области.
Реализуй страницу товара с помощью Marko, оставив описание статичным HTML, а карусель изображений сделай интерактивным островом.
Разработай компонент фильтрации для списка транзакций в Eleventy + Preact, используя частичную гидратацию.

Что понадобится

  • Фреймворки: Astro, Marko или Eleventy (в сочетании с Preact или другими UI-библиотеками)
  • Знание принципов серверного рендеринга (SSR) и частичной гидратации

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

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

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

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