# progressive-blur

Скилл создаёт верхний или нижний градиентный blur в CSS через слои backdrop-filter. Пригодится для мягкого затемнения края экрана.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1700 установок · ★ 7001
- Автор: MengTo
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/MengTo/Skills/tree/HEAD/agent-skills/web-design/progressive-blur/SKILL.md
- Обновлён: 2026-10-25
- HTML: https://affpapa.org/nevibecode/skills/progressive-blur

## Что делает

Скилл выдаёт HTML и CSS для progressive blur сверху или снизу окна. Эффект собирается из нескольких слоёв с backdrop-filter, mask и разной силой размытия: от 0.5px до 64px. Перед генерацией нужно определить сторону, высоту области и её z-index относительно интерфейса.

Элемент `.gradient-blur` размещается внутри `<body>` рядом с началом DOM, а фон позади него должен существовать, потому что backdrop-filter размывает содержимое за слоем. Свойство `pointer-events: none` сохраняет клики по интерфейсу. Большие значения blur нагружают GPU, поэтому для слабых устройств это повод сократить число слоёв.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add MengTo/Skills --skill progressive-blur -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/progressive-blur/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/progressive-blur/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add MengTo/Skills --skill progressive-blur -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/progressive-blur/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add MengTo/Skills --skill progressive-blur -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/progressive-blur/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install MengTo/Skills progressive-blur
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/progressive-blur/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add MengTo/Skills --skill progressive-blur -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/MengTo/Skills --path agent-skills/web-design/progressive-blur
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/progressive-blur/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add MengTo/Skills --skill progressive-blur -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/MengTo/Skills/tree/HEAD/agent-skills/web-design/progressive-blur/SKILL.md

## Когда брать
- добавить мягкое размытие у верхнего края экрана
- создать нижний gradient blur поверх контента
- настроить силу размытия через CSS-слои
- разместить blur между контентом и модальными окнами

## Примеры запросов агенту
- Добавь progressive blur снизу страницы высотой 65% и объясни, куда вставить `.gradient-blur`.
- Сделай верхний progressive blur для интерфейса и настрой `z-index` ниже модального окна.
- Уменьши число слоёв progressive blur для устройства с ограниченным GPU. Контролируй клики через `pointer-events: none`.

## Похожие
- [glassmorphism](https://affpapa.org/nevibecode/skills/glassmorphism.md) — скилл · 2400 установок
- [progressive-hydration](https://affpapa.org/nevibecode/skills/progressive-hydration.md) — скилл · 952 установки
- [progressive-web-app](https://affpapa.org/nevibecode/skills/aj-geddes-progressive-web-app.md) — скилл · 522 установки
- [skill-progressive-disclosure-design](https://affpapa.org/nevibecode/skills/skill-progressive-disclosure-design.md) — скилл · 4300 установок
- [emil-design-eng](https://affpapa.org/nevibecode/skills/emil-design-eng.md) — скилл · 388200 установок
- [review-animations](https://affpapa.org/nevibecode/skills/review-animations.md) — скилл · 256500 установок

Из того же набора: [mengto/skills](https://affpapa.org/nevibecode/by/mengto/skills.md) — 148 карточек

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md