К основному содержанию
скилл CX Codex

gooey-blob-system — скилл для Claude Code: что делает и как установить

Создаёт эффект слипающихся органических капель с помощью SVG-фильтров. Пригодится для фона, прелоадера или зоны под курсором.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add MengTo/Skills --skill gooey-blob-system -a claude-code
Открыть на GitHub

Что делает 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-code

2Вручную: положить файлы

~/.claude/skills/gooey-blob-system/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/gooey-blob-system/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Из того же набора144

scroll-scrubbed-word-reveal Скилл открывает слова в размеченном тексте по мере прокрутки страницы. Пригодится для заголовков, манифестов и онбординг-сообщений. CX Codex +1 1 400установок technical-wireframe-info-layout Задаёт правила для сборки монохромных инженерных интерфейсов: проволочных 3D-моделей в разрезе, выносных линий и меток диагностики. CX Codex +1 1 400установок corner-diagonals Скилл для срезанных углов и фаски на кнопках, карточках и панелях. Пригодится, когда интерфейсу нужна резкая геометрия вместо скруглённых пилюль. CX Codex +1 1 400установок number-details Скилл добавляет декоративные номера 01, 02, 03 к шагам процесса, карточкам и заголовкам. Пригодится, когда секции нужен визуальный ритм без нового контента. CX Codex +1 1 400установок dark-glass-clean-layout Скилл задаёт тёмную стеклянную систему интерфейса с колонками, плавающими карточками и спокойной глубиной. Нужен для рабочих пространств и консолей. CX Codex +1 1 400установок clean-minimal-beige-light-mode Задаёт направление дизайн-системы: тёплые бежевые поверхности, тихие модульные сетки и сдержанный акцент. Пригодится, когда интерфейс должен выглядеть спокойно и собранно. CX Codex +1 1 400установок mesh-gradient-dark-blue-clean Набор дизайн-правил, CSS-токенов и разметки для тёмно-синего интерфейса с процедурным градиентом на Canvas. Пригодится при вёрстке hero-секций и технологичных лендингов. CX Codex +1 1 400установок framed-grid-layout Скилл задаёт правила вёрстки страниц с тонкими видимыми границами секций, L-образными уголками и строгой привязкой к сетке. CX Codex +1 1 400установок

Похожие

glassmorphism iart-ai Скилл для ИИ-агента, который добавляет в интерфейс матовое стекло: размытие фона, светлая кромка, слоистые тени и жидкое преломление. CX Codex +1 2 400установок icons-badges dylantarre Скилл для анимации иконок, бейджей, аватаров и статус-индикаторов. Пригодится, когда мелкие элементы интерфейса должны давать отклик и характер. CX Codex +1 535установок feedback-indicators dylantarre Скилл для анимаций обратной связи: галочки успеха, тряска ошибок, валидация полей и тосты. Пригодится, когда интерфейс должен внятно отвечать на действие пользователя. CX Codex +1 493установок motion-system Owl-Listener Задаёт единый набор длительностей, кривых и правил для анимаций в продукте. Пригодится, когда у каждого компонента свои тайминги. CX Codex +1 1 800установок svg-animation iart-ai Скилл для анимации SVG: отрисовка штриха, морфинг форм, движение по пути, анимированные градиенты и фильтры. Пригодится, когда нужен самодостаточный HTML-файл с векторной анимацией. CX Codex +1 2 500установок spacing-system Owl-Listener Задаёт шкалу отступов на базе 4px или 8px и правила её применения в UI. Помогает навести порядок в padding и margin компонентов. CX Codex +1 2 300установок

Рядом в теме «Фронтенд и 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

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой