Software Frontend

Frontend Engineering

Production-ready patterns for modern web applications.

Stack (March 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

Workflow

1. Pick a framework using the decision tree.
2. Start from a matching template in assets/.
3. Implement feature-specific patterns from references/.
4. 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 Key Changes

proxy.ts replaces middleware.ts

npx @next/codemod@canary upgrade latest   # recommended
mv middleware.ts proxy.ts                  # or manual rename

Cache Components ("use cache")

export default async function Page() {
  "use cache";
  const data = await fetchData();
  return <ProductList data={data} />;
}

React Compiler

// next.config.ts
const nextConfig: NextConfig = {
  experimental: { reactCompiler: true },
};

For the full migration checklist (async APIs, image config, parallel routes, caching APIs), see references/operational-playbook.md (Next.js 16 Migration Checklist section).

Performance Budgets

Operational Discipline

Verification Order

1. Lint edited files only.
2. Type-check edited feature surface.
3. Run full project lint/type/build once before handoff.

Avoid repeated full builds while known local lint/type failures remain.

Watch For

• Lint pitfalls: react-hooks/set-state-in-effect, react-hooks/purity, react-hooks/rules-of-hooks, react/no-unescaped-entities
• CLI drift: Run npx eslint --help / npx vitest --help before assuming flags from older setups
• Route deletion: After deleting/renaming any page, grep for stale imports and <Link> hrefs
• Architecture pre-check: Before adding new context providers or state stores, search for existing patterns first
• Hydration mismatches: Use useState(null) + useEffect for browser-only values — see references/production-gotchas.md
• macOS Turbopack: Set ulimit -n 10240 to avoid EMFILE errors in large projects

Handoff Requirements

Include in final output: exact files changed, lint/type/build commands run, whether failures are new or baseline, one prevention note for any repeated class of issue.

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

Reference Routing

Read only the reference matching the user's framework or problem — not all of them.

fullstack-patterns.md Section Index

This file is 2044 lines. Read only the section you need:

Templates

Related Skills

Fact-Checking

Use web search to verify current external facts, versions, and platform behavior before final answers. Prefer primary sources; report source links and dates for volatile information.

Converted and distributed by TomeVault — claim your Tome and manage your conversions.