[§] /docs
Start here
The docs for Frontend Design Basics: how-tos, rules and case studies, plus the tools and galleries around them.
┌─ /docs ──────────────────────────────────────────────┐ │ [01] /how-to short numbered guides, one job each │ │ [02] /rules twelve rules, TL;DR first │ │ [03] /cases great sites taken apart │ ├─ around the docs ────────────────────────────────────┤ │ /tools /make /inspiration /sites │ └──────────────────────────────────────────────────────┘
The docs
[01] How-tos
Pick a task: pixel to HD, neon paths, kinetic type, scroll without hijacking. Up to eight steps each.
[02] Rules
Twelve one-line rules for tokens, scales, layout, states, motion, media, accessibility and copy.
[03] Case studies
How great sites were made, from their makers' own write-ups. BR95 and Balatro too.
Around the docs
/tools
Every library, MCP and skill, with install commands and what to make with it.
/make
Live experiences built from the tools, each with its source.
/inspiration
Type, colour, layout and hierarchy from real sites.
/sites
Every site in the collection, filterable by category.
Where to start
- Starting a project? Read Start a project with the toolkit.
- Building one effect? Find it in How-tos.
- Reviewing work? Run down the twelve rules.
- Looking for ideas? Read a case study, then browse /sites.
Use it with an agent
The whole guide is published as /llms.txt, and the tools live in one
toolkit.json.
Point your coding agent at the repo and ask "what in here fits this brief?"