用途：在编辑 uiBundles/*/src/ 下任何文件、对既有应用做视觉或 UI 修改（页面、组件、区块、布局、样式等）之前必须激活本技能，按其分类指南实施。
主要能力：按任务类别提供实现指南，包括页面（implementation/page.md，如新增路由页面）、页头/页脚（implementation/header-footer.md）、组件（implementation/component.md，如小组件、卡片、表格、表单、对话框）；并给出布局与导航规则，appLayout.tsx 是导航与布局的唯一依据，影响导航、页头、页脚、侧栏、主题或布局时需编辑 src/appLayout.tsx，替换默认导航项、标签与应用名（页头、导航品牌、页脚、index.html 标题），完成后确认已更新。
技术规范：使用单一路由包，配合 createBrowserRouter/RouterProvider 时全部从 react-router 导入而非 react-router-dom；有客户端路由时须运行时从 <base href> 推导 basename，不可硬编码；组件用 shadcn/ui（如 import { Button } from '@/components/ui/button'）与 Tailwind 工具类；路由导航用绝对路径，非路由属性（如 img src）用点相对路径，静态资源优先 Vite 导入；TypeScript 禁止 any 与不安全断言，事件处理与状态需显式类型；React UI bundle 不得导入 lightning/* 或 @wire，数据访问改用 using-ui-bundle-salesforce-data 技能。
设计与响应式：编码前确定明确美学方向（目的、基调、差异化），排版避免默认字体，用 CSS 变量建立统一配色，聚焦高影响力动效（如加载错落揭示，优先纯 CSS，React 可用 Motion 库），可做非对称、重叠等空间构成与渐变、噪点、层次透明等背景深度；所有 UI 必须移动端响应式，使用 sm:/md:/lg: 前缀，小屏堆叠、弹性网格，触控目标至少 44px。
使用方式与限制：按需一次一个澄清问题（页面的名称用途、URL、是否入导航、访问控制、内容区块、数据获取；页头页脚的内容与样式；组件功能、归属页面、复用性、props 与状态等）。完成前在 UI bundle 目录运行 lint 与 build，lint 须 0 错误且 build 成功。未提供收费、价格与平台支持信息。