# premium-frontend-design

Скилл задаёт правила вёрстки нестандартных интерфейсов и лендингов. Он помогает агенту собирать анимации и 3D-сцены без однотипного ИИ-дизайна.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1400 установок · ★ 18
- Автор: kv0906
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/kv0906/cc-skills/tree/HEAD/skills/premium-frontend-design/SKILL.md
- Обновлён: 2026-10-11
- HTML: https://affpapa.org/nevibecode/skills/premium-frontend-design

## Что делает

Скилл внедряет в системный промпт строгие визуальные ограничения. Он заставляет модель отказаться от стандартных светлых фонов и системных шрифтов вроде Roboto в заголовках. Агент учится выстраивать иерархию: один визуальный акцент на экран, спокойные блоки с контентом и контраст текста не ниже 4.5:1.

Архитектура остаётся гибкой. По умолчанию для простых интерфейсов предлагаются чистый CSS или Framer Motion с задержками до 400 миллисекунд. Для сложных таймлайнов подключается GSAP, а для 3D-сцен — Three.js и `@react-three/fiber`. При этом сложные модули GSAP вроде SplitText требуют отдельной платной лицензии GSAP Club.

Перед генерацией кода модель выбирает направление стиля, от брутализма до киберпанка. Если задача описана общими словами, скилл блокирует тяжёлый WebGL и оставляет легковесный CSS-градиент. Для свойства `backdrop-filter` обязательно создаётся фолбэк под старые версии Firefox.

## Установка

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

1. **Через Skills CLI (Vercel)**
```bash
npx skills add kv0906/cc-skills --skill premium-frontend-design -a claude-code
```

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

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add kv0906/cc-skills --skill premium-frontend-design -a codex
```

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

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add kv0906/cc-skills --skill premium-frontend-design -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install kv0906/cc-skills premium-frontend-design
```

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

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add kv0906/cc-skills --skill premium-frontend-design -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/kv0906/cc-skills --path skills/premium-frontend-design
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add kv0906/cc-skills --skill premium-frontend-design -a opencode
```

### Claude.ai

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

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/kv0906/cc-skills/tree/HEAD/skills/premium-frontend-design/SKILL.md

## Когда брать
- Избавиться от шаблонного вида интерфейсов при ИИ-генерации
- Выбрать подходящую библиотеку анимаций под ограничения проекта
- Настроить микроанимации и шейдерные эффекты без потери читаемости
- Задать строгие правила типографики и цветовых контрастов

## Примеры запросов агенту
- Сверстай главный экран лендинга для fintech-сервиса в стиле киберпанк с фоном на Framer Motion
- Добавь интерактивный bento-grid для дашборда с аккуратными микроанимациями на чистом CSS
- Сделай 3D-сцену на Three.js для промо-страницы с фолбэком для старых браузеров

## Похожие
- [frontend-design](https://affpapa.org/nevibecode/skills/frontend-design.md) — скилл · 1025790 установок
- [design-taste-frontend](https://affpapa.org/nevibecode/skills/design-taste-frontend.md) — скилл · 678700 установок
- [prototype](https://affpapa.org/nevibecode/skills/prototype.md) — скилл · 986201 установка
- [hyperframes](https://affpapa.org/nevibecode/skills/heygen-com-hyperframes.md) — скилл · 1200000 установок
- [hyperframes-cli](https://affpapa.org/nevibecode/skills/heygen-com-hyperframes-cli.md) — скилл · 1300000 установок
- [webapp-testing](https://affpapa.org/nevibecode/skills/webapp-testing.md) — скилл · 186758 установок

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

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

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