name: 软件前端 description: 生产级前端工程，用于Next.js/React、Vue/Nuxt、Angular、Svelte/SvelteKit、Remix和Vite+React。使用于框架选择、App Router/RSC模式、TypeScript严格模式UI代码、Tailwind CSS v4 + shadcn/ui、状态/数据流（TanStack Query、Zustand）、表单验证、测试（Vitest/Testing Library/Playwright）、性能（核心Web Vitals）和可访问性（WCAG 2.2）。

前端工程

现代Web应用的生产就绪模式。

现代最佳实践（2026年1月）：Next.js 16 + Turbopack、React 19.x + 服务器组件、TypeScript 5.9+（严格模式）、Tailwind CSS v4、TanStack Query、Zustand、Vitest（浏览器模式）。

重大变更：Next.js 16升级指南

共享发布门禁：../software-clean-code-standard/assets/checklists/frontend-performance-a11y-checklist.md

如果使用React服务器组件（RSC），将安全公告视为阻塞项：参见data/sources.json（React RSC公告）。

快速参考

任务	工具	命令
Next.js应用	Next.js 16 + Turbopack	`npx create-next-app@latest`
Vue应用	Nuxt 4	`npx nuxi@latest init`
Angular应用	Angular 21	`ng new`
Svelte应用	SvelteKit 2.49+	`npm create svelte@latest`
React单页应用	Vite + React	`npm create vite@latest`
UI组件	shadcn/ui	`npx shadcn@latest init`

工作流程

使用决策树选择框架。
从assets/中的匹配模板开始。
从references/中实现特定功能模式。
将可访问性和性能视为发布门禁（共享清单如上）。

框架决策树

项目需求：
|-- React生态系统？
|   |-- 全栈 + SEO -> Next.js 16
|   |-- 渐进增强 -> Remix
|   `-- 客户端单页应用 -> Vite + React
|
|-- Vue生态系统？
|   |-- 全栈 -> Nuxt 4
|   `-- 单页应用 -> Vite + Vue 3.5+
|
|-- 状态管理？
|   |-- 服务器数据 -> TanStack Query
|   |-- 全局客户端 -> Zustand
|   `-- 警告：下降中：Redux
|
`-- 样式？
    |-- 实用优先 -> Tailwind CSS v4
    `-- 警告：下降中：CSS-in-JS

Next.js 16变更

middleware.ts -> proxy.ts

# 运行代码修改
npx @next/codemod@canary upgrade latest

# 或手动重命名
mv middleware.ts proxy.ts

// 之后（Next.js 16）
export function proxy(request: Request) {
  // ... 逻辑
}

缓存组件（“use cache”）

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

React编译器

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

性能预算

指标	目标
LCP	<= 2.5秒
INP	<= 200毫秒
CLS	<= 0.1
TTFB	< 600毫秒

部署清单

部署前

[ ] npm run build - 无错误
[ ] npm run lint - 零ESLint错误
[ ] vitest run - 所有测试通过
[ ] 包大小在预算内
[ ] 环境变量设置

可访问性

[ ] axe DevTools - 零关键问题
[ ] 键盘导航工作
[ ] 颜色对比度 >= 4.5:1
[ ] 屏幕阅读器测试

SEO

[ ] 元数据配置
[ ] sitemap.xml生成
[ ] robots.txt配置

资源

资源	目的
references/fullstack-patterns.md	服务器/客户端组件、数据获取
references/vue-nuxt-patterns.md	Vue 3、Nuxt、Pinia
references/angular-patterns.md	Angular 21、信号
references/svelte-sveltekit-patterns.md	Svelte 5、SvelteKit
references/remix-react-patterns.md	Remix加载器、操作
references/operational-playbook.md	架构、安全

模板

框架	模板
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

技能	目的
software-backend	后端API
dev-api-design	REST/GraphQL
software-code-review	代码审查
ops-devops-platform	CI/CD

前端工程 software-frontend