AIKraft/Skills/Прогрессивное размытие

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

Create a layered CSS progressive blur (top or bottom) using multiple backdrop-filter masks for depth and softness. Use when asked for “progressive blur”, “gradient blur overlay”, or stepped blur masks that fade from an edge of the viewport.

mengto official Другое

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

Навык генерирует многослойный CSS-эффект прогрессивного размытия (progressive blur) с использованием нескольких масок backdrop-filter для создания глубины и мягкости. Он решает задачу визуального затухания контента от края viewport, предлагая варианты размытия сверху или снизу.

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

  • Создание эффекта градиентного размытия (gradient blur overlay) для выделения контента.
  • Реализация ступенчатых масок размытия, плавно затухающих от края экрана.
  • Добавление визуальной глубины интерфейсу при запросе «progressive blur».
  • Смягчение фона в верхней или нижней части viewport без блокировки кликов.

Как работает

  1. Подтвердить размещение (сверху или снизу), высоту и z-index относительно UI.
  2. Предоставить соответствующий HTML-фрагмент и CSS-код с настройками.
  3. Дать краткий чек-лист использования (вставка в body, размещение элемента, проверка фона).
  4. Предложить целевые настройки: высоту, шаги размытия, направление и остановки непрозрачности.

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

Создай прогрессивное размытие сверху для хедера.
Нужен gradient blur overlay снизу экрана.
Примени ступенчатые маски размытия, затухающие от нижнего края viewport.

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

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

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

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