# chrome-extension-ui

Набор правил по интерфейсу расширений Chrome: где ставить popup, где side panel, как сделать доступную навигацию и понятные состояния загрузки.

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

## Что делает

Скилл содержит 42 правила в 8 категориях, отсортированные по влиянию на результат. Первые две категории — выбор компонента и доступность — помечены как критические, дальше идут popup, side panel, UI внутри content script, визуальная обратная связь, страница настроек и иконки. У каждого правила есть отдельный файл в `references/` с разбором и примерами кода.

Правила сгруппированы по префиксам: `comp-` про выбор между popup, side panel и content script, `access-` про клавиатуру, фокус, ARIA и контраст, `popup-`, `panel-`, `inject-`, `feedback-`, `options-`, `brand-`. Внутри есть и вещи, о которые легко споткнуться на практике: ограничения по размеру popup, изоляция стилей через Shadow DOM, максимальный `z-index` для оверлеев, очистка вставленных элементов при удалении.

Скилл рассчитан на Manifest V3 и API Chrome. Ставится одной командой через `npx skills add` — репозиторий `pproenca/dot-skills`, лицензия MIT. Если вы делаете расширение впервые, начинайте с категорий `comp-` и `access-`: они помечены как критические, и переделывать потом дороже.

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

## Установка

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

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

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

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add pproenca/dot-skills --skill chrome-extension-ui -a codex
```

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

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add pproenca/dot-skills --skill chrome-extension-ui -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install pproenca/dot-skills chrome-extension-ui
```

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

### Gemini CLI

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

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

### Windsurf (Devin Desktop)

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

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add pproenca/dot-skills --skill chrome-extension-ui -a opencode
```

### Claude.ai

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

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

## Когда брать
- выбрать между popup, side panel и content script под конкретную задачу
- сделать интерфейс расширения проходимым с клавиатуры
- уложить содержимое popup в допустимые размеры
- изолировать стили вставленного виджета от стилей страницы
- показать загрузку и ошибку при асинхронных вызовах API Chrome

## Примеры запросов агенту
- Помоги спроектировать UI расширения: нужен постоянный список задач, popup или side panel?
- Проверь мой popup на доступность: фокус, ARIA-метки, контраст
- Сделай вставку виджета на страницу через Shadow DOM и убери его при удалении

## Похожие
- [chrome-extension](https://affpapa.org/nevibecode/skills/chrome-extension.md) — скилл · 4500 установок
- [chrome-extension-development](https://affpapa.org/nevibecode/skills/chrome-extension-development.md) — скилл · 2800 установок
- [chrome-extension-dev-js-typescript-cursorrules-pro](https://affpapa.org/nevibecode/rules/chrome-extension-dev-js-typescript-cursorrules-pro.md) — правило · ★ 41011
- [chrome-extensions](https://affpapa.org/nevibecode/skills/chrome-extensions.md) — скилл · 10900 установок
- [browser-extension-builder](https://affpapa.org/nevibecode/skills/sickn33-browser-extension-builder.md) — скилл · 2000 установок
- [clerk-chrome-extension-patterns](https://affpapa.org/nevibecode/skills/clerk-chrome-extension-patterns.md) — скилл · 14400 установок

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

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

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