# clerk-custom-ui

Скилл по Clerk: агент собирает свою форму входа на хуках useSignIn и useSignUp либо перекрашивает готовые компоненты под бренд.

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

## Что делает

Скилл ведёт агента по двум веткам работы с Clerk: собрать собственный экран входа и регистрации на хуках `useSignIn` и `useSignUp` или настроить внешний вид готовых компонентов. Внутри `SKILL.md` лежит таблица задач со ссылками на справочники `core-2/` и `core-3/`, поэтому сначала агент смотрит версию SDK в `package.json`, а потом открывает нужный файл. Документацию Clerk он подтягивает через WebFetch по мере надобности.

Темы приезжают из пакета `@clerk/ui`: `dark`, `neobrutalism`, `shadcn`, `simple`. Можно передать массив, и последняя тема в списке выигрывает. Цвета, шрифты и радиусы задаются через `appearance.variables`, логотип и вид соцкнопок — через `appearance.options`. Отдельная таблица разбирает частые промахи: `colorPrimary` вместо `primaryColor`, `logoImageUrl` брошен на верхний уровень вместо `options`.

Сначала придётся обернуть приложение в `ClerkProvider`; за этим скилл отправляет в `clerk-setup`. Если в корне проекта лежит `components.json`, он велит ставить тему `shadcn` первой же правкой и подключать `@clerk/ui/themes/shadcn.css` в глобальные стили: без этого формы выпадут из вашей дизайн-системы. На Core 2 те же настройки зовутся `layout` вместо `options`, а темы импортируются из `@clerk/themes` — перепутать ветки легко, так что версию SDK стоит проверить до первой правки.

## Установка

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

1. **Через Skills CLI (Vercel)**
```bash
npx skills add clerk/skills --skill clerk-custom-ui -a claude-code
```

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

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add clerk/skills --skill clerk-custom-ui -a codex
```

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

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add clerk/skills --skill clerk-custom-ui -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install clerk/skills clerk-custom-ui
```

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

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add clerk/skills --skill clerk-custom-ui -a gemini-cli
```

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

### Windsurf (Devin Desktop)

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

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add clerk/skills --skill clerk-custom-ui -a opencode
```

### Claude.ai

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

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

## Когда брать
- собрать свою форму входа вместо готового компонента `<SignIn />`
- перекрасить компоненты Clerk в цвета бренда
- поставить тему `shadcn`, чтобы формы совпали с дизайн-системой
- вынести логотип и иконки соцсетей в нужное место формы
- разобраться, почему `useSignIn` возвращает не тот объект после обновления SDK

## Примеры запросов агенту
- Сделай кастомную форму регистрации на `useSignUp` вместо готового компонента Clerk.
- Примени тему `shadcn` к компонентам Clerk, в проекте уже стоит shadcn/ui.
- Поменяй `colorPrimary` и радиусы у `<SignIn />`, логотип возьми из `/logo.png`.

## Похожие
- [clerk-nextjs-skills](https://affpapa.org/nevibecode/skills/clerk-nextjs-skills.md) — скилл · 436 установок
- [clerk-authentication](https://affpapa.org/nevibecode/skills/clerk-authentication.md) — скилл · 683 установки
- [clerk](https://affpapa.org/nevibecode/rules/clerk.md) — правило · ★ 3579
- [auth](https://affpapa.org/nevibecode/skills/auth.md) — скилл · 8 установок
- [aceternity-ui](https://affpapa.org/nevibecode/skills/aceternity-ui.md) — скилл · 1500 установок
- [magic-ui](https://affpapa.org/nevibecode/skills/magic-ui.md) — скилл · 1200 установок

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

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

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