# css-border-gradient

Добавляет в веб-интерфейс аккуратные градиентные рамки через CSS или Tailwind. Пригодится карточкам цен, модальным окнам и кнопкам, которым нужна сдержанная подсветка контура.

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

## Что делает

Скилл задаёт правила и сниппеты для отрисовки деликатных границ у блоков интерфейса. Вместо сплошного цвета или резкого неонового свечения агент применяет прозрачные градиенты с углом 135deg или 160deg. Стандартная толщина линии составляет 1px, а значение 2px остаётся только для крупных hero-блоков или активных состояний. Большинство точек градиента держат прозрачность ниже 0.4.

Внутри описаны три подхода к вёрстке. Первый метод сочетает два слоя `linear-gradient` с областями `padding-box` и `border-box` при прозрачной рамке `border: 1px solid transparent`. Второй способ использует псевдоэлемент `::before` и CSS-маску с правилом `mask-composite: exclude`, чтобы не перекрывать фоновое изображение родительского блока. Третий вариант адаптирует градиенты под произвольные свойства Tailwind.

Рамку советуют применять только к одному уровню иерархии на экране. Одинаковая прозрачность редко подходит одновременно для светлой и тёмной темы. Поэтому альфа-канал придётся подбирать под каждую тему отдельно.

## Установка

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

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

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

### Codex

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

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

### Cursor

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

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install MengTo/Skills css-border-gradient
```

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

### Gemini CLI

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

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

### Windsurf (Devin Desktop)

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

### OpenCode

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

### Claude.ai

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

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

## Когда брать
- Оформить карточки тарифов тонкой акцентной рамкой
- Задать градиентный контур поверх сложного фона через CSS-маску
- Собрать arbitrary-классы градиентной рамки для Tailwind
- Сделать мягкую подсветку активного таба или кнопки при фокусе

## Примеры запросов агенту
- Сделай для карточки тарифа тонкую градиентную рамку 1px с плавным фиолетовым акцентом.
- Добавь псевдоэлемент с CSS-маской для рамки модального окна, чтобы сохранить фоновое изображение.
- Стилизуй границу блока через arbitrary-свойства Tailwind.

## Похожие
- [tailwind-css](https://affpapa.org/nevibecode/skills/manutej-tailwind-css.md) — скилл · 461 установка
- [tailwind-css-patterns](https://affpapa.org/nevibecode/skills/tailwind-css-patterns.md) — скилл · 17700 установок
- [good-css](https://affpapa.org/nevibecode/skills/good-css.md) — скилл · 1500 установок
- [css-architecture](https://affpapa.org/nevibecode/skills/css-architecture.md) — скилл · 959 установок
- [css-animation-creator](https://affpapa.org/nevibecode/skills/css-animation-creator.md) — скилл · 805 установок
- [converting-css-to-tailwind](https://affpapa.org/nevibecode/skills/converting-css-to-tailwind.md) — скилл · 423 установки

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

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

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