I vibecoded a site to visualize everything between your keypress and the kernel

#computerscience #linux #showdev #vibecoding

Every time I tried to explain PTYs, multiplexers, or shell frameworks to someone, I ended up drawing boxes on paper.

So I built Shellcraft — an interactive reference that maps the layers between your keyboard and the kernel.

What’s inside

Layers diagram
Click any layer to expand details, learn key facts, and see common misconceptions.

Execution flow
An animated walkthrough of what actually happens when you run git status — from the keypress to the output on your screen.

Ecosystem map
An interactive graph mapping 20+ tools across the terminal ecosystem.

Vite + React 18
React Flow
Custom CSS (no UI framework)

Available in English and Portuguese.

Feedback is very welcome - especially regarding technical accuracy.

linux · terminal · webdev · opensource