wxt-browser-extensions

WXT browser extension performance optimization guidelines. This skill should be used when writing, reviewing, or refactoring WXT browser extension code to ensure optimal performance patterns. Triggers on tasks involving WXT, browser extensions, content scripts, service workers, messaging, and extension APIs.

1,080
installs: 0 up / 0 down, score 0.00
votes: 218
repo stars
Updated: 2 months ago
In the catalog since: 6 Oct 2026
From: pproenca/dot-skills

Get it through your agent npx skills add pproenca/dot-skills@wxt-browser-extensions

Skill instructions

Rendered from the published SKILL.md, 116 lines.

Community WXT Browser Extensions Best Practices

Comprehensive performance optimization guide for WXT browser extension development. Contains 49 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation. Updated for WXT v0.20+.

When to Apply

Reference these guidelines when:

Writing new WXT browser extension code
Implementing service worker background scripts
Injecting content scripts into web pages
Setting up messaging between extension contexts
Configuring manifest permissions and resources

Rule Categories by Priority

Priority	Category	Impact	Prefix
1	Service Worker Lifecycle	CRITICAL	`svc-`
2	Content Script Injection	CRITICAL	`inject-`
3	Messaging Architecture	HIGH	`msg-`
4	Storage Patterns	HIGH	`store-`
5	Bundle Optimization	MEDIUM-HIGH	`bundle-`
6	Manifest Configuration	MEDIUM	`manifest-`
7	UI Performance	MEDIUM	`ui-`
8	TypeScript Patterns	LOW-MEDIUM	`ts-`

Quick Reference

1. Service Worker Lifecycle (CRITICAL)

svc-register-listeners-synchronously - Register listeners synchronously to prevent missed events
svc-avoid-global-state - Use storage instead of in-memory state
svc-keep-alive-patterns - Keep service worker alive for long operations
svc-handle-install-update - Handle install and update lifecycle events
svc-offscreen-documents - Use offscreen documents for DOM operations
svc-declarative-net-request - Use declarative rules for network blocking

2. Content Script Injection (CRITICAL)

inject-use-main-function - Place runtime code inside main() function
inject-choose-correct-world - Select ISOLATED or MAIN world appropriately
inject-run-at-timing - Configure appropriate runAt timing
inject-use-ctx-invalidated - Handle context invalidation on update
inject-dynamic-registration - Use runtime registration for conditional injection
inject-all-frames - Configure allFrames for iframe handling
inject-spa-navigation - Handle SPA navigation with wxt:locationchange

3. Messaging Architecture (HIGH)

msg-type-safe-messaging - Use @webext-core/messaging for type-safe protocols
msg-return-true-for-async - Return true for async message handlers (raw API)
msg-use-tabs-sendmessage - Use tabs.sendMessage for content scripts
msg-use-ports-for-streams - Use ports for streaming communication
msg-handle-no-receiver - Handle missing message receivers
msg-avoid-circular-messages - Prevent circular message loops

4. Storage Patterns (HIGH)

store-use-define-item - Use storage.defineItem for type-safe access
store-choose-storage-area - Select appropriate storage area
store-batch-operations - Group related data into single defineItem
store-watch-for-changes - Use watch() for reactive updates
store-handle-quota-errors - Handle storage quota errors
store-versioned-migrations - Use versioning for schema migrations

5. Bundle Optimization (MEDIUM-HIGH)

bundle-split-entrypoints - Split code by entrypoint
bundle-analyze-size - Analyze and monitor bundle size
bundle-tree-shake-icons - Use direct imports for icon libraries
bundle-externalize-wasm - Load WASM dynamically
bundle-minify-content-scripts - Minimize content script size

6. Manifest Configuration (MEDIUM)

manifest-minimal-permissions - Request minimal permissions
manifest-use-optional-permissions - Use optional permissions progressively
manifest-web-accessible-resources - Scope web accessible resources
manifest-content-security-policy - Configure CSP correctly
manifest-cross-browser-compatibility - Support multiple browsers

7. UI Performance (MEDIUM)

ui-use-shadow-dom - Use Shadow DOM for injected UI
ui-defer-rendering - Defer popup rendering until needed
ui-cleanup-on-unmount - Clean up UI on unmount
ui-sidepanel-persistence - Preserve sidepanel state
ui-position-fixed-iframe - Use iframe for complex UI
ui-avoid-layout-thrashing - Batch DOM reads and writes

8. TypeScript Patterns (LOW-MEDIUM)

ts-use-imports-module - Use #imports virtual module and auto-imports
ts-use-browser-not-chrome - Use browser namespace over chrome
ts-type-entrypoint-options - Type entrypoint options explicitly
ts-augment-browser-types - Augment types for missing APIs
ts-strict-null-checks - Enable strict null checks
ts-import-meta-env - Use import.meta for build info
ts-avoid-any - Avoid any type in handlers
ts-path-aliases - Use path aliases for imports

How to Use

Read individual reference files for detailed explanations and code examples:

Section definitions - Category structure and impact levels
Rule template - Template for adding new rules

Reference Files

File	Description
references/_sections.md	Category definitions and ordering
assets/templates/_template.md	Template for new rules
metadata.json	Version and reference information

Get it through your agent

Call the Graph-of-Skills MCP server's retrieve_skill_bundle tool and it returns this skill's text inside your budget.

{
  "tool": "retrieve_skill_bundle",
  "arguments": {
    "query": "wxt-browser-extensions"
  }
}

New to this? Set up Graph-of-Skills or get a free key. The text on this page comes from its authors: how skills are sourced and what we check. If none fits your task, your agent can write a skill for your own library. To keep a skill from your own library on a machine, see how to install one of your skills.

Share on X Share on LinkedIn Share on Bluesky Share on Hacker News

Share on Reddit

Source

Source repository pproenca/dot-skills
Listing on skills.sh

From pproenca/dot-skills via skills.sh

Related skills

three-best-practices
Three.js performance optimization and best practices guidelines. Use when writing, reviewing, or optimizing Three.js code. Triggers on tasks involving 3D scenes, WebGL/WebGPU rendering, geometries, materials, textures, lighting, shaders, or TSL.
1,447 installs
chrome-extension-development
Expert guidelines for Chrome extension development with Manifest V3, covering security, performance, and best practices. Use when building browser extensions, creating popup UIs, implementing content scripts, working with Chrome APIs, managing extension permissions, or publishing to Chrome Web Store.
2,827 installs
expo-react-native-performance
Expo React Native performance optimization guidelines. This skill should be used when writing, reviewing, or refactoring Expo React Native code to ensure optimal performance patterns. Triggers on tasks involving React Native components, lists, animations, images, or performance improvements.
1,471 installs
web-performance-optimization
Optimize website and web application performance including loading speed, Core Web Vitals, bundle size, caching strategies, and runtime performance
2,988 installs
frontend-react-best-practices
React performance optimization guidelines. Use when writing, reviewing, or refactoring React components to ensure optimal rendering and bundle patterns. Triggers on tasks involving React components, hooks, memoization, or bundle optimization.
1,204 installs

More from pproenca/dot-skills

zod
Zod schema validation best practices for type safety, parsing, and error handling. This skill should be used when defining z.object schemas, using z.string validations, safeParse, or z.infer. This skill does NOT cover React Hook Form integration patterns (use react-hook-form skill) or OpenAPI client generation (use orval skill).
7,014 installs
vitest
Vitest testing framework patterns for test setup, async testing, mocking with vi.*, snapshots, and test performance (formerly test-vitest). This skill should be used when writing or debugging Vitest tests. This skill does NOT cover TDD methodology (use test-tdd skill), API mocking with MSW (use test-msw skill), or Jest-specific APIs.
5,993 installs
react-hook-form
React Hook Form performance optimization for client-side form validation using useForm, useWatch, useController, useFieldArray, the subscribe() API, and the Watch / FormStateSubscribe / FieldArray render-prop components. Covers RHF 7.82 additions including resetDefaultValues() and the disabled field-array option. This skill should be used when building client-side controlled forms with React Hook Form library. This skill does NOT cover React 19 Server Actions, useActionState, or server-side form handling (use react-19 skill for those).
2,980 installs
emilkowal-animations
Emil Kowalski's animation best practices for web interfaces. Use when writing, reviewing, or implementing animations in React, CSS, or Framer Motion. Triggers on tasks involving transitions, easing, gestures, toasts, drawers, or motion.
2,794 installs
nuqs
nuqs (type-safe URL query state) best practices for Next.js and other React frameworks. This skill should be used when writing, reviewing, or refactoring code that uses nuqs for URL state management. Triggers on tasks involving useQueryState, useQueryStates, search params, URL state, query parameters, nuqs parsers, limitUrlUpdates, Standard Schema, NuqsAdapter, or Next.js routing with state.
2,322 installs

Content is provided as published by its creators; you are responsible for how you use it.

To request removal, use the contact form.