border-beam-react — скилл для Claude Code: что делает и как установить
Обучает агента добавлять в React бегущую подсветку границ через пакет border-beam на чистом CSS без внешних библиотек анимации.
npx skills add reason-machines/trending-skills --skill border-beam-react -a claude-codeЧто делает border-beam-react
Скилл содержит инструкции и примеры для встраивания компонента BorderBeam в проекты на React 18+. Эффект строит световую полосу вокруг карточек, кнопок или полей ввода. Анимация опирается на нативный CSS @property для рендеринга на видеокарте, поэтому сторонние JS-движки анимации проекту не понадобятся.
Обертка сама считывает скругление углов первого дочернего тега — border-radius, а внутренний слой свечения блокирует перехват кликов через pointer-events: none. Доступны три пресета размера: компактный sm, стандартный md и нижняя полоса line. Палитры переключаются между радужной, монохромной, морской и закатной схемами.
Для старых браузеров компонент не подойдёт: требуются Chrome 85+, Safari 15.4+ или Firefox 128+. Отслеживание системной настройки prefers-reduced-motion нужно прописывать вручную в коде приложения, иначе анимация продолжит крутиться у пользователей с ограничениями движения.
Какие задачи решает
- настроить анимацию бегущего неонового свечения вокруг карточки
- добавить нижнюю световую полосу к полю поиска без библиотек анимации
- включить запуск подсветки границ по наведению курсора или клику
- подобрать палитру свечения под тёмную или светлую тему
Примеры запросов агенту
- Оберни карточку профиля в компонент BorderBeam с морской палитрой ocean
- Сделай подсветку строки поиска снизу через пресет size="line"
- Настрой включение анимации BorderBeam только при наведении курсора на кнопку
Как установить border-beam-react
1Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill border-beam-react -a claude-code2Вручную: положить файлы
~/.claude/skills/border-beam-react/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/border-beam-react/
1Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill border-beam-react -a codex2Вручную: положить файлы
.agents/skills/border-beam-react/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill border-beam-react -a cursor2Вручную: положить файлы
.cursor/skills/border-beam-react/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install reason-machines/trending-skills border-beam-react2Вручную: положить файлы
.github/skills/border-beam-react/SKILL.md1Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill border-beam-react -a gemini-cli2Командой платформы
gemini skills install https://github.com/reason-machines/trending-skills --path skills/border-beam-reactВручную: положить файлы
.devin/skills/border-beam-react/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill border-beam-react -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о border-beam-react
Как установить border-beam-react в Claude Code?
Выполните команду npx skills add reason-machines/trending-skills --skill border-beam-react -a claude-code. Также файл инструкции можно сохранить вручную по пути ~/.claude/skills/border-beam-react/SKILL.md.
Что делает скилл border-beam-react?
Он учит нейросеть внедрять компонент BorderBeam для подсветки контуров интерфейса. Помощник получает спецификацию пропсов: длительность, цвет, яркость, принудительное отключение сдвига оттенка и ручной оверрайд скругления углов.
Нужен ли Framer Motion для работы этого эффекта?
Нет, сторонние пакеты анимаций не требуются. Эффект работает через CSS @property, поэтому нужны только React 18+ и свежий браузер с поддержкой современных CSS-свойств.
