Agent skill

Browser Extension

by xenitV1 in xenitV1/claude-code-maestro

Master specialized skill for building 2025/2026-grade browser extensions.

MITAuto-check: notesDevelopment

Install Browser Extension

skills CLI
$ npx skills add xenitV1/claude-code-maestro --skill browser-extension -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install xenitV1/claude-code-maestro browser-extension --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/xenitV1/claude-code-maestro.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/browser-extension .claude/skills/browser-extension && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
browser-extension
GitHub stars
229
Token cost
~1.2k tokens
SKILL.md length
484 words
Files
4 (incl. scripts)
Skills in repo
13
Repo updated
First seen
Licence
MIT

At a glance

Master specialized skill for building 2025/2026-grade browser extensions.

  • Works in 2 steps: Manifest Blueprint → Side Panel Supremacy
  • Tasks that involve Browser extensions
  • SKILL.md covers 🏗️ PROTOCOL 1: THE MANIFEST…, ⚡ PROTOCOL 2: THE PERSISTENCE…, 🔐 PROTOCOL 3: THE SECURITY… and 🎨 PROTOCOL 4: DESIGN & UI/UX…, plus 2 more sections
  • Runs JavaScript scripts from its folder; calls node and playwright

What it does

Browser Extension is an agent skill from xenitV1/claude-code-maestro. Master specialized skill for building 2025/2026-grade browser extensions. Deep expertise in Manifest v3, Service Worker persistence (Alarms, Offscreen API), Side Panel API, and Cross-Browser compatibility.

Its SKILL.md is about 1.2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 5 other files, including scripts (for example `scripts/js/asset-master.js`, `scripts/js/manifest-auditor.js` and `scripts/js/persistence-check.js`).

It sits in Development, covering Browser extensions. It works with Chrome Extensions. The licence is MIT.

When your agent uses it

  • Tasks that involve Browser extensions

Example prompts

  • “/browser-extension”

Requirements

  • Node.js
  • Pre-approved tools (allowed-tools): Read, Write, Edit, Glob, Grep, Bash

Workflow steps

2 steps, taken from the first numbered list in SKILL.md.

  1. Manifest Blueprint
  2. Side Panel Supremacy

What it can do on your machine

Read from SKILL.md and the folder at commit 924315b. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Read
    • Write
    • Edit
    • Glob
    • Grep
    • Bash

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 3 files in scripts/ (JavaScript), which the agent can run.

    Shell commands in SKILL.md call:

    • node
    • playwright

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Browser Extension loads about 1.2k tokens when it runs. Until then it costs about 56 tokens; SKILL.md has 484 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~56
When it runs · the whole SKILL.md, loaded when a task matches
~1.2k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check: notes

The automated check noted patterns worth knowing about, such as sudo or a known installer.

  • NotePre-approves every shell command (allowed-tools: Bash)SKILL.md
    allowed-tools: Read, Write, Edit, Glob, Grep, Bash

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from xenitV1/claude-code-maestro at commit 924315b, republished under its MIT licence (© xenitV1). 484 words, ~1,173 tokens.

Download SKILL.mdSave it as .claude/skills/browser-extension/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.
name
browser-extension
description
Master specialized skill for building 2025/2026-grade browser extensions. Deep expertise in Manifest v3, Service Worker persistence (Alarms, Offscreen API), Side Panel API, and Cross-Browser compatibility.
allowed-tools
Read, Write, Edit, Glob, Grep, Bash

<domain_overview>

🌐 BROWSER EXTENSION: THE 2026 MASTERCLASS

Philosophy: Extensions are ephemeral, restricted, yet powerful. Persistence is an Art. Security is a Mandate. Design Constraint: For UI/UX, Aesthetics, and Layout, YOU MUST REFER TO THE frontend-design SKILL. PERSISTENCE PARADOX GUARD (CRITICAL): Never rely on global variables or in-memory state in background scripts. AI-generated code frequently fails by assuming Manifest V3 service workers are persistent. They are NOT; they terminate after 30 seconds of inactivity. You MUST backup every piece of state to chrome.storage or IndexedDB immediately upon change. This skill aims to eliminate "volatile-state" bugs typical of generic AI implementations. If data is not in durable storage, it does not exist. </domain_overview> <manifest_architecture>

🏗️ PROTOCOL 1: THE MANIFEST V3 CONSTITUTION

All extensions must be built on Manifest v3. No exceptions.

  1. Manifest Blueprint:
    • Service Workers: No persistent background pages. Use "background": { "service_worker": "background.js" }.
    • No Remote Code: All scripts must be local. unsafe-eval is forbidden.
    • Permissions: Principle of Least Privilege. Use optional_permissions where possible.
    • Action UI: Prefer action over browser_action or page_action.
  2. Side Panel Supremacy:
    • Requirement: Use chrome.sidePanel for persistent, non-intrusive experiences.
    • API: chrome.sidePanel.setOptions({ path: 'sidepanel.html', enabled: true }). </manifest_architecture> <persistence_engine>

⚡ PROTOCOL 2: THE PERSISTENCE ENGINE (ANTI-TERMINATION)

Service Workers sleep. You must keep the logic alive.

  1. The Alarm Pulse:
    • Use chrome.alarms to wake up the Service Worker every 1-5 minutes for background sync.
  2. The Offscreen Document (When needed):
    • Use the offscreen API for tasks like DOM parsing, heavy calculations, or keeping the SW alive via periodic messaging.
  3. State Management Protocol:
    • NEVER rely on global variables.
    • Mandatory: Use chrome.storage.session for transient session-only secrets.
    • Mandatory: Use IndexedDB or chrome.storage.local for large datasets and persistent user data. </persistence_engine> <security_fortress>
Show full SKILL.md (209 more words)Show less

🔐 PROTOCOL 3: THE SECURITY FORTRESS

  1. Context Bridge Safety:
    • Content Scripts are "Hostile Territory". Always sanitize data passed to the Service Worker via chrome.runtime.sendMessage.
  2. Declarative Net Request:
    • Use declarativeNetRequest for blocking/modifying headers. Only use webRequest as a fallback for Firefox if dynamic rules are critical. </security_fortress> <design_integration>

🎨 PROTOCOL 4: DESIGN & UI/UX (INTEGRATED)

Direct Instruction: You are an extension developer, not a designer. You must outsource the "Soul" of the UI.

  1. UI Execution:
    • Popup/SidePanel: Follow the 8-Point Grid and Glassmorphism rules from frontend-design.
    • Component Atomization: Use Atomic Design 2.0 principles.
    • Friction: Ensure the popup interaction is < 400ms (Doherty Threshold). </design_integration> <audit_and_reference>

🛠️ PROTOCOL 5: SCRIPT ENFORCEMENT (THE SENTINEL)

Every extension build MUST pass the high-tier audit suite.

  1. manifest-auditor.js:
    • Rule: MV3 compliance and CSP safety. No broad permissions.
  2. persistence-check.js:
    • Rule: Service Worker "Heartbeat" verification and State integrity.
  3. asset-master.js:
    • Rule: Icon dimensional audit and asset optimization.

📂 COGNITIVE AUDIT CYCLE

  1. Run node scripts/js/manifest-auditor.js -> Clean?
  2. Run node scripts/js/persistence-check.js -> Heartbeat detected?
  3. Run node scripts/js/asset-master.js -> Assets optimized?
  4. MANDATORY: Run playwright test -> All paths pass?
  5. Is it Manifest v3 compliant?
  6. Does the Service Worker handle termination gracefully (State stored)?
  7. Are permissions minimized?
  8. Is the UI justified by a "Narrative-First" screenplay from frontend-design?

Link: frontend-design </audit_and_reference>

© xenitV1, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 3 other files (scripts) in skills/browser-extension of xenitV1/claude-code-maestro.

  • SKILL.md
  • scripts/js/asset-master.js
  • scripts/js/manifest-auditor.js
  • scripts/js/persistence-check.js

Open the folder on GitHubat commit 924315b

Compare with similar skills

Browser Extension next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Browser Extension compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Browser Extension this skillxenitV1/claude-code-maestro229—~1.2kAutomated safety check: NotesMIT
Wxt Browser Extensionsvantezzen/skip-silence4682 repos~1.9kAutomated safety check: PassMIT
Kimi WebbridgeMoonshotAI/kimi-code7.8k—~3.6kAutomated safety check: PassMIT
Repomix Browser Extension Developeryamadashy/repomix29k1 repos~288Automated safety check: PassMIT
Deepseek Automationzhu1090093659/deepseek-pp1.9k—~2.1kAutomated safety check: NotesApache-2.0
Live Extension UI Automationqixing-jk/all-api-hub4.9k—~2.6kAutomated safety check: PassAGPL-3.0

Similar skills

  • Wxt Browser Extensions

    vantezzen/skip-silence

    WXT browser extension performance optimization guidelines. An agent skill from vantezzen/skip-silence.

    468 GitHub starsUsed in 2 repos~1.9k tokens
    DevelopmentAuto-check passed
  • Kimi Webbridge

    MoonshotAI/kimi-code

    Kimi Browser Extension(Kimi 浏览器扩展,原 Kimi WebBridge)lets AI control the user's real browser — navigate, click, type, read, screenshot, and interact with any website using the user's actual login…

    7.8k GitHub stars~3.6k tokensUpdated yesterday
    DevelopmentAuto-check passed
  • Use this skill when developing or maintaining browser extension code in the `browser/` directory, including Chrome/Firefox/Edge compatibility, content…

    29k GitHub starsUsed in 1 repo~288 tokens
    DevelopmentAuto-check passed
  • Deepseek Automation

    zhu1090093659/deepseek-pp

    A skill your agent uses when implementing, resuming, reviewing, or verifying the DeepSeek++ Codex-style automation feature in this repository.

    1.9k GitHub stars~2.1k tokensUpdated 1 mo ago
    DevelopmentAuto-check: notes
  • Live Extension UI Automation

    qixing-jk/all-api-hub

    Control, debug, and test the live dev browser extension UI (Options, Popup, Sidepanel) via CDP with persistent login states and accounts.

    4.9k GitHub stars~2.6k tokensUpdated yesterday
    DevelopmentAuto-check passed
  • Cuts a new Knockoff release by bumping the version, rolling release notes, tagging and shipping to the Chrome, Firefox and Apple stores with a per-store report.

    1.9k GitHub stars~1.2k tokensUpdated 1 mo ago
    DevelopmentAuto-check: notes

More from xenitV1/claude-code-maestro

All 13 skills in this repo
  • Ralph Wiggum

    xenitV1/claude-code-maestro

    Surgical Debugger & Code Optimizer. An agent skill from xenitV1/claude-code-maestro.

    229 GitHub starsUsed in 1 repo~795 tokens
    Auto-check: notes
  • Maestro

    xenitV1/claude-code-maestro

    A skill your agent uses when you need to act as an Elite Software Architect (Maestro) to manage complex repositories.

    229 GitHub starsUsed in 1 repo~1.1k tokens
    Auto-check passed
  • Clean Code

    xenitV1/claude-code-maestro

    The Foundation Skill. An agent skill from xenitV1/claude-code-maestro.

    229 GitHub stars~1.5k tokensUpdated 8 mo ago
    Auto-check passed
  • Backend Design

    xenitV1/claude-code-maestro

    Elite Tier Backend standards, including Vertical Slice Architecture, Zero Trust Security, and High-Performance API protocols.

    229 GitHub stars~2.1k tokensUpdated 8 mo ago
    Auto-check: notes
  • Brainstorming

    xenitV1/claude-code-maestro

    Design-first methodology. An agent skill from xenitV1/claude-code-maestro.

    229 GitHub stars~2k tokensUpdated 8 mo ago
    Auto-check passed
  • Debug Mastery

    xenitV1/claude-code-maestro

    Systematic debugging methodology with 4-phase process, root cause tracing, and elite observability standards.

    229 GitHub stars~2.5k tokensUpdated 8 mo ago
    Auto-check: notes

Categories

Questions about Browser Extension

What does Browser Extension do?

Master specialized skill for building 2025/2026-grade browser extensions. Browser Extension is an agent skill from xenitV1/claude-code-maestro. Master specialized skill for building 2025/2026-grade browser extensions.

When should I use Browser Extension?

Browser Extension fits situations like: tasks that involve Browser extensions.

How do I install Browser Extension in Claude Code?

Run `npx skills add xenitV1/claude-code-maestro --skill browser-extension -a claude-code`. Or copy the skill folder (skills/browser-extension in xenitV1/claude-code-maestro) into .claude/skills/browser-extension in your project. Claude Code loads it when a task matches its description.

How do I install Browser Extension in Codex?

Run `npx skills add xenitV1/claude-code-maestro --skill browser-extension -a codex`. Or copy the skill folder (skills/browser-extension in xenitV1/claude-code-maestro) into .agents/skills/browser-extension in your project. Codex loads it when a task matches its description.

Can I use Browser Extension in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add xenitV1/claude-code-maestro --skill browser-extension -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/browser-extension, .gemini/skills/browser-extension, .github/skills/browser-extension and .opencode/skills/browser-extension in your project.

What does Browser Extension need to run?

Going by SKILL.md and its folder, Browser Extension needs JavaScript for the scripts in its folder and the command-line tools its instructions call (node and playwright). Our summary lists: Node.js. Its frontmatter pre-approves these tools: Read, Write, Edit, Glob, Grep, Bash.

Does Browser Extension access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Browser Extension safe to install?

Our automated static check of SKILL.md found notes only (pre-approves every shell command (allowed-tools: bash)), nothing it rates as a warning. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Browser Extension use?

Browser Extension is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Browser Extension use?

About 1.2k tokens (SKILL.md is roughly 4.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Browser Extension?

Skills that share tags, products or a category with Browser Extension: Wxt Browser Extensions (vantezzen/skip-silence, 468 stars), Kimi Webbridge (MoonshotAI/kimi-code, 7.8k stars), Repomix Browser Extension Developer (yamadashy/repomix, 29k stars) and Deepseek Automation (zhu1090093659/deepseek-pp, 1.9k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Browser Extension?

xenitV1 (a GitHub user) maintains it in xenitV1/claude-code-maestro, which has 229 GitHub stars. The repository holds 13 skills in this directory. The repository was last updated on January 24, 2026.

Source: xenitV1/claude-code-maestro on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.