wxt
$
npx mdskill add EpicenterHQ/epicenter/wxtManages 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
- 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.