# frontend-enhancer

Скилл для Next.js: готовые компоненты, палитры, анимации и шаблоны секций. Пригодится, когда интерфейс выглядит сыро и нужен план правок.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 968 установок · ★ 458
- Автор: ailabs-393
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/ailabs-393/ai-labs-claude-skills/tree/HEAD/dist/skills/frontend-enhancer/SKILL.md
- Обновлён: 2025-11-11
- HTML: https://affpapa.org/nevibecode/skills/frontend-enhancer

## Что делает

Скилл подключается к агентству и подсказывает, как улучшить визуал приложения на Next.js. Внутри — библиотека React-компонентов: кнопка с вариантами primary, secondary, outline, ghost и danger, карточка с подкомпонентами вроде CardHeader и CardFooter, поля ввода с состояниями валидации. Ещё есть шаблоны секций: hero в трёх вариантах и сетка фич на 2, 3 или 4 колонки.

Отдельно лежат справочники. В `references/design_principles.md` — иерархия, отступы, типографика, доступность по WCAG AA/AAA. В `references/color_palettes.md` — шесть наборов: Corporate Blue, Vibrant Purple, Minimalist Gray, Warm Sunset, Ocean Fresh и Dark Mode, каждый с основными, акцентными и семантическими цветами. Анимации собраны в `assets/animations.css`: fade, slide, scale, скелетон-загрузка и hover-эффекты. Все они уважают `prefers-reduced-motion`.

Порядок работы простой: скопировать нужный файл из `assets/` в папку компонентов проекта, убедиться, что на месте утилита `cn` из `assets/utils-cn.ts`, потом подогнать цвета и отступы под свой бренд. Без этой утилиты компоненты не соберутся, так что проверьте её до первого импорта.

## Установка

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

1. **Через Skills CLI (Vercel)**
```bash
npx skills add ailabs-393/ai-labs-claude-skills --skill frontend-enhancer -a claude-code
```

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

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add ailabs-393/ai-labs-claude-skills --skill frontend-enhancer -a codex
```

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

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add ailabs-393/ai-labs-claude-skills --skill frontend-enhancer -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install ailabs-393/ai-labs-claude-skills frontend-enhancer
```

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

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add ailabs-393/ai-labs-claude-skills --skill frontend-enhancer -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/ailabs-393/ai-labs-claude-skills --path dist/skills/frontend-enhancer
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add ailabs-393/ai-labs-claude-skills --skill frontend-enhancer -a opencode
```

### Claude.ai

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

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/ailabs-393/ai-labs-claude-skills/tree/HEAD/dist/skills/frontend-enhancer/SKILL.md

## Когда брать
- собрать hero-секцию с двумя CTA и градиентом
- подобрать палитру под лендинг и перенести её в Tailwind
- добавить анимации появления списку без рывков
- привести кнопки и карточки к одному набору вариантов
- проверить интерфейс на соответствие WCAG AA

## Примеры запросов агенту
- Улучши визуал главной страницы: возьми hero из frontend-enhancer и палитру Corporate Blue
- Добавь в проект кнопку и карточку из frontend-enhancer, потом покажи, что поменять в стилях
- Прогони frontend-enhancer по странице тарифов: сетка фич на 3 колонки и анимации появления

## Похожие
- [frontend-tailwind-best-practices](https://affpapa.org/nevibecode/skills/frontend-tailwind-best-practices.md) — скилл · 464 установки
- [frontend-design](https://affpapa.org/nevibecode/skills/julianoczkowski-frontend-design.md) — скилл · 5500 установок
- [designing-frontend-interfaces](https://affpapa.org/nevibecode/skills/designing-frontend-interfaces.md) — скилл · 642 установки
- [shadcn-layouts](https://affpapa.org/nevibecode/skills/shadcn-layouts.md) — скилл · 457 установок
- [magic-ui](https://affpapa.org/nevibecode/skills/magic-ui.md) — скилл · 1200 установок
- [baseline-ui](https://affpapa.org/nevibecode/skills/baseline-ui.md) — скилл · 24200 установок

Из того же набора: [ailabs-393/ai-labs-claude-skills](https://affpapa.org/nevibecode/by/ailabs-393/ai-labs-claude-skills.md) — 23 карточки

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

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