glassmorphism · ainergiz — скилл для Claude Code: что делает и как установить
Скилл учит ассистента создавать интерфейсы с эффектом матового стекла: полупрозрачный фон, размытие и аккуратные рамки. Пригодится для плавающих кнопок, тултипов и оверлеев.
npx skills add ainergiz/design-inspirations --skill glassmorphism -a claude-codeЧто делает glassmorphism
Скилл даёт модели готовые наборы Tailwind-классов для стилизации полупрозрачных компонентов. Внутри описаны градации эффекта от едва заметного до плотного через комбинации backdrop-blur, прозрачной подложки и тонких рамок вроде border-white/10. Агент сразу подбирает нужные токены для плавающих кнопок действия, индикаторов слайдера или зафиксированных шапок.
Тут также собраны правила контрастности текста на тёмных и светлых подложках, чтобы типографика оставалась читаемой. При этом фильтр backdrop-blur заметно нагружает графику слабых смартфонов: на больших площадях экрана эффект стоит заменять сплошным фоном или снижать радиус размытия.
Какие задачи решает
- подобрать Tailwind-классы для эффекта матового стекла
- оформить плавающую кнопку или всплывающее меню
- настроить контрастность текста на полупрозрачной подложке
- оптимизировать размытие фона для слабых устройств
Примеры запросов агенту
- Сделай плавающее навигационное меню со стилем матового стекла поверх обложки
- Оформи кнопку быстрого действия с лёгким эффектом стекла и контрастной иконкой
- Добавь полупрозрачный тултип с размытием для графика
Как установить glassmorphism
1Через Skills CLI (Vercel)
npx skills add ainergiz/design-inspirations --skill glassmorphism -a claude-code2Вручную: положить файлы
~/.claude/skills/glassmorphism/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/glassmorphism/
1Через Skills CLI (Vercel)
npx skills add ainergiz/design-inspirations --skill glassmorphism -a codex2Вручную: положить файлы
.agents/skills/glassmorphism/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add ainergiz/design-inspirations --skill glassmorphism -a cursor2Вручную: положить файлы
.cursor/skills/glassmorphism/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install ainergiz/design-inspirations glassmorphism2Вручную: положить файлы
.github/skills/glassmorphism/SKILL.md1Через Skills CLI (Vercel)
npx skills add ainergiz/design-inspirations --skill glassmorphism -a gemini-cli2Командой платформы
gemini skills install https://github.com/ainergiz/design-inspirations --path .claude/skills/glassmorphismВручную: положить файлы
.devin/skills/glassmorphism/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add ainergiz/design-inspirations --skill glassmorphism -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о glassmorphism
Как установить glassmorphism в Claude Code?
Выполните команду npx skills add ainergiz/design-inspirations --skill glassmorphism -a claude-code. Файл с инструкцией запишется в путь ~/.claude/skills/glassmorphism/SKILL.md.
Для каких компонентов подходит этот скилл?
Инструкции ориентированы на компактные плавающие элементы: индикаторы каруселей, всплывающие подсказки, навигационные панели и круглые кнопки действий.
Влияет ли эффект стекла на производительность?
CSS-размытие через backdrop-blur создаёт заметную нагрузку на мобильных процессорах. Скилл прямо советует избегать эффекта на весь экран и брать меньший радиус размытия при частых анимациях.
Похожие скиллы
Все скиллы по теме «Фронтенд и UI» →Сначала — glassmorphism от других авторов.
