An interactive, visual guide to the bash command line for developers who build with AI-assisted coding tools — and keep getting handed shell commands they can't read yet.
TerminalVibes teaches the terminal through the lens of AI-assisted development. Your AI assistant keeps proposing shell commands — this course teaches you to read, verify, and run them with confidence. Instead of dry reference docs, it walks through real scenarios — "the agent wants to run three commands, one of them is scary" — with cozy illustrated section banners, interactive playgrounds, and live diagrams, in a green-forest-and-warm-wood world.
It is the sister project of GitVibes — Git for Vibe Coders — same pedagogy, same layout, new subject.
Every lesson opens with an original piece of banner art — all 58 of them, in curriculum order:
| Part | Topics |
|---|---|
| Introduction | What the terminal is, a brief history, your machine's terminal (macOS / Linux / WSL), prompt anatomy |
| 1. First Contact | Opening the terminal, first commands, getting help (--help, man, q to escape the pager) |
| 2. Moving Around | pwd & ls, paths, cd, making things with mkdir & touch, reading files |
| 3. Copy, Move, Delete | cp, mv, the rm-has-no-trash-can safety lesson, wildcards |
| 4. Text & Pipes | Redirection, pipes, grep, sort/uniq/wc/cut, find |
| 5. Permissions & Config | Reading ls -l, chmod, sudo, $PATH & "command not found", shell config & aliases |
| 6. Scripts & Automation | Your first script (shebang, chmod +x, $1), exit codes & &&/|| chaining |
| 7. Text Surgery | sed find & replace, line surgery with d/p, the -i.bak house rule, columns with awk |
| 8. Processes & Ports | ps/pgrep, kill vs kill -9, freeing port 3000 with lsof, background jobs (&, fg) |
| 9. Talking to the Network | localhost & URLs, curl, reading JSON with jq, API keys in .env, ssh |
| 10. The Toolshed | Package managers, tar/zip decoded, symlinks & the -> arrow, du/df disk detective |
| 11. Terminal for the AI Era | The four-step audit, red flags (rm -rf, sed -i, kill -9, curl | bash), prompt injection |
| 12. Your Cockpit | Themes & prompts, history superpowers, the VS Code integrated terminal, tabs & splits |
| 13. Under the Hood | tty/PTY, line discipline, what Ctrl+C really does, and where the terminal is heading |
| 14. Conclusion | The command-line mindset, quick reference, two final challenges, keep learning |
A simulated bash sandbox runs entirely in your browser — 35 scenario exercises with completion detection, a live file-tree diagram that redraws after every command, and a prompt that follows your cwd:
- Bash Playground — a simulated bash sandbox in the browser (a virtual filesystem plus a shell interpreter built for teaching), opened as a sidebar panel from anywhere on the site
- 35 hands-on exercises with live success detection — a ✔ fires the moment the filesystem reaches the goal state, from first
echoto a grep-pipeline log hunt, a PATH repair, an agent-command audit, and a messy-home-folder capstone - A live file-tree diagram — the sandbox filesystem drawn as a Mermaid tree after every command: directories, files, your current location, and executables, always in sync with the terminal
sharein every terminal — serializes your exact session into a link anyone can replay- Progress that persists — sections read, exercises completed, a self-assessed skill checklist, and spaced-repetition refresher nudges (all localStorage; no accounts, no backend)
- Expandable banners — click any section illustration to open a full-screen lightbox
- Vibe prompts — copy-paste AI prompts for common terminal workflows
- Search —
⌘K/Ctrl+Kcommand palette with panic-query aliases ("command not found", "deleted a file", "quit vim") - Cheat sheet — quick command reference from the header, expandable into a full-screen three-column view, downloadable as a typeset PDF
- Light / dark theme, installable as a PWA, works offline after one visit
- Fully static — no backend; deploys to GitHub Pages
The playground is honest about what it is: a simulated bash environment, not a real shell — which is exactly what makes it safe to let beginners run rm -rf in. A small shell engine keeps an in-memory virtual filesystem (directories, files, permission bits, your cwd, environment variables, aliases, $?), and an interpreter parses each command line — quoting, $VAR and ~ expansion, globs, pipes, redirection, and &&/||/; chaining — and executes the supported commands with teaching-quality error messages. It also models a process table (so ps, kill, lsof and background jobs behave, and a port can genuinely be "already in use") and a virtual network — curl localhost:3000 is answered by whatever process is actually holding that port, so killing a server really does break the health check. Commands that make no sense in a sandbox (sudo, nano, ssh) are friendly stubs that explain why and point you at what to do instead.
flowchart TD
subgraph Browser["Browser (no backend)"]
Input["⌨️ User types a command\n<code>grep ERROR server.log | wc -l</code>"]
Parse["Parse: quotes, $VARs, globs,\npipes, redirection, chaining\n<b>shell-commands.ts</b>"]
Engine["Execute against the VFS\n<b>shell-engine.ts</b>"]
subgraph VFS["Virtual Filesystem (in-memory)"]
FS["dirs & files · mode bits\ncwd · env · aliases · $?"]
end
Output["Format & colorize output\nHTML-styled terminal lines"]
Tree["Build Mermaid file tree\n<b>fs-tree.ts</b>"]
Terminal["🖥️ Terminal output"]
Diagram["📊 Live file-tree diagram (SVG)"]
end
Input --> Parse
Parse --> Engine
Engine <--> FS
Engine --> Output
Engine --> Tree
Output --> Terminal
Tree --> Diagram
After every command, both the terminal and the file tree update in sync — so you can see the effect of each operation instantly. Scenarios pre-seed the virtual filesystem with files, folders, and logs to set up each lesson.
The Agent panel runs a real language model entirely in your browser (transformers.js + WebGPU, wasm fallback) — no API keys, no server. It answers from the course via retrieval, and demonstrates commands live in its own sandboxed terminal behind a human approval gate.
| Model | Size (q4f16) | Weights license |
|---|---|---|
| LFM2.5-1.2B-Instruct (default) | ~760 MB | LFM Open License v1.0 |
| Qwen3.5-2B | ~1.3 GB | Apache 2.0 |
Weights download once (explicit click, size disclosed) and persist in browser Cache Storage. Without a downloaded model the Agent runs as a scripted guide over the course index.
| Layer | Tool |
|---|---|
| Framework | SvelteKit (Svelte 5) |
| Styling | Tailwind CSS v4 |
| In-browser bash | Custom simulated shell engine (src/lib/playground/) |
| Diagrams | Mermaid.js |
| Icons | Lucide |
| Testing | Playwright |
| Hosting | GitHub Pages (@sveltejs/adapter-static) |
git clone https://github.com/NeoVand/terminalvibes.git
cd terminalvibes
npm install
npm run devOpen http://localhost:5173.
| Command | Description |
|---|---|
npm run dev |
Start dev server |
npm run build |
Production build → build/ |
npm run preview |
Preview production build |
npm run check |
Type-check |
npm run lint |
Prettier + ESLint |
npm run test |
Vitest unit + Playwright e2e tests |
Section banner images live in static/images/ (kebab-case filenames). Image generation prompts for creating or updating the illustrations are in docs/IMAGE_PROMPTS.md. Drop new art in as PNG and run node scripts/optimize-images.mjs to convert it to WebP, then node scripts/make-poster.mjs to refresh the banner poster above (it reads the curriculum order straight from the section components). node scripts/make-playground-shot.mjs <baseUrl> regenerates the playground screenshot against a running dev server, and node scripts/make-placeholders.mjs fills any missing banners with placeholder art. One image is a real photograph rather than generated art: static/images/thompson-ritchie.jpg (Ken Thompson and Dennis Ritchie, public domain).
The downloadable cheat sheet PDF is rendered from the unlisted /cheatsheet-print route — after editing src/lib/data/cheat-sheet.ts, regenerate it with node scripts/make-cheatsheet-pdf.mjs (dev server running).
Pushes to main deploy automatically to GitHub Pages via .github/workflows/deploy.yml.
MIT