Skip to content
Get packs

Guide · Agent skill

How to use the Browser Extension Developer agent skill

Updated · written with AI from the project's own documentation and checked against our catalogue data

The browser-extension-developer skill is a set of instructions that gives an AI agent the project context for the Repomix browser extension in the browser/ directory. It is built on the WXT framework with Manifest V3 and targets Chrome, Firefox and Edge. This guide explains what the skill does, how to install it, how to trigger it with natural requests, and what to watch for.

Browser Extension Developeryamadashy/repomix · MIT

Quick start

  1. 1Download the ZIP. Download the skill ZIP from this page.
  2. 2Unzip into a skills folder. Unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder.
  3. 3Or upload it in the Claude apps. In the Claude apps, go to Settings → Capabilities → Skills and upload the skill.
  4. 4Check out the Repomix repository. Make sure the Repomix repository is checked out locally and the browser/ directory is present.
  5. 5Install Node.js and npm. Make sure Node.js and npm are installed so the dev, build and lint commands can run.
  6. 6Ask for the work in plain language. Mention browser/ and the task, such as a content script change or a new translation.
  7. 7Verify with lint and tests. Ask the agent to run npm run lint and npm run test before finishing, then review the changes.

What does the browser-extension-developer skill make the agent do?

The skill describes the Repomix browser extension: a cross-browser extension that injects a "Repomix" button into GitHub repository pages. With the skill loaded, the agent knows the folder layout, the npm commands for development and builds, how the 12 translation languages are organised, and the cross-browser API caveats.

The skill is guidance only. It does not add features to Repomix or to the extension, and it does not change anything on its own. The agent uses the context to make changes without re-reading the whole project.

  • Knows the layout: entrypoints/ (background.ts, content.ts), public/_locales/ for i18n, wxt.config.ts and the .output/ build folder
  • Knows the commands: npm run dev, npm run dev:firefox, npm run build-all, npm run lint and npm run test
  • Knows the i18n rules for the 12 languages and the keys a new language needs
  • Knows the notes on chrome.* APIs and Firefox polyfills

Install the skill in Claude

Download the ZIP from this page. The skill is distributed as a folder containing SKILL.md. Unzip it into your personal skills folder ~/.claude/skills/, or into a project's .claude/skills/ folder if you want it available only for that project.

You can also upload the skill in the Claude apps under Settings → Capabilities → Skills.

  • Personal install: unzip into ~/.claude/skills/
  • Project install: unzip into the project's .claude/skills/ folder
  • Claude apps: Settings → Capabilities → Skills, then upload the skill
~/.claude/skills/

Check the requirements before you start

The skill references npm commands, so you need Node.js and npm installed. You also need the Repomix repository checked out locally, because the skill describes files inside its browser/ directory and the agent needs those files to work on.

The skill itself does not run scripts and does not use the network.

  • Node.js and npm
  • The Repomix repository checked out locally, with the browser/ directory present

How do you trigger the skill with natural requests?

You do not need a special command. Ask for work on the extension in plain language, and mention the browser/ directory or the topic. The skill's description covers Chrome, Firefox and Edge compatibility, content scripts, background scripts and i18n updates, so requests about those topics are the ones that should load it.

Be specific about the browser and the task. The more precise the request, the less the agent has to guess.

  • "In browser/, add a content script change that adds the Repomix button on a new GitHub page."
  • "Add Japanese-style translation keys for the new settings text under browser/public/_locales/."
  • "Check whether this background script uses chrome.* APIs that need a Firefox polyfill."
  • "Run the lint and tests for the browser extension and fix any failures."

What can you do with it? Examples

The skill fits contributors and maintainers who work inside the Repomix repository. Typical work includes changing the content script, updating the background script, fixing a Firefox-only issue, or adding a language.

To add a new language, the source says to create public/_locales/[code]/messages.json with the keys appDescription and openWithRepomix. The 12 existing languages are en, ja, de, fr, es, pt_BR, id, vi, ko, zh_CN, zh_TW and hi.

npm run dev:firefox

Safety notes: scripts and network

The skill does not run scripts and does not use the network. It is a text file of instructions. However, the commands it references (dev, build, lint and test) run code in your repository, and the agent may run them when you ask. Review what the agent runs, as you would for any command you run in your project.

Keep the skill in your own folder and check the SKILL.md contents before you install it.

  • No bundled scripts; the skill only contains SKILL.md
  • Commands it mentions run in your local repository, so review them
  • No network use is described in the skill

Tips for better results

Point the agent at the browser/ directory and name the browser you care about. Ask it to run npm run lint and npm run test before it finishes, since the skill notes say to do so.

For Firefox issues, say so directly. The skill notes that Firefox may need polyfills for chrome.* APIs, so the agent can check that first.

  • Name the browser: Chrome, Firefox or Edge
  • Ask for lint and tests before the task is marked done
  • Keep the browser/ folder checked out so the agent can read the real files

What people use it for

  • Adding or changing a content script that affects the Repomix button on GitHub repository pages
  • Fixing a background script issue or a chrome.* API difference that affects Firefox
  • Adding a new language by creating public/_locales/[code]/messages.json with the required keys
  • Updating existing translations across the 12 supported languages
  • Running the dev, Firefox dev and build-all commands to check changes in each browser

Frequently asked questions

How do I install the browser-extension-developer skill?

Download the ZIP from this page and unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. You can also upload it in the Claude apps under Settings → Capabilities → Skills.

What do I need to use this skill?

You need Node.js and npm, because the skill references the dev, build and lint commands. You also need the Repomix repository checked out locally so the agent can read the browser/ directory.

Is the browser-extension-developer skill free?

The skill is published under the MIT licence. This page does not list a price, so check the licence text and the page itself for any terms.

Does the skill run scripts or use the internet?

No. The skill includes only SKILL.md and is described as not running scripts and not using the network. The npm commands it mentions run locally in your repository when you or the agent run them.

Which browsers does the extension support?

The source describes a cross-browser extension for Chrome, Firefox and Edge built with WXT and Manifest V3. Firefox may need polyfills for chrome.* APIs, according to the skill notes.

Can I use this skill for an unrelated browser extension?

Not really. The instructions are specific to the Repomix repository and its WXT setup in the browser/ directory, so for other extensions you should look for a skill or guidance written for that project.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

This skill is useful for contributors and maintainers who work on the Repomix browser extension in the browser/ directory, especially for adding languages or handling Chrome versus Firefox differences. It adds no features of its own, so it only helps if you have the Repomix repository checked out and Node.js installed. If you are building a different browser extension, pick guidance written for your own project instead.

Download the skill