I built my husband a vim trainer with a Gemma coach that runs in the browser

Description and use

The author built a browser app "hjkl" that teaches Vim through short drills and an AI coach using Gemma, enabling the husband to learn commands steadily without giving up.

Problem

My husband struggled to learn vim because of too many commands to memorize and slow, awkward experience compared to his usual tools.

Outcome

The app enabled the husband to learn vim through focused drills, cheat sheets, and AI feedback, leading to sustained engagement and improved skill retention.

Workflow

• Build a browser app with Vite and TypeScript.
• Integrate CodeMirror 6 with @replit/codemirror-vim for real vim behavior.
• Create 17 lessons with 124 hand‑written drills, each with a reference solution and par length.
• Implement a test suite that runs each solution through the vim engine to verify correctness.
• Add a review list for over‑par solutions and a full Vim reference.
• Implement an AI coach using Gemma 4 E2B (or Gemma 3 1B) running locally on WebGPU via Transformers.js.
• Format keystrokes for the model to avoid misinterpretation (e.g., "x ×7").
• Generate new drills with Gemma writing text and instructions, then supply keys from existing patterns and validate them.
• Deploy the static site on Cloudflare Workers, handling ONNX Runtime wasm size.
• Provide a live demo at https://hjkl.pinkpixel.dev.

Evidence

My husband has wanted to learn vim for a long time. He's tried a bunch of times, and it always ends the same way: he gives up.

Source

Each drill gives you a small buffer, a goal, and a keystroke "par" to beat. You solve it in a real vim editor, not a simulation.

Source

The AI coach is optional and off by default. When you turn it on, it downloads Gemma 4 E2B once and runs it in a Web Worker on WebGPU with Transformers.js.

Source

The app supplies the keys by reusing the key patterns from that lesson's hand‑written drills on the new text. Then it plays them in real vim to get the goal and par.

Source