# bencium-code-conventions

Задаёт правила Bence для React и Next.js: стек, стиль кода, тесты и рабочий процесс. Нужен при создании или настройке проекта по этим соглашениям.

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

## Что делает

Скилл направляет агента к ReactJS, Next.js с App Router и TypeScript. Для интерфейса он выбирает TailwindCSS v3.x и Shadcn UI, предлагает Zustand, TanStack React Query и Zod. Компоненты должны быть функциональными, а новый код использует ES-модули, `async/await`, типы и ранние возвраты.

В правилах есть `@/components/ui`, `@phosphor-icons/react` и `sonner`, состояния загрузки, динамические импорты и оптимизация изображений. Для Next.js скилл сокращает применение `'use client'`, `useEffect` и `setState` в пользу RSC и SSR. Это жёсткий набор соглашений: TailwindCSS v4, Docker и локальный Postgres ему противоречат.

Рабочий порядок: изучить файлы, составить план, написать код и закоммитить результат. Скилл просит сначала писать падающие тесты, проверять типы и запускать тесты перед коммитом. Для бэкенда он предлагает сначала спросить о выборе, а ключи API хранить в `.env` и переменных окружения Vercel или Netlify.

## Требования
- Работает с: Supabase

## Установка

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

1. **Через Skills CLI (Vercel)**
```bash
npx skills add bencium/bencium-marketplace --skill bencium-code-conventions -a claude-code
```

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

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add bencium/bencium-marketplace --skill bencium-code-conventions -a codex
```

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

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add bencium/bencium-marketplace --skill bencium-code-conventions -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install bencium/bencium-marketplace bencium-code-conventions
```

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

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add bencium/bencium-marketplace --skill bencium-code-conventions -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/bencium/bencium-marketplace --path bencium-code-conventions/skills/bencium-code-conventions
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add bencium/bencium-marketplace --skill bencium-code-conventions -a opencode
```

### Claude.ai

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

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

## Когда брать
- создать Next.js-проект со структурой App Router
- привести новый TypeScript-код к правилам Bence
- добавить проверку схем через Zod
- настроить тесты до реализации функции
- подготовить проект к развёртыванию на Vercel или Netlify

## Примеры запросов агенту
- «Создай страницу `app/dashboard/page.tsx` по правилам Bence.»
- «Настрой React-компонент с `@/components/ui`, состоянием загрузки и `sonner`.»
- «Составь план и добавь тесты для API, затем проверь типы.»

## Похожие
- [nextjs-typescript-tailwindcss-supabase](https://affpapa.org/nevibecode/skills/nextjs-typescript-tailwindcss-supabase.md) — скилл · 1300 установок
- [typescript-nextjs-supabase-cursorrules-prompt-file](https://affpapa.org/nevibecode/rules/typescript-nextjs-supabase-cursorrules-prompt-file.md) — правило · ★ 41011
- [modern-web-development](https://affpapa.org/nevibecode/skills/modern-web-development.md) — скилл · 1200 установок
- [nextjs-tailwind-typescript-apps-cursorrules-prompt](https://affpapa.org/nevibecode/rules/nextjs-tailwind-typescript-apps-cursorrules-prompt.md) — правило · ★ 41011
- [cc-skill-security-review](https://affpapa.org/nevibecode/skills/sickn33-cc-skill-security-review.md) — скилл · 2100 установок
- [nextjs-supabase-auth](https://affpapa.org/nevibecode/skills/sickn33-nextjs-supabase-auth.md) — скилл · 6600 установок

Из того же набора: [bencium/bencium-marketplace](https://affpapa.org/nevibecode/by/bencium/bencium-marketplace.md) — 16 карточек

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

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