用途：在创建或搭建新的 SFDX React Web 应用时使用，规范从初始化到部署的完整流程。
主要能力与强制规则：
- 首次步骤：在 Web 应用目录（如 force-app/main/default/webapplications/<appName>/ 或 dist 应用路径）中，必须先运行 npm install，再执行 npm run dev、npm run build、npm run lint 等脚本；node_modules 缺失或过期会导致命令失败。
- 技能优先：写代码或运行命令前，先搜索覆盖任务的 SKILL.md 并完整阅读遵循，技能位于 .a4drules/skills/ 和 feature/*/skills/。已有技能覆盖的流程不要自写脚本或复杂 bash 命令；确认无相关技能后再手动执行。
- 部署顺序：元数据部署必须先于获取 GraphQL schema 或运行 codegen。涉及部署元数据、获取 schema（npm run graphql:schema）、运行 codegen（npm run graphql:codegen）、生成部署命令或与 org 同步时，调用 deploying-to-salesforce 技能，其顺序为：部署元数据 → 分配权限集 → 获取 schema → codegen。不要在元数据部署前运行 npm run graphql:schema；任何元数据部署后都要在 webapp 目录重新运行 npm run graphql:schema 与 npm run graphql:codegen。
- 生成应用：使用 sf webapp generate -n MyWebApp -t reactbasic，应用名只能含字母和数字，不能有空格、连字符、下划线或特殊字符；不要用 create-react-app、Vite 等通用脚手架。
- 生成后必做：替换默认样板（“React App”“Vite + React”、默认 title、占位文本），填充首页真实内容，更新导航与占位符。
- 导航与布局：appLayout.tsx 是唯一来源，路径为 force-app/main/default/webapplications/<appName>/src/appLayout.tsx；任何影响导航、页眉、页脚、侧边栏、主题或整体布局的改动都必须编辑该文件，并替换默认导航项与标签为应用专属路由和名称，替换占位应用名与外壳设计。
- React 与 TypeScript 约束：路由只用单一包，使用 createBrowserRouter / RouterProvider 时所有导入必须来自 react-router 而非 react-router-dom；组件用 shadcn/ui，样式用 Tailwind CSS；路由导航用绝对路径（/x），非路由属性（<img src>）用点相对路径（./x），静态资源优先用 Vite import；不得导入 lightning/* 或 @wire 等 Salesforce 平台模块，数据访问调用 using-salesforce-data 技能。
- 前端美学：避免 AI 套路，字体避免 Inter、Roboto、Arial、Space Grotesk 作默认，配色用 CSS 变量保持统一并带锐利强调色，避免紫白俗套，使用高冲击动效与背景层次。
- Shell 安全：不要用复杂 node -e 单行命令做文件编辑或多行转换，改用临时 .js 文件、sed/awk、jq 或 IDE 编辑工具。
- 开发循环：持续执行直至当前迭代所有计划项完成，维护清单顺序推进；仅当清单完成且质量门通过、阻塞错误无法解决或用户明确要求暂停时停止。
适用场景：SFDX React Web 应用的新建、初始化、导航布局改造、元数据部署与 GraphQL 类型生成。
限制：资料未提供具体收费、价格、平台支持范围与效果数据；上述规则为技能内强制流程，需按原文执行。