frontend

• Use Preact unless otherwise specified
• Use Tailwind unless otherwise specified

Framework Selection

Framework	When to Use
Next.js + shadcn/ui	workers/ directory (Cloudflare Workers)
Preact + Tailwind	cluster/applications/ static frontends
TanStack Start + shadcn/ui	docker-compose/ service web UIs

Preact

• Create elements with h function instead of JSX/TSX syntax

TanStack Start

• Put a module that reads process.env, imports node:*, or holds module-global mutable state under src/server/
• Keep src/lib/ for modules both the browser and the server import, such as shared type declarations and the shadcn cn helper

Accessibility

Framework	Approach
shadcn/ui	Built-in accessibility via Radix UI primitives
Preact + Tailwind	Manual implementation required

Manual Accessibility Implementation

When not using shadcn/ui, ensure accessibility compliance:

Element	Required
<select>	Associate with <label> using for/id, use class: "sr-only" if visual label not needed
<input>	Associate with <label> or use aria-label attribute
<table> headers	Use <th scope="col"> or <th scope="row">

Example (Preact):

h("div", {class: "flex flex-col"}, [
    h("label", {for: "search-box", class: "sr-only"}, "Search"),
    h("select", {id: "search-box", ...}, [...]),
])