Front-End Primer — Modern Stacks for Vibecoding

The three languages (+ one dialect)

Layer	Job	What changed since you left
HTML	Structure — what's on the page	Same as ever; semantic tags matter for a11y
CSS	Appearance	Flexbox + Grid killed float layouts; custom properties (`--vars`) = built-in design tokens; no preprocessor needed for most work
JavaScript	Behavior	Modern JS (ES6+) is genuinely nice: arrow functions, template strings, modules, async/await
TypeScript	JS + type annotations	The parenthesis explained: TS is JS with types bolted on (`name: string`). A build step strips the types → plain JS runs in the browser. Types catch bugs while writing and make AI-generated code far more reliable — which is why vibecoding tools default to it

The file-extension decoder

.html — a page; can carry its own CSS (<style>) and JS (<script>) inline → the single-file pattern
.js / .ts — plain logic, no markup (TS = typed)
.jsx — React component: HTML-like markup written inside JavaScript
.tsx — the same, in TypeScript. What you saw: one component per .tsx file — markup + logic + props together = the modular design-system unit
.svelte / .vue — "single-file components": template + script + style as three blocks in one file (Svelte/Vue's answer to the same modularity)

React in five bullets

Components — the page is a tree of functions that return markup: <Card title="Q3"/>
Props — data passed in (your component's API); state — data that changes and re-renders the UI
JSX/TSX — markup lives with its logic, so a component is self-contained and reusable — the design-system dream you spotted
Hooks — useState, useEffect: how components hold state and react to changes
Still the industry + vibecoding default; knowing React vocabulary covers ~80% of colleague conversations

The build layer (why projects need npm)

npm — package manager; node_modules is where dependencies land
Vite — today's standard dev server + bundler: instant reload while editing, then compiles TS/TSX → one optimized JS bundle for shipping
Tailwind CSS — styling as utility classes in the markup (class="flex gap-2 p-4"); love-or-hate, but every vibecoding tool emits it — read it even if you don't write it
shadcn/ui — copy-paste TSX components built on Tailwind; the de-facto starter design system in AI tools

Next.js in three bullets

React plus the app around it: file-based routing (folders = URLs), server rendering, image/SEO plumbing, API routes
Deploys in one step to Vercel; the default for real products and marketing sites
Overkill for prototypes — it drags in the whole build/deploy apparatus

How vibecoding tools map to stacks

Tool	Default output
Claude (artifacts / Cowork)	Single-file HTML, or a single-file React component
v0 (Vercel)	Next.js + Tailwind + shadcn, TSX files
Lovable, Bolt	React + Vite + Tailwind project (full repo)
Cursor, Claude Code	Whatever the repo already is — bring your own stack
Replit	Full-stack app (front end + server + hosting)

The decision table — your JTBD

Situation	Reach for	Why
Prototype to share around	One `.html` file, everything inline	Opens anywhere, no install, no build — attach it, drop it on ClickBridge, done
Interactive demo with real state	Single-file React component	Component power without project scaffolding; what Claude artifacts do
Small design system / reusable components	Vite + React + TypeScript + Tailwind → `.tsx` per component	The modularity you admired: each component a typed, testable file; shadcn to start
Real product or public site	Next.js (+ the row above)	Routing, server rendering, deploy story included
Personal tools à la RichOS	Single-file HTML + a data `.js` file	Your Ledger/console pattern — no build step, iCloud-syncable, agent-editable

The one-sentence fluency test: "Is this a single-file job or a components job?" — everything above is downstream of that split. Single file = speed and portability; components (.tsx) = reuse, types, and teams.

Page 2 — Terms sheet

The words you'll hear this week, one line each. Pronunciations where people trip.

Term	Plain meaning
Vite	"veet" (French for fast) — the standard dev server + bundler: runs your project locally with instant reload, then packs it for shipping. What you heard as "white"
Node.js	JavaScript running outside the browser — powers all the tooling below
npm	The package installer; `node_modules` is the folder where dependencies land
Build step	The compile pass between your code and the browser: strip types, bundle, minify
Bundler	Squashes many source files into a few optimized ones browsers load fast
HMR / hot reload	Save a file, see it in the browser instantly — no refresh
Component	A reusable UI function: takes props in, returns markup out
Props	The inputs a component receives — effectively its API
State	Data that changes while the app runs; changing it re-renders the UI
Hooks	React's functions (`useState`, `useEffect`) that give components state and side-effects
JSX / TSX	HTML-style markup written inside JS / TS — the React component file format
SFC	Single-file component (`.vue`, `.svelte`): template + script + style as one file
Tailwind CSS	Styling as tiny utility classes in the markup (`p-4` = padding); no separate stylesheet
shadcn/ui	"shad-see-en" — copy-paste TSX components built on Tailwind; the code lands in your repo, not a locked dependency
Headless UI	Components that ship behavior (menus, dialogs) with zero styling — you skin them
Component library vs design system	Library = the coded parts; design system = parts + tokens + usage rules
Design tokens	Named values (colors, spacing, type) shared by design and code; CSS `--variables` carry them
Routing	Mapping URLs to views; in Next.js, folders are the routes
SSR / SSG	Server-side rendering / static generation — HTML built on the server or at build time, for speed and SEO
Hydration	The browser attaching live JS behavior onto server-rendered HTML
API route	A small server endpoint living inside the same project as the UI
Vercel / Netlify	Push-to-deploy hosting; Vercel are the makers of Next.js
Repo / monorepo	The versioned project folder / several apps sharing one repo
Framework vs library	A framework calls your code (Next.js); a library is called by your code (most everything else)
Linter / Prettier	Flags code problems / auto-formats code — why AI output all looks the same
CDN	Servers hosting files near users — how single-file pages pull in libraries with one `<script>` tag
localStorage	A small per-browser key-value store a page can save to (drafts, preferences)
WebSocket	A persistent two-way browser↔server line — live updates without refreshing
a11y	Accessibility ("a-eleven-y") — keyboard + screen-reader usable; semantic HTML is most of the battle
Breakpoints / responsive	Layout adapting to screen width via CSS media queries
Vibecoding	Describing intent in chat while AI writes the code; you steer by judgment — principle #10 with a keyboard

Front-End Primer · @ Singularity 🧠/Technologies · v2 compact · Aug 29, 2026 · stacks named are the common vibecoding defaults of the day, not an exhaustive survey