# workos-widgets

Помогает встроить виджеты WorkOS — управление пользователями, профиль, SSO и проверку домена — и связать фронтенд с выдачей токенов на бэкенде.

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

## Что делает

Скилл включается, когда вы встраиваете или отлаживаете виджет WorkOS: `user-management`, `user-profile`, `admin-portal-sso-connection`, `admin-portal-domain-verification`. Сначала он определяет стек — Next.js, React Router, TanStack Start, Vite, SvelteKit — и проверяет, есть ли в проекте AuthKit или WorkOS. Если их нет, агент попросит выполнить `WORKOS_MODE=agent npx workos@latest install` и дождётся подтверждения.

Дальше подгружаются справочники под ваш стек и виджет: обнаружение, настройка компонентов, стратегии токенов, работа с API, стили. Есть отдельные файлы под Next.js, React Router, TanStack Router, TanStack Start, Vite, SvelteKit, Ruby, Python, Go, PHP, Java и смешанные репозитории. Для React и TypeScript добавляются соглашения по коду.

Ограничение важное: опубликованные виджеты — это React-компоненты, в `.svelte` или другой не-React шаблон их не импортируют. Для SvelteKit скилл предложит использовать существующую границу рендеринга React либо собрать свой интерфейс на Client API. Компоненты из `@workos-inc/widgets` должны лежать внутри `<WorkOsWidgets>`, требуют peer-зависимостей `@radix-ui/themes` и `@tanstack/react-query` и принимают `authToken`, а не `accessToken`.

## Установка

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

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

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

### Codex

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

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

### Cursor

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

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install workos/skills workos-widgets
```

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

### Gemini CLI

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

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

### Windsurf (Devin Desktop)

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

### OpenCode

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

### Claude.ai

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

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

## Когда брать
- встроить виджет управления пользователями в существующее React-приложение
- выдавать токен доступа к виджету через бэкенд- SDK на Node, Python или Go
- подключить Admin Portal для настройки SSO-соединения
- добавить проверку домена через Admin Portal
- разобраться, почему компонент из `@workos-inc/widgets` не рендерится без обёртки

## Примеры запросов агенту
- встрой виджет user-management в приложение на Next.js и настрой выдачу токена
- добавь Admin Portal SSO Connection на страницу настроек организации
- у меня SvelteKit — что делать с виджетами WorkOS?

## Похожие
- [makepad-2.0-widgets](https://affpapa.org/nevibecode/skills/makepad-20-widgets.md) — скилл · ★ 751
- [clerk-nextjs-patterns](https://affpapa.org/nevibecode/skills/clerk-nextjs-patterns.md) — скилл · 53400 установок
- [clerk-custom-ui](https://affpapa.org/nevibecode/skills/clerk-custom-ui.md) — скилл · 55200 установок
- [framework-to-capacitor](https://affpapa.org/nevibecode/skills/framework-to-capacitor.md) — скилл · 870 установок
- [vercel-flags](https://affpapa.org/nevibecode/skills/vercel-flags.md) — скилл · 4 установки
- [nextjs-supabase-auth](https://affpapa.org/nevibecode/skills/sickn33-nextjs-supabase-auth.md) — скилл · 6600 установок

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

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

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