技能介绍

解决什么问题

当你要启动一个 React 全栈项目时，第一个决策通常不是「用哪个框架」，而是「这个项目会长成什么样」。一个内容站和一个内部工具可以都用 Next.js，但前者需要 ISR 与 generateStaticParams，后者需要清晰的 API 层；而当团队要同时维护 web、admin、docs 三个应用并共享一套 UI 组件时，跨仓库的任务调度、构建缓存、依赖顺序都会变成实际的工程负担。另一个常被低估的决策是图标：图标库一旦选错，后期替换意味着全量修改组件内引用，成本远高于早期统一。

这个技能把上述决策收敛成一次有结构的输出。

它如何工作

技能以 Web 全栈助手的角色运作，覆盖三个技术选型对象：Next.js（App Router、Server Components、SSR/SSG/ISR）、Turborepo（monorepo 任务管线、远程缓存、并行执行）与 RemixIcon（3100+ SVG 图标，支持 webfont 类 ri-home-line 或 @remixicon/react 组件两种用法）。

工作流按六步推进：

选型：对照 references/template.md 中的对照表，按单应用（Next.js + RemixIcon）或多应用共享（Next.js + Turborepo + RemixIcon）两条路线决策；
搭建：单应用用 create-next-app 起步，在 app/layout.tsx 引入 remixicon 字体样式；monorepo 用 create-turbo 建立 apps/ 与 packages/ 结构；
管线：在 turbo.json 中定义 build（dependsOn: ["^build"]、输出 .next/** 与 dist/**）、dev（cache: false, persistent）以及依赖 build 的 lint/test；
数据获取：优先 Server Components，静态路径用 generateStaticParams + revalidate，API 层走 fetch 的 next 缓存策略；
CI/CD：GitHub Actions 中执行 npx turbo run build test lint，通过 TURBO_TOKEN / TURBO_TEAM 启用远程缓存。

最终产出结构化工件 WebStackPlan，字段包括 mode、apps、packages、pipeline、icons，并附一段自然语言说明，解释 Server/Client 组件边界与缓存策略。该工件可交给 ui-styling、web-testing、frontend-development、payment-integration 等下游技能直接消费，避免每个技能重复推导同一套架构决策。

适用边界

技能默认技术栈是 React 生态：不适用于非 React 项目，也不适用于无构建步骤的纯静态站点。WebStackPlan 是规划工件而非代码生成器，实际搭建仍需按步骤执行脚手架命令并核对项目现状。选型对照表与管线模板位于 references/template.md，字段级细节可逐步索取。