gooey-blob-system — скилл для Claude Code: что делает и как установить
Создаёт эффект слипающихся органических капель с помощью SVG-фильтров. Пригодится для фона, прелоадера или зоны под курсором.
npx skills add MengTo/Skills --skill gooey-blob-system -a claude-codeЧто делает gooey-blob-system
Скилл настраивает генерацию плавной графики, где круги при сближении соединяются в единую жидкую массу. Эффект строится на цепочке SVG-фильтров: сначала накладывается размытие по Гауссу, а затем матрица цвета, создающая чёткую границу склеивания. Разработчик получает формы для акцентов в hero-секции, прелоадеров или интерактивных зон курсора.
В правилах задан запрет на поддельный эффект через обычные размытые круги без слияния. Инструкция требует настраивать размытие, контраст и дистанцию между фигурами синхронно, иначе капли не объединятся. Для сценариев с низким уровнем движения (low-motion) скилл обязывает готовить упрощённый или статичный fallback. Это повод проверить, как вёрстка ведёт себя без анимации.
Какие задачи решает
- собрать эффект слияния кругов через Gaussian blur и color matrix
- сделать органичный прелоадер из слипающихся капель
- настроить фоновую анимацию без дёрганых движений
- добавить статичный fallback для low-motion контекстов
Примеры запросов агенту
- Сделай фоновый акцент hero-секции с эффектом gooey blob через SVG-фильтры
- Собери прелоадер со слипающимися кругами и добавь статичный fallback для low-motion
Как установить gooey-blob-system
1Через Skills CLI (Vercel)
npx skills add MengTo/Skills --skill gooey-blob-system -a claude-code2Вручную: положить файлы
~/.claude/skills/gooey-blob-system/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/gooey-blob-system/
1Через Skills CLI (Vercel)
npx skills add MengTo/Skills --skill gooey-blob-system -a codex2Вручную: положить файлы
.agents/skills/gooey-blob-system/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add MengTo/Skills --skill gooey-blob-system -a cursor2Вручную: положить файлы
.cursor/skills/gooey-blob-system/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install MengTo/Skills gooey-blob-system2Вручную: положить файлы
.github/skills/gooey-blob-system/SKILL.md1Через Skills CLI (Vercel)
npx skills add MengTo/Skills --skill gooey-blob-system -a gemini-cli2Командой платформы
gemini skills install https://github.com/MengTo/Skills --path agent-skills/web-design/gooey-blob-systemВручную: положить файлы
.devin/skills/gooey-blob-system/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add MengTo/Skills --skill gooey-blob-system -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Из того же набора144
Похожие
Рядом в теме «Фронтенд и UI»
Всё по теме «Фронтенд и UI» →Вопросы о gooey-blob-system
Как установить gooey-blob-system в Claude Code?
Выполните команду npx skills add MengTo/Skills --skill gooey-blob-system -a claude-code. Также можно вручную поместить файл в ~/.claude/skills/gooey-blob-system/SKILL.md.
Что делает скилл gooey-blob-system?
Он помогает генерировать интерфейсные элементы, где круги плавно сливаются в единую массу. Для этого скилл связывает фильтр Gaussian blur с пороговой матрицей color matrix в SVG.
Какие ограничения заложены в gooey-blob-system?
Правила запрещают имитировать эффект простыми размытыми кругами без слияния и требуют исключить быстрые резкие движения. Для контекстов с low-motion агент обязан подготовить упрощённый или статичный fallback.
Исходный текст
SKILL.md · MIT
--- name: gooey-blob-system description: "Create a gooey blob system using SVG filters where multiple shapes merge into a single fluid form. Use overlapping circles combined with a Gaussian blur and color matrix filter to produce a continuous, organic mass. The forms should visually fuse and separate based on proximity. Focus on filter-driven merging (blur + threshold effect), soft organic boundaries with no hard edges, multiple independent shapes behaving as one system, and smooth continuous motion that feels fluid and cohesive." --- # Gooey Blob System Skill ## Use When - A page needs organic fluid shapes that visually merge, separate, and move as one soft system. ## Workflow 1. Build the effect with SVG filters: Gaussian blur followed by a color matrix threshold. 2. Animate multiple overlapping circles or blobs so they approach and separate naturally. 3. Keep boundaries soft and continuous; the visual should feel fluid rather than like separate circles. 4. Use the blob system as a background accent, loader, cursor field, or hero atmosphere. 5. Tune blur, contrast, and shape spacing together so merging remains visible. ## Guardrails - Do not fake gooey behavior with plain blurred circles that never merge. - Do not add fast jittery motion; keep it smooth and cohesive. - Provide a static or simplified fallback for low-motion contexts.
© MengTo · MIT · MengTo/Skills