---
title: "Frontend & UI Engineering"
slug: "frontend"
category: "frontend"
tags: ["moc", "frontend", "html", "css", "react"]
status: "stable"
last_updated: 2026-08-14
summary: "Best practices for HTML, CSS, Tailwind, Astro, React, Next.js, shadcn/ui, and Blueprint."
---

> Web frontend rules. Pick the framework page that matches the work, then drop back to [[html]] and [[css]] for the primitives every page rests on.

## Pages

- [[accessibility]]: WCAG 2.2 AA, semantic HTML, ARIA, keyboard, contrast, screen reader testing.
- [[ai-first-applications]]: Pillar for AI-first frontends: stream responses, show model state, keep outputs editable, handle errors, manage cost.
- [[llm-product-ux]]: Interaction design for LLM products: set expectations, show uncertainty, make outputs steerable and reversible.
- [[streaming-chat-interfaces]]: Stream LLM responses to chat UIs: SSE vs streamed fetch, incremental rendering, partial-JSON parsing, cancellation, reconnection.- [[astro]]: Astro for content-heavy static sites.
- [[blueprint]]: Palantir Blueprint for data-dense UIs.
- [[css]]: Modern CSS, layout, custom properties.
- [[css-animations]]: transition vs @keyframes, prefers-reduced-motion, compositor properties, scroll-driven animations.
- [[css-cascade-layers]]: @layer for predictable cascade order, third-party CSS, retiring !important.
- [[css-container-queries]]: @container for component-driven responsive layouts, cqi units, the responsive component pattern.
- [[css-custom-properties]]: Define tokens on :root, cascade, media-query theming, retire CSS-in-JS.
- [[css-flexbox]]: 1D layout, main vs cross axis, flex shorthand, gap over margins.
- [[css-grid]]: 2D layout, fr and minmax, subgrid, named lines, layout-vs-content separation.
- [[css-has-selector]]: :has() for parent-aware styling, form validity, child-driven layout, performance limits.
- [[forms]]: Native HTML forms, validation, autocomplete, progressive enhancement.
- [[html]]: Semantic HTML, accessibility, head and meta hygiene.
- [[nextjs]]: Next.js 16 App Router conventions.
- [[nextjs-app-router]]: File-system routing, layouts, route groups, parallel and intercepting routes.
- [[nextjs-async-dynamic-apis]]: params, searchParams, cookies(), headers(), draftMode() are Promises; the codemod and pitfalls.
- [[nextjs-caching]]: Cache Components (use cache, cacheLife, cacheTag) and the legacy four-layer model, tags, revalidation.
- [[nextjs-image-optimization]]: next/image, sizes, priority for LCP, loaders, remotePatterns.
- [[nextjs-metadata-api]]: Static and dynamic metadata, OG and Twitter cards, sitemap.ts, robots.ts.
- [[nextjs-middleware]]: proxy.ts (formerly middleware.ts), matcher, Node-only runtime, rewrite vs redirect, cookies.
- [[nextjs-route-handlers]]: route.ts endpoints, HTTP methods, streaming, when to prefer server actions.
- [[nextjs-server-actions]]: "use server", FormData, progressive enhancement, revalidate, input validation.
- [[react]]: React component patterns.
- [[react-compiler]]: Opt-in build plugin (stable v1.0) that auto-memoizes; not on by default in React 19, and when manual memoization still matters.
- [[react-error-boundaries]]: Render-tree errors, fallback UI, Sentry logging, reset patterns.
- [[react-forms]]: Uncontrolled inputs, server actions, FormData, Zod validation.
- [[frontend/react-hooks]]: useState vs useReducer, useEffect discipline, custom hooks, memoization rules.
- [[react-performance]]: Profile first, virtualize lists, code split routes, selector hooks.
- [[react-server-components]]: RSC rendering model, the use client boundary, async fetching.
- [[react-state-management]]: Local first, URL state, Zustand or Jotai over Redux.
- [[react-suspense]]: Suspense boundaries, fallback design, useTransition vs useDeferredValue, SSR streaming.
- [[shadcn]]: shadcn/ui composition.
- [[tailwind]]: Tailwind v4 utility-first patterns.
- [[tailwind-arbitrary-values]]: [..] bracket syntax as a temporary escape hatch; extract to @theme after the third use.
- [[tailwind-dark-mode]]: class or media strategy, persisting the preference, system fallback, and theme-color meta.
- [[tailwind-debug]]: catch class-name conflicts, sort utilities, and diagnose build issues with ESLint and the Prettier plugin.
- [[tailwind-migration]]: migrate from custom CSS or v3 to Tailwind v4 using the leaf-first component pattern.
- [[tailwind-plugins]]: use @plugin for first-party and custom plugins; write custom utilities as CSS functions.
- [[tailwind-responsive]]: mobile-first viewport variants, then container queries when a component needs to respond to its slot.
- [[tailwind-theme]]: define design tokens once in @theme, get CSS custom properties and utility classes for free.
- [[tailwind-variants]]: group-*, peer-*, has-*, supports-*, data-*, and arbitrary variants for stateful styling without JS.
- [[html-aria-patterns]]: common ARIA patterns for live regions, dialogs, disclosure, tabs, and listbox.
- [[html-head-tags]]: required head tags in the right order: charset, viewport, title, description, canonical, OG, Twitter.
- [[html-links-rel]]: when and how to use every rel value: nofollow, noopener, preload, prefetch, preconnect, canonical.
- [[html-microdata]]: Microdata vs JSON-LD vs RDFa and when to migrate to JSON-LD.
- [[html-multimedia]]: picture, source, srcset, sizes, video, audio, and track with the loading strategy that prevents layout shift.
- [[html-semantic-elements]]: use the element that names the role: article, section, nav, main, aside, header, footer.
- [[html-tables]]: use tables for tabular data only; caption, thead, tbody, tfoot, and th scope for accessibility.
- [[astro-content-collections]]: define Zod schemas for content/, query with getCollection and getEntry, use collection references.
- [[astro-image-optimization]]: Image and Picture from astro:assets, remote domain config, AVIF/WebP with correct dimensions.
- [[astro-integrations]]: astro add to install integrations, ordering rules, and the default set for new projects.
- [[astro-islands]]: partial hydration directives, client:load/idle/visible/media/only, keeping the JS budget lean.
- [[astro-mdx]]: embed components in markdown with MDX, remark and rehype plugins, per-file import perf traps.
- [[astro-performance]]: zero JS by default, bundle audits with build --inspect, scoped CSS, font strategies.
- [[astro-ssr]]: switch to server output, pick an adapter, and opt routes in or out of prerendering with the prerender export.
- [[astro-view-transitions]]: SPA-feel navigation with the ClientRouter component, named transitions, and persistent elements.
- [[astro]]: When to pick Astro 6, content collections, hydration directives, integrations to install, and deployment defaults.
- [[blueprint-dialog]]: Use Blueprint Dialog for modal flows; wrap the app in OverlaysProvider to control portal mounting; always set a title for screen readers.
- [[blueprint-overlays]]: Blueprint overlays: use Popover2 for menus, Tooltip2 for hints, OverlayToaster for notifications, and control z-index via Classes.OVERLAY_BACKDROP.
- [[blueprint-table]]: Use Blueprint Table (formerly Table2) for large virtualized datasets; define columns with ColumnHeaderCell; wrap the app in HotkeysProvider for keyboard shortcuts.
- [[blueprint-theming]]: Override Blueprint Sass variables before importing the stylesheet; toggle .bp6-dark for dark mode; avoid patching compiled CSS directly.
- [[shadcn-composition]]: Compose shadcn with compound components and asChild; extend variants with cva; avoid wrapping components when Slot achieves the same result.
- [[shadcn-forms]]: Wire shadcn Form with useForm and zodResolver; use FormField for every input; surface errors through FormMessage.
- [[shadcn-installation]]: Run the CLI init once, add components one at a time, and wire CSS variable theming (oklch, no tailwind.config, Tailwind v4 default) before touching any component.
- [[shadcn-theming]]: Edit CSS variables in globals.css to retheme shadcn; the current CLI default is oklch tokens with no tailwind.config; never hardcode colors inside component files.

## Related MOCs

- [[backend/index|Backend]]
- [[seo/index|SEO]]
- [[ai-agents/index|AI Agents]]