# gemma-gem-browser-ai

Guides building and customizing Gemma Gem, an on-device Chrome extension running Gemma 4 through WebGPU with zero cloud calls.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 591 installs · ★ 88
- Author: reason-machines
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/reason-machines/trending-skills/tree/HEAD/skills/gemma-gem-browser-ai/SKILL.md
- Updated: 2026-10-09
- HTML: https://affpapa.org/en/nevibecode/skills/gemma-gem-browser-ai

## What it does

This skill guides developers through developing Gemma Gem, a Chrome extension that processes Google's Gemma 4 locally. Inference executes via WebGPU inside the user browser. The extension embeds an on-page assistant capable of reading DOM nodes and typing into inputs privately.

Work is split across three distinct contexts. An offscreen document handles ONNX execution through `@huggingface/transformers` alongside the decision loop. The background service worker routes events, while injected content scripts render the interface and manipulate page elements.

Building the codebase requires Node.js 18+ and `pnpm`. Running the model needs an initial download of roughly 500 MB for the default checkpoint, so a network connection is mandatory before offline usage works.

## Requirements
- Works with: Chrome

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill gemma-gem-browser-ai -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/gemma-gem-browser-ai/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/gemma-gem-browser-ai/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill gemma-gem-browser-ai -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/gemma-gem-browser-ai/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill gemma-gem-browser-ai -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/gemma-gem-browser-ai/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install reason-machines/trending-skills gemma-gem-browser-ai
```

2. **Manually: put the files in place**
- File: `.github/skills/gemma-gem-browser-ai/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill gemma-gem-browser-ai -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/reason-machines/trending-skills --path skills/gemma-gem-browser-ai
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/gemma-gem-browser-ai/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill gemma-gem-browser-ai -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/reason-machines/trending-skills/tree/HEAD/skills/gemma-gem-browser-ai/SKILL.md

## When to use it
- build an in-browser assistant powered by local Gemma 4 weights
- add custom DOM or background tools to the agent loop
- compile development or production extension bundles using pnpm
- run LLM function calling directly in Chrome without cloud endpoints

## Example prompts
- Show me how to add a custom scraping tool to Gemma Gem
- Explain how to compile and load the Gemma Gem extension in Chrome
- How do I wire a new content script tool into the agent loop?

## Similar
- [browser-extension-builder](https://affpapa.org/en/nevibecode/skills/sickn33-browser-extension-builder.md) — skill · 2000 installs
- [chrome-extension](https://affpapa.org/en/nevibecode/skills/chrome-extension.md) — skill · 4500 installs
- [crxjs](https://affpapa.org/en/nevibecode/skills/crxjs.md) — skill · 4300 installs
- [chrome-extension-development](https://affpapa.org/en/nevibecode/skills/chrome-extension-development.md) — skill · 2800 installs
- [qiaomu-opencli-usage](https://affpapa.org/en/nevibecode/skills/qiaomu-opencli-usage.md) — skill · 1000 installs
- [clerk-chrome-extension-patterns](https://affpapa.org/en/nevibecode/skills/clerk-chrome-extension-patterns.md) — skill · 14400 installs

From the same set: [reason-machines/trending-skills](https://affpapa.org/en/nevibecode/by/reason-machines/trending-skills.md) — 199 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md