·responsive-images
</>

responsive-images

✓
oakoss/agent-skillsGitHub: oakoss/agent-skillsИсточник: oakoss/agent-skills

Реализуйте производительные адаптивные изображения с помощью srcset, размеров, отложенной загрузки и современных форматов (WebP, AVIF). Охватывает соотношение сторон для предотвращения CLS, элемент изображения для художественного оформления и приоритет выборки для оптимизации LCP. Используйте при добавлении изображений на страницы, оптимизации основных веб-показателей, предотвращении смещения макета, реализации художественного оформления или преобразовании в современные форматы.

oakoss·responsive·images
19Установки·2Тренд·@oakoss

Установка

GitHub: oakoss/agent-skills
$npx skills add https://github.com/oakoss/agent-skills --skill responsive-images

Как установить responsive-images

Быстро установите AI-навык responsive-images в вашу среду разработки через командную строку

  1. Откройте терминал: Откройте терминал или инструмент командной строки (Terminal, iTerm, Windows Terminal и т.д.)
  2. Выполните команду установки: Скопируйте и выполните эту команду: npx skills add https://github.com/oakoss/agent-skills --skill responsive-images
  3. Проверьте установку: После установки навык будет автоматически настроен в вашей AI-среде разработки и готов к использованию в Claude Code, Cursor или OpenClaw

Источник: oakoss/agent-skills.

SKILL.md

Показать raw

Responsive images serve the right image size and format based on viewport, device pixel ratio, and browser capabilities. Proper implementation prevents layout shift (CLS), optimizes Largest Contentful Paint (LCP), and reduces bandwidth by 50-70% with modern formats.

When to use: Any page with images, especially content images, hero images, product photos, and gallery layouts.

When NOT to use: Inline SVG icons, CSS background patterns, or canvas-rendered graphics.

Реализуйте производительные адаптивные изображения с помощью srcset, размеров, отложенной загрузки и современных форматов (WebP, AVIF). Охватывает соотношение сторон для предотвращения CLS, элемент изображения для художественного оформления и приоритет выборки для оптимизации LCP. Используйте при добавлении изображений на страницы, оптимизации основных веб-показателей, предотвращении смещения макета, реализации художественного оформления или преобразовании в современные форматы. Источник: oakoss/agent-skills.

Факты (для цитирования)

Стабильные поля и команды для ссылок в AI/поиске.

Команда установки
npx skills add https://github.com/oakoss/agent-skills --skill responsive-images
Источник
oakoss/agent-skills
Категория
</>Разработка
Проверено
✓
Впервые замечено
2026-02-25
Обновлено
2026-03-10
URL
https://www.learn-skills.dev/ru/skills/oakoss/agent-skills/responsive-images

Browse more skills from oakoss/agent-skills

Короткие ответы

Что такое responsive-images?

Реализуйте производительные адаптивные изображения с помощью srcset, размеров, отложенной загрузки и современных форматов (WebP, AVIF). Охватывает соотношение сторон для предотвращения CLS, элемент изображения для художественного оформления и приоритет выборки для оптимизации LCP. Используйте при добавлении изображений на страницы, оптимизации основных веб-показателей, предотвращении смещения макета, реализации художественного оформления или преобразовании в современные форматы. Источник: oakoss/agent-skills.

Как установить responsive-images?

Откройте терминал или инструмент командной строки (Terminal, iTerm, Windows Terminal и т.д.) Скопируйте и выполните эту команду: npx skills add https://github.com/oakoss/agent-skills --skill responsive-images После установки навык будет автоматически настроен в вашей AI-среде разработки и готов к использованию в Claude Code, Cursor или OpenClaw

Где находится исходный репозиторий?

https://github.com/oakoss/agent-skills

Детали

Категория
</>Разработка
Источник
skills.sh
Впервые замечено
2026-02-25

Похожие навыки

playwright
80 Установки
tanstack-form
41 Установки
ui-ux-polish
40 Установки
tanstack-db
35 Установки
find-skills
34 Установки
vitest-testing
34 Установки