用途：读取 docs/legacy-audit/ 目录下的全部产物，依据从旧 Pug 模板中提取的需求与路由拓扑，实现高保真现代 React 组件（ShadCN + Tailwind），并组装为可用的 Next.js 页面（src/app/**/page.tsx）。
主要能力与步骤：1) 用 npx shadcn@latest init 初始化 ShadCN 并配置 Tailwind 主题（颜色、字体）；2) 构建共享布局组件（src/components/layout/），如 Navbar、Footer、MobileMenu，并用 Next.js getServerSession 复刻旧元数据中的条件逻辑（如登录链接）；3) 用 NavigationMenu、Avatar、Button、Card 等 ShadCN 原语替代原始 Bootstrap/CSS 类；4) 按旧字段映射构建 CommentList、ArticleCard 等逻辑较重组件；5) 从 UI_Component_Inventory.md 显式提取目标页面与 URL 列表，为每个路由创建 src/app/[path]/page.tsx（如 /articles 对应 src/app/articles/page.tsx），接入业务逻辑、server actions、UX 意图与数据获取组件；6) 做视觉冒烟测试验证界面与功能。最终组件从 src/components/ 导出，页面在 src/app/ 中实现。
Base UI 与 asChild 实践：若设计系统使用 @base-ui/react 原语（ShadCN v4+ 常见），需用 render prop 实现 asChild；Button 或 MenuItem 通过 asChild 充当 Link 时必须设置 nativeButton={false}，避免语义警告与非法嵌套交互元素，例如 <ButtonPrimitive nativeButton={false} render={(props) => <Link {...props} />}>；用 React.cloneElement 或向 render 回调直接展开 props，确保 ref、className 与事件处理器正确合并。
适用场景：将遗留 Pug 前端迁移到 Next.js + ShadCN 的组件与页面脚手架工作。限制：资料未提供具体收费、平台支持范围与效果保证等信息。