gemma-gem-browser-ai — Claude Code skill: setup and architecture
Guides building and customizing Gemma Gem, an on-device Chrome extension running Gemma 4 through WebGPU with zero cloud calls.
npx skills add reason-machines/trending-skills --skill gemma-gem-browser-ai -a claude-codeWhat gemma-gem-browser-ai 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.
What it helps with
- 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 for the agent
- 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?
How to install gemma-gem-browser-ai
1Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill gemma-gem-browser-ai -a claude-code2Manually: put the files in place
~/.claude/skills/gemma-gem-browser-ai/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/gemma-gem-browser-ai/
1Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill gemma-gem-browser-ai -a codex2Manually: put the files in place
.agents/skills/gemma-gem-browser-ai/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill gemma-gem-browser-ai -a cursor2Manually: put the files in place
.cursor/skills/gemma-gem-browser-ai/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install reason-machines/trending-skills gemma-gem-browser-ai2Manually: put the files in place
.github/skills/gemma-gem-browser-ai/SKILL.md1Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill gemma-gem-browser-ai -a gemini-cli2Platform CLI
gemini skills install https://github.com/reason-machines/trending-skills --path skills/gemma-gem-browser-aiManually: put the files in place
.devin/skills/gemma-gem-browser-ai/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill gemma-gem-browser-ai -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about gemma-gem-browser-ai
How to install gemma-gem-browser-ai in Claude Code?
Run npx skills add reason-machines/trending-skills --skill gemma-gem-browser-ai -a claude-code. The skill instructions will be stored in ~/.claude/skills/gemma-gem-browser-ai/SKILL.md.
What prerequisites are needed to compile Gemma Gem?
You need Node.js 18 or newer and pnpm. Your Chrome setup must also support WebGPU to run the model locally.
How are Gemma 4 models downloaded and stored?
Download starts when launching the chat UI for the first time. The extension saves files to browser cache storage, taking ~500 MB for the standard 2B model or ~1.5 GB for the 4B variant.
