SkillFoxx

Browser Extension Skills

Twelve skills for Chrome extensions: WXT or CRXJS scaffolding, manifest, security review, tests, icons and publishing

  • 65 ★ on the repository
  • Last commit
  • MIT
Skill

Minimal access

Why this level

  • The skills give instructions for building, checking and publishing an extension and send nothing themselves
  • The publishing and payment skills deal with keys and a store account, so you confirm submission and keys
All reasons and checks

quangpl/browser-extension-skillsAuthor:quangpl

Install

In your terminal, with SkillFoxx CLI

npx skillfoxx add skills/browser-extension-skills

Detects the agents on your machine, shows the access level and pins the version.

Other ways to install

Access and checks

How we review

Minimal accessThe tool runs nothing and makes no network calls.

  • The skills give instructions for building, checking and publishing an extension and send nothing themselves
  • The publishing and payment skills deal with keys and a store account, so you confirm submission and keys

This is third-party code. Review the repository files before installing.

What it does

Browser Extension Skills is a set of twelve skills that turns an agent into an assistant for Chrome and other browser extensions. `extension-create` scaffolds a project with WXT or create-crxjs depending on the framework you pick, `extension-dev` writes features with proper API use and framework detection, and `extension-manifest` generates `manifest.json` with minimum permissions or validates a CRXJS auto-manifest. Quality is covered by `extension-analyze` and `extension-review`: a security audit, best practices and Chrome Web Store rejection checks with a report of fixes. `extension-test` writes unit, integration and end-to-end tests on Puppeteer, `extension-assets` makes 16, 32, 48 and 128 pixel icons and store listing images and `extension-ui` polishes the popup, side panel and options page. For a product there are `extension-payment` for payments through Stripe, Paddle, Lemon Squeezy, Polar and others, `extension-backend` for NestJS and MongoDB APIs, `extension-publish` for Chrome Web Store submission and CI/CD and `extension-migration` for moving from Manifest V2 to V3. Install with `npx skills add quangpl/browser-extension-skills`.

Who it is for. Chrome extension developers who build and ship an extension with an agent and want to pass store review the first time.

Good fit when

  • A new extension starts from zero and a WXT or CRXJS scaffold has to be built in minutes
  • Before sending to the Chrome Web Store you need a security audit and a list of likely rejection reasons
  • An old Manifest V2 extension has to be migrated to V3 step by step
  • The extension needs subscriptions and licensing through Stripe or Paddle and your own backend

Not a fit when

  • You build a Safari extension through Xcode: the skills target Chrome and compatible browsers
  • You need a finished product: the skills steer the agent and publish nothing by themselves
  • The project does not use JavaScript or TypeScript for the extension

Example request

Create a Chrome extension that highlights all links on a page, pick WXT and prepare a manifest with minimum permissions

Limitations

  • The skills target Chrome and compatible browsers, and the README links a premium edition with templates and priority support; the free part stands on its own.
  • The kit is sponsored by Extension Booster, which the README states openly.
  • `extension-payment` describes integrations, but payment-provider keys and real payments remain your responsibility.
  • The agent runs checks and publishing steps from the skill instructions, and you confirm the Chrome Web Store submission.

How to disable. Delete the skills from the project `.claude/skills/` or from `~/.claude/skills/`, or with the skills manager that installed them.

FAQ

How do I install Browser Extension Skills?

Run `npx skills add quangpl/browser-extension-skills` for a project or add `-g` for all projects. Pick single skills with `-s extension-create,extension-dev`.

Which agents are supported?

Claude Code loads the skills natively. Cursor, Windsurf, Aider, Continue, Roo Code and others use their own rules folders and config, as the README table shows.

What does extension-create do?

It scaffolds the project: asks which framework you want, picks WXT or create-crxjs, sets up entrypoints and configures the manifest.

Can I use it for paid extensions?

Yes, `extension-payment` covers Stripe, Paddle, Lemon Squeezy, Polar and ten more systems, and `extension-backend` provides license and webhook APIs on NestJS.

How do I check an extension before publishing?

Call `extension-review` or `extension-analyze`: they look for store rejection reasons and vulnerabilities and return a report with fixes.

Discussion

No questions or reviews yet.

Skills
Official

Chrome team skills: the agent looks up current web platform patterns instead of legacy code, plus a skill for Chrome extensions and Web Store publishing

SkillExtended access6.7K

145 skill plugins for Claude Code and Codex: Cloudflare, React, Tailwind, Nuxt, APIs, security, testing, installed one by one

PluginExtended access248

A plugin of 30 skills for Vue, Nuxt and NuxtHub for Claude Code, Codex, Cursor and Copilot, with the Nuxt MCP server attached

PluginMinimal access723

A collection of 31 skills for Claude Code and other agents: interfaces, React, Postgres, code review, SEO and browser automation

SkillExtended access219

Hand-built skills for Angular, React, Next.js, TypeScript and Django plus six community ones for Java, Elixir and Electron

SkillMinimal access668

Eight skills for 3D and animated websites: three.js scenes from code, scroll films, transparent video, exploded machine views

SkillExtended access353

README in short

The README lists twelve skills with usage conditions, shows installation through `npx skills add` and by hand, and gives a step-by-step quick start covering create, develop, assets and analysis, plus a table of compatible agents.

README badge

Original 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>

Report a problem