Frontend Engineering
Production-ready patterns for modern web applications.
Modern Best Practices (January 2026): Next.js 16 + Turbopack, React 19.x + Server Components, TypeScript 5.9+ (strict), Tailwind CSS v4, TanStack Query, Zustand, Vitest (browser mode).
Breaking Changes: Next.js 16 Upgrade Guide
Shared release gates: ../software-clean-code-standard/assets/checklists/frontend-performance-a11y-checklist.md
If you use React Server Components (RSC), treat security advisories as blocking: see data/sources.json (React RSC advisories).
Quick Reference
Task Tool Command
Next.js App Next.js 16 + Turbopack npx create-next-app@latest
Vue App Nuxt 4 npx nuxi@latest init
Angular App Angular 21 ng new
Svelte App SvelteKit 2.49+ npm create svelte@latest
React SPA Vite + React npm create vite@latest
UI Components shadcn/ui npx shadcn@latest init
Workflow
Pick a framework using the decision tree.
Start from a matching template in assets/.
Implement feature-specific patterns from references/.
Treat accessibility and performance as release gates (shared checklist above).
Framework Decision Tree
Project needs:
|-- React ecosystem?
| |-- Full-stack + SEO -> Next.js 16
| |-- Progressive enhancement -> Remix
| -- Client-side SPA -> Vite + React
|
|-- Vue ecosystem?
| |-- Full-stack -> Nuxt 4
|-- SPA -> Vite + Vue 3.5+
|
|-- State management?
| |-- Server data -> TanStack Query
| |-- Global client -> Zustand
| -- WARNING: DECLINING: Redux
|-- Styling?
|-- Utility-first -> Tailwind CSS v4
`-- WARNING: DECLINING: CSS-in-JS
Next.js 16 Changes middleware.ts -> proxy.ts
Run codemod
npx @next/codemod@canary upgrade latest
Or manually rename
mv middleware.ts proxy.ts
// After (Next.js 16) export function proxy(request: Request) { // ... logic }
Cache Components ("use cache")
export default async function Page() {
"use cache";
const data = await fetchData();
return
React Compiler // next.config.ts const nextConfig: NextConfig = { experimental: { reactCompiler: true, }, };
Performance Budgets Metric Target LCP <= 2.5s INP <= 200ms CLS <= 0.1 TTFB < 600ms Deployment Checklist Pre-Deployment npm run build - no errors npm run lint - zero ESLint errors vitest run - all tests passing Bundle size within budget Environment variables set Accessibility axe DevTools - zero critical issues Keyboard navigation works Color contrast >= 4.5:1 Screen reader tested SEO Metadata configured sitemap.xml generated robots.txt configured Resources Resource Purpose references/fullstack-patterns.md Server/client components, data fetching references/vue-nuxt-patterns.md Vue 3, Nuxt, Pinia references/angular-patterns.md Angular 21, signals references/svelte-sveltekit-patterns.md Svelte 5, SvelteKit references/remix-react-patterns.md Remix loaders, actions references/operational-playbook.md Architecture, security Templates Framework Template Next.js assets/nextjs/template-nextjs-tailwind-shadcn.md Vue/Nuxt assets/vue-nuxt/template-nuxt4-tailwind.md Angular assets/angular/template-angular21-standalone.md Svelte assets/svelte/template-sveltekit-runes.md Related Skills Skill Purpose software-backend Backend API dev-api-design REST/GraphQL software-code-review Code review ops-devops-platform CI/CD