picture-element

thedaviddias/Front-End-Checklist · Agent Skill

Проверяет использование тега <picture> с резервным изображением <img>, анализируя размер, загрузку и влияние на производительность.

Перейти к установке ↓

Обзор

Автор	thedaviddiasСообщество
Репозиторий	thedaviddias/Front-End-Checklist ↗
Папка скилла	`picture-element`
Звёзды	74 050
Файлы	1
Лицензия	MIT
Обновлён	28 мая 2026 г.
Ссылки	Исходник скилла ↗ · Репозиторий ↗

Проверка Mozgi

Что мы нашли в файлах скилла. Подробности — по подписке.

Безопасность

низкий риск · явных рисков не найдено — полный отчёт покажет детали

Совместимость

только инструкции — подходит большинству агентов

Похожие скиллы

найдено 37 похожих скиллов

Ещё в подписке

Установка

Скилл — это папка с файлом SKILL.md. Выберите своего агента и скопируйте команды в терминал (macOS, Linux или Git Bash на Windows) в корне проекта.

Скопируйте промпт и вставьте в Claude, Codex или другого ассистента: он сам проверит скилл и подключит его.

Установи мне скилл «picture-element» с mozgi.io (https://mozgi.io/skills/picture-element/).

1. Скачай архив: https://mozgi.io/skills/picture-element/download
Если не скачивается — возьми папку скилла из исходника: https://github.com/thedaviddias/Front-End-Checklist/tree/main/skills/picture-element
2. Прочитай SKILL.md и остальные файлы. Проверь, что скилл безопасен: нет скрытых команд, отправки данных наружу или скриптов, которые делают не то, что описано. Если что-то подозрительно — остановись и скажи мне.
3. Положи папку «picture-element» в папку скиллов своего агента: .claude/skills/ для Claude Code, .agents/skills/ для Codex, .cursor/skills/ для Cursor, .gemini/skills/ для Gemini CLI. В проекте — внутри проекта, иначе в домашней папке (~/.claude/skills/ и т. п.).
4. Убедись, что получилось <папка скиллов>/picture-element/SKILL.md.
5. Коротко расскажи, что умеет этот скилл, и предложи попробовать его на моей задаче.

Если какой-то шаг не можешь сделать сам — подскажи, что нажать или ввести.

git clone --depth 1 --branch main https://github.com/thedaviddias/Front-End-Checklist.git /tmp/Front-End-Checklist
mkdir -p .claude/skills
cp -r /tmp/Front-End-Checklist/skills/picture-element .claude/skills/picture-element

Перезапустите Claude Code — скилл появится в списке, вызвать вручную: /picture-element. Для всех проектов сразу — папка ~/.claude/skills.

git clone --depth 1 --branch main https://github.com/thedaviddias/Front-End-Checklist.git /tmp/Front-End-Checklist
mkdir -p .agents/skills
cp -r /tmp/Front-End-Checklist/skills/picture-element .agents/skills/picture-element

Codex ищет скиллы в .agents/skills от текущей папки до корня репозитория; вызвать вручную — /skills или $picture-element. Для всех проектов — ~/.agents/skills.

git clone --depth 1 --branch main https://github.com/thedaviddias/Front-End-Checklist.git /tmp/Front-End-Checklist
mkdir -p .cursor/skills
cp -r /tmp/Front-End-Checklist/skills/picture-element .cursor/skills/picture-element

Cursor подхватит скилл при запуске; вызвать вручную — «/» в чате агента. Cursor также читает .claude/skills и .agents/skills. Для всех проектов — ~/.cursor/skills.

git clone --depth 1 --branch main https://github.com/thedaviddias/Front-End-Checklist.git /tmp/Front-End-Checklist
mkdir -p .gemini/skills
cp -r /tmp/Front-End-Checklist/skills/picture-element .gemini/skills/picture-element

Gemini CLI сам предложит включить скилл, когда задача подходит, — вы подтверждаете. Для всех проектов — ~/.gemini/skills.

Файлы скилла

1 файл Скачать ZIP

Просмотрите SKILL.md и сопутствующие файлы перед установкой. Клик по файлу — предпросмотр.

Содержимое SKILL.md

Оригинальный текст автора · только чтение

Use <picture> with an <img> fallback

A <picture> without an <img> fallback renders nothing in browsers that don't support <picture> (IE11) or don't support any of the <source> formats. The <img> child is also where alt, width, height, loading, and fetchpriority attributes live—these apply regardless of which source the browser selects.

Quick Reference

Every <picture> must end with an <img> element—it is the required fallback and carries alt
<source> elements are evaluated top-to-bottom; the first match wins
Use type="image/avif" and type="image/webp" on <source> for format selection
The <img src> should point to a JPEG or PNG—the universal fallback for all browsers

Check

Scan all <picture> elements in this codebase. Verify: 1) Every <picture> has an <img> as its last child (required fallback). 2) The <img> has an alt attribute. 3) The <img> has width and height attributes. 4) <source> elements appear before the <img> child. 5) Each <source> has either a srcset attribute or a media attribute. 6) format-selecting <source> elements have a type attribute (type="image/avif", type="image/webp"). Flag any <picture> missing an <img> child or with <img> not as the last child.

Fix

For each <picture> element with issues: 1) If missing <img>: add <img src="{fallback-url}" alt="{description}" width="{w}" height="{h}"> as the last child. 2) If <img> is not last: move it to after all <source> elements. 3) If <source> elements lack type attributes for format selection: add type="image/avif" or type="image/webp". 4) Verify the <img src> points to a universally supported format (JPEG or PNG) as the ultimate fallback. Show the corrected <picture> markup.

Explain

Explain how the <picture> element works. Browsers evaluate <source> elements in document order and use the first one whose conditions match (type, media, srcset). The <img> element is the fallback for browsers that don't support <picture> (IE11) or don't support the source format. Without an <img> child, <picture> is invalid HTML and produces no output. The alt attribute must be on the <img>, not the <source> elements—it applies regardless of which source is selected.

Code Review

Review image assets, markup, and delivery configuration related to Use <picture> with an <img> fallback. Flag exact files or components where format choice, sizing, or loading behavior violates the rule, and describe how to confirm the fix in DevTools.

---

For full implementation details, code examples, and framework-specific guidance,

see references/rule.md.

Rule page: https://frontendchecklist.io/en/rules/images/picture-element

Вопросы и ответы

Что делает скилл picture-element?

Как установить picture-element?

Откройте блок «Установка» на этой странице и выберите своего агента — Claude Code, Codex, Cursor или Gemini CLI: там готовые команды, которые копируют папку скилла в нужное место. Либо скопируйте промпт из вкладки «Через ассистента» — ассистент сам проверит и подключит скилл.

С какими нейросетями работает picture-element?

Скиллы — это обычные инструкции в Markdown (формат Agent Skills), поэтому picture-element подходит любому агенту, который читает SKILL.md: Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode и другие. Модель загружает инструкции только когда задача подходит под описание скилла.

Скилл picture-element бесплатный?

Скилл опубликован автором thedaviddias в открытом доступе под лицензией MIT. Сам скилл ничего не стоит — вы платите только своему провайдеру нейросети за использованные токены.

Безопасно ли устанавливать скиллы?

Скилл — это инструкции, которые агент будет выполнять, поэтому перед установкой прочитайте SKILL.md и сопутствующие файлы. Скрипты из папки скилла запускаются только если их запустит агент — следите за тем, что он делает, и не давайте лишних прав.

Чем скилл отличается от MCP-сервера или плагина?

MCP-сервер и плагин дают модели новые инструменты — код, который выполняется и возвращает результат. Скилл даёт знания и порядок действий: как подходить к задаче, какие шаги делать и как выглядит хороший результат. Ему не нужен сервер или ключ API.