wxt

$npx mdskill add EpicenterHQ/epicenter/wxt

Manages WXT browser extension patterns for service workers, scripts, and build commands

  • Solves setup and configuration for browser extension development
  • Relies on WXT framework, service workers, and content scripts
  • Uses entrypoints and manifest definitions to determine extension behavior
  • Delivers structured output for extension build and runtime execution

SKILL.md

.github/skills/wxtView on GitHub ↗
---
name: wxt
description: WXT browser extension patterns for entrypoints, background service workers, content scripts, side panels, storage, permissions, host permissions, browser compatibility, and build commands. Use when editing apps/tab-manager, wxt.config.ts, src/entrypoints, extension manifests, or @wxt-dev/storage usage.
metadata:
  author: epicenter
  version: '1.0'
---

# WXT Browser Extensions

## Reference Repositories

- [WXT](https://github.com/wxt-dev/wxt) - Browser extension framework used by `apps/tab-manager`

## Upstream Grounding

When WXT entrypoint discovery, manifest generation, browser targets, storage, content scripts, background service worker lifecycle, or build output affects correctness, ask DeepWiki a narrow question against `wxt-dev/wxt`. Verify decisive details against local `wxt.config.ts` and generated output.

## Epicenter Shape

`apps/tab-manager` is side-panel first: no popup and no content scripts today. The background service worker is minimal and opens the side panel from the extension action.

## Entrypoints

- Entrypoints live under `src/entrypoints`, zero or one level deep.
- Use `defineBackground` for background service workers and `defineContentScript` for content scripts.
- Put browser API runtime work inside the entrypoint `main` function because WXT imports entrypoint modules during build in Node.
- Do not make background `main` async. Kick off async setup inside it.
- Use browser flags and feature detection for cross-browser APIs, not types alone.

## Manifest, Storage, And Commands

- Declare `permissions` and `host_permissions` explicitly in `wxt.config.ts`.
- Use `@wxt-dev/storage` with area-prefixed keys and include the `storage` permission.
- Keep host permissions as narrow as the feature allows. Use `<all_urls>` only when the extension genuinely needs all tab URLs or favicons.
- Local scripts are WXT commands: `wxt prepare`, `wxt build`, `wxt zip`, and browser flags such as `-b firefox`.
- From the repo root, prefer the existing Bun scripts for the Tab Manager app instead of calling package-manager alternatives.

More from EpicenterHQ/epicenter

SkillDescription
agent-goalWrite `/goal` prompts for long-running agent work in Codex or Claude Code. Use for slash goal, agent goal, durable objective, autonomous coding run.
approachability-auditReview code as a new TypeScript developer. Use when code feels indirect, clever, hard to follow, or needs a pass on abstractions, names, first-read clarity.
arktypeArktype: runtime validation, discriminated unions with .merge()/.or(), spread keys. Use when mentioning arktype, type(), union types, command/event schemas.
attach-primitiveContract and invariants for `attach*` composition primitives in `packages/workspace` (side-effectful building blocks like attachIndexedDb, attachSqlite, attachBroadcastChannel, attachEncryption, attachTable, openCollaboration), and when to use `create*` (pure construction) instead. Use when writing or reviewing an `attach*` or `create*` function, naming a new workspace primitive, composing inside a workspace builder, or deciding whether a primitive registers listeners at call time.
authEpicenter auth packages: `@epicenter/auth`, `@epicenter/auth-svelte`, OAuth sessions, identity state, auth-owned fetch/WebSocket, and workspace lifecycle binding. Use when editing Epicenter auth clients, session state, hosted sign-in, or auth/workspace integration.
autumnAutumn billing in Epicenter: `autumn.config.ts`, `autumn-js` credit checks, `atmn` CLI, plan gates, and metered AI usage. Use when changing billing, pricing, credits, plan access, refunds, or usage events.
better-auth-best-practicesBetter Auth server/client setup: `auth.ts`, generated schema, DB adapters, sessions, cookies, env vars, and plugins. Use when mentioning Better Auth, betterauth, auth handlers, OAuth, email/password, or session configuration.
better-auth-security-best-practicesBetter Auth security hardening: rate limits, secrets, CSRF, trusted origins, cookies, sessions, OAuth tokens, and audit logging. Use when reviewing auth security, brute-force protection, token handling, or deployment safety.
change-proposalPresent proposed code changes visually before implementing. Use when: "show me options", "compare approaches", "what should we do", or when changes need before/after comparison.
claude-code-consultUse this skill when the user asks to consult Claude, ask Claude Code, get another model's take, run a taste check, find cleaner options, or prepare a Claude prompt. Create a bounded second-opinion prompt or run a read-only Claude Code consult, then verify Claude's claims against local files.