用途
本技能提供一套工作流，用于构建或审计 Next.js 16+ App Router 应用，使其遵循统一、按功能切片（feature-sliced）的 React Server Components 架构，风格类似 next-beats 参考应用。适用于三种场景：从零搭建新应用、为现有应用添加功能、对现有应用进行架构审计或重构。
架构目标
核心思路是让页面描述加载体验，而不是充当路由加载器：
- app/**/page.tsx 与 layout.tsx 是同步的组合面，负责静态框架、区块标题、<Suspense> 边界、错误边界和过渡包装。
- 功能组件在服务端自行负责数据读取，只接收最小且稳定的输入（如 id、slug、handle、解析后的过滤值）或已获取的记录，绝不接收原始 params / searchParams。
- 查询与操作（actions）位于功能文件夹内。组件导入查询；客户端叶子组件直接导入操作。
- 当服务端标签与客户端查询键描述同一功能数据时，由一个纯的功能本地缓存契约统一管理这些标识。
- 稳定的框架、包装器和骨架屏保持布局一致：卡片/面板位于 Suspense 之外，回退内容只替换依赖数据的部分。
主要不变量
技能列出了一组每次改动都必须满足的硬性规则，包括：页面只组合不取数；页面保持同步（使用 params.then() / searchParams.then() / Promise.all(...).then(...)，不在顶层 await params）；功能组件接收 ID 而非路由属性；异步服务端组件为默认，'use client' 仅用于叶子组件；页面拥有 Suspense 边界，功能拥有骨架屏；骨架屏与组件同文件、末尾导出；查询放在 <domain>-queries.ts（import 'server-only'），操作放在 <domain>-actions.ts（'use server'）；功能文件夹按产品归属划分；客户端组件直接导入操作；缓存协调留在所属领域；交互式异步 UI 将服务端数据留在服务端、客户端状态留在交互本地。
使用方式
工作流按顺序执行以下步骤，每步都指明要查阅的参考文档和必须通过的检查：
- 选择模式（从零构建或审计/重构）。
- 确定工作放置位置（决定功能文件夹）。
- 编写查询，必要时编写缓存契约。
- 编写操作（如有变更）。
- 构建组件与骨架屏。
- 组合页面。
- 添加交互（如有）。
- 对照清单验证，必要时用端到端测试锁定加载序列。
技能还提供一份“完成前验证”清单，逐项检查改动文件是否满足所有不变量，例如：没有页面导入 -queries 文件；每个带 params 的页面都是同步的；功能组件不接收名为 params 或 searchParams 的属性；每个数据 Suspense 都在页面中；骨架屏与内容高度一致；-queries.ts 以 import 'server-only' 开头；*-actions.ts 以 'use server' 开头；缓存组件相关指令使用正确；变更操作验证输入并使受影响数据失效等。
参考索引
技能附带多个参考文档，分别覆盖：功能文件夹布局与命名、查询/操作规则、服务端/客户端边界与骨架屏、页面组合与 Suspense 放置、即时导航与预取决策、缓存组件决策、单页应用客户端缓存决策、交互 UX 模式、端到端测试，以及 next-beats 参考应用的“不变量→文件映射”示例。
前置条件
在改动 Next.js 应用前，需确保项目已为 AI 代理配置好可读取版本匹配文档的环境，遵循 AI Coding Agents 指南：优先使用项目的 AGENTS.md / 内置文档，缺失时创建或刷新。
限制
资料未提供该技能的具体安装命令、收费方式、支持平台或实际效果数据，这些信息暂未提供。