用途：该技能面向使用 Vite、React、TypeScript、Tailwind CSS、shadcn/ui 与 React Router v7 构建现代 React 前端项目，适用于新建项目、添加 UI 组件、实现页面与路由等场景。
主要能力：技术栈包含 Vite 构建、React 19 UI 框架、TypeScript 类型安全、Tailwind CSS v4（@tailwindcss/vite 插件）、shadcn/ui 组件库（New York 风格）、React Router v7 客户端路由。参考文件覆盖从零搭建项目（setup-guide.md）、功能与架构模式（patterns.md）、MapLibre GL JS 地图（maplibre.md）、通过 MCP 查文档与添加组件（mcp-tools.md）。
使用方式：用 asdf 管理 Node.js 版本，执行 asdf plugin add nodejs 与 asdf set nodejs latest:22 生成 .tool-versions。添加组件用 npx shadcn@latest add <component> -y；开发服务器用 npm run dev；类型检查用 npm run type-check。路由从 react-router 导入 Routes、Route、Link、useLocation、useSearchParams（不用 react-router-dom）。路径别名 @/ 映射到 src/，如 import { Button } from '@/components/ui/button'、import { cn } from '@/lib/utils'。组件按分组安装：布局 sidebar card separator、表单 button input form select checkbox、反馈 dialog alert toast、导航 dropdown-menu tabs tooltip。
项目结构与模式：src/components/ui 存放自动生成的 shadcn 组件，pages 存放路由页面，hooks 存放自定义 hook，lib/utils.ts 提供 cn()，App.tsx 定义路由，main.tsx 为入口。条件类名用 cn() 组合，Tailwind 常用 flex items-center gap-4、bg-muted text-muted-foreground、h-screen overflow-auto、space-y-4 等。
限制与注意：安装依赖用 npm install <pkg>，不要手工改 package.json；shadcn 组件用命令行添加；路由导入务必使用 react-router。资料未提供收费、价格或效果承诺信息。