SkillFoxx
Telegram

Browser Extension Skills

Двенадцать скиллов для расширений Chrome: каркас на WXT или CRXJS, манифест, аудит, тесты, иконки, публикация

  • 65 ★ репозитория
  • Последний коммит
Скилл

Минимальный доступ

Почему такой уровень

  • Скиллы дают инструкции по сборке, проверке и публикации расширения и сами ничего не отправляют
  • Скилл публикации и платежей работает с ключами и аккаунтом магазина, поэтому отправку и ключи подтверждаете вы
Все причины и проверки

quangpl/browser-extension-skillsАвтор:quangpl

Установка

В терминале, через SkillFoxx CLI

npx skillfoxx add skills/browser-extension-skills

Определит агенты на машине, покажет уровень доступа и зафиксирует версию.

Другие способы установки

Доступ и проверки

Как мы проверяем

Минимальный доступИнструмент ничего не запускает и не ходит в сеть.

  • Скиллы дают инструкции по сборке, проверке и публикации расширения и сами ничего не отправляют
  • Скилл публикации и платежей работает с ключами и аккаунтом магазина, поэтому отправку и ключи подтверждаете вы

Это чужой код. Посмотрите файлы в репозитории перед установкой.

Что делает

Browser Extension Skills — набор из двенадцати скиллов, который делает из агента помощника по разработке расширений для Chrome и других браузеров. `extension-create` собирает проект на WXT или create-crxjs в зависимости от выбранного фреймворка, `extension-dev` пишет функции с учетом API и определяет фреймворк, `extension-manifest` генерирует `manifest.json` с минимальными разрешениями или проверяет автоманифест CRXJS. Качество закрывают `extension-analyze` и `extension-review`: аудит безопасности, лучшие практики и причины отклонения в Chrome Web Store с отчетом о правках. `extension-test` пишет модульные, интеграционные и сквозные тесты на Puppeteer, `extension-assets` делает иконки 16, 32, 48 и 128 пикселей и снимки для листинга, `extension-ui` шлифует всплывающее окно, боковую панель и страницу настроек. Для продукта есть `extension-payment` с платежами через Stripe, Paddle, Lemon Squeezy, Polar и другие, `extension-backend` с API на NestJS и MongoDB, `extension-publish` с отправкой в Chrome Web Store и CI/CD и `extension-migration` для перехода с Manifest V2 на V3. Ставится командой `npx skills add quangpl/browser-extension-skills`.

Для кого. Разработчикам расширений для Chrome, которые строят и выпускают расширение вместе с агентом и хотят пройти проверку магазина с первого раза.

Подходит, если

  • Новое расширение стартует с нуля, и каркас на WXT или CRXJS должен собраться за минуты
  • Перед отправкой в Chrome Web Store нужен аудит безопасности и список причин возможного отказа
  • Старое расширение на Manifest V2 надо перевести на V3 по шагам
  • К расширению нужно подключить подписки и лицензии через Stripe или Paddle и свой бэкенд

Не подходит, если

  • Вы делаете расширение для Safari через Xcode: скиллы нацелены на Chrome и совместимые браузеры
  • Нужен готовый продукт: скиллы управляют агентом и ничего не публикуют сами
  • Проект не использует JavaScript или TypeScript для расширения

Пример запроса к агенту

Создай расширение Chrome, которое подсвечивает все ссылки на странице, выбери WXT и подготовь манифест с минимальными разрешениями

Ограничения

  • Скиллы ведут Chrome и совместимые браузеры, а в README есть ссылка на премиальную версию набора с шаблонами и приоритетной поддержкой; бесплатная часть остается самостоятельной.
  • Набор спонсирует сервис Extension Booster, о чем в самом документе сказано прямо.
  • `extension-payment` описывает интеграции, но ключи платежных систем и реальные платежи остаются вашей ответственностью.
  • Агент выполняет проверки и шаги публикации по инструкции скилла, а отправку в Chrome Web Store подтверждаете вы.

Как отключить. Скиллы удаляют из `.claude/skills/` проекта или из `~/.claude/skills/`, либо командой менеджера скиллов, который их ставил.

Частые вопросы

Как поставить Browser Extension Skills?

Выполните `npx skills add quangpl/browser-extension-skills` для проекта или добавьте `-g` для всех проектов. Отдельные скиллы выбирают флагом `-s extension-create,extension-dev`.

Какие агенты поддерживаются?

Claude Code загружает скиллы напрямую. Cursor, Windsurf, Aider, Continue, Roo Code и другие подключаются через собственные каталоги правил и конфигурации, как указано в таблице README.

Что делает extension-create?

Собирает каркас проекта: спрашивает, какой фреймворк вам нужен, выбирает WXT или create-crxjs, создает точки входа и настраивает манифест.

Можно ли использовать набор для платных расширений?

Да, `extension-payment` описывает интеграции с Stripe, Paddle, Lemon Squeezy, Polar и еще десятью системами, а `extension-backend` дает API лицензий и вебхуков на NestJS.

Как проверить расширение перед публикацией?

Вызовите `extension-review` или `extension-analyze`: они ищут причины отказа магазина и уязвимости и выдают отчет с исправлениями.

Обсуждение

Вопросов и отзывов пока нет.

Скиллы
Официальный

Скиллы команды Chrome: агент ищет актуальные приемы веб-платформы вместо устаревшего кода, плюс скилл по расширениям Chrome и публикации в Web Store

СкиллРасширенный доступ6,7 тыс.

145 плагинов-скиллов для Claude Code и Codex: Cloudflare, React, Tailwind, Nuxt, API, безопасность, тесты, ставятся по одному

ПлагинРасширенный доступ248

Плагин из 30 скиллов по Vue, Nuxt и NuxtHub для Claude Code, Codex, Cursor и Copilot с подключением MCP-сервера Nuxt

ПлагинМинимальный доступ723

Сборник из 31 скилла для Claude Code и других агентов: интерфейсы, React, Postgres, код-ревью, SEO и браузерная автоматизация

СкиллРасширенный доступ219

Авторские скиллы под Angular, React, Next.js, TypeScript и Django плюс шесть общинных для Java, Elixir и Electron

СкиллМинимальный доступ668

Восемь скиллов для 3D и анимированных сайтов: сцены three.js из кода, скролл-фильмы, прозрачное видео, разбор машин на детали

СкиллРасширенный доступ353

Коротко о README

README перечисляет двенадцать скиллов с условиями применения, показывает установку через `npx skills add` и вручную, дает быстрый старт по шагам: создание, разработка, ресурсы, анализ, и таблицу совместимых агентов.

Бейдж для README

Исходный SKILL.md

---
name: extension-create
description: "Auto-scaffold Chrome extensions with WXT or CRXJS. Ask user for name/features, scaffold, configure entrypoints. Use when: create extension, scaffold, new extension."
---

# Extension Create (WXT & CRXJS)

> **🚀 Upgrade to Premium**
> Get the Premium version at [https://app.extensionbooster.net/dashboard/services/extension-ai-kit](https://app.extensionbooster.net/dashboard/services/extension-ai-kit)


## Workflow (Execute This)

### Step 1: Gather requirements from user

Ask the user to confirm:

1. **Extension name** (kebab-case, e.g. `my-tab-manager`)
2. **Short description** (1 sentence)
3. **UI framework**: React / Vue / Svelte / Vanilla (default: React)
4. **Features needed** (pick from list below):
   - Popup UI
   - Content script (modify pages)
   - Background service worker
   - Side panel
   - Options page
   - Context menu
   - Tab management / Storage / Active tab only

### Step 2: Pick scaffolder based on framework choice

| Framework  | Recommended Scaffolder | Why                         |
| ---------- | ---------------------- | --------------------------- |
| React      | **CRXJS** or WXT       | CRXJS has CSUI, quickstarts |
| Vue        | **WXT**                | First-class Vue support     |
| Svelte     | **WXT**                | First-class Svelte support  |
| Vanilla TS | **WXT**                | Lightest setup              |

### Step 3: Scaffold

**WXT** — multi-framework, file-based entrypoints:

```bash
npx wxt@latest init <name> --template <react|vue|svelte|vanilla>

Сообщить о проблеме