·responsive-images
</>

responsive-images

✓
jezweb/claude-skillsGitHub: jezweb/claude-skillsИсточник: jezweb/claude-skills

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

jezweb·responsive·images
362Установки·0Тренд·@jezweb

Установка

GitHub: jezweb/claude-skills
$npx skills add https://github.com/jezweb/claude-skills --skill responsive-images

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

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

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

Источник: jezweb/claude-skills.

SKILL.md

Показать raw

Status: Production Ready ✅ Last Updated: 2026-01-14 Standards: Web Performance Best Practices, Core Web Vitals

| Use Case | Widths to Generate | Sizes Attribute |

| Full-width hero | 800w, 1200w, 1600w, 2400w | 100vw | | Content width | 400w, 800w, 1200w | (max-width: 768px) 100vw, 800px | | Grid cards (3-col) | 300w, 600w, 900w | (max-width: 768px) 100vw, 33vw | | Sidebar thumbnail | 150w, 300w | 150px |

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

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

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

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

Browse more skills from jezweb/claude-skills

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

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

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

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

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

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

https://github.com/jezweb/claude-skills

Детали

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

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

tailwind-v4-shadcn
2.7K Установки
tanstack-query
2.5K Установки
fastapi
2.0K Установки
zustand-state-management
1.2K Установки
react-hook-form-zod
1.2K Установки
tailwind-patterns
1.1K Установки