Wxt Browser Extensions

## Rule Title Here

Brief explanation (1-3 sentences) of WHY this matters. Focus on performance implications or the problem being solved.

**Incorrect (description of what's wrong):**

```typescript
// Code showing the anti-pattern
// Comment explaining the cost/problem
```

**Correct (description of what's right):**

```typescript
// Code showing the correct pattern
// Comment explaining the benefit (optional, fewer comments than incorrect)
```

**When NOT to use this pattern:**
- Exception case 1
- Exception case 2

**Note:** Additional context or alternatives if needed.

Reference: [Reference Title](https://example.com/docs)


{
  "version": "1.1.5",
  "organization": "Community",
  "technology": "WXT Browser Extensions",
  "date": "February 2026",
  "abstract": "Comprehensive performance optimization guide for WXT browser extension development, designed for AI agents and LLMs. Contains 49 rules across 8 categories, prioritized by impact from critical (service worker lifecycle, content script injection) to incremental (TypeScript patterns). Updated for WXT v0.20+ with #imports, removed polyfill, and current API patterns. Each rule includes detailed explanations, real-world examples comparing incorrect vs. correct implementations, and specific impact metrics to guide automated refactoring and code generation.",
  "references": [
    "https://wxt.dev",
    "https://wxt.dev/guide",
    "https://developer.chrome.com/docs/extensions/mv3/",
    "https://webext-core.aklinker1.io/",
    "https://developer.chrome.com/docs/extensions/reference/api/",
    "https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions",
    "https://wxt.dev/guide/resources/upgrading"
  ]
}


# WXT Browser Extensions Best Practices Skill

A comprehensive performance optimization guide for WXT browser extension development, containing 49 rules across 8 categories. Updated for WXT v0.20+.

## Overview/Structure

```
wxt-browser-extensions/
├── SKILL.md              # Entry point with quick reference
├── README.md             # This file
├── metadata.json         # Version, org, references
├── references/
│   ├── _sections.md      # Category definitions
│   ├── svc-*.md          # Service Worker Lifecycle (6 rules)
│   ├── inject-*.md       # Content Script Injection (7 rules)
│   ├── msg-*.md          # Messaging Architecture (6 rules)
│   ├── store-*.md        # Storage Patterns (6 rules)
│   ├── bundle-*.md       # Bundle Optimization (5 rules)
│   ├── manifest-*.md     # Manifest Configuration (5 rules)
│   ├── ui-*.md           # UI Performance (6 rules)
│   └── ts-*.md           # TypeScript Patterns (8 rules)
└── assets/
    └── templates/
        └── _template.md  # Rule template for extensions
```

## Getting Started

### Installation

```bash
pnpm install
```

### Building

```bash
pnpm build
```

### Validation

```bash
pnpm validate
```

## Creating a New Rule

1. Choose the appropriate category based on the rule's focus area
2. Create a new file in `references/` with the category prefix
3. Use the template in `assets/templates/_template.md`
4. Add an entry to SKILL.md under the appropriate category

### Category Prefixes

| Prefix | Category | Impact |
|--------|----------|--------|
| `svc-` | Service Worker Lifecycle | CRITICAL |
| `inject-` | Content Script Injection | CRITICAL |
| `msg-` | Messaging Architecture | HIGH |
| `store-` | Storage Patterns | HIGH |
| `bundle-` | Bundle Optimization | MEDIUM-HIGH |
| `manifest-` | Manifest Configuration | MEDIUM |
| `ui-` | UI Performance | MEDIUM |
| `ts-` | TypeScript Patterns | LOW-MEDIUM |

## Rule File Structure

Each rule file must include:

```markdown
---
title: Rule Title (imperative verb form)
impact: CRITICAL|HIGH|MEDIUM-HIGH|MEDIUM|LOW-MEDIUM|LOW
impactDesc