FRONTEND DESIGN BASICS

Frontend Design Basics started on 28 September 2026 as a place for Bruno Jaamaa to write down how he designs websites, so the same decisions do not have to be made from zero on every project. The first version read as a set of chapters. Two days later it was rebuilt around one idea, that the site is the guide: the home page became a scroll through a series of acts that starts inside a Windows 95 boot, pixel-blasts into black and white 3D and ends in full colour, with a caption on each act naming what it was built with.

The pages behind it are organised by what a reader came to do. Tools sorts the kit into 14 jobs, each with a default and the reasons to reach for something else. Principles holds 49 rules in seven chapters: motion feel, blur, transitions, scroll, visual design, the laws of UX, and states and heuristics. Examples collects 293 real sites, nine design systems and ten breakdowns of sites worth studying. Work and Make hold the 40 live pieces, seven of which have their own write-ups in UI Lab. The written half is 20 short how-tos and nine pages of rules and conventions. BR95, the site this page is part of, is the featured piece on the work page and one of the ten breakdowns.

A Next.js 16 site. Fumadocs and MDX carry the how-tos, rules and breakdowns; GSAP and Lenis drive scrolling and motion; three.js with React Three Fiber and ogl draw the 3D and shader pieces. The tool catalogue is one JSON file, toolkit/toolkit.json, and a generator script rebuilds the README tables and the agent-facing files from it, so the site, the repository and an agent all read the same list. The same guide is exported to Markdown in the repository, and the catalogue installs as an agent skill with `npx skills add br9704/frontenddesignbasics`. The live pieces share a small budget of WebGL contexts: each one shows a still poster until it is near the viewport, then starts.