用途：为 Westpac 集团应用中使用 @westpac/ui（亦称 GEL-Next、GEL Next、GEL v1.0.0）组件库的开发者提供正确用法、能力与模式指导。当用户已安装该库并就其组件或 UI 模式提问时应参考本技能。需先确认 package.json 中版本为 v1.0.0 及以上；0.x 版本能力与模式不同，旧版本不受支持。
主要能力与用法：
- 导入方式：可从主包导入（import { Button, Input, Modal } from '@westpac/ui'），或按组件单独导入（如 @westpac/ui/button）、hooks（@westpac/ui/hook）、types（@westpac/ui/types）。
- 响应式变体：多数属性支持单值或按断点键控对象，断点为 initial、xsl(576px)、sm(768px)、md(992px)、lg(1200px)、xl(1584px)，类型为 ResponsiveVariants<T>。不接受数组或无效键。
- tag 属性：用于更改渲染的 HTML 元素（如 tag="a"、tag="span"）。
- 图标：以组件引用传入（如 iconBefore={ArrowRightIcon}），而非渲染元素；支持 look、size、color，共 260 多个图标。
- 焦点管理：基于 react-aria 自动处理，键盘导航时显示焦点环。
- 设计令牌：来自 @westpac/style-config，以 Tailwind 工具类形式暴露，分组包括 Surface、Background、Text、Border、Typography、Radius。令牌具语义且随品牌（data-brand）自动解析；禁止硬编码十六进制、RGB、任意值或自造令牌。
回答组件能力问题的流程：确认安装版本；查 reference/components/ 中对应文件与 reference/components.md；检查是否存在相应属性（如 look、color、soft、tag、iconBefore、block、open、invalid、errorMessage、name 等）；若存在则给出用法，若可通过组合实现则说明模式，不支持则明确说明并建议在内网 Teams 渠道提需求；样式问题不可用元素选择器或全局 CSS 覆盖。
可用 hooks：useBreakpoint() 返回当前断点（initial | xsl | sm | md | lg | xl），useDarkMode() 提供 getMode、setMode、toggleDarkMode、getBrand、getSystemPreference（当前发布版本暗色模式已禁用）。
限制：Dark mode 在当前版本不可用；不支持自定义颜色与硬编码样式；部分样式能力无对应属性时不支持覆盖，应走设计讨论渠道。相关可选技能包括 installing-westpac-ui 与 migrating-to-westpac-ui-v1。